/* web.css — giao diện web công khai + khu tài khoản. Tiền tố w-. Bootstrap 5 làm nền. */
:root {
  --bs-font-sans-serif: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1e293b;
  --bs-body-bg: #ffffff;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #1d4ed8;
  --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color: #1e40af;
  --bs-link-hover-color-rgb: 30, 64, 175;
  --bs-secondary-color: #58687e;
  --bs-secondary-rgb: 88, 104, 126;
  --bs-focus-ring-color: rgba(37, 99, 235, .25);
  --w-navy: #0b1d4a;
  --w-nhan: #f59e0b;
  --w-nhan-chu: #451a03;
  --w-nen-nhe: #f5f7fb;
  --w-vien: #e5e9f0;
  --w-xanh-dam: #0b3d91;
}
.text-secondary { --bs-secondary-rgb: 88, 104, 126; }
body { font-feature-settings: "cv11", "ss01"; overflow-x: clip; } /* chặn cả trang bị kéo ngang trên điện thoại */
.min-w-0 { min-width: 0 !important; } /* không có trong bootstrap: cho phần tử flex co lại để text-truncate hoạt động */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.w-header { border-bottom: 1px solid var(--w-vien); background: #fff; position: sticky; top: 0; z-index: 1020; }
.w-header .navbar { padding: .6rem 0; }
.w-header .navbar-brand { font-weight: 700; font-size: 1.25rem; color: var(--w-xanh-dam); }
.w-header .navbar-brand i { color: var(--bs-primary); }
.w-header .nav-link { font-weight: 500; color: #334155; }
.w-header .nav-link:hover { color: var(--bs-primary); }
.w-header .dropdown-item form { margin: 0; }

.w-main { min-height: 60vh; }
.flash-khung { position: fixed; top: 76px; right: 16px; z-index: 1050; width: min(420px, calc(100vw - 32px)); }

/* Hero */
.w-hero { background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 60%, #fff 100%); padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--w-vien); }
.w-hero-tieude { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #0f172a; }
.w-hero-tieude span { color: var(--bs-primary); }
.w-hero-mota { font-size: 1.05rem; color: #475569; margin: 1rem 0 1.5rem; max-width: 40rem; }
.w-tim { background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .06); }
.w-tim-o label { display: block; font-size: .75rem; font-weight: 600; color: #58687e; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.w-tim-nut { align-self: end; white-space: nowrap; padding: .55rem 1.2rem; font-weight: 600; }
@media (max-width: 991px) { .w-tim { grid-template-columns: 1fr 1fr; } .w-tim-nut { grid-column: 1 / -1; } }
@media (max-width: 575px) { .w-tim { grid-template-columns: 1fr; } }
.w-hero-so { display: grid; gap: .75rem; }
.w-hero-so > div { background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; padding: 1rem 1.25rem; display: flex; align-items: baseline; gap: .75rem; }
.w-hero-so b { font-size: 1.6rem; font-weight: 800; color: var(--w-xanh-dam); }
.w-hero-so span { color: #58687e; }

.w-buoc { height: 100%; padding: 1.5rem; border: 1px solid var(--w-vien); border-radius: 14px; background: #fff; }
.w-buoc i { font-size: 1.5rem; color: var(--bs-primary); background: #eef4ff; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 10px; margin-bottom: 1rem; }
.w-buoc h3 { font-size: 1.1rem; font-weight: 700; }
.w-buoc p { color: #475569; margin: 0; }

.w-cta { background: var(--w-xanh-dam); color: #fff; padding: 2.5rem 0; }
.w-cta h2 { font-weight: 800; }
.w-cta p { opacity: .85; }

/* Footer */

/* Trang đăng nhập / đăng ký */
.w-auth { background: var(--w-nen-nhe); padding: 3rem 1rem; min-height: 70vh; }
.w-auth-card { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 2rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); }
.w-auth-tieude { font-size: 1.5rem; font-weight: 800; margin-bottom: .25rem; }
.w-vaitro { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.w-vaitro-muc { position: relative; border: 2px solid var(--w-vien); border-radius: 12px; padding: .9rem .75rem; cursor: pointer; display: grid; gap: .1rem; text-align: center; transition: .15s; }
.w-vaitro-muc input { position: absolute; opacity: 0; }
.w-vaitro-muc i { font-size: 1.4rem; color: #94a3b8; margin-bottom: .25rem; }
.w-vaitro-muc span { font-weight: 600; font-size: .95rem; }
.w-vaitro-muc small { color: #58687e; }
.w-vaitro-muc.active { border-color: var(--bs-primary); background: #eef4ff; }
.w-vaitro-muc.active i { color: var(--bs-primary); }

/* Khu tài khoản */
.w-tk-menu { background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; overflow: hidden; }
.w-tk-nguoi { display: flex; gap: .75rem; align-items: center; padding: 1rem; border-bottom: 1px solid var(--w-vien); }
.w-tk-nguoi div { display: grid; line-height: 1.25; }
.w-tk-nguoi small { color: #58687e; }
.w-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bs-primary); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.w-tk-menu > a { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; color: #334155; font-weight: 500; border-left: 3px solid transparent; }
.w-tk-menu > a:hover { background: var(--w-nen-nhe); text-decoration: none; }
.w-tk-menu > a.active { border-left-color: var(--bs-primary); color: var(--bs-primary); background: #eef4ff; }
.w-o-so { background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; padding: .9rem 1rem; display: grid; }
.w-o-so small { color: #58687e; }
.w-o-so b { font-size: 1.3rem; font-weight: 800; }

/* ===== Bước 4: tìm kiếm, thẻ gia sư, hồ sơ ===== */
.w-breadcrumb { font-size: .85rem; color: #58687e; margin-bottom: 1rem; }
.w-breadcrumb a { color: #475569; }
.w-breadcrumb i { font-size: .6rem; margin: 0 .3rem; }

/* Bộ lọc */
.w-kq-dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.w-kq-tieude { font-size: 1.35rem; font-weight: 800; margin: 0; }
.w-kq-sapxep { display: flex; align-items: center; }
.w-kq-sapxep select { width: auto; }
.w-cam-ket-tt { background: #fffbeb; color: #92400e; border-color: #fde68a !important; } /* tab Trung tâm (/lop): nhắc hỏi phí nhận lớp — bootstrap bản gọn không có lớp warning-subtle */
.w-kq-cta { margin-top: 2rem; background: #eef4ff; border: 1px dashed #bcd0f5; border-radius: 12px; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.w-trong { text-align: center; padding: 3rem 1rem; background: var(--w-nen-nhe); border-radius: 14px; }
.w-trong i { font-size: 2.5rem; color: #94a3b8; margin-bottom: .75rem; }
.w-trong h2 { font-size: 1.2rem; font-weight: 700; }

/* Thẻ gia sư */
.w-ds-the { display: grid; gap: .9rem; }
.w-the { display: grid; grid-template-columns: 96px 1fr 190px; gap: 1rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem; transition: box-shadow .15s, border-color .15s; }
.w-the:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .07); border-color: #cfd8e6; }
.w-the-noibat { border-color: #f6c343; background: linear-gradient(90deg, #fffbeb 0%, #fff 30%); }
.w-the-anh { position: relative; display: block; width: 96px; }
.w-the-anh img, .w-avatar-lon { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.w-avatar-lon { display: grid; place-items: center; font-size: 2rem; font-weight: 800; background: #e0e7ff; color: #3730a3; }
.w-the-nhan-nb { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); background: #f59e0b; color: #451a03; font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; white-space: nowrap; }
.w-the-dau { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.w-the-dau h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.w-the-dau h3 a { color: #0f172a; }
.w-the-tieude { margin: .25rem 0 .4rem; color: #334155; }
.w-the-thongtin { display: grid; gap: .15rem; font-size: .85rem; color: #475569; }
.w-the-thongtin i { color: #94a3b8; margin-right: .25rem; }
.w-the-mon { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.w-chip { display: inline-flex; align-items: center; gap: .3rem; background: #f1f5f9; border-radius: 99px; padding: .2rem .65rem; font-size: .8rem; color: #334155; }
.w-chip small { color: #475569; }
.w-chip-loc { background: #dbeafe; color: #1e40af; }
.w-chip-them { background: #fff; border: 1px dashed #cbd5e1; }
a.w-chip:hover { background: #e2e8f0; text-decoration: none; }
.w-the-phai { display: flex; flex-direction: column; gap: .5rem; border-left: 1px solid var(--w-vien); padding-left: 1rem; }
.w-the-gia b { font-size: 1.05rem; font-weight: 800; color: var(--w-xanh-dam); }
.w-the-gia small { color: #58687e; }
.w-the-hinhthuc { display: flex; flex-wrap: wrap; gap: .25rem; }
.w-the-hinhthuc span { font-size: .72rem; background: #ecfdf5; color: #047857; padding: .1rem .5rem; border-radius: 99px; }
.w-the-nut { display: grid; gap: .35rem; margin-top: auto; }
/* Thẻ gia sư (w-the-bao): ảnh nổi trái trong thân, chữ dưới ảnh chạy tràn sang trái */
.w-the.w-the-bao { grid-template-columns: minmax(0, 1fr) 190px; }
.w-the-bao .w-the-anh { float: left; margin: 0 1rem .75rem 0; }
.w-the-bao .w-the-thongtin { display: block; }
.w-the-bao .w-the-thongtin > span { display: block; margin-bottom: .15rem; }
@media (max-width: 767px) {
  .w-the { grid-template-columns: 72px 1fr; }
  .w-the-anh, .w-the-anh img, .w-avatar-lon { width: 72px; height: 72px; }
  .w-the-phai { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--w-vien); padding-top: .75rem; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .w-the-nut { grid-template-columns: 1fr 1fr; width: 100%; }
  .w-the.w-the-bao { grid-template-columns: minmax(0, 1fr); }
  .w-the-bao .w-the-anh { margin-right: .8rem; }
}

/* Sao, huy hiệu */
.w-sao { display: inline-flex; align-items: center; gap: .25rem; color: #b45309; font-weight: 700; }
.w-sao i { color: #f59e0b; }
.w-sao small { color: #58687e; font-weight: 400; }
.w-sao-nho { font-size: .85rem; }
.w-huyhieu { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; background: #dcfce7; color: #166534; vertical-align: middle; }
.w-huyhieu-2 { background: #dbeafe; color: #1e40af; }
.w-huyhieu-3 { background: #ede9fe; color: #5b21b6; }
.w-huyhieu-nho { font-size: .7rem; }

/* Trang hồ sơ */
.w-hs-dau { display: grid; grid-template-columns: 120px 1fr; gap: 1.25rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 1.5rem; }
.w-hs-anh img, .w-hs-anh .w-avatar-lon { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; }
.w-hs-ten h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .25rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.w-hs-tieude { font-size: 1.05rem; color: #334155; margin: 0 0 .6rem; }
.w-hs-meta { display: grid; gap: .25rem; color: #475569; font-size: .9rem; }
.w-hs-meta i { color: #94a3b8; margin-right: .3rem; }
.w-hs-so { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--w-vien); padding-top: 1rem; margin-top: .25rem; }
.w-hs-so > div { text-align: center; }
.w-hs-so b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--w-xanh-dam); }
.w-hs-so span { font-size: .8rem; color: #58687e; }
.w-hs-khoi { background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 1.25rem 1.5rem; margin-top: 1rem; }
.w-hs-khoi h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: .9rem; }
.w-hs-gioithieu { color: #334155; line-height: 1.7; }
.w-bang-mon th { font-size: .75rem; text-transform: uppercase; color: #58687e; font-weight: 600; }
.w-lich { text-align: center; }
.w-lich th { font-size: .78rem; color: #58687e; font-weight: 600; }
.w-lich tbody th { text-align: left; }
.w-lich td { color: #cbd5e1; }
.w-lich td.ranh { background: #dcfce7; color: #16a34a; }
.w-hs-lienhe { background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 1.25rem; position: sticky; top: 76px; }
.w-hs-gia { margin-bottom: 1rem; color: #475569; }
.w-hs-gia b { font-size: 1.3rem; color: var(--w-xanh-dam); }
.w-hs-cam-ket { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; font-size: .85rem; color: #475569; }
.w-hs-cam-ket i { width: 1.4rem; color: #94a3b8; }
.w-hs-thongtin { border-top: 1px solid var(--w-vien); padding-top: .75rem; display: grid; gap: .35rem; font-size: .85rem; }
.w-hs-thongtin div { display: flex; justify-content: space-between; }
.w-hs-thongtin span { color: #58687e; }
@media (max-width: 575px) { .w-hs-dau { grid-template-columns: 1fr; } }
/* Hồ sơ gia sư: 5 số liệu, hàng giá + hành động và dòng chân ngay trong khối đầu; cột phải dính theo khi cuộn */
.w-hs-so { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: .75rem; }
.w-hs-hanhdong { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-top: 1px solid var(--w-vien); padding-top: 1rem; }
.w-hs-hanhdong .w-hs-gia { margin: 0 auto 0 0; }
.w-hs-hanhdong form { margin: 0; }
.w-hs-chan { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .78rem; color: #58687e; margin-top: -.25rem; }
.w-hs-chan a { color: #58687e; margin-left: auto; }
.w-hs-chan a:hover { color: #dc2626; }
.w-hs-phai { position: sticky; top: calc(var(--w-dau, 76px) + 16px); }
.w-hs-phai > :first-child .w-hs-khoi, .w-hs-phai > .w-hs-khoi:first-child { margin-top: 0; }
.w-hop-tin { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.w-hop-tin a { font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border: 1px solid var(--w-vien); border-radius: 99px; color: #334155; }
.w-hop-tin a.chon { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
@media (max-width: 575.98px) {
  .w-hs-so { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-hs-hanhdong .w-hs-gia { flex: 0 0 100%; }
  .w-hs-hanhdong > .btn { flex: 1 1 0; }
  .w-hs-chan a { margin-left: 0; }
}

/* Đánh giá */
.w-dg-tong { display: grid; grid-template-columns: 110px 1fr; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; }
.w-dg-diem { text-align: center; }
.w-dg-diem b { display: block; font-size: 2.5rem; font-weight: 800; line-height: 1; color: #b45309; }
.w-dg-diem span { color: #58687e; font-size: .85rem; }
.w-dg-thanh > div { display: grid; grid-template-columns: 3rem 1fr 2rem; gap: .5rem; align-items: center; font-size: .8rem; margin-bottom: .2rem; }
.w-dg-thanh i { color: #f59e0b; }
.w-dg-thanh .progress { height: 8px; }
.w-dg-thanh .progress-bar { background: #f59e0b; }
.w-dg-ds { display: grid; gap: 1rem; }
.w-dg { border-top: 1px solid var(--w-vien); padding-top: 1rem; }
.w-dg-dau { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.w-dg-dau div { display: grid; line-height: 1.25; }
.w-dg-dau small { color: #58687e; }
.w-dg p { margin: 0; color: #334155; }
.w-dg-phanhoi { margin-top: .5rem; background: var(--w-nen-nhe); border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; color: #334155; }

/* Form hồ sơ gia sư (khu tài khoản) */
.w-khoi { background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; margin-bottom: 1rem; }
.w-khoi-dau { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--w-vien); }
.w-khoi-dau h2 { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.w-khoi-dau h2 i { color: var(--bs-primary); }
.w-khoi-than { padding: 1.25rem; }
.w-anh-chon { position: relative; display: inline-block; cursor: pointer; }
.w-anh-chon img, .w-anh-chon .w-avatar-lon { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; }
.w-anh-nut { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; background: var(--bs-primary); color: #fff; display: grid; place-items: center; border: 3px solid #fff; }
.w-bang-mon-sua td { vertical-align: middle; padding: .5rem .75rem; }
.w-bang-mon-sua th { font-size: .75rem; text-transform: uppercase; color: #58687e; font-weight: 600; padding: .6rem .75rem; }
.w-khu-vuc { display: flex; flex-wrap: wrap; gap: .4rem; }
.w-khu-vuc-o { cursor: pointer; }
.w-khu-vuc-o input { position: absolute; opacity: 0; }
.w-khu-vuc-o span { display: inline-block; border: 1px solid #cbd5e1; border-radius: 99px; padding: .25rem .75rem; font-size: .85rem; background: #fff; transition: .1s; }
.w-khu-vuc-o input:checked + span { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.w-khu-vuc-o input:focus-visible + span { outline: 2px solid #93c5fd; }
.w-lich-sua td { padding: 0; }
.w-lich-sua td label { display: block; padding: .6rem 0; cursor: pointer; margin: 0; }
.w-lich-sua td label input { display: none; }
.w-lich-sua td:hover { background: #f1f5f9; }
.w-lich-sua td.ranh:hover { background: #bbf7d0; }
.w-luu-thanh { position: sticky; bottom: 0; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .8rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; box-shadow: 0 -6px 20px rgba(15, 23, 42, .06); z-index: 5; }
.w-tk-xem { border-top: 1px solid var(--w-vien); font-size: .85rem; }
.w-tk-nguoi img.w-avatar { object-fit: cover; }

/* ===== Tin tìm gia sư ===== */
.w-tin { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 1rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem; transition: box-shadow .15s, border-color .15s; }
.w-tin:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .07); border-color: #c7d2fe; }
.w-tin-dong { opacity: .75; }
.w-tin-mon { width: 56px; height: 56px; border-radius: 14px; background: #eef4ff; color: var(--w-xanh-dam); display: grid; place-items: center; font-size: 1.4rem; float: left; margin: 0 .9rem .5rem 0; }
.w-tin-dau { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.w-tin-dau h3 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.w-tin-dau h3 a { color: #0f172a; }
.w-tin-chip { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .5rem; }
.w-tin-thongtin { font-size: .85rem; color: #475569; }
.w-tin-thongtin > span { display: block; margin-bottom: .15rem; }
.w-tin-phai { display: flex; flex-direction: column; gap: .35rem; border-left: 1px solid var(--w-vien); padding-left: 1rem; }
.w-nhan { font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; }
.w-nhan-moi { background: #fee2e2; color: #b91c1c; }
.w-nhan.w-nhan-tt { display: inline-block; background: #ede9fe; color: #6d28d9; font-size: .68rem; font-weight: 700; padding: .12rem .5rem; white-space: nowrap; vertical-align: middle; }
h1 .w-nhan.w-nhan-tt { font-size: .72rem; margin-left: .35rem; }
.w-tin-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.25rem; }
.w-tin-luoi > div { display: grid; gap: .1rem; }
.w-tin-luoi small { color: #58687e; font-size: .78rem; }
.w-tin-luoi b { font-weight: 600; color: #1e293b; }
.w-tab .nav-link { color: #334155; border-radius: 99px; padding: .35rem .9rem; }
.w-tab .nav-link.active .badge { background: rgba(255, 255, 255, .25) !important; color: #fff; }
.w-uv .w-the-anh img, .w-uv .w-avatar-lon { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; }
@media (max-width: 767px) { .w-uv .w-the-anh img, .w-uv .w-avatar-lon { width: 72px; height: 72px; } } /* thẻ ứng viên điện thoại: ảnh 96px tràn cột 72px → đè lên tên */
.w-uv-loinhan { margin: .5rem 0; background: var(--w-nen-nhe); border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; color: #334155; line-height: 1.55; }
.w-o-so { color: inherit; }
a.w-o-so:hover { text-decoration: none; border-color: #c7d2fe; }
.w-nav-icon { position: relative; font-size: 1.15rem; }
.w-nav-badge { position: absolute; top: 2px; right: -2px; background: #dc2626; color: #fff; font-size: .62rem; font-weight: 700; padding: .05rem .35rem; border-radius: 99px; line-height: 1.3; }
.w-tk-menu a { display: flex; align-items: center; gap: .5rem; }

/* ===== Tin nhắn ===== */
.w-chat { display: grid; grid-template-columns: 320px 1fr; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; overflow: hidden; height: calc(100vh - 140px); min-height: 520px; }
.w-chat-ds { border-right: 1px solid var(--w-vien); overflow-y: auto; }
.w-chat.w-chat-mot { grid-template-columns: 1fr; }
.w-chat-mot .w-chat-ds { border-right: 0; }
.w-chat-ds-dau { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--w-vien); position: sticky; top: 0; background: #fff; z-index: 1; }
.w-chat-muc { display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid #f1f5f9; color: inherit; }
.w-chat-muc:hover { background: var(--w-nen-nhe); text-decoration: none; }
.w-chat-muc.active { background: #eef4ff; }
.w-chat-muc-than { min-width: 0; flex: 1; }
.w-chat-muc-than b { font-size: .92rem; }
.w-chat-tin { display: block; color: #4f46e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .75rem; }
.w-chat-cuoi { font-size: .83rem; color: #58687e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-chat-chuadoc .w-chat-cuoi { color: #0f172a; font-weight: 600; }
.w-chat-khung { display: flex; flex-direction: column; min-width: 0; }
.w-chat-trong { flex: 1; display: grid; place-items: center; color: #94a3b8; text-align: center; }
.w-chat-trong i { font-size: 3rem; display: block; margin-bottom: .5rem; }
.w-chat-dau { display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--w-vien); }
.w-chat-than { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; background: #f8fafc; }
.w-tn { display: flex; flex-direction: column; max-width: 78%; }
.w-tn-toi { align-self: flex-end; align-items: flex-end; }
.w-tn-kia { align-self: flex-start; align-items: flex-start; }
.w-tn-bong { padding: .5rem .8rem; border-radius: 14px; line-height: 1.5; font-size: .93rem; word-break: break-word; }
.w-tn-toi .w-tn-bong { background: var(--bs-primary); color: #fff; border-bottom-right-radius: 4px; }
.w-tn-kia .w-tn-bong { background: #fff; border: 1px solid var(--w-vien); border-bottom-left-radius: 4px; }
.w-tn-luc { font-size: .7rem; color: #94a3b8; margin-top: .15rem; padding: 0 .3rem; }
.w-tn-ht { align-self: center; align-items: center; text-align: center; max-width: 90%; margin: .25rem 0; }
.w-tn-ht span { font-size: .8rem; color: #475569; background: #e2e8f0; border-radius: 99px; padding: .25rem .8rem; }
.w-tn-ht small { font-size: .68rem; color: #94a3b8; margin-top: .15rem; }
.w-tn-denghi { background: #fff; border: 1px solid #86efac; border-radius: 14px; overflow: hidden; min-width: 260px; }
.w-tn-denghi-dau { background: #dcfce7; color: #166534; font-weight: 700; padding: .45rem .8rem; font-size: .88rem; }
.w-tn-denghi-than { padding: .6rem .8rem; display: grid; gap: .35rem; font-size: .85rem; }
.w-tn-denghi-than small { color: #58687e; display: block; font-size: .72rem; }
.w-tn-denghi form, .w-tn-denghi > .small { padding: 0 .8rem .7rem; }
.w-chat-gui { display: flex; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--w-vien); }
.w-chat-gui textarea { resize: none; max-height: 120px; }
@media (max-width: 991.98px) {
  .w-chat { grid-template-columns: 1fr; height: calc(100vh - 110px); }
  .w-chat-ds { border-right: 0; }
  .w-chat-dang-mo .w-chat-ds { display: none; }
  .w-chat:not(.w-chat-dang-mo) .w-chat-khung { display: none; }
  .w-tin { grid-template-columns: minmax(0, 1fr); }
  .w-tin-mon { width: 44px; height: 44px; font-size: 1.1rem; margin-right: .75rem; }
  .w-tin-phai { grid-column: 1 / -1; border-left: 0; padding-left: 0; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .w-tin-luoi { grid-template-columns: 1fr; }
}

/* ===== Lớp học / đánh giá / thông báo ===== */
.w-sao-chon { display: inline-flex; flex-direction: row-reverse; gap: .15rem; font-size: 1.7rem; }
.w-sao-chon input { display: none; }
.w-sao-chon label { color: #cbd5e1; cursor: pointer; transition: color .1s; }
.w-sao-chon label:hover, .w-sao-chon label:hover ~ label, .w-sao-chon input:checked ~ label { color: #f59e0b; }
.w-tb-moi { background: #eef4ff; }
.w-tb-moi b { color: #0f172a; }
.w-tin-luoi .grid-2 { grid-column: 1 / -1; }

/* ===== Gói nổi bật ===== */
.w-goi-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.w-goi { cursor: pointer; margin: 0; }
.w-goi input { display: none; }
.w-goi-than { display: grid; gap: .3rem; height: 100%; border: 2px solid var(--w-vien); border-radius: 12px; padding: .9rem; transition: .15s; }
.w-goi input:checked + .w-goi-than { border-color: var(--bs-primary); background: #eef4ff; }
.w-goi-icon { width: 36px; height: 36px; border-radius: 9px; background: #eef4ff; color: var(--w-xanh-dam); display: grid; place-items: center; }
.w-goi-than small { color: #58687e; line-height: 1.4; }
.w-goi-gia { font-weight: 800; color: #059669; margin-top: auto; }
.w-huyhieu-uutu { background: #fef3c7; color: #92400e; }

/* ===== Cẩm nang / trang tĩnh ===== */
.w-bv { display: block; height: 100%; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; overflow: hidden; color: inherit; transition: box-shadow .15s; }
.w-bv:hover { text-decoration: none; box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.w-bv-anh { aspect-ratio: 16 / 9; background: #eef4ff; display: grid; place-items: center; color: #93c5fd; font-size: 2.5rem; }
.w-bv-anh img { width: 100%; height: 100%; object-fit: cover; }
.w-bv-than { padding: .9rem 1rem 1rem; }
.w-bv-than h3 { font-size: 1.02rem; font-weight: 700; margin: .3rem 0 .4rem; color: #0f172a; }
.w-bv-than p { font-size: .88rem; color: #475569; margin: 0; }
.w-noidung { line-height: 1.75; color: #1e293b; }
.w-noidung h2 { font-size: 1.35rem; font-weight: 700; margin: 1.6rem 0 .6rem; }
.w-noidung h3 { font-size: 1.1rem; font-weight: 700; margin: 1.2rem 0 .5rem; }
.w-noidung img { max-width: 100%; border-radius: 10px; }
.w-noidung table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.w-noidung td, .w-noidung th { border: 1px solid var(--w-vien); padding: .5rem .7rem; }

/* ===== Trang chủ: môn ===== */
.w-mon-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.w-mon { display: grid; gap: .15rem; text-align: center; padding: 1rem .5rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; color: inherit; transition: .15s; }
.w-mon:hover { text-decoration: none; border-color: #c7d2fe; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.w-mon i { font-size: 1.5rem; color: var(--bs-primary); margin-bottom: .3rem; }
.w-mon small { color: #58687e; }

/* Bộ lọc lịch rảnh */
.w-lich-loc { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: .68rem; }
.w-lich-loc th { font-weight: 500; color: #58687e; text-align: center; padding: 0; }
.w-lich-loc td { padding: 0; }
.w-lich-loc label { display: block; margin: 0; cursor: pointer; }
.w-lich-loc input { display: none; }
.w-lich-loc span { display: block; height: 18px; border-radius: 4px; background: #f1f5f9; border: 1px solid var(--w-vien); }
.w-lich-loc input:checked + span { background: var(--bs-primary); border-color: var(--bs-primary); }

/* ===== Mega menu (partials/menu-chinh) ===== */
.w-header { position: sticky; }
.w-menu .nav-link { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-radius: 8px; }
.w-menu .nav-link.active { color: var(--bs-primary); }
.w-mega-mui { font-size: .6rem; opacity: .55; transition: transform .2s; }
.w-mega-khung { display: none; }
.w-mega-tieude { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #58687e; margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.w-mega-tieude i { color: var(--bs-primary); }
.w-mega-nhom { font-weight: 600; font-size: .85rem; color: var(--w-xanh-dam); margin: .5rem 0 .2rem; }
.w-mega-lien { display: flex; align-items: center; gap: .45rem; padding: .22rem .5rem; margin-left: -.5rem; border-radius: 6px; color: #334155; font-size: .9rem; line-height: 1.35; }
.w-mega-lien:hover { background: #eef4ff; color: var(--bs-primary); }
.w-mega-lien i { width: 1.1rem; text-align: center; font-size: .85rem; }
.w-mega-lien-dai { white-space: normal; padding: .4rem .5rem; border-bottom: 1px solid var(--w-vien); border-radius: 0; margin-left: 0; }
.w-mega-lien-dai:last-child { border-bottom: 0; }
.w-mega-xem-het { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-size: .85rem; font-weight: 600; color: var(--bs-primary); }
.w-mega-2cot { columns: 2; column-gap: 1rem; }
.w-mega-2cot .w-mega-lien { break-inside: avoid; }
.w-mega-nhom-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.25rem; }
.w-mega-hop { background: var(--w-nen-nhe); border: 1px solid var(--w-vien); border-radius: 12px; padding: .9rem 1rem; }
.w-mega-hop-xanh { background: linear-gradient(135deg, var(--w-xanh-dam), #1d4ed8); border: 0; color: #fff; }
.w-mega-so { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }

@media (min-width: 992px) {
  .w-menu > .w-mega { position: static; }
  .w-menu > .w-mega-nho { position: relative; }
  .w-mega-khung { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 3px solid var(--bs-primary); border-bottom: 1px solid var(--w-vien); box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .18); padding: 1.5rem 0 1.75rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s, content-visibility 0s linear .18s; transition-behavior: allow-discrete; content-visibility: hidden; z-index: 1030; }
  .w-mega-nho .w-mega-khung { right: auto; width: 560px; border-radius: 0 0 14px 14px; padding: 1.25rem 1.5rem; }
  .w-mega:hover > .w-mega-khung, .w-mega.mo > .w-mega-khung, .w-mega:focus-within > .w-mega-khung { opacity: 1; visibility: visible; content-visibility: visible; transform: none; transition-delay: .07s; }
  .w-mega:hover > .nav-link, .w-mega.mo > .nav-link { color: var(--bs-primary); background: #eef4ff; }
  .w-mega:hover .w-mega-mui, .w-mega.mo .w-mega-mui { transform: rotate(180deg); }
  .w-mega-luoi { display: grid; gap: 2rem; }
  .w-mega-luoi-4 { grid-template-columns: 2.3fr 1.1fr 1.1fr; }
  .w-mega-luoi-3 { grid-template-columns: 1.2fr 1.2fr 1fr; }
  .w-mega-luoi-2 { grid-template-columns: 1fr 1.3fr; gap: 1.5rem; }
  .w-mega-cot + .w-mega-cot { border-left: 1px solid var(--w-vien); padding-left: 2rem; }
  .w-mega-luoi-2 .w-mega-cot + .w-mega-cot { padding-left: 1.5rem; }
}

/* ===== Trang chủ (bản 26/09): gia sư nổi bật, học phí, an toàn, đánh giá, khu vực, FAQ, chân trang ===== */
.w-hero-phu { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; font-size: .9rem; color: #475569; }
.w-hero-phu a { font-weight: 600; }
.w-hero-so span a { font-weight: 600; }
.w-nen-nhe { background: var(--w-nen-nhe); border-top: 1px solid var(--w-vien); border-bottom: 1px solid var(--w-vien); }
.w-tieude-muc { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.w-tieude-muc h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 .2rem; color: #0f172a; }
.w-gs-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.w-gs-nho { display: flex; flex-direction: column; gap: .6rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem; color: inherit; transition: box-shadow .15s, border-color .15s, transform .15s; }
.w-gs-nho:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .09); border-color: #cfd8e6; transform: translateY(-2px); color: inherit; }
.w-gs-nho-nb { border-color: #f6c343; }
.w-gs-nho-dau { display: flex; align-items: center; gap: .7rem; }
.w-gs-nho-dau img, .w-gs-nho-dau .w-avatar { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; font-size: 1.1rem; flex: none; }
.w-gs-nho-dau h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .15rem; color: #0f172a; }
.w-gs-nho-tt { display: grid; gap: .15rem; font-size: .82rem; color: #475569; }
.w-gs-nho-tt i { color: #94a3b8; margin-right: .2rem; }
.w-gs-nho-mon { display: flex; flex-wrap: wrap; gap: .3rem; }
.w-gs-nho-cuoi { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--w-vien); }
.w-gs-nho-cuoi > span { display: flex; gap: .3rem; flex-wrap: wrap; }
.w-gs-nho-cuoi b { font-size: 1rem; font-weight: 800; color: var(--w-xanh-dam); white-space: nowrap; }
.w-gs-nho-cuoi b small { color: #58687e; font-weight: 500; }
.w-hocphi { display: grid; gap: .5rem; }
.w-hocphi-dong { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; padding: .8rem 1rem; color: inherit; transition: border-color .15s, box-shadow .15s; }
.w-hocphi-dong:hover { border-color: var(--bs-primary); box-shadow: 0 6px 18px rgba(37, 99, 235, .08); color: inherit; }
.w-hocphi-dong b { display: block; font-size: 1rem; }
.w-hocphi-dong small { display: block; color: #58687e; }
.w-hocphi-dong > span { font-size: 1.15rem; font-weight: 800; color: var(--w-xanh-dam); white-space: nowrap; }
.w-hocphi-dong > span small { font-size: .75rem; color: #58687e; font-weight: 500; }
.w-antoan { height: 100%; background: linear-gradient(160deg, var(--w-xanh-dam), #1d4ed8); color: #fff; border-radius: 16px; padding: 1.5rem; }
.w-antoan h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 1rem; }
.w-antoan h2 i { color: #86efac; margin-right: .3rem; }
.w-antoan ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .7rem; font-size: .9rem; }
.w-antoan li { padding-left: 1.5rem; position: relative; opacity: .95; }
.w-antoan li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: #86efac; }
.w-dg { height: 100%; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1.1rem; display: flex; flex-direction: column; }
.w-dg .w-sao i { color: #f59e0b; font-size: .8rem; }
.w-dg p { font-size: .92rem; color: #1e293b; flex: 1; }
.w-dg-cuoi { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--w-vien); padding-top: .7rem; }
.w-dg-cuoi b { display: block; font-size: .9rem; }
.w-dg-cuoi small { color: #58687e; }
.w-dg-cuoi img, .w-dg-cuoi .w-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.w-giasu-hop { height: 100%; background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 1.4rem; }
.w-giasu-hop h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 1rem; }
.w-giasu-hop h2 i { color: var(--bs-primary); margin-right: .3rem; }
.w-giasu-hop ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; font-size: .9rem; color: #334155; }
.w-giasu-hop li i { color: #16a34a; margin-right: .35rem; }
.w-khuvuc { background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1.1rem; height: 100%; }
.w-khuvuc h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.w-khuvuc h3 a { color: #0f172a; }
.w-khuvuc h3 i { color: var(--bs-primary); margin-right: .3rem; }
.w-khuvuc-ds { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .75rem; }
.w-khuvuc-ds a { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem .4rem; border-radius: 6px; color: #334155; font-size: .88rem; }
.w-khuvuc-ds a:hover { background: #eef4ff; color: var(--bs-primary); }
.w-khuvuc-ds small { color: #94a3b8; }
.w-faq .accordion-item { border: 1px solid var(--w-vien); border-radius: 12px !important; margin-bottom: .5rem; overflow: hidden; }
.w-faq .accordion-button { font-weight: 600; padding: .9rem 1.1rem; }
.w-faq .accordion-button:not(.collapsed) { background: #eef4ff; color: var(--w-xanh-dam); box-shadow: none; }
.w-faq .accordion-body { color: #334155; font-size: .93rem; }
@media (max-width: 1199px) { .w-gs-luoi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .w-gs-luoi { grid-template-columns: 1fr 1fr; gap: .6rem; } .w-gs-nho { padding: .75rem; } .w-tieude-muc h2 { font-size: 1.2rem; } .w-khuvuc-ds { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .w-gs-luoi { grid-template-columns: 1fr; } }
section[id] { scroll-margin-top: 80px; }

/* Ô gõ-gợi-ý trường học */
.w-goi-y { position: relative; }
.w-goi-y-ds { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 2px; background: #fff; border: 1px solid var(--w-vien); border-radius: 10px; box-shadow: 0 12px 28px rgba(15, 23, 42, .12); max-height: 320px; overflow-y: auto; }
.w-goi-y-ds button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .5rem .75rem; border-bottom: 1px solid #f1f5f9; }
.w-goi-y-ds button:hover, .w-goi-y-ds button.chon { background: #eef4ff; }
.w-goi-y-ds b { display: block; font-size: .92rem; }
.w-goi-y-ds small { color: #58687e; }
.w-goi-y-ds .w-goi-y-trong { padding: .6rem .75rem; color: #58687e; font-size: .85rem; }

/* Thanh lọc nằm ngang (trang tìm gia sư): hàng 1 tiêu chí chính, hàng 2 lọc thêm (collapse) */
.w-loc-ngang { background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1.25rem; }
.w-loc-hang { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: .75rem; align-items: end; }
.w-loc-o > label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #58687e; margin-bottom: .3rem; white-space: nowrap; }
.w-loc-nut { display: flex; gap: .35rem; align-items: center; white-space: nowrap; }
.w-loc-nut .btn.active { background: #eef4ff; border-color: #bcd0f5; color: var(--bs-primary); }
.w-loc-hang-2 { grid-template-columns: auto auto auto auto 1fr auto; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--w-vien); }
.w-loc-hang-2 .form-select-sm { min-width: 150px; }
.w-loc-lich .w-lich-loc { width: auto; }
.w-loc-lich .w-lich-loc span { width: 22px; }
.w-ds-the-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .w-ds-the-2 { grid-template-columns: 1fr; } .w-loc-hang-2 { grid-template-columns: auto auto auto 1fr; } .w-loc-lich { grid-column: 1 / -1; } }
/* Màn hẹp: hàng 1 hai cột, nút Lọc thêm (+ Xoá) nằm cạnh ô Học phí; hàng 2: Trình độ | Giới tính cùng hàng, các ô rộng (hình thức, xác thực, lịch, Áp dụng) chiếm cả hàng */
@media (max-width: 991.98px) { .w-loc-hang, .w-loc-hang-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .w-loc-hang > .w-loc-nut { min-width: 0; } .w-loc-hang > .w-loc-nut .btn-outline-secondary { flex: 1; min-width: 0; padding-inline: .5rem; } .w-loc-hang-2 .w-loc-nut, .w-loc-hang-2 .w-loc-rong { grid-column: 1 / -1; } .w-loc-hang-2 .w-loc-nut .btn { width: 100%; } .w-loc-hang-2 .btn-group .btn { white-space: nowrap; } }
@media (max-width: 575.98px) { .w-loc-hang { gap: .5rem .6rem; } .w-loc-hang-2 .form-select-sm { min-width: 0; } .w-loc-hang-2 .btn-group { display: flex; } .w-loc-hang-2 .btn-group .btn { flex: 1 1 auto; font-size: .78rem; padding-inline: .3rem !important; } .w-loc-hang > .w-loc-nut .btn-outline-secondary { font-size: .9rem; padding-inline: .4rem; } .w-loc-hang > .w-loc-nut .btn-link { font-size: 0; padding-inline: .4rem !important; } .w-loc-hang > .w-loc-nut .btn-link i { font-size: 1.1rem; } /* Xoá chỉ còn dấu × (title vẫn nói rõ) */ .w-loc-ngang { padding: .75rem; } .w-loc-hang .form-select { font-size: .9rem; } .w-loc-hang-2 .btn-group .btn { white-space: nowrap; padding-inline: .5rem; } }

/* Khung web giãn theo màn thay vì các nấc cố định của Bootstrap (540/720/960/1140/1320): chừa lề 16px (≥576) / 32px (≥1200), tối đa 1840px (màn 1920).
   Trang đọc chữ dùng bố cục .w-doc để dòng chữ không quá dài */
@media (min-width: 576px) { .container { max-width: min(1840px, calc(100vw - 2rem)); } }
@media (min-width: 1200px) { .container { max-width: min(1840px, calc(100vw - 4rem)); } }
/* Lưới gia sư trang chủ: 12 thẻ; dưới 1600px chỉ hiện 8 (4 cột), từ 1600px hiện 12 (6 cột) */
/* Trang chủ chỉ 6 gia sư: màn rộng vừa 3 × 2 (không để 4 + 2 lệch), ≥1600 một hàng 6 */
@media (min-width: 1200px) and (max-width: 1599.98px) { .w-gs-luoi-tc { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px) { .w-gs-luoi-tc { grid-template-columns: repeat(6, 1fr); } .w-khuvuc-ds { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1800px) { .w-ds-the-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Đầu trang v2 (partials/dau-trang): 5 mục theo ý định, phần phải theo vai, thu gọn khi cuộn ===== */
.w-header { transition: box-shadow .2s; }
.w-header .navbar { transition: padding .2s; }
.w-header.gon { box-shadow: 0 6px 20px rgba(15, 23, 42, .07); }
.w-nut-tron { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: #334155; font-size: 1.05rem; padding: 0; }
.w-nut-tron:hover, .w-nut-tron[aria-expanded="true"] { background: #eef4ff; color: var(--bs-primary); }
.w-nut-tron .w-nav-badge { top: 2px; right: 0; }
.w-nut-menu { margin-left: -.5rem; margin-right: -.35rem; flex: none; font-size: 1.15rem; }
.w-mega-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding: .8rem 1rem; background: #eef4ff; border-radius: 12px; font-size: .92rem; color: #1e293b; }
.w-mega-cta .btn { white-space: nowrap; flex: none; }
.w-av-vong { --p: 0; width: 34px; height: 34px; border-radius: 50%; padding: 2px; display: inline-grid; place-items: center; flex: none;
  background: conic-gradient(#16a34a calc(var(--p) * 1%), #e5e9f0 0); }
.w-av-vong-tat { background: #e5e9f0; }
.w-av-vong > img, .w-av-vong > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: var(--w-xanh-dam); border: 2px solid #fff; }
.w-nguoi { display: inline-flex !important; align-items: center; gap: .45rem; }
.w-nguoi-ten { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-menu-nguoi { min-width: 270px; padding: .4rem; border-radius: 12px; box-shadow: 0 18px 40px -10px rgba(15, 23, 42, .2); }
.w-menu-nguoi .dropdown-item { display: flex; align-items: center; gap: .55rem; border-radius: 8px; padding: .45rem .7rem; font-size: .92rem; }
.w-menu-nguoi .dropdown-item i { color: #58687e; }
.w-menu-nguoi-dau { padding: .5rem .7rem .6rem; border-bottom: 1px solid var(--w-vien); margin-bottom: .3rem; }
.w-menu-nguoi-dau b, .w-menu-nguoi-dau small { display: block; }
.w-menu-nguoi-dau small { color: #58687e; }
.w-menu-id { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; font-size: .8rem; color: #334155; font-variant-numeric: tabular-nums; }
.w-id-tk { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: #58687e; background: #f8fafc; border: 1px solid var(--w-vien); border-radius: 8px; padding: .2rem .3rem .2rem .6rem; }
/* Nút "Tiếp tục với Google" (theo mẫu nút trắng của Google) */
.w-nut-gg { display: flex; align-items: center; justify-content: center; gap: .65rem; background: #fff; border: 1px solid #dadce0; color: #3c4043; font-weight: 500; }
.w-nut-gg.btn-sm { white-space: nowrap; gap: .4rem; }
.w-nut-gg:hover { background: #f8faff; border-color: #c6d4f5; color: #202124; }
.w-cd-sang { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .9rem 1rem; margin-bottom: 1rem; border: 1px solid #fcd34d; background: #fffbeb; border-radius: 14px; }
.w-cd-sang > i { color: #d97706; font-size: 1.2rem; }
.w-cd-sang > div { flex: 1; min-width: 220px; }
.w-cd-sang b { display: block; font-size: .92rem; }
.w-cd-sang small { color: #78716c; }
.w-qmk-ho-tro { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--w-vien); border-radius: 12px; background: #f8fafc; font-size: .92rem; }
.w-qmk-ho-tro b { display: block; margin-bottom: .25rem; }
.w-email-trong { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 38px; padding: .3rem .3rem .3rem .75rem; border: 1px dashed var(--w-vien); border-radius: var(--bs-border-radius); }
.w-email-trong .w-nut-gg { display: inline-flex; gap: .4rem; }
.w-hoac { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: #94a3b8; font-size: .8rem; }
.w-hoac::before, .w-hoac::after { content: ""; flex: 1; border-top: 1px solid var(--w-vien); }
/* Xu (/toi/xu) */
.w-xu-dau { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; margin-bottom: 1rem; border: 1px solid #fde68a; border-radius: 14px; background: linear-gradient(120deg, #fffbeb, #fff 70%); }
.w-xu-so small { display: block; color: #92400e; font-size: .85rem; }
.w-xu-so small i { color: #d97706; }
.w-xu-so b { display: block; color: #b45309; font-size: 1.9rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.w-xu-so span { font-size: .82rem; color: #78716c; }
.w-xu-dung { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.w-xu-dung small { color: #78716c; font-size: .78rem; }
.w-bl { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; border-top: 1px dashed var(--w-vien); background: #f8fafc; margin: 0; }
.w-bl-chu { flex: 1; min-width: 0; }
.w-bl-chu b { display: block; font-size: .92rem; }
.w-bl-chu small { color: #58687e; font-size: .8rem; }
.w-bl-nut { flex: none; margin: 0; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; cursor: pointer; min-width: max-content; }
.w-bl-anh img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--w-vien); display: block; }
.w-bl.dang-gui { opacity: .6; pointer-events: none; }
@media (max-width: 575.98px) { .w-bl { flex-wrap: wrap; } .w-bl-nut { width: 100%; } }
.w-sua-xu { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding: .7rem .9rem; border-top: 1px dashed var(--w-vien); background: #fffbeb; }
.w-sua-xu[hidden] { display: none; }
.w-sua-xu .input-group { width: 170px; }
.w-sua-xu small { flex-basis: 100%; }
.w-qr-nap-nut { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.w-xu-buoc { counter-reset: b; list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .45rem; font-size: .85rem; color: #475569; }
.w-xu-buoc li { counter-increment: b; display: flex; align-items: center; gap: .55rem; }
.w-xu-buoc li::before { content: counter(b); flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #eef4ff; color: var(--bs-primary); font-weight: 700; font-size: .78rem; display: grid; place-items: center; }
.w-xu-ls { list-style: none; margin: 0; padding: 0; }
.w-xu-ls li { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; }
.w-xu-ls li + li { border-top: 1px solid var(--w-vien); }
.w-xu-ls-huy > :not(.w-xu-ls-xoa) { opacity: .55; }
.w-xu-ls-xoa { flex: none; margin: 0; }
.w-xu-ls-xoa button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #94a3b8; }
.w-xu-ls-xoa button:hover { background: #fee2e2; color: #b91c1c; }
.w-xu-ls-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; }
.w-xu-ls-ic.vao { background: #dcfce7; color: #15803d; }
.w-xu-ls-ic.ra { background: #fee2e2; color: #b91c1c; }
.w-xu-ls-than { flex: 1; min-width: 0; }
.w-xu-ls-than b { display: block; font-size: .92rem; }
.w-xu-ls-than small { color: #58687e; font-size: .78rem; }
.w-xu-ls-so { text-align: right; flex: none; }
.w-xu-ls-so b { display: block; font-variant-numeric: tabular-nums; }
.w-xu-ls-so small { color: #58687e; font-size: .75rem; }
@media (max-width: 575.98px) {
  .w-xu-dau { padding: .9rem 1rem; }
  .w-xu-dung { width: 100%; align-items: stretch; text-align: center; }
  .w-xu-ls li { padding: .65rem 1rem; }
  #choCk .w-qr-tt { order: -1; }
  #choCk .w-qr-hinh { width: 170px; }
  .w-qr-nap-nut { margin-left: 0; justify-content: space-between; }
}
.w-xu-goi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.w-xu-goi button { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem .3rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 10px; line-height: 1.2; }
.w-xu-goi button b { font-size: .95rem; color: #0f172a; }
.w-xu-goi button small { font-size: .74rem; color: #58687e; }
.w-xu-goi button:hover { border-color: #f59e0b; }
.w-xu-goi button.chon { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 2px rgba(245, 158, 11, .25); }
.w-xu-tra { font-size: .85rem; color: #475569; margin: .5rem 0 .8rem; min-height: 1.3em; }
.w-chi-mb { display: none; }
@media (max-width: 767.98px) { .w-chi-mb { display: inline; } }
.w-xu-luat { font-size: .85rem; color: #475569; background: #f8fafc; border: 1px solid var(--w-vien); border-radius: 10px; padding: .7rem .8rem; line-height: 1.5; }
.w-xu-luat b { display: block; color: #0f172a; margin-bottom: .15rem; }
/* Trang Cài đặt (/toi/cai-dat): thẻ tài khoản + các mục dạng "nhãn trái · ô phải" */
.w-cd-the { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1rem; border: 1px solid var(--w-vien); border-radius: 14px; background: linear-gradient(120deg, #eff6ff, #fff 60%); }
.w-cd-the .w-avatar { width: 60px; height: 60px; font-size: 1.35rem; object-fit: cover; }
.w-cd-the-than { min-width: 0; }
.w-cd-the-ten { font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.w-cd-the-ten small { font-weight: 500; font-size: .8rem; color: var(--bs-primary); background: #dbeafe; border-radius: 999px; padding: .1rem .5rem; margin-left: .3rem; vertical-align: middle; }
.w-cd-the-tt { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.w-cd-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: #58687e; background: #fff; border: 1px solid var(--w-vien); border-radius: 999px; padding: .2rem .65rem; white-space: nowrap; }
.w-cd-chip b { color: #0f172a; font-variant-numeric: tabular-nums; }
.w-cd-chip .w-chep { margin-left: 0; }
.w-cd-chip a { font-weight: 600; }
.w-cd-khoi { background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; margin-bottom: 1rem; }
.w-cd-muc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; padding: 1.4rem 1.5rem; margin: 0; }
.w-cd-muc + .w-cd-muc { border-top: 1px solid var(--w-vien); }
.w-cd-nhan h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
.w-cd-nhan h2 i { color: var(--bs-primary); width: 1.1em; }
.w-cd-nhan p { font-size: .84rem; color: #58687e; margin: 0; line-height: 1.5; }
.w-cd-luu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; }
.w-cd-dong { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 38px; }
.w-cd-dong + .w-cd-dong, [data-push-ghi] + .w-cd-dong { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--w-vien); }
.w-cd-dong.form-switch { padding-left: 2.8em; display: block; }
.w-cd-mo > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; min-height: 38px; }
.w-cd-mo > summary::-webkit-details-marker { display: none; }
.w-cd-mo[open] > summary { display: none; }
.w-cd-mk-an { letter-spacing: .2em; color: #334155; font-size: 1.1rem; }
.w-cd-nguy .w-cd-nhan h2, .w-cd-nguy .w-cd-nhan h2 i { color: #dc2626; }
.w-cd-ds { font-size: .86rem; color: #475569; padding-left: 1.1rem; margin: 0 0 1rem; }
.w-cd-ds li + li { margin-top: .25rem; }
@media (max-width: 991.98px) {
  .w-cd-muc { grid-template-columns: 1fr; gap: .8rem; padding: 1.1rem 1rem; }
  .w-cd-luu .btn { flex: 1; }
  .w-cd-luu .me-auto { flex-basis: 100%; order: 3; text-align: center; }
}
@media (max-width: 575.98px) {
  .w-cd-the { padding: .9rem; gap: .7rem; flex-wrap: wrap; }
  .w-cd-the-than { display: contents; }
  .w-cd-the .w-avatar { width: 44px; height: 44px; font-size: 1.05rem; }
  .w-cd-the-ten { flex: 1; min-width: 0; }
  .w-cd-the-tt { flex-basis: 100%; margin-top: 0; }
  .w-cd-chip { font-size: .78rem; padding: .15rem .55rem; }
}
.w-id-tk b { color: #0f172a; font-variant-numeric: tabular-nums; }
@media (min-width: 992px) {
  .w-mega-luoi-4c { grid-template-columns: 1.3fr 1.6fr 1.1fr auto; } /* môn · cấp (rộng: chip lớp đủ một hàng) · khu vực · nhu cầu (vừa chữ) */
  .w-menu-phai .btn { padding: .4rem .9rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Màn hẹp: chia lại cho cột khu vực, khoảng cách cột nhỏ hơn, tên không xuống dòng */
  .w-mega-luoi-4c { grid-template-columns: 1.15fr 1.25fr 1.3fr auto; gap: 1.25rem; }
  .w-mega-luoi-4c .w-mega-cot + .w-mega-cot { padding-left: 1.25rem; }
  .w-mega-luoi-4c .w-mega-lien { white-space: nowrap; }
  .w-mega-luoi-4c .w-mega-2cot { column-gap: .75rem; }
}
@media (max-width: 991.98px) {
  .w-menu-phai { padding-top: .75rem; gap: .25rem; }
  .w-menu-phai .btn { width: 100%; }
  .w-menu-phai .w-nguoi { padding: .6rem .25rem; }
  .w-menu-nguoi { box-shadow: none; border: 0; padding: 0; }
  .w-dau-mobile .w-menu-nguoi { min-width: 260px; max-width: calc(100vw - 24px); padding: .4rem; border: 1px solid var(--w-vien); box-shadow: 0 18px 40px -10px rgba(15, 23, 42, .25); }
  .w-nut-tk .w-av-vong { width: 32px; height: 32px; }
  .w-nut-tim { display: none !important; }
  /* Cuộn xuống: ẩn đầu trang, hiện thanh tab; cuộn lên: ngược lại (web.js gắn body.an-dau / body.an-tab) */
  .w-header { transition: transform .25s ease, box-shadow .2s; }
  .w-tab-duoi { transition: transform .25s ease; }
  body.an-dau .w-header { transform: translateY(-100%); box-shadow: none; }
  body.an-dau { --w-dau: 0px; } /* khối dính dưới đầu trang (thanh lọc…) lên sát mép trên */
  body.an-tab .w-tab-duoi { transform: translateY(110%); }
  body.co-tab-duoi.an-tab .w-len-dau { bottom: calc(16px + var(--w-dinh, 0px) + env(safe-area-inset-bottom)); }
  body.co-tab-duoi.an-tab .w-luu-thanh { bottom: 0; }
  /* Mọi trang, chưa cuộn: bỏ hàng ô tìm cho gọn, hiện nút kính lúp; cuộn xuống (.gon) hoặc bấm kính lúp (.tim-mo) thì ô tìm hiện như cũ */
  .w-header:not(.gon):not(.tim-mo) .w-omni { display: none; }
  .w-header:not(.gon):not(.tim-mo) .w-nut-tim, body.w-trang-form .w-header:not(.tim-mo) .w-nut-tim { display: inline-grid !important; } /* trang đăng tin: ô tìm chỉ hiện khi bấm kính lúp, kể cả lúc cuộn */
  /* nền tối quanh menu = bóng lan cực rộng của chính menu (đầu trang sticky tự tạo lớp xếp chồng nên lớp phủ riêng không nằm dưới menu được); đầu trang nâng lên trên thanh tab để bóng phủ cả thanh tab */
  .w-dau-mobile .dropdown-menu.show { box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .45); }
  body.w-tk-mo .w-header { z-index: 1030; }
  .w-mega-cta { flex-direction: column; align-items: stretch; }
}

/* ===== Thanh tab dưới cùng (điện thoại) ===== */
.w-tab-duoi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; background: #fff; border-top: 1px solid var(--w-vien); display: grid; grid-template-columns: repeat(5, 1fr); padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(15, 23, 42, .06); }
.w-tab-duoi a { position: relative; display: grid; justify-items: center; gap: .1rem; color: #58687e; font-size: .68rem; font-weight: 500; padding: .2rem 0; text-decoration: none; }
.w-tab-duoi a > i { font-size: 1.15rem; line-height: 1.5rem; }
.w-tab-duoi a.active { color: var(--bs-primary); }
.w-tab-duoi a em { position: absolute; top: 0; left: calc(50% + 4px); background: #dc2626; color: #fff; font-style: normal; font-size: .6rem; font-weight: 700; padding: 0 .3rem; border-radius: 99px; line-height: 1.4; }
.w-tab-giua > b { width: 44px; height: 44px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center; background: var(--bs-primary); color: #fff; font-size: 1.15rem; box-shadow: 0 6px 16px rgba(37, 99, 235, .35); border: 3px solid #fff; }
.w-tab-giua > b.w-av-vong { background: conic-gradient(#16a34a calc(var(--p) * 1%), #e5e9f0 0); padding: 3px; border: 3px solid #fff; }
.w-tab-giua > b.w-av-vong span { font-size: .68rem; border: 0; }
@media (max-width: 991.98px) {
  body.co-tab-duoi { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.co-tab-duoi .w-luu-thanh { bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ===== Chân trang v2: 5 cột ===== */

/* ===== Trang thông tin: học phí, làm gia sư, cách hoạt động, hỏi đáp, gói nổi bật ===== */
.w-nhan { display: inline-flex; align-items: center; gap: .4rem; background: #dcfce7; color: #166534; font-weight: 600; font-size: .85rem; padding: .25rem .75rem; border-radius: 99px; }
.w-hp-td { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 1600px) { .w-hp-td { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .w-hp-td { grid-template-columns: 1fr; } }
.w-hp-o { display: grid; gap: .15rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem 1.1rem; color: inherit; transition: border-color .15s, box-shadow .15s; }
.w-hp-o:hover { border-color: var(--bs-primary); box-shadow: 0 8px 22px rgba(37, 99, 235, .08); color: inherit; }
.w-hp-o small { font-weight: 600; color: #475569; }
.w-hp-o b { font-size: 1.45rem; font-weight: 800; color: var(--w-xanh-dam); }
.w-hp-o b span { font-size: .8rem; font-weight: 500; color: #58687e; }
.w-hp-o em { font-style: normal; font-size: .85rem; color: #16a34a; font-weight: 600; }
.w-hp-mota { font-size: .8rem; color: #58687e; }
.w-bang-hp th, .w-bang-hp td, .w-bang-ss th, .w-bang-ss td { padding: .65rem 1rem; vertical-align: middle; }
.w-bang-hp thead th, .w-bang-ss thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #58687e; background: var(--w-nen-nhe); }
.w-bang-hp tbody tr:last-child td, .w-bang-ss tbody tr:last-child > * { border-bottom: 0; }
.w-bang-ss tbody th { font-weight: 600; color: #334155; width: 28%; }
.w-bang-ss .w-bang-ss-ta { background: #f0f7ff; color: var(--w-xanh-dam); }
.w-dd-cuon { max-height: 360px; overflow-y: auto; }
.w-chip-ds { display: flex; flex-wrap: wrap; gap: .35rem; }
.w-luong { height: 100%; background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 1.5rem; border-top: 4px solid var(--bs-primary); }
.w-luong-gs { border-top-color: #16a34a; }
.w-luong-dau { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.w-luong-dau > i { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #eef4ff; color: var(--bs-primary); font-size: 1.3rem; }
.w-luong-gs .w-luong-dau > i { background: #dcfce7; color: #16a34a; }
.w-luong-dau h2 { font-size: 1.3rem; font-weight: 800; margin: 0; }
.w-luong-dau small { color: #58687e; }
.w-luong-buoc { counter-reset: b; list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .8rem; }
.w-luong-buoc li { counter-increment: b; position: relative; padding-left: 2.4rem; color: #334155; line-height: 1.55; }
.w-luong-buoc li::before { content: counter(b); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--w-xanh-dam); color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.w-luong-gs .w-luong-buoc li::before { background: #16a34a; }
.w-hd-muc { display: grid; gap: .25rem; position: sticky; top: 90px; }
.w-hd-muc a { padding: .5rem .75rem; border-radius: 8px; color: #334155; font-weight: 500; }
.w-hd-muc a:hover { background: #eef4ff; color: var(--bs-primary); }
.w-hd-muc a i { color: var(--bs-primary); }
.w-faq .accordion-item:target { border-color: var(--bs-primary); }
.w-goi-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.w-goi-the { display: grid; align-content: start; gap: .4rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 1.25rem; }
.w-goi-the .badge { justify-self: start; }
.w-goi-the h2 { font-size: 1.05rem; font-weight: 700; margin: .2rem 0 0; }
.w-goi-gia { font-size: 1.6rem; font-weight: 800; color: var(--w-xanh-dam); }
.w-goi-dac { list-style: none; padding: 0; margin: .3rem 0; display: grid; gap: .25rem; font-size: .85rem; color: #475569; }
.w-goi-dac i { width: 1rem; color: #94a3b8; }
.w-ds-dau { padding-left: 1.1rem; display: grid; gap: .4rem; color: #334155; }

/* ===== Đầu trang v3: 3 tầng (dải trên · dải chính có ô tìm · dải menu) ===== */
:root { --w-dau: 150px; }
.w-header { border-bottom: 1px solid var(--w-vien); }
.w-dau-tren { background: var(--w-xanh-dam); color: rgba(255, 255, 255, .85); font-size: .8rem; max-height: 40px; overflow: hidden; transition: max-height .2s ease; }
.w-dau-tren .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .4rem; padding-bottom: .4rem; }
.w-dau-tren-trai, .w-dau-tren-phai { display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; }
.w-dau-tren-trai i { color: #4ade80; margin-right: .2rem; }
.w-dau-tren-trai a i { color: #facc15; }
.w-dau-tren a { color: rgba(255, 255, 255, .9); }
.w-dau-tren a:hover { color: #fff; }
.w-dau-tren-phai a + a { position: relative; }
.w-header.gon .w-dau-tren { max-height: 0; }
@media (max-width: 1199.98px) { .w-dau-tren-trai span:nth-child(2) { display: none; } }

.w-dau-giua .container { display: flex; align-items: center; gap: 1.5rem; padding-top: .85rem; padding-bottom: .85rem; transition: padding .2s; }
.w-header.gon .w-dau-giua .container { padding-top: .5rem; padding-bottom: .5rem; }
.w-logo { display: flex; align-items: center; gap: .6rem; color: var(--w-xanh-dam); flex: none; text-decoration: none; }
.w-logo:hover { color: var(--w-xanh-dam); }
.w-logo-hinh { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--bs-primary), var(--w-xanh-dam)); color: #fff; font-size: 1.3rem; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.w-logo-chu b { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.w-logo-chu small { display: block; font-size: .72rem; color: #58687e; font-weight: 500; }

/* Ô tìm kiếm thông minh */
.w-omni { position: relative; flex: 1 1 auto; max-width: 860px; display: flex; align-items: stretch; height: 48px; border: 2px solid var(--bs-primary); border-radius: 12px; background: #fff; }
.w-omni:focus-within { box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.w-omni-loai { display: flex; align-items: center; gap: 2px; padding: 4px; background: #eef4ff; border-radius: 10px 0 0 10px; flex: none; }
.w-omni-loai button { border: 0; background: transparent; padding: 0 .75rem; height: 100%; border-radius: 7px; font-weight: 600; font-size: .88rem; color: #475569; }
.w-omni-loai button.active { background: #fff; color: var(--bs-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.w-omni-o { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; margin: 0; }
.w-omni-o input { width: 100%; border: 0; outline: 0; padding: 0 .9rem; font-size: .98rem; background: transparent; }
.w-omni-o input::-webkit-search-cancel-button { cursor: pointer; }
.w-omni-nut { flex: none; border: 0; background: var(--bs-primary); color: #fff; font-weight: 700; padding: 0 1.4rem; border-radius: 0 9px 9px 0; display: inline-flex; align-items: center; gap: .45rem; }
.w-omni-nut:hover { background: #1d4ed8; }
.w-omni-ds { position: absolute; top: calc(100% + 8px); left: -2px; right: -2px; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .25); padding: .6rem; z-index: 1040; max-height: min(70vh, 560px); overflow-y: auto; }
.w-omni-nhom { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; padding: .4rem .6rem .3rem; }
.w-omni-chip { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .6rem .5rem; }
.w-omni-chip a, .w-omni-gan a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 99px; background: #f1f5f9; color: #334155; font-size: .85rem; }
.w-omni-chip a:hover, .w-omni-gan a:hover { background: #dbeafe; color: var(--bs-primary); }
.w-omni-gan { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .6rem .5rem; }
.w-omni-gan a::before { content: "\f1da"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .75rem; color: #94a3b8; }
.w-omni-meo { font-size: .8rem; color: #58687e; padding: .5rem .6rem .2rem; border-top: 1px dashed var(--w-vien); margin-top: .3rem; }
.w-omni-meo i { color: #f59e0b; }
.w-omni-muc { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: 10px; color: #1e293b; }
.w-omni-muc > i { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #f1f5f9; color: #475569; flex: none; font-size: .9rem; }
.w-omni-muc div { min-width: 0; flex: 1; }
.w-omni-muc b { display: block; font-weight: 600; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-omni-muc small { color: #58687e; font-size: .78rem; }
.w-omni-muc.chon, .w-omni-muc:hover { background: #eef4ff; color: var(--bs-primary); }
.w-omni-muc-chinh > i { background: var(--bs-primary); color: #fff; }
.w-omni-muc-chinh b { font-size: 1rem; }
.w-omni-muc mark { background: none; color: var(--bs-primary); padding: 0; font-weight: 800; }
.w-omni-trong { padding: .8rem .6rem; color: #58687e; font-size: .9rem; }
/* Gợi ý ô tìm đang mở: lớp tối phủ trang + thanh tab (z 1027), đầu trang nâng lên trên (1030) nên ô tìm và gợi ý vẫn sáng */
body.w-tim-mo::after { content: ""; position: fixed; inset: 0; z-index: 1027; background: rgba(15, 23, 42, .4); animation: w-tim-nen .15s ease; }
body.w-tim-mo .w-header { z-index: 1030; }
@keyframes w-tim-nen { from { opacity: 0; } }

/* Tài khoản + nút chính */
.w-dau-tk { align-items: center; gap: .35rem; flex: none; margin-left: auto; }
.w-dau-icon { display: grid; justify-items: center; gap: 1px; padding: .2rem .55rem; border-radius: 10px; color: #475569; font-size: .72rem; text-decoration: none; }
.w-dau-icon span { position: relative; font-size: 1.25rem; line-height: 1.3; }
.w-dau-icon em { position: absolute; top: -3px; left: 60%; background: #dc2626; color: #fff; font-style: normal; font-size: .6rem; font-weight: 700; padding: 0 .32rem; border-radius: 99px; line-height: 1.45; border: 2px solid #fff; }
.w-dau-icon:hover { background: #f1f5f9; color: var(--bs-primary); }
.w-dau-nguoi { display: flex; align-items: center; gap: .55rem; padding: .3rem .6rem .3rem .3rem; border-radius: 12px; color: #1e293b; text-decoration: none; }
.w-dau-nguoi:hover, .w-dau-nguoi[aria-expanded="true"] { background: #f1f5f9; color: #1e293b; }
.w-dau-nguoi .w-av-vong { width: 40px; height: 40px; }
.w-dau-nguoi-chu { display: grid; line-height: 1.2; }
.w-dau-nguoi-chu small { color: #58687e; font-size: .72rem; }
.w-dau-nguoi-chu b { font-size: .9rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-dau-nguoi > .fa-chevron-down { font-size: .65rem; color: #94a3b8; }
.w-dau-cta { height: 44px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 1.1rem; border-radius: 11px; font-weight: 700; white-space: nowrap; margin-left: .35rem; }

/* Dải menu */
.w-header .w-dau-duoi { padding: 0; border-top: 1px solid var(--w-vien); background: #fff; }
.w-dau-duoi .w-menu .nav-link { position: relative; font-weight: 600; color: #1e293b; padding: .7rem .95rem; border-radius: 0; gap: .45rem; }
.w-menu-ic { color: var(--bs-primary); font-size: .9rem; opacity: .85; }
svg.w-menu-ic { width: 1em; height: 1em; }
.w-menu-so { background: #dcfce7; color: #15803d; font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 99px; }
.w-loi-tat { gap: .35rem; align-items: center; }
.w-loi-tat a { display: inline-flex; align-items: center; gap: .35rem; font-size: .83rem; font-weight: 500; color: #475569; padding: .3rem .7rem; border-radius: 99px; background: #f8fafc; border: 1px solid var(--w-vien); }
.w-loi-tat a i { color: var(--bs-primary); font-size: .78rem; }
.w-loi-tat a:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
@media (min-width: 992px) {
  .w-dau-duoi .w-menu .nav-link::after { content: ""; position: absolute; left: .95rem; right: .95rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--bs-primary); transform: scaleX(0); transition: transform .2s; }
  .w-dau-duoi .w-menu .nav-link.active::after, .w-dau-duoi .w-mega:hover > .nav-link::after, .w-dau-duoi .w-menu .nav-item:hover > .nav-link::after { transform: scaleX(1); }
  .w-dau-duoi .w-mega:hover > .nav-link, .w-dau-duoi .w-mega.mo > .nav-link { background: transparent; color: var(--bs-primary); }
  .w-dau-duoi .w-menu { margin-left: -.95rem; }
  .w-mega-khung { border-top: 1px solid var(--w-vien); }
}
@media (max-width: 991.98px) {
  .w-dau-giua .container { flex-wrap: wrap; gap: .6rem; padding-top: .55rem; padding-bottom: .6rem; }
  .w-logo-hinh { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
  .w-logo-chu b { font-size: 1.2rem; }
  .w-logo { min-width: 0; max-width: calc(100% - 143px); gap: .45rem; } /* chừa chỗ nút ☰ + kính lúp + tài khoản: không đẩy icon xuống dòng */
  .w-logo-chu { min-width: 0; }
  .w-logo-chu b { white-space: nowrap; }
  .w-logo-chu small { font-size: .64rem; line-height: 1.2; margin-top: 2px; } /* khẩu hiệu: máy hẹp tự xuống 2 dòng, ngắt ở dấu · chứ không giữa cụm từ */
  .w-logo-chu small span { white-space: nowrap; }
  .w-dau-mobile { margin-left: auto; }
  .w-omni { order: 3; flex-basis: 100%; max-width: none; height: 44px; }
  .w-omni-loai button { padding: 0 .55rem; font-size: .8rem; }
  .w-omni-o input { font-size: .92rem; padding: 0 .6rem; }
  .w-omni-nut { padding: 0 .9rem; }
  .w-omni-nut span { display: none; }
  .w-header .w-dau-duoi { display: none; }
  /* Cuộn xuống: ô tìm nhảy lên cùng hàng — logo (chỉ hình) · ô tìm · chuông · menu. Bỏ tab Gia sư/Lớp và chọn tỉnh cho gọn (vẫn tìm theo cờ khu vực) */
  .w-header.gon .w-dau-giua .container { flex-wrap: nowrap; gap: .5rem; padding-top: .45rem; padding-bottom: .45rem; }
  .w-header.gon .w-logo, .w-header.gon .w-omni-loai, .w-header.gon .w-omni-tinh { display: none; } /* logo ẩn hẳn, nhường chỗ cho ô tìm (về trang chủ: cuộn lên hoặc menu) */
  .w-header.gon .w-omni { order: 2; flex: 1 1 auto; min-width: 0; height: 38px; }
  .w-header.gon .w-omni-nut { padding: 0 .75rem; }
  .w-header.gon .w-dau-mobile { order: 3; margin-left: 0; gap: 0 !important; }
  .w-ngan-nguoi { display: flex; align-items: center; gap: .7rem; padding: .5rem 0 .6rem; }
  .w-ngan-nguoi .w-av-vong { width: 42px; height: 42px; }
  .w-ngan-nguoi b, .w-ngan-nguoi small { display: block; }
  .w-ngan-nguoi small { color: #58687e; font-size: .8rem; }
  .w-ngan-ds { display: grid; border: 1px solid var(--w-vien); border-radius: 12px; overflow: hidden; }
  .w-ngan-ds a, .w-ngan-ds button { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; color: #1e293b; border: 0; border-bottom: 1px solid var(--w-vien); background: #fff; text-align: left; font-size: .93rem; width: 100%; }
  .w-ngan-ds form { margin: 0; }
  .w-ngan-ds button { border-bottom: 0; color: #dc2626; }
  .w-ngan-ds i { color: #58687e; }
  .w-ngan-phu { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding-top: .9rem; font-size: .85rem; }
  .w-ngan-phu a { color: #475569; }
}
.w-hs-lienhe { top: calc(var(--w-dau) + 16px); }
.w-hd-muc { top: calc(var(--w-dau) + 16px); }
.flash-khung { top: calc(var(--w-dau) + 8px); }
section[id], [id].col-lg-6 { scroll-margin-top: calc(var(--w-dau) + 12px); }
@media (min-width: 992px) { .w-chat { height: calc(100vh - var(--w-dau) - 64px); } }

/* Trang kết quả /tim */
.w-kq-dong { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--w-vien); color: #1e293b; }
.w-kq-dong:last-child { border-bottom: 0; }
.w-kq-dong > i:first-child { width: 36px; height: 36px; border-radius: 10px; background: #eef4ff; color: var(--bs-primary); display: grid; place-items: center; }
.w-kq-dong div { flex: 1; }
.w-kq-dong b, .w-kq-dong small { display: block; }
.w-kq-dong small { color: #58687e; }
.w-kq-dong:hover { background: #f8fafc; }
@media (min-width: 1600px) { .w-omni { max-width: 1000px; } }

/* ===== Bố cục đọc (bài viết, trang tĩnh): mục lục · nội dung · cột phụ — trang full màn, chữ giữ độ dài dòng dễ đọc ===== */
.w-doc { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.w-doc-muc { display: none; }
.w-doc-than { min-width: 0; }
.w-doc-than .w-noidung, .w-doc-than > .lead { max-width: 900px; }
.w-noidung h2, .w-noidung h3 { scroll-margin-top: calc(var(--w-dau) + 16px); }
.w-doc-dinh { position: sticky; top: calc(var(--w-dau) + 16px); }
.w-doc-muc-dau { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #58687e; margin-bottom: .5rem; }
[data-muc-luc] { display: grid; border-left: 2px solid var(--w-vien); }
[data-muc-luc] a { padding: .3rem 0 .3rem .8rem; margin-left: -2px; border-left: 2px solid transparent; color: #475569; font-size: .88rem; line-height: 1.4; }
[data-muc-luc] a.cap2 { padding-left: 1.6rem; font-size: .83rem; }
[data-muc-luc] a:hover { color: var(--bs-primary); }
[data-muc-luc] a.dang { color: var(--bs-primary); border-left-color: var(--bs-primary); font-weight: 600; }
.w-doc-lien { display: grid; gap: .1rem; }
.w-doc-lien a { padding: .4rem .6rem; border-radius: 8px; color: #334155; font-size: .92rem; }
.w-doc-lien a:hover { background: #f1f5f9; color: var(--bs-primary); }
.w-doc-lien a.active { background: #eef4ff; color: var(--bs-primary); font-weight: 600; }
@media (min-width: 992px) { .w-doc { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (min-width: 1400px) {
  .w-doc { grid-template-columns: 240px minmax(0, 1fr) 360px; gap: 3rem; }
  .w-doc-muc { display: block; }
  .w-doc-than { width: 100%; max-width: 960px; justify-self: center; }
}
@media (min-width: 1600px) { .w-doc-than .w-noidung { font-size: 1.06rem; } }

/* ===== Trang chủ v2: hero có hình dựng từ dữ liệu thật, dải tin cậy, tiêu đề khối có eyebrow, bước đánh số, dải cam kết tối, đánh giá trượt ngang ===== */
.w-khoi-tc { padding-top: 4rem; padding-bottom: 4rem; }
section.container.w-khoi-tc + section.container.w-khoi-tc { padding-top: 1rem; }
.w-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-primary); margin-bottom: .5rem; }
.w-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.w-eyebrow-sang { color: #facc15; }
@media (min-width: 992px) { .w-khoi-tc .w-tieude-muc h2 { font-size: 2rem; letter-spacing: -.02em; } .w-khoi-tc .w-tieude-muc { margin-bottom: 1.75rem; } }
.w-link-muc { font-weight: 700; font-size: .92rem; white-space: nowrap; }
.w-link-muc i { font-size: .8rem; transition: transform .15s; }
.w-link-muc:hover i { transform: translateX(3px); }

.w-hero-v2 { padding: 3rem 0 3.5rem; background: radial-gradient(1200px 500px at 85% 20%, #dbeafe 0%, rgba(219, 234, 254, 0) 60%), linear-gradient(180deg, #f8fbff 0%, #fff 100%); border-bottom: 0; }
.w-hero-v2 .w-hero-tieude { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 0; }
.w-hero-v2 .w-hero-tieude span { color: var(--bs-primary); }
.w-hero-v2 .w-hero-mota { font-size: 1.12rem; max-width: 42rem; }
.w-hero-nhan { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 99px; padding: .25rem .8rem .25rem .3rem; font-size: .85rem; color: #334155; margin-bottom: 1.1rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.w-hero-nhan b { background: #15803d; color: #fff; border-radius: 99px; padding: .1rem .55rem; font-size: .72rem; text-transform: uppercase; }
.w-hero-nhan i { font-size: .75rem; color: var(--bs-primary); }
.w-hero-nhan:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.w-hero-v2 .w-tim { box-shadow: 0 20px 40px -12px rgba(15, 23, 42, .15); }
.w-hero-v2 .w-tim-o label i { color: var(--bs-primary); margin-right: .15rem; }
.w-hero-chip { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: 1rem; font-size: .85rem; color: #58687e; }
.w-hero-chip a { background: #fff; border: 1px solid var(--w-vien); border-radius: 99px; padding: .2rem .7rem; color: #334155; }
.w-hero-chip a:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.w-hero-dang { display: inline-flex; align-items: center; gap: .55rem; margin-top: .9rem; padding: .45rem .9rem; border-radius: 12px; background: #eef4ff; color: #1e40af; font-size: .9rem; }
.w-hero-dang b { font-weight: 700; color: var(--bs-primary); }
.w-hero-dang > i:first-child { color: var(--bs-primary); }
.w-hero-dang > i:last-child { font-size: .75rem; transition: transform .15s; }
.w-hero-dang:hover { background: #dbeafe; color: #1e40af; }
.w-hero-dang:hover > i:last-child { transform: translateX(3px); }
.w-hero-tin { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; font-size: .88rem; color: #475569; }
.w-hero-av { display: flex; flex: none; }
.w-hero-av span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem; border: 2px solid #fff; margin-left: -9px; background: #2563eb; }
.w-hero-av span:first-child { margin-left: 0; }
.w-hero-av span:nth-child(2) { background: #0b3d91; } /* chữ trắng trên nền đủ đậm, bỏ hồng */ .w-hero-av span:nth-child(3) { background: #047857; } .w-hero-av span:nth-child(4) { background: #b45309; }
.w-hero-av .w-hero-av-them { background: #0f172a; }
.w-hero-tin .w-sao { color: #f59e0b; }
.w-hero-hinh { position: relative; height: 470px; }
.w-hero-nen { position: absolute; inset: 30px 10px 20px 60px; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: linear-gradient(145deg, #60a5fa 0%, #2563eb 55%, #1e3a8a 100%); display: grid; place-items: center; box-shadow: 0 40px 80px -30px rgba(37, 99, 235, .6); }
.w-hero-nen i { font-size: 9rem; color: rgba(255, 255, 255, .16); transform: rotate(-12deg); }
.w-hero-the { position: absolute; display: flex; gap: .75rem; align-items: center; background: #fff; border-radius: 16px; padding: .8rem 1rem; box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .3); color: #0f172a; width: 290px; animation: w-noi 6s ease-in-out infinite; }
.w-hero-the:hover { color: #0f172a; transform: translateY(-3px); }
.w-hero-the-1 { top: 0; left: 0; }
.w-hero-the-2 { bottom: 40px; left: 10px; animation-delay: -3s; }
.w-hero-the img, .w-hero-the-av { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.w-hero-the-2 .w-hero-the-av { background: linear-gradient(135deg, #059669, #065f46); }
.w-hero-the b { display: block; font-size: .95rem; }
.w-hero-the small { display: block; color: #58687e; font-size: .78rem; line-height: 1.3; }
.w-hero-the em { font-style: normal; font-size: .78rem; font-weight: 600; color: #334155; }
.w-hero-the em i { color: #f59e0b; }
.w-hero-xt { position: absolute; top: 150px; right: 0; width: 230px; background: #fff; border-radius: 16px; padding: .9rem 1rem; box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .3); animation: w-noi 7s ease-in-out infinite; animation-delay: -1.5s; }
.w-hero-xt small { display: block; color: #58687e; font-size: .75rem; }
.w-hero-xt b { display: block; font-size: 1.9rem; font-weight: 800; color: var(--w-xanh-dam); line-height: 1.2; }
.w-hero-xt span { display: block; height: 6px; background: #e2e8f0; border-radius: 6px; margin: .35rem 0 .45rem; overflow: hidden; }
.w-hero-xt span i { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #16a34a); border-radius: 6px; }
.w-hero-lop { position: absolute; right: 30px; bottom: 0; background: #0f172a; color: #fff; border-radius: 99px; padding: .5rem 1rem; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .5); }
.w-hero-lop:hover { color: #fff; background: #1e293b; }
.w-hero-lop i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
@keyframes w-noi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .w-hero-the, .w-hero-xt { animation: none; } }
.w-hero-hinh .w-hero-the-2 { bottom: 10px; }
@media (max-width: 991.98px) {
  .w-hero-v2 { padding: 1.25rem 0 1.75rem; }
  .w-hero-nhan { margin-bottom: .8rem; font-size: .8rem; max-width: 100%; }
  .w-hero-v2 .w-hero-mota { font-size: 1rem; margin: .75rem 0 1rem; }
  .w-hero-chip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: .8rem -.75rem 0; padding: 0 .75rem; }
  .w-hero-chip::-webkit-scrollbar { display: none; }
  .w-hero-chip span, .w-hero-chip a { flex: none; }
  .w-hero-dang { display: flex; font-size: .85rem; }
  .w-hero-dang span { flex: 1; }
  .w-hero-tin { margin-top: 1rem; font-size: .8rem; gap: .6rem; }
  .w-hero-av span { width: 28px; height: 28px; font-size: .7rem; }
}

/* Trang chủ: khối dưới màn đầu chưa vẽ tới khi sắp cuộn tới (nội dung + link vẫn nằm trong HTML cho Google). Chiều cao ước lượng = đo thực tế; "auto" nhớ chiều cao thật sau lần vẽ đầu */
.w-cv { content-visibility: auto; contain-intrinsic-size: auto var(--cv-pc, 600px); }
@media (max-width: 991.98px) { .w-cv { contain-intrinsic-size: auto var(--cv-mb, 900px); } }
.w-tin-cay { border-top: 1px solid var(--w-vien); border-bottom: 1px solid var(--w-vien); background: #fff; }
.w-tin-cay .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.w-tin-cay .container > div { display: grid; grid-template-columns: 40px 1fr; column-gap: .75rem; align-items: center; padding: 1.1rem 1.25rem; }
.w-tin-cay .container > div + div { border-left: 1px solid var(--w-vien); }
.w-tin-cay i { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #eef4ff; color: var(--bs-primary); font-size: 1.05rem; }
.w-tin-cay b { font-size: .95rem; color: #0f172a; }
.w-tin-cay small { color: #58687e; font-size: .8rem; }
@media (max-width: 991.98px) { .w-tin-cay .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .w-tin-cay .container > div:nth-child(3) { border-left: 0; } .w-tin-cay .container > div:nth-child(n+3) { border-top: 1px solid var(--w-vien); } }
@media (max-width: 575.98px) { /* điện thoại: 4 cam kết xếp 2×2, chữ gọn (dải vuốt ngang trước đây trông như bị cắt) */
  .w-tin-cay .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; }
  .w-tin-cay .container > div:nth-child(even) { border-left: 1px solid var(--w-vien); }
  .w-tin-cay .container > div:nth-child(3) { border-left: 0; }
}

.w-mon-luoi-v2 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.w-mon-luoi-v2 .w-mon { position: relative; text-align: left; justify-items: start; padding: 1.1rem 1.1rem 1rem; border-radius: 16px; gap: .2rem; }
.w-mon-luoi-v2 .w-mon:hover { border-color: var(--bs-primary); box-shadow: 0 14px 30px -12px rgba(37, 99, 235, .3); transform: translateY(-2px); }
.w-mon-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; margin-bottom: .6rem; }
.w-mon-luoi-v2 .w-mon .w-mon-ic i { color: inherit; font-size: 1.1rem; margin: 0; } /* màu biểu tượng lấy từ .w-mau-N */
.w-mon-mui { position: absolute; top: 12px; right: 12px; font-size: .7rem; color: #cbd5e1; }
.w-mon:hover .w-mon-mui { color: var(--bs-primary); }
.w-mau-0 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .w-mau-1 { background: linear-gradient(135deg, #f97316, #c2410c); } .w-mau-2 { background: linear-gradient(135deg, #22c55e, #15803d); }
.w-mau-3 { background: linear-gradient(135deg, #a855f7, #7e22ce); } .w-mau-4 { background: linear-gradient(135deg, #14b8a6, #0f766e); } .w-mau-5 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
@media (min-width: 1200px) { .w-mon-luoi-v2 { grid-template-columns: repeat(6, 1fr); } }

.w-buoc-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
/* Icon cùng hàng tiêu đề (không chiếm một hàng riêng), mô tả trải hết bề ngang bên dưới */
.w-buoc2 { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; column-gap: .85rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 18px; padding: 1.3rem 1.4rem 1.4rem; overflow: hidden; }
.w-buoc2 em { position: absolute; bottom: -.35rem; right: .9rem; font-style: normal; font-size: 3.4rem; font-weight: 900; color: #f1f4f9; line-height: 1; }
.w-buoc2 > i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #eef4ff; color: var(--bs-primary); position: relative; }
.w-buoc2 h3 { font-size: 1.08rem; font-weight: 800; margin: 0; position: relative; }
.w-buoc2 p { grid-column: 1 / -1; font-size: .9rem; color: #475569; margin: .7rem 0 0; position: relative; }
.w-buoc2-dam { background: linear-gradient(145deg, #0b3d91, #0f172a); border-color: transparent; color: #fff; }
.w-buoc2-dam em { color: rgba(255, 255, 255, .06); }
.w-buoc2-dam > i { background: rgba(255, 255, 255, .12); color: #fff; }
.w-buoc2-dam p { color: rgba(255, 255, 255, .8); }
@media (max-width: 991.98px) { .w-buoc-luoi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .w-buoc-luoi { grid-template-columns: 1fr; } }

.w-hp-bang { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 18px; padding: 1.4rem; align-items: stretch; }
.w-hp-bang-trai h3 { font-size: 1.1rem; font-weight: 800; }
.w-hp-bang-trai h3 i { color: #f59e0b; }
.w-hp-bang-trai p { font-size: .88rem; color: #475569; }
.w-hp-cap { background: #f8fafc; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem; display: grid; align-content: start; gap: .1rem; }
.w-hp-cap b { font-size: 1rem; }
.w-hp-cap small { color: #58687e; font-size: .78rem; }
.w-hp-cap strong { font-size: 1.35rem; font-weight: 800; color: var(--w-xanh-dam); margin-top: .4rem; }
.w-hp-cap span { font-size: .78rem; color: #58687e; }
.w-hp-bang .w-hp-td { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; border-top: 1px dashed var(--w-vien); }
.w-hp-bang .w-hp-td a { border-radius: 99px; background: #f1f5f9; padding: .3rem .8rem; font-size: .85rem; color: #334155; }
.w-hp-bang .w-hp-td a b { color: var(--w-xanh-dam); }
.w-hp-bang .w-hp-td a:hover { background: #dbeafe; }
@media (max-width: 1199.98px) { .w-hp-bang { grid-template-columns: repeat(2, 1fr); } .w-hp-bang-trai { grid-column: 1 / -1; } }

.w-tab-nho { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; }
.w-tab-nho button { border: 0; background: none; padding: .35rem .8rem; border-radius: 8px; font-size: .85rem; font-weight: 600; color: #475569; }
.w-tab-nho button.active { background: #fff; color: var(--bs-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
[data-luoi-gs].dang-nap { opacity: .45; pointer-events: none; transition: opacity .15s; }

.w-cam-ket { background: radial-gradient(900px 400px at 90% 0%, rgba(37, 99, 235, .35), transparent 60%), #0b1d4a; color: #fff; padding: 4rem 0; }
.w-cam-ket .container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.w-cam-ket h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.w-cam-ket h2 span { color: #93c5fd; }
.w-cam-ket p { color: rgba(255, 255, 255, .75); max-width: 38rem; margin: 1rem 0 1.5rem; }
.w-cam-ket-so { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.w-cam-ket-so div { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 1.25rem 1.4rem; }
.w-cam-ket-so b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.w-cam-ket-so small { color: rgba(255, 255, 255, .7); }
@media (max-width: 991.98px) { .w-cam-ket .container { grid-template-columns: 1fr; gap: 2rem; } }

.w-dg-tong { display: flex; align-items: center; gap: .6rem; }
.w-dg-tong > b { font-size: 2.2rem; font-weight: 800; color: #0f172a; line-height: 1; }
.w-dg-tong small { display: block; color: #58687e; font-size: .78rem; }
.w-dg-tong .w-sao { color: #f59e0b; }
.w-truot-nut { display: flex; gap: .4rem; }
.w-truot-nut button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--w-vien); background: #fff; color: #334155; }
.w-truot-nut button:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.w-truot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, calc((100% - 3rem) / 4)); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem; }
.w-truot::-webkit-scrollbar { display: none; }
.w-truot > * { scroll-snap-align: start; }
.w-dg-v2 { position: relative; background: #fff; border: 1px solid var(--w-vien); border-radius: 18px; padding: 1.3rem; display: flex; flex-direction: column; }
.w-dg-v2 p { flex: 1; color: #334155; }
.w-dg-ngoac { position: absolute; top: 1rem; right: 1.1rem; font-size: 1.6rem; color: #e2e8f0; }
.w-dg-v2 .w-dg-cuoi { gap: .6rem; justify-content: flex-start; }
.w-dg-v2 .w-dg-cuoi > div { flex: 1; min-width: 0; }
.w-dg-v2 .w-dg-cuoi .w-avatar { width: 36px; height: 36px; flex: none; }
.w-avatar-gs { background: #dcfce7 !important; color: #15803d !important; }
@media (max-width: 767.98px) { .w-truot { grid-auto-columns: 85%; } }

.w-nhan-lop { height: 100%; border-radius: 20px; padding: 1.6rem; color: #fff; background: radial-gradient(500px 260px at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(150deg, #16a34a, #065f46); box-shadow: 0 24px 50px -20px rgba(6, 95, 70, .6); }
.w-nhan-lop h2 { font-size: 1.5rem; font-weight: 800; }
.w-nhan-lop p { color: rgba(255, 255, 255, .85); }
.w-nhan-lop-so { display: flex; gap: .8rem; align-items: center; background: rgba(0, 0, 0, .15); border-radius: 14px; padding: .8rem 1rem; margin: 1rem 0; }
.w-nhan-lop-so b { font-size: 2rem; font-weight: 900; color: #fde047; line-height: 1; }
.w-nhan-lop-so span { font-size: .85rem; color: rgba(255, 255, 255, .85); }
.w-nhan-lop ul { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .45rem; font-size: .9rem; }
.w-nhan-lop li i { color: #bbf7d0; margin-right: .35rem; }
.w-nhan-lop .w-eyebrow-sang { color: #fde047; }

.w-faq-hop { display: flex; gap: .9rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 1.1rem; margin-top: 1rem; }
.w-faq-hop > i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #eef4ff; color: var(--bs-primary); font-size: 1.2rem; flex: none; }
.w-faq-hop b, .w-faq-hop small { display: block; }
.w-faq-hop small { color: #58687e; }
.w-mau-nen-0 { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } .w-mau-nen-1 { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.w-mau-nen-2 { background: linear-gradient(135deg, #dcfce7, #bbf7d0); } .w-mau-nen-3 { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.w-bv-anh[class*="w-mau-nen"] i { color: rgba(15, 23, 42, .25); }
.w-mon-luoi-v2 .w-mon .w-mon-mui { font-size: .7rem; color: #cbd5e1; margin: 0; }
.w-mon-luoi-v2 .w-mon:hover .w-mon-mui { color: var(--bs-primary); }
@media (max-width: 575.98px) { .w-mon-luoi-v2 { grid-template-columns: 1fr 1fr; gap: .6rem; } .w-mon-luoi-v2 .w-mon { padding: .8rem; } .w-mon-ic { width: 36px; height: 36px; margin-bottom: .4rem; } .w-khoi-tc { padding-top: 2.5rem; padding-bottom: 2.5rem; } }

/* Danh bạ môn / tỉnh ở trang gốc /gia-su (đích #mon, #khu-vuc của menu) */
.w-danh-ba { background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 1.4rem 1.5rem; scroll-margin-top: calc(var(--w-dau) + 12px); }
.w-danh-ba-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem 1.5rem; }
.w-danh-ba-nhom { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #58687e; margin-bottom: .35rem; }
.w-danh-ba-luoi a { display: block; padding: .18rem 0; color: #334155; font-size: .92rem; }
.w-danh-ba-tinh { columns: 6 150px; column-gap: 1.5rem; }
.w-danh-ba-tinh a { display: block; padding: .18rem 0; color: #334155; font-size: .92rem; break-inside: avoid; }
.w-danh-ba a:hover { color: var(--bs-primary); }

/* ===== Nút lên đầu trang: hiện sau khi cuộn quá 1,5 màn; trên điện thoại nằm trên thanh tab / thanh lưu ===== */
.w-len-dau { position: fixed; right: 20px; bottom: 20px; z-index: 1020; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--w-vien); background: #fff; color: var(--bs-primary); display: grid; place-items: center; line-height: 0; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s, transform .2s, visibility .2s, background-color .15s, color .15s; }
.w-len-dau.hien { opacity: 1; visibility: visible; transform: none; }
.w-len-dau svg { display: block; }
.w-len-dau:hover, .w-len-dau:focus-visible { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
body.co-luu-thanh .w-len-dau { bottom: 84px; }
@media (max-width: 991.98px) {
  .w-len-dau { right: 14px; bottom: calc(16px + var(--w-dinh, 0px)); width: 42px; height: 42px; }
  body.co-tab-duoi .w-len-dau { bottom: calc(76px + var(--w-dinh, 0px) + env(safe-area-inset-bottom)); } /* --w-dinh: thanh liên hệ/ứng tuyển dính đáy (web.js) */
  body.co-tab-duoi.co-luu-thanh .w-len-dau { bottom: calc(136px + env(safe-area-inset-bottom)); }
}
@media print { .w-len-dau { display: none; } }

/* ===== Nhịp tin: nhãn trên thẻ tin, khối "Nhịp tin này" ở trang tin ===== */
.w-tin-nhip { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.w-nhip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; border-radius: 99px; padding: .15rem .6rem; line-height: 1.5; }
.w-nhip i { font-size: .7rem; }
.w-nhip-nong { background: #fee2e2; color: #b91c1c; }
.w-nhip-som { background: #dcfce7; color: #15803d; }
.w-nhip-xem { background: #e0e7ff; color: #4338ca; }
.w-nhip-gap { background: #fef3c7; color: #b45309; }
.w-nhip-han { background: #f1f5f9; color: #334155; }
.w-nhip-thuong { background: #f1f5f9; color: #475569; font-weight: 500; }
.w-nhip-khoi { border: 1px solid var(--w-vien); background: #f8fafc; border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1rem; }
.w-nhip-khoi ul { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .4rem; font-size: .88rem; }
.w-nhip-khoi li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .4rem; align-items: baseline; }
.w-nhip-khoi li > i { color: #58687e; text-align: center; }
.w-nhip-thanh { height: 6px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.w-nhip-thanh span { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #f59e0b 70%, #ef4444); border-radius: 99px; }

/* ===== Bảng điều khiển gia sư ===== */
.w-o-hd { gap: .1rem; color: inherit; text-decoration: none; height: 100%; }
a.w-o-hd:hover { border-color: #93c5fd; }
.w-o-hd em { font-style: normal; font-size: .76rem; color: #58687e; }
.w-o-hd em.w-bien-len { color: #15803d; }
.w-o-hd em.w-bien-xuong { color: #b91c1c; }
.w-thieu { list-style: none; padding: 0; margin: .9rem 0 .75rem; display: grid; gap: .35rem; font-size: .86rem; }
.w-thieu li { display: flex; gap: .5rem; align-items: center; color: #334155; }
.w-thieu i { color: #cbd5e1; }
.w-ut-cho { display: grid; }
.w-ut-cho a { display: grid; gap: .1rem; padding: .7rem 1rem; border-top: 1px solid var(--w-vien); color: inherit; text-decoration: none; }
.w-ut-cho a:first-child { border-top: 0; }
.w-ut-cho a:hover { background: #f8fafc; }
.w-ut-cho b { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-ut-cho small { color: #58687e; }
.w-mega-nhom a { color: inherit; text-decoration: none; }
.w-mega-nhom a:hover { color: var(--bs-primary); }

/* Mega menu v3: khung không vượt màn hình · cột cấp học gọn · Cẩm nang toàn bề ngang · Làm gia sư có mô tả + hộp số liệu thật */
.w-mega-cap { padding: .35rem 0; }
.w-mega-cap + .w-mega-cap { border-top: 1px dashed var(--w-vien); }
.w-mega-cap-ten { display: block; font-weight: 600; font-size: .88rem; color: #1e293b; padding: .1rem 0; }
.w-mega-cap-ten:hover { color: var(--bs-primary); }
.w-mega-cap-lop { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .1rem; }
.w-mega-cap-lop a { font-size: .8rem; line-height: 1.3; padding: .15rem .55rem; border-radius: 99px; background: #f1f5f9; color: #334155; white-space: nowrap; }
.w-mega-cap-lop a:hover { background: #eef4ff; color: var(--bs-primary); }
.w-mega-cm { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; margin-left: -.5rem; border-radius: 8px; color: #1e293b; }
.w-mega-cm:hover { background: #eef4ff; color: var(--bs-primary); }
.w-mega-cm b { font-weight: 600; font-size: .92rem; }
.w-mega-cm small { margin-left: auto; color: #94a3b8; font-size: .76rem; white-space: nowrap; }
.w-mega-cm-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #eef4ff; color: var(--bs-primary); font-size: .85rem; }
.w-mega-bai-luoi { display: grid; gap: .6rem; }
.w-mega-bai { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .8rem; border: 1px solid var(--w-vien); border-radius: 10px; color: #1e293b; transition: border-color .15s, box-shadow .15s; }
.w-mega-bai:hover { border-color: var(--bs-primary); box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .35); color: var(--bs-primary); }
.w-mega-bai b { font-weight: 600; font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.w-mega-bai-cm { align-self: flex-start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-primary); background: #eef4ff; padding: .1rem .45rem; border-radius: 4px; }
.w-mega-bai small { margin-top: auto; color: #94a3b8; font-size: .76rem; }
.w-lgs-muc { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: 10px; color: #1e293b; }
.w-lgs-muc:hover { background: #f5f8ff; }
.w-lgs-muc:hover b { color: var(--bs-primary); }
.w-lgs-muc b { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.w-lgs-muc small { display: block; color: #58687e; font-size: .8rem; line-height: 1.35; }
.w-lgs-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; font-size: .95rem; }
.w-lgs-xanh { background: #eef4ff; color: #2563eb; } .w-lgs-lam { background: #e0f2fe; color: #0284c7; } .w-lgs-la { background: #dcfce7; color: #16a34a; } .w-lgs-do { background: #fee2e2; color: #dc2626; } .w-lgs-xam { background: #f1f5f9; color: #475569; }
.w-lgs-hop { background: linear-gradient(150deg, var(--w-xanh-dam), #1d4ed8); color: #fff; border-radius: 12px; padding: 1.1rem 1.1rem 1rem; display: flex; flex-direction: column; }
.w-lgs-hop p { font-size: .84rem; opacity: .85; margin: .35rem 0 .9rem; line-height: 1.45; }
.w-lgs-hop .btn { margin-top: auto; font-weight: 600; }
.w-lgs-nhan { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.w-lgs-so { font-size: 2rem; font-weight: 800; line-height: 1.1; margin-top: .2rem; }
.w-lgs-thanh { height: 6px; border-radius: 99px; background: rgba(255,255,255,.25); margin-top: .5rem; overflow: hidden; }
.w-lgs-thanh span { display: block; height: 100%; background: #4ade80; border-radius: 99px; }
@media (min-width: 992px) {
  .w-mega-khung { max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain; }
  .w-mega-luoi-cn { grid-template-columns: 1fr 1fr 2.1fr; }
  .w-mega-bai-luoi { grid-template-columns: repeat(3, 1fr); }
  .w-mega-giua > .w-mega-khung { left: 50%; transform: translate(-50%, 8px); width: 620px; padding: .9rem; border-radius: 0 0 14px 14px; }
  .w-mega-giua:hover > .w-mega-khung, .w-mega-giua.mo > .w-mega-khung, .w-mega-giua:focus-within > .w-mega-khung { transform: translate(-50%, 0); }
  .w-lgs { display: grid; grid-template-columns: 1fr 210px; gap: .75rem; }
}
@media (max-width: 991.98px) {
  .w-lgs-hop { margin-top: .75rem; }
}

/* ===== Ngăn kéo menu điện thoại (.w-mm) — web.js dựng từ markup dải menu máy tính: cấp 1 danh sách mục, cấp 2 nội dung mega ===== */
.w-mm-nen { position: fixed; inset: 0; z-index: 1055; background: rgba(15, 23, 42, .45); opacity: 0; visibility: hidden; transition: opacity .22s, visibility 0s linear .22s; }
.w-mm { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1056; width: min(420px, 92vw); background: #fff; box-shadow: 12px 0 32px rgba(15, 23, 42, .18); transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; overflow: hidden; }
body.w-mm-mo { overflow: hidden; }
body.w-mm-mo .w-mm-nen { opacity: 1; visibility: visible; transition-delay: 0s; }
body.w-mm-mo .w-mm { transform: none; visibility: visible; transition-delay: 0s; }
.w-mm-tang { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; transition: transform .25s ease; }
.w-mm-tang2 { transform: translateX(100%); }
.w-mm.sau .w-mm-tang1 { transform: translateX(-30%); }
.w-mm.sau .w-mm-tang2 { transform: none; }
.w-mm-dau { flex: none; display: flex; align-items: center; gap: .5rem; height: 60px; padding: 0 .5rem 0 1rem; border-bottom: 1px solid var(--w-vien); }
.w-mm-dau .w-logo-hinh { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
.w-mm-dau b { font-size: 1.1rem; color: var(--w-xanh-dam); }
.w-mm-dau h2 { font-size: 1.05rem; font-weight: 700; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-mm-nut { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: #334155; font-size: 1.15rem; display: grid; place-items: center; }
.w-mm-nut:active { background: #f1f5f9; }
.w-mm-dau .w-mm-dong { margin-left: auto; }
.w-mm-than { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
.w-mm-ds { display: grid; margin: .75rem 0 1rem; border: 1px solid var(--w-vien); border-radius: 14px; overflow: hidden; }
.w-mm-muc { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem .9rem; border: 0; border-bottom: 1px solid var(--w-vien); background: #fff; color: #1e293b; text-align: left; }
.w-mm-muc:last-child { border-bottom: 0; }
.w-mm-muc:active { background: #f5f8ff; }
.w-mm-muc.active { color: var(--bs-primary); }
.w-mm-muc-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #eef4ff; color: var(--bs-primary); font-size: .95rem; }
.w-mm-muc-chu { flex: 1; min-width: 0; }
.w-mm-muc-chu b { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .98rem; }
.w-mm-muc-chu small { display: block; color: #58687e; font-size: .8rem; line-height: 1.35; }
.w-mm-muc > .fa-chevron-right { color: #94a3b8; font-size: .8rem; }
.w-mm-nhan { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #58687e; margin: 1.1rem 0 .5rem; }
.w-mm-tat { display: flex; flex-wrap: wrap; gap: .4rem; }
.w-mm-tat a { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: #334155; padding: .35rem .75rem; border: 1px solid var(--w-vien); border-radius: 99px; background: #f8fafc; }
.w-mm-tat a i { color: var(--bs-primary); font-size: .8rem; }
.w-mm-het { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; margin-bottom: .5rem; }
/* Nội dung mega chép sang cấp 2 */
.w-mm a { text-decoration: none; }
.w-mm .container { padding: 0; max-width: none; width: auto; }
.w-mm .w-mega-cot { padding: 1rem 0; }
.w-mm .w-mega-cot + .w-mega-cot { border-top: 1px solid var(--w-vien); }
.w-mm .w-mega-cot:first-child { padding-top: .25rem; }
.w-mm .w-mega-tieude { margin-bottom: .6rem; }
.w-mm .w-mega-2cot { columns: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.w-mm .w-mega-2cot .w-mega-lien { margin: 0; padding: .4rem .8rem; border: 1px solid var(--w-vien); border-radius: 99px; font-size: .88rem; background: #fff; }
.w-mm .w-mega-lien { margin-left: 0; padding: .55rem .1rem; font-size: .95rem; }
.w-mm .w-mega-cap-lop a { font-size: .85rem; padding: .3rem .7rem; }
.w-mm .w-mega-cap-ten { font-size: .95rem; padding: .25rem 0; }
.w-mm .w-mega-cm { margin-left: 0; padding: .55rem .1rem; }
.w-mm .w-mega-cta { flex-direction: column; align-items: stretch; margin-top: .5rem; }
.w-mm .w-mega-xem-het { margin-top: .75rem; }
.w-mm .w-lgs-muc { padding: .6rem .1rem; }
.w-mm .w-lgs-hop { margin-top: .75rem; }
.w-mm .w-mega-hop { margin-bottom: .5rem; }
@media (min-width: 992px) { .w-mm, .w-mm-nen { display: none; } }

/* ===== Sàn đang hoạt động (App\Services\HoatDongSan): khối "Đang diễn ra", chấm online, nhịp khu vực, nhịp tin của phụ huynh ===== */
.w-song-cham { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; vertical-align: middle; margin-right: .2rem; position: relative; }
/* Vòng lan bằng transform/opacity (card đồ hoạ tự vẽ) thay vì box-shadow (bắt trình duyệt tính lại kiểu + vẽ lại mỗi khung hình) */
.w-song-cham::after, .w-buoc-ph li.dang > span::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: w-vong-lan 1.8s ease-out infinite; }
.w-song-cham::after { background: rgba(22, 163, 74, .5); }
.w-buoc-ph li.dang > span::after { border: 2px solid rgba(37, 99, 235, .55); }
@keyframes w-vong-lan { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(2.2); opacity: 0; } }
.w-cham-online { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; border: 3px solid #fff; }
.w-av-bao { position: relative; display: inline-block; flex: none; line-height: 0; }
.w-av-bao .w-cham-online { width: 14px; height: 14px; right: -2px; bottom: -2px; }
.w-online-chu { color: #16a34a; font-weight: 600; }
.w-online-chu i { font-size: .5rem; vertical-align: middle; position: relative; top: -1px; }
.w-nhip-kv { margin-top: .4rem; font-size: .85rem; color: #475569; }
.w-nhip-kv b { color: #0f172a; }
.w-nhip-ph-dau { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #16a34a; margin-bottom: .9rem; }
.w-buoc-ph { list-style: none; margin: 0; padding: 0; }
.w-buoc-ph li { display: flex; gap: .8rem; position: relative; padding-bottom: 1rem; }
.w-buoc-ph li:last-child { padding-bottom: 0; }
.w-buoc-ph li::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--w-vien); }
.w-buoc-ph li:last-child::before { display: none; }
.w-buoc-ph li.xong::before { background: #bbf7d0; }
.w-buoc-ph li > span { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #f1f5f9; color: #94a3b8; font-size: .85rem; position: relative; z-index: 1; }
.w-buoc-ph li.xong > span { background: #dcfce7; color: #16a34a; }
.w-buoc-ph li.dang > span { background: var(--bs-primary); color: #fff; position: relative; }
.w-buoc-ph b { display: block; font-weight: 600; line-height: 1.35; padding-top: .4rem; }
.w-buoc-ph small { color: #58687e; }
.w-nhip-moi { margin-top: 1rem; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 12px; background: linear-gradient(135deg, var(--w-xanh-dam), #1d4ed8); color: #fff; font-weight: 600; }
.w-nhip-moi[hidden] { display: none; }
.w-nhip-moi .btn { margin-left: auto; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .w-song-cham::after, .w-buoc-ph li.dang > span::after { animation: none; } }

/* ===== "Xem thêm" thay phân trang (partials/xem-them) ===== */
.w-xem-them { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-top: 1.75rem; padding: 1.25rem 1rem 1.35rem; text-align: center; border-radius: 16px; background: linear-gradient(180deg, #f8fafc 0%, #eef3fb 100%); border: 1px solid #e3e9f3; }
.w-xem-them-tien { width: min(320px, 80%); height: 6px; border-radius: 99px; background: #dbe3ef; overflow: hidden; }
.w-xem-them-tien span { display: block; height: 100%; background: linear-gradient(90deg, #0d6efd, #0b3d91); border-radius: 99px; transition: width .4s ease; }
.w-xem-them-so { font-size: .85rem; color: #58687e; }
.w-xem-them-so b { color: #0b3d91; }
.w-xem-them-nut { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 280px; margin-top: .35rem; padding: .8rem 1.6rem; border-radius: 99px; font-weight: 700; font-size: 1rem; color: #fff; background: linear-gradient(135deg, #0d6efd 0%, #0b3d91 100%); box-shadow: 0 8px 22px rgba(13, 110, 253, .28); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.w-xem-them-nut i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: .8rem; transition: transform .2s; }
.w-xem-them-nut:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13, 110, 253, .35); }
.w-xem-them-nut:hover i { transform: translateY(2px); }
.w-xem-them-nut:active { transform: translateY(0); }
.w-xem-them-nut:focus-visible { outline: 3px solid #9ec5ff; outline-offset: 3px; }
.w-xem-them-nut.dang { pointer-events: none; opacity: .85; }
.w-xem-them-nut.dang i { animation: fa-spin .8s linear infinite; }
.w-xem-them-nut.dang i::before { content: "\f110"; }
.w-xem-them-con { color: #7b8a9e; font-size: .8rem; }
.w-xem-them-het { display: inline-flex; align-items: center; gap: .5rem; margin-top: .35rem; padding: .55rem 1.1rem; border-radius: 99px; font-weight: 600; color: #15803d; background: #dcfce7; }
.w-xem-them-len { font-size: .85rem; color: #58687e; text-decoration: none; }
.w-xem-them-len:hover { color: #0b3d91; }
.w-kq-moi { animation: w-kq-vao .35s ease-out; }
@keyframes w-kq-vao { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) { .w-xem-them { border-radius: 14px; padding: 1rem .75rem 1.1rem; } .w-xem-them-nut { width: 100%; min-width: 0; } }

/* ===== /lop, /gia-su: kiểu xem bảng (chỉ màn rộng ≥ 992px) ===== */
.w-kieu-xem, .w-bang-lop-bao { display: none; }
@media (min-width: 992px) {
  .w-kieu-xem { display: inline-flex; padding: 3px; border: 1px solid var(--w-vien); border-radius: 10px; background: #f8fafc; }
  .w-kieu-xem button { border: 0; background: transparent; padding: .35rem .75rem; border-radius: 7px; font-size: .85rem; font-weight: 600; color: #58687e; display: inline-flex; align-items: center; gap: .35rem; }
  .w-kieu-xem button[aria-pressed="true"] { background: #fff; color: var(--bs-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
  .xem-bang [data-ds-kq="the"] { display: none; }
  .xem-bang .w-bang-lop-bao { display: block; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; overflow: clip; }
  .w-bang-lop { width: 100%; border-collapse: collapse; font-size: .9rem; }
  .w-bang-lop th { position: sticky; top: var(--w-dau); z-index: 2; background: #f1f5f9; color: #475569; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--w-vien); white-space: nowrap; }
  .w-bang-lop td { padding: .7rem .75rem; border-bottom: 1px solid var(--w-vien); vertical-align: top; }
  .w-bang-lop tbody tr:last-child td { border-bottom: 0; }
  .w-bang-lop tbody tr:nth-child(even) { background: #fafcff; }
  .w-bang-lop tbody tr:hover { background: #eef4ff; }
  .w-bang-lop td small { display: block; color: #58687e; font-size: .8rem; line-height: 1.4; margin-top: .15rem; }
  .w-bl-ma { white-space: nowrap; width: 1%; }
  .w-bl-ma a { font-weight: 700; color: #334155; font-variant-numeric: tabular-nums; }
  .w-bl-ma .w-nhan { display: inline-block; margin-top: .25rem; }
  .w-bl-lop a { font-weight: 600; color: #0f172a; }
  .w-bl-lop a:hover, .w-bl-ma a:hover { color: var(--bs-primary); }
  .w-bl-lop small b { color: #334155; font-weight: 600; }
  .w-bl-noi { white-space: nowrap; }
  .w-bl-gia { white-space: nowrap; text-align: right; }
  .w-bl-gia b { color: var(--w-xanh-dam); font-weight: 700; } /* giá một màu navy như thẻ (xanh lá #16a34a chỉ 3,3:1) */
  .w-bl-yc { font-size: .85rem; }
  .w-bl-ut { font-size: .85rem; white-space: nowrap; }
  .w-bl-ut .w-nhip { display: flex; width: max-content; margin-top: .3rem; }
  .w-bl-nut { width: 1%; white-space: nowrap; text-align: right; }
  .w-bang-lop th:nth-child(4) { text-align: right; }
  .w-bang-gs th:nth-child(4) { text-align: left; }
  /* /gia-su dạng bảng: dùng chung khung .w-bang-lop */
  .w-bg-noibat td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
  .w-bg-ten { display: flex; gap: .7rem; align-items: flex-start; min-width: 280px; }
  .w-bg-anh { position: relative; flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: visible; }
  .w-bg-anh img, .w-bg-anh > span { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: #e0e7ff; color: #3730a3; font-weight: 700; font-size: 1.1rem; }
  .w-bg-anh .w-cham-online { position: absolute; right: -2px; bottom: -2px; }
  .w-bg-hoten { font-weight: 600; color: #0f172a; }
  .w-bg-hoten:hover { color: var(--bs-primary); }
  .w-bg-nhan { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
  .w-bg-nhan:empty { display: none; }
  .w-bg-nb { font-size: .68rem; font-weight: 700; color: #451a03; background: #f59e0b; border-radius: 99px; padding: .08rem .45rem; }
  .w-bang-lop td small.w-bg-tieude { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 420px; }
  .w-bg-td, .w-bg-noi { font-size: .88rem; min-width: 140px; }
  .w-bg-mon { min-width: 170px; }
  .w-bg-mon .w-chip { margin: 0 .2rem .25rem 0; font-size: .76rem; padding: .12rem .5rem; }
  .w-bg-dg { white-space: nowrap; font-size: .88rem; }
  .w-bg-dg b i { color: #f59e0b; font-size: .8rem; }
  .w-bg-gia { white-space: nowrap; text-align: right; }
  .w-bg-gia b { color: var(--w-xanh-dam); font-weight: 800; }
  .w-bang-gs th:nth-child(6) { text-align: right; }
}
/* ===== Thẻ đo đạc mép trái (partials/do-dac, chỉ máy dev) ===== */
/* Không dùng writing-mode (Safari iPhone/iPad tính sai hộp chữ dọc rồi xoay 180° → dải lệch khuất ra ngoài mép): thẻ là dòng chữ ngang xoay -90° quanh góc trên-trái,
   gốc đặt ở giữa mép trái màn hình → luôn nằm sát mép, đọc từ dưới lên */
.w-do { position: fixed; left: 0; top: 50%; z-index: 1045; width: 0; height: 0; }
.w-do-tab { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: rotate(-90deg) translateX(-50%); display: block; cursor: pointer; user-select: none; -webkit-user-select: none; border: 0; padding: .32rem .8rem; background: rgba(15, 23, 42, .78); color: #e2e8f0; font: 600 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 2px 10px rgba(15, 23, 42, .25); opacity: .72; transition: opacity .15s, background .15s; }
.w-do-tab { border-radius: 0 0 8px 8px; } /* cạnh dưới của dòng chữ = mép phải sau khi xoay */
.w-do-tab:hover, .w-do.mo .w-do-tab { opacity: 1; background: #0f172a; }
.w-do-tab.w-do-tot i { color: #4ade80; } .w-do-tab.w-do-vua i { color: #facc15; } .w-do-tab.w-do-cham i { color: #f87171; }
.w-do-bang { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); width: 340px; max-height: 86vh; overflow-y: auto; background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: .75rem .9rem .9rem; box-shadow: 0 18px 40px -8px rgba(15, 23, 42, .5); font-size: .8rem; }
.w-do-bang[hidden] { display: none; }
.w-do-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.w-do-dau button { border: 0; background: transparent; color: #94a3b8; font-size: 1rem; padding: 0 .2rem; }
.w-do-dau button:hover { color: #fff; }
.w-do-nhom { margin: .6rem 0 .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #58687e; }
.w-do-bang dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: 0; }
.w-do-bang dt { color: #94a3b8; font-weight: 500; }
.w-do-bang dd { margin: 0; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.w-do-bang dd small { display: block; color: #58687e; font-size: .7rem; }
.w-do-bang dd.w-do-tot { color: #4ade80; } .w-do-bang dd.w-do-vua { color: #facc15; } .w-do-bang dd.w-do-cham { color: #f87171; }
@media (max-width: 575.98px) { .w-do-bang { width: calc(100vw - 48px); } .w-do-tab { font-size: .62rem; padding: .28rem .65rem; } }
@media print { .w-do { display: none; } }
/* Ô lọc đang chọn giá trị: nền xanh nhạt, viền và chữ đậm để phân biệt với ô "Tất cả" */
.form-select.co-chon { background-color: #eaf1ff; border-color: #7aa2ea; color: #1e3a8a; font-weight: 600; box-shadow: inset 0 0 0 1px #7aa2ea; }

/* ===== Cờ khu vực (App\Support\TinhChon): chip ở dải trên + ô chọn trong ngăn kéo mobile ===== */
.w-chon-tinh-nut { border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: .8rem; font-weight: 600; padding: .15rem .6rem; border-radius: 99px; display: inline-flex; align-items: center; gap: .35rem; }
.w-chon-tinh-nut:hover, .w-chon-tinh.show .w-chon-tinh-nut { background: rgba(255, 255, 255, .22); }
.w-chon-tinh-nut .fa-location-dot { color: #facc15; }
.w-chon-tinh-nut .fa-chevron-down { font-size: .6rem; opacity: .7; }
.w-chon-tinh-ds { width: 320px; padding: .75rem; border-radius: 12px; box-shadow: 0 18px 40px -10px rgba(15, 23, 42, .25); font-size: .88rem; }
.w-chon-tinh-dau b { display: block; color: #0f172a; }
.w-chon-tinh-dau small { display: block; color: #58687e; font-size: .78rem; margin: .1rem 0 .6rem; }
.w-chon-tinh-luoi { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .3rem; }
.w-chon-tinh-luoi a { display: block; padding: .35rem .4rem; border-radius: 8px; border: 1px solid var(--w-vien); color: #334155; text-align: center; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-chon-tinh-luoi a:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.w-chon-tinh-luoi a.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; font-weight: 600; }
.w-chon-tinh-bo { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--w-vien); font-weight: 600; font-size: .85rem; }
.w-dau-tren .w-chon-tinh-ds { white-space: normal; }
.w-dau-tren .w-chon-tinh-bo { color: var(--bs-primary); } /* dải trên chữ trắng, link trong bảng thả phải lấy lại màu */
.w-dau-tren .w-chon-tinh-bo:hover { color: var(--w-xanh-dam); }
.w-ngan-tinh { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; padding: .55rem .75rem; border: 1px solid var(--w-vien); border-radius: 12px; background: #f8fafc; }
.w-ngan-tinh label { white-space: nowrap; font-weight: 600; font-size: .88rem; color: #334155; margin: 0; }
.w-ngan-tinh label i { color: var(--bs-primary); }
.w-ngan-tinh select { flex: 1; min-width: 0; }
/* Ô khu vực trong ô tìm đầu trang (trước nút Tìm) */
.w-omni-tinh { flex: none; display: flex; align-items: center; gap: .3rem; margin: 0; padding: 0 .3rem 0 .75rem; border-left: 1px solid var(--w-vien); color: var(--bs-primary); cursor: pointer; }
.w-omni-tinh i { font-size: .85rem; }
.w-omni-tinh select { field-sizing: content; border: 0; outline: 0; background: transparent; font-weight: 600; font-size: .9rem; color: #1e293b; max-width: 130px; padding: 0 .2rem; cursor: pointer; } /* rộng theo tên tỉnh đang chọn */
/* Màn 992–1399: nhường chỗ cho ô gõ — nút Tìm chỉ còn icon, ẩn tên người dùng cạnh avatar */
@media (min-width: 992px) and (max-width: 1399.98px) { .w-omni-nut span { display: none; } .w-omni-nut { padding: 0 1.05rem; } .w-dau-nguoi-chu { display: none; } }
.w-omni-tinh:focus-within { background: #f8fafc; }
@media (max-width: 991.98px) { .w-omni-tinh { padding: 0 .1rem 0 .5rem; } .w-omni-tinh select { max-width: 96px; font-size: .82rem; } }
/* Điện thoại: chỉ còn icon ghim, chạm vào mở danh sách tỉnh (select trong suốt phủ lên icon) — nhường chỗ cho ô gõ */
@media (max-width: 575.98px) { .w-omni-tinh { position: relative; width: 40px; padding: 0; justify-content: center; } .w-omni-tinh i { font-size: 1rem; } .w-omni-tinh select { position: absolute; inset: 0; width: 100%; max-width: none; opacity: 0; } }
/* Khối môn học trang chủ: icon nằm bên trái tên + số gia sư (không chiếm riêng một hàng) */
.w-mon-luoi-v2 .w-mon { grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; row-gap: .1rem; align-items: center; align-content: center; padding: .85rem 1.6rem .85rem .9rem; }
.w-mon-luoi-v2 .w-mon .w-mon-ic { grid-row: span 2; margin: 0; }
.w-mon-luoi-v2 .w-mon b { align-self: end; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-mon-luoi-v2 .w-mon small { align-self: start; line-height: 1.25; }
.w-mon-luoi-v2 .w-mon .w-mon-mui { top: 50%; transform: translateY(-50%); right: 10px; }
@media (max-width: 575.98px) { .w-mon-luoi-v2 .w-mon { padding: .65rem 1.3rem .65rem .65rem; column-gap: .6rem; } .w-mon-luoi-v2 .w-mon .w-mon-ic { margin: 0; } .w-mon-luoi-v2 .w-mon b { font-size: .9rem; } .w-mon-luoi-v2 .w-mon small { font-size: .75rem; } }
/* Lọc ajax: kết quả mờ đi trong lúc nạp */
[data-vung="kq"] { transition: opacity .15s; }
[data-vung="kq"].w-dang-loc { opacity: .45; pointer-events: none; }
/* Rê menu đầu trang (máy tính): phần trang bên dưới tối lại, đầu trang giữ sáng (lớp phủ nằm dưới .w-header z 1020) */
@media (min-width: 992px) and (hover: hover) {
  body::after { content: ""; position: fixed; inset: 0; z-index: 1019; background: rgba(15, 23, 42, .42); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
  body:has(.w-dau-duoi .w-mega:hover, .w-dau-duoi .w-mega.mo)::after { opacity: 1; visibility: visible; transition-delay: .07s, 0s; }
}
/* Trang chủ, điện thoại: ô tìm 2 cột (không có nút — chọn là đi luôn, web.js) */
@media (max-width: 575.98px) { .w-hero .w-tim { grid-template-columns: 1fr 1fr; gap: .6rem; padding: .8rem; } .w-hero .w-tim .w-tim-nut { display: none; } .w-hero .w-tim-o label { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .w-hero .w-tim .form-select { font-size: .92rem; padding-right: 1.9rem; } }
/* ===== Trang tin: gia sư đã ứng tuyển (partials/ung-tuyen-cong-khai) ===== */
#ung-vien { scroll-margin-top: calc(var(--w-dau, 120px) + 12px); }
.w-utc-so { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; margin-left: .3rem; border-radius: 99px; background: var(--bs-primary); color: #fff; font-size: .75rem; letter-spacing: 0; vertical-align: 1px; }
.w-utc-trong { padding: .9rem 1rem; border: 1px dashed var(--w-vien); border-radius: 12px; color: #58687e; background: #f8fafc; }
.w-utc { border: 1px solid var(--w-vien); border-radius: 12px; overflow: hidden; }
.w-utc-dau, .w-utc-dong { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1.3fr) 100px 64px 130px; gap: .9rem; align-items: center; padding: .65rem .9rem; }
.w-utc-dau { background: #f1f5f9; color: #475569; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.w-utc-dong { border-top: 1px solid var(--w-vien); font-size: .9rem; }
.w-utc-dong:nth-child(odd) { background: #fafcff; }
.w-utc-dong.duoc-chon { background: #f0fdf4; box-shadow: inset 3px 0 0 #16a34a; }
.w-utc-dong.la-toi { background: #eef4ff; box-shadow: inset 3px 0 0 var(--bs-primary); }
.w-utc-dong.mo-di > *:not(.w-utc-tt) { opacity: .55; }
.w-utc-dong small { display: block; color: #58687e; font-size: .8rem; line-height: 1.35; margin-top: .1rem; }
.w-utc-gs { display: flex; align-items: center; gap: .65rem; color: inherit; min-width: 0; }
.w-utc-gs:hover b { color: var(--bs-primary); }
.w-utc-anh { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #e0e7ff; color: #3730a3; font-weight: 700; }
.w-utc-anh img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.w-utc-anh .w-cham-online { width: 13px; height: 13px; border-width: 2px; right: -3px; bottom: -3px; }
.w-utc-ten { min-width: 0; }
.w-utc-ten b { color: #0f172a; font-weight: 600; }
.w-utc-ten em { font-style: normal; font-size: .68rem; font-weight: 700; color: #fff; background: var(--bs-primary); border-radius: 99px; padding: .05rem .45rem; margin-left: .35rem; vertical-align: 2px; }
.w-utc-ten small .w-huyhieu { margin-left: .2rem; vertical-align: 1px; }
.w-utc-gan { display: inline-block; font-size: .68rem; font-weight: 700; border-radius: 99px; padding: 0 .4rem; margin-left: .2rem; }
.w-utc-gan.gan { background: #dcfce7; color: #15803d; }
.w-utc-gan.vua { background: #e0f2fe; color: #0369a1; }
.w-utc-dg { white-space: nowrap; }
.w-utc-dg b i { color: #f59e0b; font-size: .8rem; }
.w-utc-tt { text-align: right; }
.w-utc:not(.mo) .w-utc-them { display: none; }
.w-utc-nut { margin: .15rem 0 0; } .w-utc-nut .btn { font-size: .8rem; text-decoration: none; }
@media (max-width: 767.98px) {
  .w-utc-dau { display: none; }
  .w-utc-dong { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; padding: .75rem; }
  .w-utc-gs { grid-column: 1; grid-row: 1; }
  .w-utc-tt { grid-column: 2; grid-row: 1; }
  .w-utc-td, .w-utc-noi, .w-utc-dg, .w-utc-hop { grid-column: 1 / -1; padding-left: calc(40px + .65rem); font-size: .85rem; }
  .w-utc-hop small { display: inline; margin-left: .35rem; }
  .w-utc-td small, .w-utc-noi small, .w-utc-dg small { display: inline; margin-left: .35rem; }
}
/* ===== Đăng nhập: vào nhanh máy dev ===== */
.w-dev-vao { margin-top: 1.5rem; padding: .9rem; border: 1px dashed #f59e0b; border-radius: 12px; background: #fffbeb; }
.w-dev-vao-dau { font-weight: 700; color: #92400e; margin-bottom: .6rem; }
.w-dev-vao-dau small { font-weight: 400; color: #a16207; margin-left: .3rem; }
.w-dev-vao-ds { display: grid; gap: .4rem; }
.w-dev-vao-nut { width: 100%; display: flex; align-items: center; gap: .65rem; text-align: left; border: 1px solid #fde68a; background: #fff; border-radius: 10px; padding: .5rem .7rem; }
.w-dev-vao-nut:hover { border-color: #f59e0b; box-shadow: 0 2px 8px rgba(245, 158, 11, .18); }
.w-dev-vao-nut > i { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.w-dev-vao-nut.giasu > i { background: #e0e7ff; color: #3730a3; }
.w-dev-vao-nut.phuhuynh > i { background: #dcfce7; color: #15803d; }
.w-dev-vao-nut b { display: block; font-weight: 600; color: #0f172a; }
.w-dev-vao-nut small { color: #58687e; }
.w-dev-vao-khac { display: flex; gap: .4rem; margin-top: .6rem; }
/* ===== Ví: mã VietQR chuyển khoản nạp (taikhoan/vi, assets/js/qr-nap.js) ===== */
.w-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.w-qr-nap { border: 2px solid var(--bs-primary); border-radius: 14px; margin-bottom: 1rem; overflow: hidden; background: #fff; }
.w-qr-nap-phu { border-width: 1px; border-color: var(--w-vien); }
.w-qr-nap-dau { background: #eef4ff; padding: .6rem .9rem; }
.w-qr-nap-dau b { display: block; color: var(--w-xanh-dam); }
details.w-qr-nap > summary { list-style: none; cursor: pointer; position: relative; padding-right: 2.4rem; }
details.w-qr-nap > summary::-webkit-details-marker { display: none; }
details.w-qr-nap > summary::after { content: ""; position: absolute; right: 1rem; top: 50%; width: .55rem; height: .55rem; border-right: 2px solid #58687e; border-bottom: 2px solid #58687e; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
details.w-qr-nap[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
details.w-qr-nap-phu > summary { background: #f8fafc; }
.w-qr-nap-dau small b.d-inline { display: inline; }
.w-qr-nap-dau small { color: #58687e; }
.w-qr-nap-than { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.25rem; padding: 1rem; align-items: center; }
.w-qr-hinh { width: 200px; aspect-ratio: 1; background: #fff; border: 1px solid var(--w-vien); border-radius: 10px; padding: 4px; }
.w-qr-hinh svg { width: 100%; height: 100%; display: block; }
.w-qr-tt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem .9rem; margin: 0; font-size: .95rem; max-width: 520px; }
.w-qr-tt dt { color: #58687e; font-weight: 400; }
.w-qr-tt dd { margin: 0; overflow-wrap: anywhere; }
.w-chep { border: 1px solid var(--w-vien); background: #fff; border-radius: 6px; font-size: .72rem; padding: .05rem .4rem; color: #475569; margin-left: .2rem; white-space: nowrap; }
.w-chep:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.w-chep.da-chep { background: #dcfce7; border-color: #86efac; color: #15803d; }
.w-qr-nap-chan { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .9rem; border-top: 1px dashed var(--w-vien); font-size: .8rem; color: #475569; }
.w-qr-nap-chan .btn { white-space: nowrap; flex: none; }
@media (max-width: 575.98px) { .w-qr-nap-than { grid-template-columns: 1fr; justify-items: center; } .w-qr-hinh { width: 220px; } .w-qr-tt { width: 100%; } .w-qr-nap-chan { flex-direction: column; align-items: stretch; } }

/* ===== Popup xác nhận (data-hoi → web.js) & trải nghiệm khu tài khoản trên điện thoại ===== */
.w-hoi-cau:empty, .w-hoi-them:empty { display: none; }
.w-hoi-cau { margin-bottom: 0; }
.w-hoi-cau:not(:empty) + .w-hoi-them { margin-top: .85rem; }
.w-hoi-tom { display: flex; gap: .75rem; align-items: center; margin-bottom: .8rem; }
.w-hoi-tom img, .w-hoi-tom .w-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.w-hoi-tom div { display: grid; line-height: 1.3; min-width: 0; }
.w-hoi-tom small { color: #58687e; }
.w-hoi-dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 .8rem; font-size: .92rem; background: var(--w-nen-nhe); border-radius: 10px; padding: .75rem .9rem; }
.w-hoi-dl dt { font-weight: 500; color: #58687e; }
.w-hoi-dl dd { margin: 0; }
.w-hoi-sau { padding-left: 1.1rem; margin: 0; font-size: .85rem; color: #58687e; }
.w-hoi-lydo { display: flex; flex-wrap: wrap; gap: .45rem; }
.w-hoi-lydo label { position: relative; cursor: pointer; }
.w-hoi-lydo input { position: absolute; opacity: 0; pointer-events: none; }
.w-hoi-lydo span { display: inline-block; border: 1px solid var(--w-vien); border-radius: 999px; padding: .4rem .85rem; font-size: .88rem; background: #fff; }
.w-hoi-lydo input:checked + span { border-color: var(--bs-primary); background: #eef4ff; color: var(--bs-primary); font-weight: 600; }
.w-hoi-lydo input:focus-visible + span { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.w-loc-tab { display: flex; gap: .4rem; overflow-x: auto; margin-bottom: 1rem; scrollbar-width: none; }
.w-loc-tab::-webkit-scrollbar { display: none; }
.w-loc-tab button { flex: none; border: 1px solid var(--w-vien); background: #fff; border-radius: 999px; padding: .38rem .9rem; font-size: .88rem; font-weight: 500; color: #334155; }
.w-loc-tab button b { color: #58687e; margin-left: .15rem; }
.w-loc-tab button.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.w-loc-tab button.active b { color: rgba(255, 255, 255, .85); }

/* Popup trên điện thoại: trượt từ đáy lên, nút to trong tầm ngón cái */
@media (max-width: 575.98px) {
  .modal-dialog, .modal-dialog.modal-dialog-centered { margin: 0; max-width: none; min-height: 100%; display: flex; align-items: flex-end; }
  .modal-content { border: 0; border-radius: 18px 18px 0 0; max-height: 92vh; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); }
  .modal-content::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #cbd5e1; }
  .modal-header { padding-top: 1.15rem; }
  .modal-body { overflow-y: auto; min-height: 0; }
  .modal.fade .modal-dialog { transform: translateY(100%); transition: transform .25s ease-out; }
  .modal.show .modal-dialog { transform: none; }
  .modal-footer { flex-wrap: nowrap; }
  .modal-footer > .btn { flex: 1; padding-top: .65rem; padding-bottom: .65rem; }
}

/* Điện thoại / máy tính bảng dọc (< 992px) */
@media (max-width: 991.98px) {
  /* Khu tài khoản bỏ chân trang lớn — đã có thanh tab dưới */
  body.khu-tk   /* Hội thoại toàn màn hình như app: ẩn đầu trang, khung chat phủ kín */
  body.chat-mo .w-header, body.chat-mo .w-len-dau { display: none; }
  body.chat-mo .w-chat { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: auto; min-height: 0; border: 0; border-radius: 0; grid-template-rows: minmax(0, 1fr); }
  body.chat-mo .w-chat-khung { min-height: 0; }
  body.chat-mo .w-chat-dau { padding-top: calc(.6rem + env(safe-area-inset-top)); }
  body.chat-mo .w-chat-gui { padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
}

/* ===== Hồ sơ gia sư (/toi/ho-so): thẻ % hoàn thiện + mục còn thiếu, thanh mục dính, các khối form ===== */
.w-hs-tom { display: flex; align-items: center; gap: 1.1rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.w-hs-vong { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--bs-primary) calc(var(--p) * 1%), #e5e9f0 0); }
.w-hs-vong b { width: 62px; height: 62px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.w-hs-tom-than { flex: 1; min-width: 0; }
.w-hs-tom-than h1 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .15rem; }
.w-hs-tom-than p { margin: 0; font-size: .88rem; color: #58687e; }
.w-hs-thieu { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.w-hs-thieu a { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: .8rem; font-weight: 500; }
.w-hs-thieu a:hover { background: #ffedd5; text-decoration: none; }
.w-hs-thieu b { color: #c2410c; }
.w-hs-tom-xem { flex: none; align-self: flex-start; }
.w-hs-nav { position: sticky; top: calc(var(--w-dau, 0px) + .5rem); z-index: 6; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; padding: .3rem; margin-bottom: 1rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .05); }
.w-hs-nav::-webkit-scrollbar { display: none; }
.w-hs-nav a { flex: none; padding: .4rem .8rem; border-radius: 8px; color: #475569; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.w-hs-nav a:hover { background: var(--w-nen-nhe); text-decoration: none; }
.w-hs-nav a.active { background: #eef4ff; color: var(--bs-primary); }
.w-hs-nav i { font-style: normal; font-size: .72rem; background: #e2e8f0; color: #334155; border-radius: 99px; padding: 0 .4rem; margin-left: .15rem; }
.w-form-hs .w-khoi { scroll-margin-top: calc(var(--w-dau, 0px) + 4.5rem); }
.w-hs-cb { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.5rem; }
.w-hs-cb-anh { text-align: center; }
.w-hs-cb-anh .form-text { font-size: .76rem; }
.w-hs-ngan { border-top: 1px dashed var(--w-vien); margin: 1.25rem 0; }
.w-hs-ht { display: flex; flex-wrap: wrap; gap: .4rem; }
.w-hs-them { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; padding: .75rem; border: 0; border-top: 1px dashed #bfdbfe; background: #f8fbff; color: var(--bs-primary); font-weight: 600; border-radius: 0 0 14px 14px; }
.w-hs-them:hover { background: #eef4ff; }
.w-hs-gt { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .84rem; font-weight: 600; }
.w-hs-gt-success { background: #dcfce7; color: #166534; }
.w-hs-gt-warning { background: #fef9c3; color: #854d0e; }
.w-hs-gt-danger { background: #fee2e2; color: #991b1b; }
.w-bang-mon-sua .input-group-text { font-size: .8rem; padding-inline: .5rem; }
/* Ảnh đại diện chưa công khai (kiểm duyệt tự động): nhãn "Chỉ bạn thấy" + hộp trạng thái */
.w-anh-cho img { filter: saturate(.6); outline: 2px dashed #f59e0b; outline-offset: 3px; }
.w-anh-nhan { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); white-space: nowrap; background: rgba(15, 23, 42, .78); color: #fff; font-size: .68rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; }
.w-hs-anh-tt { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; font-size: .88rem; }
.w-hs-anh-tt > i { margin-top: .2rem; color: #d97706; }
.w-hs-anh-tt b { display: block; color: #92400e; }
.w-hs-anh-tt-cho_cham, .w-hs-anh-tt-xem_lai { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.w-hs-anh-tt-cho_cham > i, .w-hs-anh-tt-xem_lai > i, .w-hs-anh-tt-cho_cham b, .w-hs-anh-tt-xem_lai b { color: #1d4ed8; }
.w-hs-anh-nut { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
/* Điện thoại: thẻ % gọn, ảnh cạnh chữ, mỗi môn 2 hàng (Môn · Lớp | Học phí · Thời lượng) không nhãn lặp */
@media (max-width: 767.98px) {
  .w-hs-tom { flex-wrap: wrap; gap: .5rem .9rem; padding: .9rem 1rem; }
  .w-hs-vong { width: 60px; height: 60px; }
  .w-hs-vong b { width: 48px; height: 48px; font-size: .95rem; }
  .w-hs-tom-than h1 { font-size: 1.1rem; }
  .w-hs-tom-than { flex-basis: calc(100% - 76px); }
  .w-hs-tom-xem { order: 3; margin-left: 69px; }
  .w-hs-nav { top: calc(var(--w-dau, 0px) + .35rem); margin-bottom: .75rem; }
  .w-hs-cb { grid-template-columns: 1fr; gap: 1rem; }
  .w-hs-cb-anh { display: flex; align-items: center; gap: 1rem; text-align: left; }
  .w-hs-cb-anh .w-anh-chon img, .w-hs-cb-anh .w-avatar-lon { width: 84px; height: 84px; }
  .w-hs-ngan { margin: 1rem 0; }
  .w-bang-mon-sua thead { display: none; }
  .w-bang-mon-sua, .w-bang-mon-sua tbody { display: block; }
  .w-bang-mon-sua tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .5rem; padding: .75rem .75rem .75rem 1rem; border-bottom: 1px solid var(--w-vien); }
  .w-bang-mon-sua td { display: block; padding: 0; border: 0; }
  .w-bang-mon-sua td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .w-bang-mon-sua td:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .w-bang-mon-sua td:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
  .w-bang-mon-sua td:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
  .w-bang-mon-sua td:nth-child(5) { grid-area: 1 / 3 / 3 / 4; align-self: center; }
  .w-bang-mon-sua .form-select-sm, .w-bang-mon-sua .form-control { font-size: 1rem; padding-top: .45rem; padding-bottom: .45rem; }
}

/* Cột hội thoại: ô tìm + lọc Tất cả / Chưa đọc + tự nạp thêm khi cuộn */
.w-chat-ds-dau { display: grid; gap: .55rem; justify-content: stretch; }
@media (min-width: 768px) {
  .w-chat-mot .w-chat-ds-dau { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; }
  .w-chat-mot .w-chat-ds-dau > div:first-child { grid-column: 1 / -1; }
}
.w-chat-tim { position: relative; }
.w-chat-tim i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .85rem; pointer-events: none; }
.w-chat-tim input { width: 100%; border: 1px solid var(--w-vien); border-radius: 999px; background: var(--w-nen-nhe); padding: .45rem .9rem .45rem 2.1rem; font-size: 1rem; outline: 0; }
.w-chat-tim input:focus { border-color: var(--bs-primary); background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.w-chat-loc { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.w-chat-loc::-webkit-scrollbar { display: none; }
.w-chat-loc a { flex: none; white-space: nowrap; border: 1px solid var(--w-vien); border-radius: 999px; padding: .22rem .65rem; font-size: .83rem; font-weight: 500; color: #334155; background: #fff; }
.w-chat-loc a:hover { text-decoration: none; background: var(--w-nen-nhe); }
.w-chat-loc a.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.w-chat-loc b { display: inline-block; min-width: 1.2rem; margin-left: .2rem; padding: 0 .3rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .72rem; text-align: center; }
.w-chat-them { padding: .6rem 1rem 1rem; text-align: center; }
.w-chat-them:empty { display: none; }
.w-chat-them .dang i { animation: fa-spin 1s linear infinite; }
.w-chat-them .dang i::before { content: "\f110"; }
.w-chat-ds.dang-loc [data-ds-kq] { opacity: .5; transition: opacity .15s; }

/* Khung chat nổi kiểu Messenger (PC) + hộp Tin nhắn đầu trang — web.js */
.w-pc { position: fixed; right: 84px; bottom: 0; z-index: 1040; display: flex; flex-direction: row; align-items: flex-end; gap: 12px; pointer-events: none; }
.w-pc-cua { pointer-events: auto; width: 340px; height: 470px; max-height: calc(100vh - 100px); background: #fff; border: 1px solid var(--w-vien); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 12px 40px rgba(15, 23, 42, .2); display: flex; flex-direction: column; overflow: hidden; }
.w-pc-cua.thu { height: auto; width: 260px; }
.w-pc-cua.thu .w-pc-than, .w-pc-cua.thu .w-pc-gui { display: none; }
.w-pc-dau { display: flex; align-items: center; gap: .55rem; padding: .45rem .4rem .45rem .7rem; border-bottom: 1px solid var(--w-vien); cursor: pointer; user-select: none; }
.w-pc-dau .w-avatar { width: 34px; height: 34px; font-size: .85rem; object-fit: cover; }
.w-pc-ten { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.w-pc-ten b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-pc-ten small { font-size: .72rem; color: #58687e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-pc-nut { flex: none; border: 0; background: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #58687e; font-size: .85rem; }
.w-pc-nut:hover { background: var(--w-nen-nhe); color: var(--bs-primary); text-decoration: none; }
.w-pc-cua.thu [data-pc-thu] i { transform: rotate(180deg); }
.w-pc-cua.co-moi .w-pc-dau { background: #eef4ff; }
.w-pc-cua.co-moi .w-pc-ten b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: .35rem; border-radius: 50%; background: #dc2626; vertical-align: middle; }
.w-pc-than { flex: 1; min-height: 0; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .45rem; background: #f8fafc; }
.w-pc-than .w-tn { max-width: 86%; }
.w-pc-than .w-tn-denghi { min-width: 0; }
.w-pc-trong { margin: auto; color: #94a3b8; font-size: .85rem; text-align: center; }
.w-pc-gui { display: flex; gap: .4rem; align-items: flex-end; padding: .5rem; border-top: 1px solid var(--w-vien); }
.w-pc-gui textarea { flex: 1; resize: none; max-height: 100px; border: 1px solid var(--w-vien); border-radius: 18px; padding: .4rem .85rem; font-size: .9rem; line-height: 1.4; outline: 0; }
.w-pc-gui textarea:focus { border-color: var(--bs-primary); }
.w-pc-gui button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--bs-primary); color: #fff; }
@media (max-width: 991.98px) { .w-pc { display: none; } }
.w-dau-tn { position: relative; }
.w-hop-tn { position: absolute; right: -40px; top: calc(100% + 10px); z-index: 1050; width: 370px; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; box-shadow: 0 18px 44px rgba(15, 23, 42, .16); overflow: hidden; text-align: left; }
.w-hop-tn-dau { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--w-vien); }
.w-hop-tn-than { max-height: min(460px, calc(100vh - 160px)); overflow-y: auto; }

/* Thẻ mời bật thông báo đẩy (web.js) */
.w-push-moi { position: fixed; left: 16px; bottom: 16px; z-index: 1035; width: min(380px, calc(100vw - 32px)); display: flex; gap: .75rem; align-items: flex-start; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .9rem 1rem .6rem; box-shadow: 0 14px 40px rgba(15, 23, 42, .18); }
.w-push-moi[hidden] { display: none; }
.w-push-moi-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #eef4ff; color: var(--bs-primary); font-size: 1.05rem; }
.w-push-moi b { font-size: .95rem; }
.w-push-moi small { display: block; color: #58687e; margin-top: .15rem; line-height: 1.4; }
.w-push-moi small b { font-size: inherit; color: #334155; }
.w-push-moi-nut { display: flex; gap: .25rem; margin-top: .55rem; }
.w-push-ios, .w-push-moi.ios .w-push-thuong { display: none; }
.w-push-moi.ios .w-push-ios { display: block; }
.w-cai-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, .15); }
.w-cai .w-cai-ios, .w-cai.ios .w-cai-adr { display: none; }
.w-cai.ios small.w-cai-ios { display: block; }
.w-cai.ios .btn.w-cai-ios { display: inline-block; }
@media (max-width: 991.98px) { body.co-tab-duoi .w-push-moi { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* Trang tin: hàng nút hành động ngay trong khung đầu (ứng tuyển → popup, đã ứng tuyển → nhắn / rút) */
.w-tin-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--w-vien); }
.w-tin-cta form { margin: 0; }
@media (max-width: 575.98px) { .w-tin-cta > .btn-lg { flex: 1 1 100%; } }

/* Hội thoại: gợi ý hẹn học thử / chốt lớp, lỗi gửi ngay trên ô nhập, thanh bị chặn */
.w-chat-nhac { display: flex; gap: .7rem; align-items: flex-start; margin: 0 1rem .5rem; padding: .7rem .8rem; border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 12px; font-size: .88rem; }
.w-chat-nhac[hidden] { display: none; }
.w-chat-nhac > i { color: #d97706; font-size: 1.1rem; margin-top: .1rem; }
.w-chat-nhac b { display: block; }
.w-chat-nhac small { display: block; color: #475569; }
.w-chat-nhac-nut { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.w-chat-nhac .btn-close { font-size: .65rem; }
.w-chat-loi { margin: 0 1rem .35rem; padding: .45rem .75rem; border-radius: 10px; background: #fef3c7; color: #92400e; font-size: .85rem; }
.w-pc-cua .w-chat-loi { margin: .4rem .5rem 0; font-size: .8rem; }
.w-chat-loi[hidden] { display: none; }
.w-chat-khoa { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--w-vien); background: var(--w-nen-nhe); color: #58687e; font-size: .88rem; text-align: center; }
.w-chat-khoa form { margin: 0; }
.w-tn-henthu { border-color: #93c5fd; }
.w-tn-henthu .w-tn-denghi-dau { background: #dbeafe; color: #1e40af; }
.w-chat-loc i { font-style: normal; color: #58687e; margin-left: .15rem; }
.w-chat-loc a.active i { color: rgba(255, 255, 255, .85); }
.w-chat-loc a .fa-box-archive { margin: 0 .15rem 0 0; color: inherit; }
.w-chat-tatbao { color: #94a3b8; font-size: .75rem; margin-left: .25rem; }

.w-chat-dang-mo .w-chu-lt { display: none; }
.w-chat-dang-mo .w-chat-loc a { padding-left: .55rem; padding-right: .55rem; } /* cột danh sách hẹp cạnh khung chat: chip Lưu trữ chỉ còn biểu tượng + số */

/* Điện thoại: có tin nhắn mới khi đang online → thông báo nhỏ trượt từ trên (web.js), bấm mở hội thoại */
.w-bao-tn { position: fixed; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); z-index: 1080; display: flex; gap: .65rem; align-items: center; padding: .65rem .8rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, .2); color: inherit; transform: translateY(calc(-100% - 20px)); transition: transform .25s ease; }
.w-bao-tn.hien { transform: none; }
.w-bao-tn:hover { color: inherit; text-decoration: none; }
.w-bao-tn .w-avatar { width: 38px; height: 38px; object-fit: cover; }
.w-bao-tn div { min-width: 0; display: grid; line-height: 1.3; }
.w-bao-tn b { font-size: .9rem; }
.w-bao-tn b small { color: #58687e; font-weight: 500; }
.w-bao-tn span { font-size: .85rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) { .w-bao-tn { display: none; } }

/* /lop: thanh "Có N lớp mới" (bấm chèn lên đầu, không tải lại), đánh dấu mới với bạn / đã xem đến đây / đã bấm xem (web.js) */
.w-lop-moi-thanh { position: sticky; top: calc(var(--w-dau, 72px) + 8px); z-index: 5; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin: 0 0 .75rem; padding: .6rem 1rem; border: 0; border-radius: 999px; background: var(--bs-primary); color: #fff; font-weight: 600; box-shadow: 0 8px 22px rgba(37, 99, 235, .3); }
.w-lop-moi-thanh[hidden] { display: none; }
.w-lop-moi-thanh:hover { background: #0b5ed7; }
.w-tin.w-moi-voi-ban { box-shadow: inset 3px 0 0 var(--bs-primary); background: #f5f9ff; }
.w-bang-lop tr.w-moi-voi-ban > td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }
.w-bang-lop tr.w-moi-voi-ban > td { background: #f5f9ff; }
.w-da-xem h3 a, .w-bang-lop tr.w-da-xem .w-bl-lop > a { color: #58687e; }
.w-tin.w-da-xem { opacity: .8; }
.w-moc-xem { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; color: #58687e; font-size: .8rem; font-weight: 600; margin: .25rem 0; }
.w-moc-xem::before, .w-moc-xem::after { content: ""; flex: 1; height: 1px; background: var(--w-vien); }
tr.w-moc-xem { display: table-row; }
tr.w-moc-xem td { padding: .45rem .75rem; text-align: center; color: #58687e; font-size: .78rem; font-weight: 600; background: var(--w-nen-nhe); }
tr.w-moc-xem::before, tr.w-moc-xem::after { display: none; }

/* /gia-su: vị trí của gia sư đang xem · thẻ của chính mình · hồ sơ đã xem */
.w-vi-tri { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .6rem .9rem; margin: 0 0 1rem; border: 1px solid #c7d2fe; background: #eef2ff; border-radius: .6rem; font-size: .9rem; color: #312e81; }
.w-vi-tri > i { color: #4f46e5; }
.w-vi-tri a { font-weight: 600; white-space: nowrap; }
.w-the.w-cua-toi { outline: 2px solid #2563eb; outline-offset: 2px; }
tr.w-cua-toi, tr.w-cua-toi > td { background: #eef2ff !important; --bs-table-bg: #eef2ff; --bs-table-accent-bg: #eef2ff; }
tr.w-cua-toi > td:first-child { box-shadow: inset 3px 0 0 #2563eb; }
[data-the-gs].w-da-xem .w-the-dau h3::after, tr[data-the-gs].w-da-xem .w-bg-hoten::after { content: "Đã xem"; margin-left: .4rem; font-size: .7rem; font-weight: 600; color: #58687e; background: #f1f5f9; border-radius: 999px; padding: .1rem .45rem; vertical-align: middle; }
tr[data-the-gs].w-da-xem .w-bg-hoten { color: #58687e; }
.w-the[id^="gs-"] { scroll-margin-top: 140px; } /* neo #gs-{id} (Xem hồ sơ của tôi) không bị đầu trang dính che */

/* Trang lớp: nhịp tin bên trái (2 cột), cột phải = khối bối cảnh */
.w-nhip-trai ul { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.25rem; font-size: .92rem; }
.w-nhip-trai li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .45rem; align-items: baseline; }
.w-nhip-trai li > i { color: #58687e; text-align: center; }
@media (max-width: 575.98px) { .w-nhip-trai ul { grid-template-columns: 1fr; } }
.w-ds-icon { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .9rem; color: #334155; }
.w-ds-icon li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .5rem; align-items: baseline; }
.w-ds-icon li > i { color: #94a3b8; text-align: center; }
.w-ds-icon li.ok > i { color: #16a34a; }
.w-ds-icon li.canh > i { color: #d97706; }
.w-hop-diem { font-size: .85rem; font-weight: 800; letter-spacing: 0; color: #b45309; background: #fef3c7; border-radius: 99px; padding: .1rem .55rem; }
.w-hop-diem.du { color: #15803d; background: #dcfce7; }
.w-ql-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; text-align: center; }
.w-ql-so > * { border: 1px solid var(--w-vien); border-radius: 10px; padding: .55rem .3rem; color: inherit; }
.w-ql-so a:hover { border-color: var(--bs-primary); }
.w-ql-so b { display: block; font-size: 1.25rem; color: #0f172a; }
.w-ql-so small { display: block; font-size: .72rem; color: #58687e; line-height: 1.25; }
.w-lop-gon { display: grid; }
.w-lop-gon a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .5rem; padding: .55rem 0; border-top: 1px solid var(--w-vien); color: inherit; }
.w-lop-gon a:first-child { border-top: 0; }
.w-lop-gon a:hover b { color: var(--bs-primary); }
.w-lop-gon b { font-weight: 600; font-size: .9rem; }
.w-lop-gon-gia { font-weight: 700; color: var(--w-xanh-dam); font-size: .9rem; }
.w-lop-gon small { grid-column: 1 / -1; color: #58687e; font-size: .8rem; }
.w-cot-phai .w-hs-cam-ket { margin: 1rem .25rem 0; }

/* Một SĐT hai vai: nút bật / chuyển vai trong menu tài khoản */
.w-doi-vai { margin: 0; }
.w-tk-menu .w-doi-vai button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem 1rem; border: 0; border-left: 3px solid transparent; border-top: 1px solid var(--w-vien); background: #fff; color: var(--bs-primary); font-weight: 600; text-align: left; }
.w-tk-menu .w-doi-vai button:hover { background: #eef4ff; }
.w-ngan-ds .w-doi-vai button { color: var(--bs-primary); border-bottom: 1px solid var(--w-vien); font-weight: 600; }

/* Hộp thư chung của tài khoản hai vai: nhãn mình là bên nào trong từng hội thoại */
.w-chat-vai { display: inline-block; padding: .05rem .45rem; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: .68rem; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.w-chat-dau .flex-none { flex: none; }
.w-chat-dau .btn { white-space: nowrap; }
/* Tin nhắc chuyển tiền / đặt cọc: cảnh báo người nhận */
.w-tn-canh { display: flex; gap: .45rem; align-items: flex-start; margin-top: .3rem; max-width: 100%; padding: .45rem .65rem; border: 1px solid #fcd34d; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: .78rem; line-height: 1.45; }
.w-tn-canh i { margin-top: .15rem; color: #d97706; }
.w-tn-canh a { font-weight: 600; color: #b45309; text-decoration: underline; }

/* Hồ sơ gia sư: số hiện sau khi bấm nút Gọi */
.w-goi-so { display: inline-flex; gap: .4rem; }
.w-hs-hanhdong .btn { white-space: nowrap; }
@media (max-width: 575.98px) { .w-goi-so { flex-basis: 100%; order: 5; } .w-goi-so .btn:first-child { flex: 1; } }

/* /lop: dải theo vai người xem + nhãn trên thẻ tin */
.w-lop-cn { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid #c7d2fe; border-radius: 12px; background: #eef2ff; color: #312e81; }
.w-lop-cn > i { font-size: 1.1rem; color: #4f46e5; }
.w-lop-cn-than { flex: 1 1 260px; min-width: 0; }
.w-lop-cn-than b { display: block; font-size: .95rem; }
.w-lop-cn-than small { display: block; color: #6366a8; }
.w-lop-hai { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.w-lop-hai-o { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.w-lop-hai-o:hover { border-color: #93c5fd; box-shadow: 0 6px 18px -10px rgba(37, 99, 235, .45); }
.w-lop-hai-o > i:first-child { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #eff6ff; color: #2563eb; font-size: 1.05rem; }
.w-lop-hai-o span { flex: 1; min-width: 0; }
.w-lop-hai-o b { display: block; }
.w-lop-hai-o small { display: block; color: #58687e; line-height: 1.4; }
.w-lop-hai-o > i:last-child { color: #94a3b8; }
.w-lop-hai-o small.w-lop-hai-ngan { display: none; }
/* Điện thoại: hai thẻ cùng một hàng, chữ ngắn, bỏ mũi tên */
@media (max-width: 575.98px) {
  .w-lop-hai { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .w-lop-hai-o { gap: .5rem; padding: .6rem .65rem; align-items: flex-start; }
  .w-lop-hai-o > i:first-child { width: 30px; height: 30px; font-size: .9rem; border-radius: 8px; }
  .w-lop-hai-o > i:last-child, .w-lop-hai-o small { display: none; }
  .w-lop-hai-o small.w-lop-hai-ngan { display: block; font-size: .74rem; line-height: 1.35; }
  .w-lop-hai-o b { font-size: .88rem; line-height: 1.3; }
}
.w-nhan.w-nhan-toi { display: inline-block; background: #dcfce7; color: #166534; font-size: .68rem; font-weight: 700; padding: .12rem .5rem; white-space: nowrap; }
.w-nhan.w-nhan-ut { display: inline-block; background: #e0f2fe; color: #075985; font-size: .68rem; font-weight: 700; padding: .12rem .5rem; white-space: nowrap; }

/* Hồ sơ gia sư khác (người xem là gia sư): bảng so sánh */
.w-ss { width: 100%; font-size: .86rem; border-collapse: collapse; }
.w-ss th { font-size: .75rem; color: #58687e; font-weight: 600; text-align: right; padding: 0 0 .35rem; }
.w-ss th:nth-child(2) { color: #4f46e5; }
.w-ss td { padding: .38rem 0; border-top: 1px solid #eef2f7; text-align: right; white-space: nowrap; font-weight: 600; }
.w-ss td:first-child { text-align: left; font-weight: 400; color: #475569; white-space: normal; padding-right: .5rem; }
.w-ss td:nth-child(2) { padding-right: .9rem; }
.w-ss td.text-success, .w-ss td.text-danger { font-weight: 700; }
.w-ss-goi-y { margin: 0; padding-left: 1.1rem; font-size: .84rem; line-height: 1.5; }

/* Dải vị trí ở /gia-su: lý do chưa có trong danh sách */
.w-vi-tri:has(.w-vi-tri-ly) { align-items: flex-start; }
.w-vi-tri-ly { flex: 1 1 320px; min-width: 0; }
.w-vi-tri-ly ul { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.w-vi-tri-ly li { position: relative; padding-left: .9rem; font-size: .9rem; line-height: 1.45; }
.w-vi-tri-ly li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; }
.w-vi-tri-ly li a { margin-left: .5rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 575.98px) { .w-vi-tri-ly { flex-basis: calc(100% - 1.6rem); } .w-vi-tri:has(.w-vi-tri-ly) > .ms-auto { margin-left: 1.6rem !important; } .w-vi-tri-ly li a { margin-left: 0; display: inline-block; } .w-vi-tri-ly li span { margin-right: .4rem; } }

/* Popup úp hồ sơ: vị trí hiện tại */
.w-up-vt { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .5rem; padding: .7rem .9rem; border-radius: 12px; background: #f1f5f9; }
.w-up-vt span { width: 100%; font-size: .78rem; color: #58687e; text-transform: uppercase; letter-spacing: .03em; }
.w-up-vt b { font-size: 1.6rem; line-height: 1; }
.w-up-vt small { color: #58687e; }
.modal .w-up { margin-top: 0; }

/* Tổng quan gia sư: úp hồ sơ miễn phí */
.w-up { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .85rem 1rem; border: 1px solid #dbe4f0; border-radius: 14px; background: #fff; }
.w-up-san { border-color: #86efac; background: linear-gradient(90deg, #f0fdf4, #fff 70%); }
.w-up-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #e0f2fe; color: #0369a1; font-size: 1.1rem; }
.w-up-san .w-up-icon { background: #dcfce7; color: #15803d; }
.w-up-than { flex: 1; min-width: 0; }
.w-up-than b { display: block; }
.w-up-than small { display: block; color: #58687e; line-height: 1.45; }
.w-up form { flex: none; }
.w-up-cho { flex: none; font-size: .85rem; color: #58687e; white-space: nowrap; }
@media (max-width: 575.98px) { .w-up { flex-wrap: wrap; } .w-up form, .w-up > .btn { width: 100%; } .w-up form .btn { width: 100%; } .w-up-cho { margin-left: calc(42px + .9rem); } }

/* Popup ứng tuyển: phí lượt này */
.w-ut-phi { padding: .65rem .8rem; border: 1px solid #dbe4f0; border-radius: 12px; background: #f8fafc; }
.w-ut-phi-dau { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .9rem; }
.w-ut-phi-gia { font-size: 1.05rem; color: #0f766e; white-space: nowrap; }
.w-ut-phi small { display: block; margin-top: .2rem; color: #58687e; line-height: 1.45; }
.w-ut-phi .form-check-label { font-size: .86rem; }
.w-ut-thieu { margin-top: .4rem; font-size: .82rem; color: #b91c1c; }
.w-ut-thieu a { font-weight: 600; }

/* Form đăng tin: nút chọn 1 chạm, số bước, gợi ý học phí, tóm tắt thanh dưới */
.w-form-tin .w-khoi + .w-khoi { margin-top: 1rem; }
.w-so-buoc { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: .8rem; font-weight: 700; margin-right: .35rem; vertical-align: 1px; }
.w-chon { display: flex; flex-wrap: wrap; gap: .4rem; }
.w-chon .btn { border-radius: 10px; padding: .45rem .85rem; font-weight: 500; border-color: var(--w-vien); color: #334155; background: #fff; }
.w-chon .btn:hover { border-color: var(--bs-primary); color: var(--bs-primary); background: #fff; }
.w-chon .btn-check:checked + .btn { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.w-chon .btn-check:disabled + .btn { opacity: .45; }
.w-chon-ngay .btn { min-width: 3.1rem; }
.w-hp-goi-y { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .82rem; color: #58687e; min-height: 38px; }
.w-hp-goi-y button { border: 1px dashed #93c5fd; background: #eff6ff; color: #1d4ed8; border-radius: 8px; padding: .25rem .55rem; font-weight: 600; }
.w-hp-goi-y button small { font-weight: 400; color: #475569; }
.w-hp-goi-y button:hover { border-style: solid; }
.w-ft-tom { min-width: 0; display: grid; font-size: .9rem; line-height: 1.3; }
.w-ft-tom b, .w-ft-tom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-ft-tom span:not(.text-secondary) { color: #475569; font-size: .84rem; }
@media (max-width: 575.98px) { .w-chon .btn { padding: .42rem .7rem; } .w-chon-ngay { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .w-chon-ngay .btn { min-width: 0; padding-inline: 0; } }
/* Đăng tin: lưới lịch ngày × ca */
.w-lich-luoi { display: grid; gap: 4px; max-width: 640px; }
.w-ll-dau, .w-ll-hang { display: grid; grid-template-columns: 4.2rem repeat(7, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.w-ll-dau button { border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; border-radius: 8px; padding: .3rem 0; font-size: .84rem; font-weight: 600; }
.w-ll-dau button:hover { border-color: #93c5fd; }
.w-ll-dau button.co { color: var(--bs-primary); border-color: #93c5fd; }
.w-ll-dau button.du { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.w-ll-hang > b { display: flex; align-items: center; font-size: .84rem; font-weight: 600; color: #475569; }
.w-ll-hang label { position: relative; margin: 0; cursor: pointer; }
.w-ll-hang input { position: absolute; opacity: 0; pointer-events: none; }
.w-ll-hang label span { display: grid; place-items: center; height: 38px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: transparent; font-size: .8rem; transition: background .12s, border-color .12s; }
.w-ll-hang label:hover span { border-color: #93c5fd; background: #f0f7ff; }
.w-ll-hang input:checked + span { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.w-ll-hang input:focus-visible + span { outline: 2px solid #93c5fd; outline-offset: 1px; }
/* Đăng tin: học phí — 3 mức, ô nhập + ≈ tháng, đường cung */
.w-hp-bac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .5rem; max-width: 640px; }
.w-hp-bac:empty { display: none; }
.w-hp-bac button { display: grid; gap: 1px; text-align: left; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: .45rem .7rem; line-height: 1.25; }
.w-hp-bac button b { font-size: 1rem; color: #0f172a; }
.w-hp-bac button small { color: #58687e; font-size: .76rem; }
.w-hp-bac button:hover { border-color: #93c5fd; }
.w-hp-bac button.chon { border-color: var(--bs-primary); background: #eff6ff; box-shadow: inset 0 0 0 1px var(--bs-primary); }
.w-hp-nhap { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.w-hp-nhap .input-group { max-width: 300px; }
.w-hp-thang b { color: #0f172a; }
.w-hp-thang { font-size: .86rem; color: #475569; }
.w-hp-cung { margin-top: .45rem; font-size: .86rem; border-radius: 8px; padding: .4rem .65rem; max-width: 640px; }
.w-hp-cung i { margin-right: .2rem; }
.w-hp-cung.du { background: #f0fdf4; color: #166534; }
.w-hp-cung.it { background: #fffbeb; color: #92400e; }
.w-hp-cung.khong { background: #fef2f2; color: #991b1b; }
.w-hp-cung.nhac { background: #eff6ff; color: #1e40af; }
/* Trang đăng / sửa tin trên điện thoại = màn nhập liệu như app: bỏ ô tìm, menu tài khoản, thanh tab, chân trang; khối tràn viền; thanh Đăng tin dính đáy */
@media (max-width: 575.98px) {
  body.w-trang-form { padding-bottom: 0; }
  body.w-trang-form .w-header:not(.tim-mo) .w-omni, body.w-trang-form .w-tab-duoi, body.w-trang-form .w-footer, body.w-trang-form .w-len-dau, body.w-trang-form .w-push-moi { display: none !important; }
  body.w-trang-form .w-main > .container { padding-top: 1rem !important; }
  body.w-trang-form .w-main > .container > .row { --bs-gutter-x: 0; }
  body.w-trang-form .w-form-tin .w-khoi { margin-inline: -.75rem; border-radius: 0; border-left: 0; border-right: 0; }
  body.w-trang-form .w-form-tin .w-khoi + .w-khoi { margin-top: .6rem; }
  body.w-trang-form .w-form-tin .w-luu-thanh { bottom: 0 !important; margin-inline: -.75rem; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
}
.w-ft-thoat { display: none; }
.w-ft-nhap { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 12px; padding: .6rem .9rem; margin-bottom: 1rem; font-size: .9rem; }
.w-ft-nhap span { flex: 1; min-width: 12rem; }
.w-ft-goiy { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.w-ft-nhap.w-ft-goiy .btn-link { color: #1e40af; }
.w-ft-nhap .btn-link { color: #92400e; text-decoration: none; }
@media (max-width: 575.98px) {
  .w-ft-thoat { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin: 0 .35rem 0 -.35rem; border-radius: 50%; color: #334155; vertical-align: -2px; font-size: 1rem; }
  .w-ft-thoat:active { background: #f1f5f9; }
  body.w-trang-form .w-ft-nhap { margin: 0 -.75rem .6rem; border-radius: 0; border-left: 0; border-right: 0; }
}
.w-hp-kq { display: block; margin-top: .15rem; font-size: .8rem; opacity: .9; }
.w-hp-cung button { border: 0; background: none; padding: 0; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 575.98px) {
  .w-ll-dau, .w-ll-hang { grid-template-columns: 2.9rem repeat(7, minmax(0, 1fr)); gap: 3px; }
  .w-ll-dau button { font-size: .76rem; padding: .28rem 0; }
  .w-ll-hang > b { font-size: .76rem; }
  .w-ll-hang label span { height: 34px; }
  .w-hp-bac { gap: .35rem; }
  .w-hp-bac button { padding: .4rem .4rem; }
  .w-hp-bac button b { font-size: .9rem; }
  .w-hp-bac button small { font-size: .68rem; white-space: nowrap; letter-spacing: -.01em; }
  .w-hp-nhap .input-group { max-width: none; }
}
.w-form-tin .w-luu-thanh { flex-wrap: nowrap; margin-top: 1rem; }
.w-chon .w-ngan { display: none; }
/* Form tin: ô chọn / ô nhập tự nói tên (Chọn môn, Phường / xã, Mọi trình độ…) → nhãn chỉ để trình đọc màn hình */
.w-an-nhan { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.w-dong-mb { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.w-dong-mb .form-label { margin: 0; }
.w-form-tin .form-select.co-gt:not(.is-invalid) { background-color: #eff6ff; border-color: #93c5fd; color: #1e3a8a; font-weight: 500; }
@media (max-width: 575.98px) {
  /* Form tin trên điện thoại: bỏ nhãn thừa (ô chọn tự nói tên), 2 ô một hàng, hình thức 3 nút đều */
  .w-form-tin .w-an-mb { display: none !important; }
  .w-form-tin .w-khoi-dau { padding: .7rem 1rem; }
  .w-form-tin .w-khoi-than { padding: 1rem; }
  .w-form-tin .row.g-3 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
  .w-form-tin .form-label { margin-bottom: .35rem; }
  .w-form-tin .form-select { padding-left: .65rem; padding-right: 1.8rem; background-position: right .5rem center; }
  .w-chon-deu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-chon-deu .btn { padding-inline: .25rem; }
  .w-chon .w-dai { display: none; }
  .w-chon .w-ngan { display: inline; }
  .w-dong-mb { justify-content: space-between; gap: .5rem; flex-wrap: nowrap; }
}
.w-form-tin .w-luu-thanh .btn { flex: none; }
@media (max-width: 575.98px) { .w-form-tin .w-luu-thanh { padding: .6rem .75rem; gap: .6rem; } .w-form-tin .w-luu-thanh .btn-lg { font-size: 1rem; padding: .5rem .9rem; } }

/* Ô nút cuối bảng (/lop, /gia-su): .w-bl-nut là inline-flex cho nút ở nơi khác → ô bảng phải giữ table-cell, không thì lệch dòng/viền */
td.w-bl-nut { display: table-cell; vertical-align: middle; }
td.w-bl-nut > form { display: inline-block; margin: 0 0 0 .35rem; vertical-align: middle; }
/* Dải vị trí gia sư: chữ + link bên trái, Úp / Cách lên cao hơn bên phải */
.w-vi-tri-than { flex: 1 1 360px; min-width: 0; }
.w-vi-tri-lk { display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; margin-top: .2rem; }
.w-vi-tri-lk i { font-size: .8em; opacity: .8; }
@media (max-width: 575.98px) { .w-vi-tri { align-items: flex-start; } .w-vi-tri > i { margin-top: .2rem; } .w-vi-tri-than { flex-basis: calc(100% - 1.6rem); } .w-vi-tri > .ms-auto { margin-left: 1.6rem !important; } .w-vi-tri-lk { flex-direction: column; } }
/* Thẻ gia sư: một nút → cả hàng; nút không xuống dòng. Có Lưu: điện thoại Xem | Liên hệ | ♡ cùng hàng, màn rộng (cột phải hẹp) Lưu xuống hàng riêng */
.w-the-nut > :only-child, .w-the-nut > form { grid-column: 1 / -1; }
.w-the-nut .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
  .w-the-nut > form { grid-column: auto; }
  .w-the-nut:has(form) { grid-template-columns: 1fr 1fr auto; }
  .w-the-nut:has(form):not(:has(a + a)) { grid-template-columns: 1fr auto; }
}
/* /gia-su: nút lưu trên bảng (phụ huynh) */
.w-bg-luu { color: #94a3b8; border: 1px solid var(--bs-border-color); padding: .2rem .5rem; line-height: 1.2; }
.w-bg-luu:hover, .w-bg-luu.da-luu { color: #dc2626; border-color: #fca5a5; }

/* /gia-su, /lop trên điện thoại: ẩn breadcrumb (vẫn trong HTML cho Google + JSON-LD BreadcrumbList), tiêu đề + số + sắp xếp đứng đầu; bỏ nhãn thừa — nhãn ô lọc (kể cả Học phí, Yêu cầu trong Lọc thêm; ô tự nói: Toàn quốc, Tất cả quận…; vẫn giữ cho trình đọc màn hình), cam kết, nhịp 24 giờ, chữ "Sắp xếp" */
@media (max-width: 575.98px) {
  .w-trang-gon.py-4 { padding-top: .75rem !important; }
  .w-trang-gon .w-breadcrumb { display: none; }
  .w-trang-gon .w-kq-tieude { font-size: 1.15rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .w-trang-gon .w-loc-ngang > .w-loc-hang .w-loc-o > label, .w-trang-gon .w-loc-hang-2 .w-loc-o:not(.w-loc-rong):not(.w-loc-lich) > label, .w-trang-gon .w-kq-sx-nhan { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .w-trang-gon .w-kq-cam-ket, .w-trang-gon .w-kq-dau .w-nhip-kv { display: none !important; }
  .w-trang-gon .w-kq-dau { flex-wrap: nowrap; align-items: flex-end; gap: .5rem; margin-bottom: .6rem; }
  .w-trang-gon .w-kq-dau > div:first-child { min-width: 0; }
  .w-trang-gon .w-kq-dau p { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-trang-gon .w-kq-sapxep { flex: none; }
  .w-trang-gon .w-kq-sapxep select { max-width: 8rem; }
}

/* Lịch rảnh trên màn hẹp (máy tính bảng / điện thoại): bảng trải hết bề ngang, ô cao dễ bấm bằng ngón tay */
@media (max-width: 991.98px) {
  .w-loc-lich .w-lich-loc { width: 100%; table-layout: fixed; border-spacing: 3px; font-size: .78rem; }
  .w-loc-lich .w-lich-loc thead th:first-child, .w-loc-lich .w-lich-loc tbody th { width: 3.4rem; text-align: left; }
  .w-loc-lich .w-lich-loc span { width: auto; height: 34px; border-radius: 6px; }
}

/* ===== Ngăn kéo ☰ điện thoại — bản sang: phần đầu xanh đậm có ánh sáng, thẻ nổi, biểu tượng một tông, nhiều khoảng thở; chỉ phần cần (không chép menu máy tính) ===== */
.w-mm { width: min(390px, 88vw); --mm-dam: #0b1d4a; --mm-chu: #0f172a; --mm-mo: #58687e; --mm-vien: #eceff5; --mm-vang: #f5c451; }
.w-mm-tang1 { background: #f6f7fb; }
.w-mm-tang1 > .w-mm-dau { display: none; }
.w-mm-tang1 .w-mm-than { padding: 0 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
/* Phần đầu */
.w-mm .w-ngan-dau { position: relative; margin: 0 -1rem; padding: .6rem 1.1rem 2.1rem; color: #fff; overflow: hidden;
  background: radial-gradient(90% 70% at 100% 0%, rgba(96, 165, 250, .45) 0%, rgba(96, 165, 250, 0) 60%), radial-gradient(70% 60% at 0% 100%, rgba(129, 140, 248, .35) 0%, rgba(129, 140, 248, 0) 65%), linear-gradient(160deg, #0b1d4a 0%, #13327f 55%, #1e4fd6 100%); }
.w-mm .w-ngan-dau::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 26px rgba(255, 255, 255, .03), 0 0 0 58px rgba(255, 255, 255, .02); pointer-events: none; }
.w-mm .w-ngan-dau > * { position: relative; z-index: 1; }
.w-mm .w-ngan-dau-tren { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-bottom: .9rem; }
.w-mm .w-ngan-hieu { display: flex; align-items: center; gap: .55rem; }
.w-mm .w-ngan-hieu .w-logo-hinh { width: 32px; height: 32px; border-radius: 9px; font-size: .95rem; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.w-mm .w-ngan-hieu b { font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.w-mm .w-ngan-dau .w-mm-dong { width: 38px; height: 38px; margin-right: -.4rem; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .08); font-size: 1rem; }
.w-mm .w-ngan-dau .w-mm-dong:active { background: rgba(255, 255, 255, .18); }
.w-mm .w-ngan-nguoi { display: flex; align-items: center; gap: .85rem; padding: 0; color: #fff; }
.w-mm .w-ngan-nguoi .w-av-vong { width: 58px; height: 58px; padding: 3px; flex: none; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45); }
.w-mm .w-ngan-nguoi .w-av-vong-tat { background: rgba(255, 255, 255, .85); }
.w-mm .w-ngan-nguoi .w-av-vong > span { color: var(--mm-dam); font-size: 1.2rem; }
.w-mm .w-ngan-nguoi-chu { flex: 1; min-width: 0; }
.w-mm .w-ngan-nguoi b { display: block; font-size: 1.14rem; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-mm .w-ngan-nguoi small { display: flex; align-items: center; gap: .45rem; margin-top: .25rem; color: rgba(255, 255, 255, .7); font-size: .78rem; }
.w-mm .w-ngan-vai { padding: .1rem .5rem; border-radius: 99px; background: rgba(245, 196, 81, .16); color: var(--mm-vang); font-size: .7rem; font-style: normal; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .35); }
.w-mm .w-ngan-nguoi > i { color: rgba(255, 255, 255, .55); font-size: .78rem; }
.w-mm .w-ngan-hs { display: block; margin-top: 1rem; color: #fff; font-size: .76rem; }
.w-mm .w-ngan-hs span { display: flex; justify-content: space-between; margin-bottom: .35rem; color: rgba(255, 255, 255, .72); letter-spacing: .02em; }
.w-mm .w-ngan-hs span b { color: var(--mm-vang); font-weight: 700; }
.w-mm .w-ngan-hs i { display: block; position: relative; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.w-mm .w-ngan-hs i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 99px; background: linear-gradient(90deg, #f5c451, #fde68a); }
.w-mm .w-ngan-chao { margin: 0 0 1.1rem; color: rgba(255, 255, 255, .72); font-size: .88rem; line-height: 1.5; }
.w-mm .w-ngan-chao b { display: block; margin-bottom: .2rem; color: #fff; font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; }
.w-mm .w-ngan-vao { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.w-mm .w-ngan-vao .btn { height: 44px; border-radius: 12px; font-weight: 600; }
.w-mm .w-ngan-vao .btn-light { color: var(--mm-dam); border: 0; }
.w-mm .w-ngan-vao .btn-outline-light { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); }
/* Thẻ nổi: nút chính + khu vực */
.w-mm .w-ngan-chinh { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: -1.35rem 0 .9rem; padding: .5rem; background: #fff; border-radius: 16px; box-shadow: 0 16px 34px -18px rgba(11, 29, 74, .55), 0 0 0 1px rgba(11, 29, 74, .04); }
.w-mm .w-ngan-chinh .btn { display: flex; align-items: center; justify-content: center; gap: .45rem; height: 46px; padding: 0 .5rem; border: 0; border-radius: 12px; font-size: .93rem; font-weight: 600; white-space: nowrap; background: linear-gradient(135deg, #1e4fd6, #2f6bff); box-shadow: 0 8px 18px -10px rgba(30, 79, 214, .9); }
.w-mm .w-ngan-tinh { display: flex; align-items: center; gap: .4rem; height: 46px; margin: 0; padding: 0 .55rem; border: 0; border-radius: 12px; background: #f3f5f9; }
.w-mm .w-ngan-tinh > i { color: #1e4fd6; font-size: .9rem; }
.w-mm .w-ngan-tinh select { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: var(--mm-chu); font-size: .86rem; font-weight: 600; outline: 0; text-overflow: ellipsis; }
/* Ô nhanh: một tông, tinh */
.w-mm .w-ngan-o { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; padding: .95rem .3rem .85rem; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--mm-vien); }
.w-mm .w-ngan-o a { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #334155; font-size: .72rem; font-weight: 500; letter-spacing: .01em; line-height: 1.2; text-align: center; }
.w-mm .w-ngan-o a > span { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #f1f4fb; color: var(--mm-dam); font-size: 1.05rem; box-shadow: inset 0 0 0 1px #e3e8f3; }
.w-mm .w-ngan-o a:nth-child(n) > span { background: #f1f4fb; color: var(--mm-dam); }
.w-mm .w-ngan-o a:active > span { background: #e6ebf7; }
.w-mm .w-ngan-o em { position: absolute; top: -3px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid #fff; border-radius: 99px; background: #e11d48; color: #fff; font-size: .62rem; font-style: normal; font-weight: 700; line-height: 15px; text-align: center; }
.w-mm .w-ngan-o em.w-ngan-cham { top: 0; right: 0; min-width: 0; width: 11px; height: 11px; padding: 0; background: #10b981; }
/* Nhãn nhóm */
.w-mm-tang1 .w-mm-nhan { margin: 1.4rem .35rem .55rem; color: #94a3b8; font-size: .66rem; font-weight: 700; letter-spacing: .14em; }
/* Danh sách: biểu tượng một tông, vạch ngăn thụt vào */
.w-mm-tang1 .w-mm-ds, .w-mm .w-ngan-ds { display: block; margin: 0; border: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--mm-vien); }
.w-mm-tang1 .w-mm-muc, .w-mm .w-ngan-ds a { position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 52px; padding: .55rem 1rem; border: 0; background: transparent; color: var(--mm-chu); font-size: .95rem; font-weight: 500; }
.w-mm-tang1 .w-mm-muc + .w-mm-muc::before, .w-mm .w-ngan-ds a + a::before { content: ""; position: absolute; left: 3.35rem; right: 0; top: 0; border-top: 1px solid var(--mm-vien); }
.w-mm-tang1 .w-mm-muc:active, .w-mm .w-ngan-ds a:active { background: #f7f9fd; }
.w-mm-tang1 .w-mm-muc-ic, .w-mm-tang1 .w-mm-muc:nth-child(n) .w-mm-muc-ic { width: 1.45rem; height: auto; border-radius: 0; background: none; color: #475569; font-size: 1.05rem; }
.w-mm .w-ngan-ds i { width: 1.45rem; flex: none; color: #475569; font-size: 1.02rem; text-align: center; }
.w-mm-tang1 .w-mm-muc-chu b { font-size: .95rem; font-weight: 500; }
.w-mm-tang1 .w-mm-muc::after, .w-mm .w-ngan-ds a::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; color: #cbd5e1; font-size: .68rem; }
.w-mm .w-ngan-ds a .badge, .w-mm .w-ngan-ds a .ms-auto { margin-left: auto; }
.w-mm .w-ngan-ds a:has(.ms-auto)::after { margin-left: .6rem; }
.w-mm-tang1 .w-mm-muc.active { box-shadow: none; background: transparent; }
.w-mm-tang1 .w-mm-muc.active b, .w-mm-tang1 .w-mm-muc.active .w-mm-muc-ic { color: #1e4fd6; font-weight: 600; }
/* Chân */
.w-mm .w-ngan-cuoi { margin-top: 1.4rem; }
.w-mm .w-ngan-cuoi-nut { display: grid; gap: .6rem; }
.w-mm .w-ngan-cuoi-nut form { margin: 0; }
.w-mm .w-ngan-cuoi-nut .w-doi-vai button { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 46px; border: 0; border-radius: 14px; background: #fff; color: #1e4fd6; font-size: .9rem; font-weight: 600; box-shadow: 0 0 0 1px #d8e2fb; }
.w-mm .w-ngan-cuoi-nut form:last-child button { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 40px; border: 0; background: transparent; color: #b91c1c; font-size: .88rem; font-weight: 500; }
.w-mm .w-ngan-phu { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.3rem; padding-top: .9rem; font-size: .78rem; letter-spacing: .01em; }
.w-mm .w-ngan-phu a { color: #94a3b8; }
.w-mm-tang2 { background: #fff; }

/* ===== Khối tài khoản xổ từ avatar trên điện thoại (partials/menu-nguoi-dd) — cùng phong cách ngăn kéo ☰: đầu xanh đậm, danh sách một tông ===== */
.w-menu-dd { --mm-dam: #0b1d4a; --mm-vien: #eceff5; --mm-vang: #f5c451; width: min(340px, calc(100vw - 16px)); margin-top: .5rem !important; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 48px -16px rgba(11, 29, 74, .45), 0 0 0 1px rgba(11, 29, 74, .06); }
.w-menu-dd .w-dd-dau { display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem 1.05rem; color: #fff;
  background: radial-gradient(90% 90% at 100% 0%, rgba(96, 165, 250, .45) 0%, rgba(96, 165, 250, 0) 60%), linear-gradient(160deg, #0b1d4a 0%, #13327f 60%, #1e4fd6 100%); }
.w-menu-dd .w-dd-dau .w-av-vong { width: 48px; height: 48px; padding: 3px; flex: none; }
.w-menu-dd .w-dd-dau .w-av-vong-tat { background: rgba(255, 255, 255, .85); }
.w-menu-dd .w-dd-dau .w-av-vong > span { color: var(--mm-dam); font-size: 1.05rem; }
.w-menu-dd .w-dd-ten { flex: 1; min-width: 0; }
.w-menu-dd .w-dd-ten b { display: block; font-size: 1.02rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-menu-dd .w-dd-ten small { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; color: rgba(255, 255, 255, .7); font-size: .74rem; }
.w-menu-dd .w-ngan-vai { padding: .08rem .45rem; border-radius: 99px; background: rgba(245, 196, 81, .16); color: var(--mm-vang); font-size: .66rem; font-style: normal; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .35); }
.w-menu-dd .w-dd-chep { padding: 0 .15rem; border: 0; background: transparent; color: rgba(255, 255, 255, .7); font-size: .78rem; }
.w-menu-dd .w-dd-xu { flex: none; padding: .35rem .6rem; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; text-align: right; line-height: 1.15; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.w-menu-dd .w-dd-xu small { display: block; color: rgba(255, 255, 255, .65); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.w-menu-dd .w-dd-xu b { font-size: .86rem; }
.w-menu-dd .w-dd-hs { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--mm-vien); color: #475569; font-size: .78rem; }
.w-menu-dd .w-dd-hs i { position: relative; height: 5px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.w-menu-dd .w-dd-hs i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 99px; background: linear-gradient(90deg, #f5c451, #f59e0b); }
.w-menu-dd .w-dd-hs b { color: #b45309; }
.w-menu-dd .w-dd-ds { padding: .35rem 0; }
.w-menu-dd .w-dd-ds a { position: relative; display: flex; align-items: center; gap: .85rem; min-height: 48px; padding: .4rem 1rem; color: #0f172a; font-size: .93rem; font-weight: 500; }
.w-menu-dd .w-dd-ds a + a::before { content: ""; position: absolute; left: 3.2rem; right: 0; top: 0; border-top: 1px solid var(--mm-vien); }
.w-menu-dd .w-dd-ds a:active { background: #f7f9fd; }
.w-menu-dd .w-dd-ds a > i { width: 1.35rem; color: #475569; font-size: 1rem; text-align: center; }
.w-menu-dd .w-dd-ds a > span { flex: 1; min-width: 0; }
.w-menu-dd .w-dd-ds a .badge, .w-menu-dd .w-dd-ds a .ms-auto { flex: none; width: auto; margin-left: 0 !important; }
.w-menu-dd .w-dd-cuoi { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .7rem 1rem .5rem; border-top: 1px solid var(--mm-vien); background: #f8f9fc; }
.w-menu-dd .w-dd-cuoi form { margin: 0; }
.w-menu-dd .w-dd-cuoi button { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; height: 40px; padding: 0 .8rem; border: 0; border-radius: 12px; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.w-menu-dd .w-dd-cuoi .w-doi-vai button { background: #fff; color: #1e4fd6; box-shadow: 0 0 0 1px #d8e2fb; }
.w-menu-dd .w-dd-cuoi form:last-child button { background: transparent; color: #b91c1c; }
.w-menu-dd .w-dd-khach { display: block; }
.w-menu-dd .w-dd-khach b { display: block; font-size: 1.2rem; }
.w-menu-dd .w-dd-khach small { display: block; margin-top: .2rem; color: rgba(255, 255, 255, .75); font-size: .82rem; line-height: 1.45; }
.w-menu-dd .w-dd-vao { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .9rem 1rem .6rem; }
.w-menu-dd .w-dd-vao .btn { height: 42px; border-radius: 12px; font-weight: 600; }
.w-menu-dd .w-dd-gs { display: flex; align-items: center; gap: .75rem; margin: .2rem 1rem 1rem; padding: .7rem .8rem; border-radius: 14px; background: #f6f8fd; color: #0f172a; box-shadow: inset 0 0 0 1px var(--mm-vien); }
.w-menu-dd .w-dd-gs > i:first-child { color: #1e4fd6; font-size: 1.1rem; }
.w-menu-dd .w-dd-gs span { flex: 1; min-width: 0; }
.w-menu-dd .w-dd-gs b, .w-menu-dd .w-dd-gs small { display: block; }
.w-menu-dd .w-dd-gs b { font-size: .9rem; }
.w-menu-dd .w-dd-gs small { color: #58687e; font-size: .76rem; }
.w-menu-dd .w-dd-gs > i:last-child { color: #cbd5e1; font-size: .7rem; }

/* ===== Thẻ tin (/lop kiểu Thẻ, điện thoại): nhãn trạng thái đầu hàng chip, icon thông tin có khoảng thở; màn hẹp: chân thẻ = giá + mã tin | nút, cùng một hàng ===== */
.w-tin-chip { align-items: center; }
.w-tin-chip .w-nhan { display: inline-flex; align-items: center; align-self: stretch; padding-top: 0; padding-bottom: 0; }
.w-tin-thongtin i { margin-right: .3rem; color: #94a3b8; }
.w-tin-thongtin, .w-tin-nhip { clear: left; } /* thông tin bắt đầu dưới biểu tượng môn, không thụt lệch nửa dòng cạnh biểu tượng */
@media (max-width: 991.98px) {
  .w-tin { gap: .75rem; padding: .95rem 1rem; }
  .w-tin-phai { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; row-gap: 0; padding-top: .75rem; border-top: 1px dashed var(--w-vien); }
  .w-tin-phai .w-the-gia { grid-column: 1; grid-row: 1; }
  .w-tin-phai .w-tin-ma { grid-column: 1; grid-row: 2; font-size: .74rem; }
  .w-tin-phai > .btn { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; }
}
@media (max-width: 575.98px) {
  .w-tin-dau h3 { font-size: .98rem; line-height: 1.35; }
  .w-tin-thongtin { font-size: .82rem; }
  .w-tin-nhip .w-nhip { padding: .1rem .5rem; font-size: .7rem; }
}

/* ===== Hero trang chủ: lưới đầu · dưới · phải (thay row/col Bootstrap) ===== */
.w-hero-luoi { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "dau" "duoi"; }
.w-hero-dau { grid-area: dau; min-width: 0; }
.w-hero-duoi { grid-area: duoi; min-width: 0; }
.w-hero-phai { grid-area: phai; display: none; min-width: 0; }
/* Máy tính bảng: hình thu gọn thành cột thẻ cạnh tiêu đề — nửa phải không còn trống; ô tìm trải hết ngang bên dưới */
@media (min-width: 768px) and (max-width: 991.98px) {
  .w-hero-luoi { grid-template-columns: minmax(0, 1fr) 290px; grid-template-areas: "dau phai" "duoi duoi"; column-gap: 1.75rem; row-gap: 1.1rem; align-items: center; }
  .w-hero-phai { display: block; }
  .w-hero-phai .w-hero-hinh { display: grid; gap: .7rem; height: auto; }
  .w-hero-phai .w-hero-nen, .w-hero-phai .w-hero-the-2 { display: none; } /* cột thu gọn: ô xác thực + 1 gia sư, cao vừa bằng phần tiêu đề */
  .w-hero-phai .w-hero-the, .w-hero-phai .w-hero-xt { position: static; width: auto; transform: none; }
  .w-hero-phai .w-hero-xt { order: -1; background: linear-gradient(145deg, #1e40af, #2563eb); color: #fff; }
  .w-hero-phai .w-hero-xt small { color: rgba(255, 255, 255, .78); }
  .w-hero-phai .w-hero-xt b { color: #fff; }
  .w-hero-phai .w-hero-xt span { background: rgba(255, 255, 255, .25); }
  .w-hero-phai .w-hero-xt span i { background: #4ade80; }
}
/* Máy tính: hình cao bên phải cạnh cả hai phần (như bố cục cũ col-lg-7 / col-lg-5) */
@media (min-width: 992px) {
  .w-hero-luoi { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; grid-template-areas: "dau phai" "duoi phai"; column-gap: 1.5rem; }
  .w-hero-dau { align-self: end; }
  .w-hero-duoi { align-self: start; }
  .w-hero-phai { display: block; align-self: center; }
}
@media (min-width: 1200px) { .w-hero-luoi { column-gap: 3rem; } }
/* 992–1199px (iPad ngang): cột trái hẹp → ô tìm 2 × 2, khỏi cắt chữ "Toàn quố…" */
@media (min-width: 992px) and (max-width: 1199.98px) { .w-hero-v2 .w-tim { grid-template-columns: 1fr 1fr; } }

/* ===== CTA cuối trang chủ: nút bằng nhau (điện thoại: hết ngang; máy tính bảng: xếp dọc cùng rộng; máy tính: cạnh nhau) ===== */
.w-cta-nut { display: grid; gap: .6rem; flex: none; }
.w-cta-nut .btn { width: 100%; }
@media (min-width: 768px) and (max-width: 991.98px) { .w-cta-nut { width: 260px; } }
@media (min-width: 992px) { .w-cta-nut { grid-auto-flow: column; grid-auto-columns: 1fr; } }
@media (max-width: 767.98px) { .w-cta { padding: 2rem 0; } .w-cta h2 { font-size: 1.5rem; } .w-cta-nut { margin-top: 1rem; grid-template-columns: 1fr 1fr; gap: .5rem; } .w-cta-nut .btn { font-size: .92rem; padding: .7rem .5rem; white-space: nowrap; } }
@media (max-width: 359.98px) { .w-cta-nut { grid-template-columns: 1fr; } }

body:has(section.w-cta) .w-footer { margin-top: 0; } /* CTA xanh ngay trên chân trang: bỏ dải trắng giữa hai khối */

/* ===== Chân trang màn hẹp ===== */
/* Máy tính bảng: hàng 1 = Phụ huynh · Gia sư · Gia Sư Miễn Phí; hàng 2 = theo thành phố | theo môn (mỗi bên nửa ngang) */
@media (max-width: 991.98px) {
    .w-footer-luoi > div:nth-child(1), .w-footer-luoi > div:nth-child(2), .w-footer-luoi > div:nth-child(5) { grid-column: span 2; }
  .w-footer-luoi > div:nth-child(3), .w-footer-luoi > div:nth-child(4) { grid-column: span 3; }
  .w-footer-luoi > div:nth-child(5) { order: 3; }
  .w-footer-luoi > div:nth-child(3) { order: 4; }
  .w-footer-luoi > div:nth-child(4) { order: 5; }
}
/* Điện thoại: Phụ huynh | Gia sư cạnh nhau; thành phố, môn thành dải chip (khỏi tên dài gãy dòng); Gia Sư Miễn Phí thành một dòng link */
@media (max-width: 767.98px) {
      .w-footer-luoi > div:nth-child(1), .w-footer-luoi > div:nth-child(2) { grid-column: span 3; }
  .w-footer-luoi > div:nth-child(3), .w-footer-luoi > div:nth-child(4), .w-footer-luoi > div:nth-child(5) { grid-column: 1 / -1; }
  .w-footer-luoi > div:nth-child(5) { order: 6; }
    .w-footer ul  .w-footer ul.w-footer-2cot a { display: inline-block; padding: .28rem .7rem; border: 1px solid var(--w-vien); border-radius: 99px; background: #fff; }
  .w-footer-luoi > div:nth-child(5) ul { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
  .w-footer-luoi > div:nth-child(5) li { margin: 0; }
  }

/* ===== Bảng màu thống nhất (đo 28/09: 145 mã màu, 2 xanh chính lệch nhau, 4 navy, 6 xám chữ, vài cặp chữ/nền dưới chuẩn WCAG) =====
   Xanh chính #2563eb · navy #0b1d4a (nền đậm) / #0b3d91 (chữ nhấn, giá) · nhấn ấm hổ phách #f59e0b (chữ trên nó luôn nâu đậm #451a03, không chữ trắng)
   · xanh lá chỉ cho trạng thái · xám theo thang slate. Bootstrap mặc định #0d6efd được ghi đè ở dưới. */
.btn-primary { --bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb; --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8; --bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e40af; --bs-btn-disabled-bg: #2563eb; --bs-btn-disabled-border-color: #2563eb; --bs-btn-focus-shadow-rgb: 37, 99, 235; }
.btn-outline-primary { --bs-btn-color: #1d4ed8; --bs-btn-border-color: #2563eb; --bs-btn-hover-bg: #2563eb; --bs-btn-hover-border-color: #2563eb; --bs-btn-active-bg: #1d4ed8; --bs-btn-active-border-color: #1d4ed8; --bs-btn-disabled-color: #2563eb; --bs-btn-disabled-border-color: #2563eb; --bs-btn-focus-shadow-rgb: 37, 99, 235; }
.btn-link { --bs-btn-color: #1d4ed8; --bs-btn-hover-color: #1e40af; }
.pagination { --bs-pagination-color: #1d4ed8; --bs-pagination-hover-color: #1e40af; --bs-pagination-active-bg: #2563eb; --bs-pagination-active-border-color: #2563eb; --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .2); }
.dropdown-menu { --bs-dropdown-link-active-bg: #2563eb; }
.progress, .progress-stacked { --bs-progress-bar-bg: #2563eb; }
.nav-pills { --bs-nav-pills-link-active-bg: #2563eb; }
.list-group { --bs-list-group-active-bg: #2563eb; --bs-list-group-active-border-color: #2563eb; }
.form-control:focus, .form-select:focus { border-color: #93c5fd; box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .2); }
.form-check-input:checked { background-color: #2563eb; border-color: #2563eb; }
.form-check-input:focus { border-color: #93c5fd; box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .2); }
.btn-outline-secondary { --bs-btn-color: #475569; --bs-btn-border-color: #cbd5e1; --bs-btn-hover-color: #1e293b; --bs-btn-hover-bg: #f1f5f9; --bs-btn-hover-border-color: #94a3b8; --bs-btn-active-color: #1e293b; --bs-btn-active-bg: #e2e8f0; --bs-btn-active-border-color: #94a3b8; }
/* Chữ phụ #58687e (thay #64748b 4,3:1 trên nền xám nhạt) — đạt ≥ 4,6:1 trên mọi nền sáng của web */
/* Nút hành động chính (đầu trang, ngăn kéo ☰, CTA cuối trang): nhấn ấm hổ phách, chữ nâu đậm — nổi khỏi biển xanh của link / chip / menu */
.btn-nhan, .w-dau-cta.btn-primary, .w-mm .w-ngan-chinh .btn-primary { --bs-btn-color: #451a03; --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-hover-color: #451a03; --bs-btn-hover-bg: #fbbf24; --bs-btn-hover-border-color: #fbbf24; --bs-btn-active-color: #451a03; --bs-btn-active-bg: #d97706; --bs-btn-active-border-color: #d97706; --bs-btn-focus-shadow-rgb: 245, 158, 11; }
.w-mm .w-ngan-chinh .btn-primary { background: #f59e0b; color: #451a03; box-shadow: 0 8px 18px -10px rgba(217, 119, 6, .9); }
/* Nhãn xác thực: một họ xanh lá, đậm dần theo cấp (CCCD → bằng cấp → giáo viên); khác nhau bằng biểu tượng, không bằng màu cầu vồng */
.w-huyhieu { background: #ecfdf5; color: #047857; }
.w-huyhieu-2 { background: #d1fae5; color: #065f46; }
.w-huyhieu-3 { background: #047857; color: #fff; }
/* Biểu tượng môn: 6 tông nhạt cùng độ sáng (nền nhạt, biểu tượng đậm) thay cho 6 khối gradient rực */
.w-mon-ic.w-mau-0 { background: #eff6ff; color: #1d4ed8; }
.w-mon-ic.w-mau-1 { background: #fff7ed; color: #c2410c; }
.w-mon-ic.w-mau-2 { background: #ecfdf5; color: #047857; }
.w-mon-ic.w-mau-3 { background: #eef2ff; color: #4338ca; }
.w-mon-ic.w-mau-4 { background: #f0f9ff; color: #0369a1; }
.w-mon-ic.w-mau-5 { background: #f1f5f9; color: #334155; }
.w-mau-nen-1 { background: linear-gradient(135deg, #fff7ed, #fed7aa); }
.w-mau-nen-3 { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }

/* Lọc thêm /lop: nút nhóm và công tắc không xuống dòng */
.w-loc-hang-2 .btn-group .btn, .w-loc-hang-2 .form-switch .form-check-label{white-space:nowrap}

/* Lượt liên hệ gia sư (partials.luot-lien-he): bình thường chữ nhỏ; sắp hết / trả Xu nền vàng; chạm giới hạn nền đỏ nhạt */
.w-lh{color:#475569;font-size:.875rem}
.w-lh i{margin-right:.3rem;color:#64748b}
.w-lh a{font-weight:600;white-space:nowrap}
.w-lh-sap,.w-lh-het,.w-lh-ok{display:inline-block;padding:.3rem .6rem;border-radius:.5rem;line-height:1.45}
.w-lh-sap{background:#fffbeb;color:#78350f;border:1px solid #fde68a}
.w-lh-sap i{color:#b45309}
.w-lh-het{background:#fef2f2;color:#7f1d1d;border:1px solid #fecaca}
.w-lh-het i{color:#b91c1c}
.w-lh-ok{background:#f0fdf4;color:#14532d;border:1px solid #bbf7d0}
.w-lh-ok i{color:#15803d}
.w-hs-luot{grid-column:1/-1;margin-top:-.35rem}
@media (min-width:768px){.w-hs-luot{text-align:right}}
.w-lop-cn-than .w-lh{font-size:inherit}
.w-lh b{display:inline;font-size:inherit;color:inherit}

.w-lh-sap,.w-lh-het,.w-lh-ok{margin:.15rem .25rem .15rem 0}
.w-tin-luot{margin-top:.6rem}
.w-nut-phi{margin-left:.3rem;font-weight:500;opacity:.9}

/* Tin của tôi: 2 nút cùng khối (không chồng nhau trên điện thoại); nhắc gia hạn tin */
.w-tin-2nut{display:flex;flex-direction:column;gap:.25rem;margin-top:auto}
.w-tin-2nut .btn-link{font-size:.8rem;color:#475569}
@media (max-width:991.98px){.w-tin-phai .w-tin-2nut{grid-column:2;grid-row:1/span 2;flex-direction:row;align-items:center;margin:0}}
.w-gia-han{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem;margin-top:.9rem;padding:.6rem .8rem;border-radius:.6rem;background:#fffbeb;border:1px solid #fde68a;color:#78350f;font-size:.9rem}
.w-gia-han i{color:#b45309;margin-right:.25rem}
.w-gia-han .btn{white-space:nowrap}
.w-tin > .w-gia-han{grid-column:1/-1;margin-top:.25rem}
.w-gia-han-gon{font-size:.84rem;padding:.5rem .7rem}

/* Dải "Việc của bạn" đầu trang chủ (đã đăng nhập) */
.w-viec{background:#fff;border-bottom:1px solid var(--w-vien);padding:.55rem 0}
.w-viec .container{display:flex;align-items:center;gap:.5rem;overflow-x:auto;scrollbar-width:none}
.w-viec .container::-webkit-scrollbar{display:none}
.w-viec-nhan{flex:0 0 auto;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#58687e;margin-right:.25rem}
.w-viec-o{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .75rem;border-radius:999px;border:1px solid var(--w-vien);background:#f8fafc;color:#0f172a;font-size:.86rem;white-space:nowrap}
.w-viec-o:hover{text-decoration:none;border-color:#93c5fd;background:#eff6ff}
.w-viec-o > i:first-child{color:#2563eb}
.w-viec-gap{background:#fffbeb;border-color:#fde68a}
.w-viec-gap > i:first-child{color:#b45309}
.w-viec-mui{font-size:.65rem;color:#94a3b8}
@media (max-width:575.98px){.w-viec-nhan{display:none}}

/* /toi phụ huynh: từng tin đang tìm */
.w-tq-tin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.7rem 0;border-bottom:1px dashed var(--w-vien)}
.w-tq-tin:first-child{padding-top:0}
.w-tq-tin-ten{min-width:0;flex:1 1 14rem;color:#0f172a}
.w-tq-tin-ten b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-tq-tin-ten small{color:#58687e}
.w-tq-tin > .w-gia-han{flex:1 1 100%;margin-top:.1rem}

/* Hồ sơ gia sư (điện thoại): thanh liên hệ dính đáy khi đã cuộn qua khối nút */
.w-hs-dinh{position:fixed;left:0;right:0;bottom:0;z-index:1025;display:flex;align-items:center;gap:.5rem;padding:.55rem 16px;background:#fff;border-top:1px solid var(--w-vien);box-shadow:0 -6px 18px rgba(15,23,42,.08)}
.w-hs-dinh[hidden]{display:none}
.w-hs-dinh-ten{flex:1;min-width:0;line-height:1.2}
.w-hs-dinh-ten b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-hs-dinh-ten small{color:#58687e;font-size:.78rem}
@media (min-width:992px){.w-hs-dinh{display:none!important}}

.w-hop-gon{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;font-size:.88rem;color:#334155}
.w-hop-gon i{font-size:.7rem;color:#94a3b8}
@media (min-width:992px){.w-ds-the-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
.w-tin-phai .w-the-gia b{white-space:nowrap}

/* /toi phụ huynh: ứng viên từng tin, gia sư vừa nhắn, lớp đang học */
.w-tq-tin2{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px dashed var(--w-vien)}
.w-tq-tin2:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
.w-tq-tin2-dau{margin-bottom:.6rem}
.w-tq-tin2-dau b{color:#0f172a;font-weight:600}
.w-tq-tin2-dau small{display:block;color:#58687e}
.w-uv-nho{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
@media (max-width:767.98px){.w-uv-nho{grid-template-columns:1fr}}
.w-uv-nho-o{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem;border:1px solid var(--w-vien);border-radius:.7rem;color:#0f172a;background:#fff;min-width:0}
.w-uv-nho-o:hover{text-decoration:none;border-color:#93c5fd;background:#f8fbff}
.w-uv-nho-o .w-avatar,.w-ht-nho-o .w-avatar{flex:0 0 42px;width:42px;height:42px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:#e0e7ff;color:#3730a3;font-weight:700}
.w-uv-nho-than{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.w-uv-nho-than b{font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-uv-nho-than small{color:#58687e;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-uv-nho-gia{color:#15803d!important;font-weight:600}
.w-uv-moi,.w-uv-chon{font-style:normal;font-size:.68rem;font-weight:700;padding:.05rem .4rem;border-radius:999px;vertical-align:middle}
.w-uv-moi{background:#dbeafe;color:#1e40af}
.w-uv-chon{background:#dcfce7;color:#166534}
.w-uv-trong{padding:.6rem .75rem;border-radius:.6rem;background:#f8fafc;border:1px dashed var(--w-vien);color:#475569;font-size:.9rem}
.w-uv-trong i{color:#94a3b8;margin-right:.3rem}
.w-ht-nho{display:flex;flex-direction:column}
.w-ht-nho-o{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-top:1px solid var(--w-vien);color:#0f172a}
.w-ht-nho-o:first-child{border-top:0}
.w-ht-nho-o:hover{text-decoration:none;background:#f8fbff}
.w-ht-nho-than{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.w-ht-nho-than b{font-weight:600;font-size:.93rem}
.w-ht-nho-than small{color:#58687e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-ht-nho-o.chua-doc .w-ht-nho-than b,.w-ht-nho-o.chua-doc .w-ht-nho-than small{color:#0f172a;font-weight:700}
.w-ht-nho-luc{flex:0 0 auto;font-size:.75rem;color:#94a3b8;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.w-cham{width:9px;height:9px;border-radius:50%;background:#2563eb;display:inline-block}
.w-tq-chan{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:1rem;font-size:.88rem}
.w-tq-chan a{color:#475569}
.w-tq-chan i{margin-right:.3rem;color:#94a3b8}

/* /toi gia sư */
.w-avatar-ic{background:#f1f5f9!important;color:#64748b!important}
.w-ph-chon{background:#f0fdf4}
.w-ph-chon .w-ht-nho-than b{color:#14532d}
.w-ph-chon .w-ht-nho-than b i{color:#16a34a}
.w-ph-chon .btn{flex:0 0 auto}
.w-up-gon{margin:0 0 1rem}
.w-hs-so{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
@media (max-width:767.98px){.w-hs-so{grid-template-columns:repeat(2,minmax(0,1fr))}}
.w-hs-so > div{border:1px solid var(--w-vien);border-radius:.6rem;padding:.55rem .7rem;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.w-hs-so small{color:#58687e;font-size:.76rem}
.w-hs-so b{font-size:1.1rem;color:#0f172a}
.w-hs-so em{font-style:normal;font-size:.74rem;color:#58687e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-hs-thieu{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.8rem;padding:.55rem .75rem;border-radius:.6rem;background:#fffbeb;border:1px solid #fde68a;color:#78350f;font-size:.88rem}

/* Thông báo: nội dung dài gọn 2 dòng */
.w-tb-nd{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Hội thoại trên điện thoại: nút việc (chia sẻ số, học thử, chốt lớp) xuống hàng riêng, có chữ — không để icon trơn khó hiểu */
@media (max-width:991.98px){
  .w-chat-dau{flex-wrap:wrap}
  .w-chat-nut{flex:1 1 100%;order:9;margin-top:.45rem}
  .w-chat-nut > form,.w-chat-nut > .btn{flex:1 1 0}
  .w-chat-nut > form .btn{width:100%}
  .w-chat-nut .btn{white-space:nowrap;font-size:.8rem;padding:.3rem .4rem}
  .w-chat-nut .w-nhan-nut{display:inline!important}
}

/* Trang chủ, phụ huynh đã đăng nhập: hero gọn — chỉ tiêu đề ngắn + ô tìm + chip môn */
.w-hero-gon{padding-top:1.1rem;padding-bottom:1.25rem}
.w-hero-gon .w-hero-nhan,.w-hero-gon .w-hero-mota,.w-hero-gon .w-hero-tin,.w-hero-gon .w-hero-dang{display:none}
.w-hero-gon .w-hero-tieude{font-size:clamp(1.35rem,3vw,1.9rem);margin-bottom:.75rem}


/* Menu tài khoản trên điện thoại: nút "mục đang xem ▾" + bảng trượt từ dưới lên (partials/menu-tai-khoan) */
.w-tk-nut{display:flex;align-items:center;gap:.55rem;width:100%;min-height:50px;padding:.55rem .75rem .55rem .9rem;background:#fff;border:1px solid var(--w-vien);border-radius:14px;color:#0f172a;text-align:left;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.w-tk-nut > i{color:var(--bs-primary);font-size:1.05rem}
.w-tk-nut b{flex:1;min-width:0;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-tk-nut-phai{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .65rem;border-radius:999px;background:#eef4ff;color:var(--bs-primary);font-size:.85rem;font-weight:600}
.w-tk-nut-phai i{font-size:.7rem}
.w-tk-nut em,.w-sheet-ds em{font-style:normal;min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:999px;background:#dc2626;color:#fff;font-size:.75rem;font-weight:700;display:inline-grid;place-items:center;line-height:1}
.w-sheet{position:fixed;inset:0;z-index:1060}
.w-sheet-nen{position:absolute;inset:0;background:rgba(15,23,42,.5);opacity:0;transition:opacity .22s}
.w-sheet-khung{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.25);transform:translateY(100%);transition:transform .22s ease}
.w-sheet.mo .w-sheet-nen{opacity:1}
.w-sheet.mo .w-sheet-khung{transform:none}
.w-sheet-keo{flex:none;height:22px;display:grid;place-items:center;cursor:pointer}
.w-sheet-keo::before{content:"";width:40px;height:5px;border-radius:99px;background:#cbd5e1}
.w-sheet-dau{flex:none;display:flex;align-items:center;gap:.7rem;padding:.1rem .75rem .75rem 1rem;border-bottom:1px solid var(--w-vien)}
.w-sheet-dau > div{flex:1;min-width:0;display:grid;line-height:1.3}
.w-sheet-dau b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-sheet-dau small{color:#58687e}
.w-sheet-dong{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#f1f5f9;color:#334155;font-size:1.05rem}
.w-sheet-than{overflow-y:auto;overscroll-behavior:contain;padding:.6rem .75rem calc(.9rem + env(safe-area-inset-bottom))}
.w-sheet-ds{display:grid;border:1px solid var(--w-vien);border-radius:14px;overflow:hidden}
.w-sheet-ds a{display:flex;align-items:center;gap:.75rem;min-height:52px;padding:.55rem .9rem;color:#1e293b;font-size:.97rem;font-weight:500;background:#fff;text-decoration:none}
.w-sheet-ds a + a{border-top:1px solid var(--w-vien)}
.w-sheet-ds a > i:first-child{width:1.4rem;text-align:center;color:#64748b;font-size:1.05rem}
.w-sheet-ds a span{flex:1;min-width:0}
.w-sheet-mui{color:#cbd5e1;font-size:.75rem}
.w-sheet-ds a.active{background:#eef4ff;color:var(--bs-primary);font-weight:700;box-shadow:inset 3px 0 0 var(--bs-primary)}
.w-sheet-ds a.active > i:first-child{color:var(--bs-primary)}
.w-sheet-nhan{margin:.9rem .25rem .4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#58687e}
.w-sheet-cuoi{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.9rem}
.w-sheet-cuoi > *:only-child{grid-column:1/-1}
.w-sheet-cuoi form{margin:0}
.w-sheet-cuoi .w-doi-vai button,.w-sheet-thoat{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;height:48px;padding:0 .5rem;border:1px solid var(--w-vien);border-radius:12px;background:#fff;font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden}
.w-sheet-cuoi .w-doi-vai button{color:var(--bs-primary);border-color:#bcd0f5;background:#eef4ff}
.w-sheet-thoat{color:#b91c1c}
body.w-sheet-khoa{overflow:hidden}

/* Menu "Ví Xu": số dư cuối dòng — xám; sắp hết (< ViDv::SAP_HET_XU) cam + "Nạp" */
.w-xu-so{margin-left:auto;flex:none;color:#58687e;font-size:.82rem;font-weight:600;white-space:nowrap}
.w-xu-so.thap{color:#c2410c;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:.05rem .5rem}
.w-tk-menu a.active .w-xu-so:not(.thap){color:inherit}

/* Đẩy lại tin (partials/tin-day-lai): tin ít ứng viên — nút miễn phí + gợi ý sửa */
.w-day{margin-top:.9rem;padding:.6rem .8rem;border-radius:.6rem;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:.9rem}
.w-day-dau{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem;margin:0}
.w-day-dau i{color:#2563eb;margin-right:.25rem}
.w-day-dau .btn i{color:inherit}
.w-day .btn{white-space:nowrap}
.w-day-goi-y{margin:.5rem 0 0;padding:.5rem 0 0 1.1rem;border-top:1px dashed #bfdbfe;display:grid;gap:.3rem}
.w-day-goi-y a{color:#1e40af}
.w-day-gon{font-size:.84rem;padding:.5rem .7rem}
.w-tin > .w-day{grid-column:1/-1;margin-top:.25rem}
.w-tq-tin2 > .w-day{margin-top:.6rem}

/* Danh sách hội thoại: tên + nhãn Trung tâm trên một dòng, tên co lại trước */
.w-chat-ten{display:flex;align-items:center;gap:.3rem;min-width:0}
.w-chat-ten .w-nhan-tt{flex:none}

/* Trang chủ, gia sư đã đăng nhập: khối gọn tìm lớp — hiện nhãn lớp mới hôm nay và lối "lớp hợp", bỏ hình gia sư nổi bật */
.w-hero-gs .w-hero-nhan{display:inline-flex}
.w-hero-gs .w-hero-hop{display:flex}


/* /lop: tab nguồn tin (Tất cả · Phụ huynh đăng · Trung tâm đăng) + khối tin trung tâm bổ sung khi tab phụ huynh ít lớp */
.w-nguon{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin:0 0 .8rem;padding-bottom:.8rem;border-bottom:1px solid var(--w-vien)}
.w-nguon::-webkit-scrollbar{display:none}
.w-nguon label{flex:none;display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .9rem;border:1px solid var(--w-vien);border-radius:999px;background:#fff;color:#334155;font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap}
.w-nguon label b{font-weight:700;color:#58687e;font-size:.8rem;background:#f1f5f9;border-radius:999px;padding:.05rem .45rem}
.w-nguon label i{color:#64748b}
.w-nguon .btn-check:checked + label{background:var(--bs-primary);border-color:var(--bs-primary);color:#fff}
.w-nguon .btn-check:checked + label b{background:rgba(255,255,255,.22);color:#fff}
.w-nguon .btn-check:checked + label i{color:#fff}
.w-nguon .btn-check:focus-visible + label{outline:2px solid var(--bs-primary);outline-offset:2px}
.w-bo-sung-tt{margin-top:1.25rem;padding-top:1rem;border-top:2px dashed var(--w-vien)}
.w-bo-sung-dau{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .75rem;margin-bottom:.35rem;font-weight:700;color:#1e293b}
.w-bo-sung-dau i{color:#7c3aed}
.w-bo-sung-xem{color:var(--bs-primary);font-weight:600;font-size:.9rem;cursor:pointer}
@media (max-width:575.98px){.w-nguon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;overflow:visible}.w-nguon label{flex-direction:column;justify-content:center;gap:.1rem;padding:.35rem .3rem;font-size:.84rem;line-height:1.15;border-radius:12px;min-width:0}.w-nguon label b{font-size:.72rem;padding:0;background:none}}

/* Đăng tin trung tâm: phí nhận lớp thu gia sư (bắt buộc) */
.w-phi-tt{display:grid;gap:.5rem}
.w-phi-tt-o{display:flex;align-items:flex-start;gap:.6rem;padding:.65rem .8rem;border:1px solid var(--w-vien);border-radius:12px;background:#fff;cursor:pointer;margin:0}
.w-phi-tt-o:has(input[type=radio]:checked){border-color:var(--bs-primary);background:#eff6ff}
.w-phi-tt-o > input{margin-top:.2rem;flex:none}
.w-phi-tt-o > span{display:grid;gap:.3rem;flex:1;min-width:0}
.w-phi-tt-o small{color:#58687e}
.w-phi-tt-o .input-group{max-width:200px}
.w-phi-tt.is-invalid .w-phi-tt-o{border-color:#dc3545}
/* Nhãn phí nhận lớp trên tin trung tâm */
.w-phi-nhan{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:600;border-radius:999px;padding:.12rem .55rem;white-space:nowrap}
.w-phi-nhan.ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.w-phi-nhan.phi{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.w-phi-nhan.chua{background:#f1f5f9;color:#475569;border:1px solid var(--w-vien)}

/* /huong-dan/bat-thong-bao: tab theo thiết bị (radio + CSS), mỗi bước chữ + khung điện thoại / máy tính minh hoạ dựng bằng HTML; .w-btb-cham = chỗ cần bấm (viền cam + chấm ngón tay nhấp nháy) */
.w-btb-dau { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; }
.w-btb-may { background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem; display: grid; gap: .6rem; box-shadow: 0 6px 20px rgba(15, 23, 42, .06); }
.w-btb-may-dong { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.w-btb-may-dong:empty { display: none; }
.w-btb-bao-app { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 10px; padding: .6rem .75rem; font-size: .9rem; }
.w-btb-bao-app[hidden] { display: none; }
.w-btb-r { position: absolute; opacity: 0; pointer-events: none; }
.w-btb-tabs { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; margin-bottom: 1rem; }
.w-btb-tabs::-webkit-scrollbar { display: none; }
.w-btb-tabs label { flex: none; cursor: pointer; border: 1px solid var(--w-vien); background: #fff; border-radius: 12px; padding: .55rem 1rem; font-weight: 700; color: #334155; line-height: 1.2; text-align: center; }
.w-btb-tabs label small { display: block; font-weight: 500; font-size: .72rem; color: #64748b; }
#btbAndroid:checked ~ .w-btb-tabs [for=btbAndroid], #btbIphone:checked ~ .w-btb-tabs [for=btbIphone], #btbMayTinh:checked ~ .w-btb-tabs [for=btbMayTinh], #btbChan:checked ~ .w-btb-tabs [for=btbChan], #btbKhong:checked ~ .w-btb-tabs [for=btbKhong] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
#btbAndroid:checked ~ .w-btb-tabs [for=btbAndroid] small, #btbIphone:checked ~ .w-btb-tabs [for=btbIphone] small { color: #dbeafe; }
.w-btb-r:focus-visible ~ .w-btb-tabs { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: 12px; }
.w-btb-p { display: none; }
#btbAndroid:checked ~ [data-p=android], #btbIphone:checked ~ [data-p=iphone], #btbMayTinh:checked ~ [data-p=may-tinh], #btbChan:checked ~ [data-p=chan], #btbKhong:checked ~ [data-p=khong] { display: block; }
.w-btb-ghi { background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px; padding: .65rem .85rem; color: #1e3a8a; font-size: .93rem; }
.w-btb-ghi i { margin-right: .25rem; }
.w-btb-buoc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; counter-reset: btb; }
.w-btb-buoc > li { counter-increment: btb; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.w-btb-chu { position: relative; padding-left: 2.6rem; }
.w-btb-chu::before { content: counter(btb); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bs-primary); color: #fff; font-weight: 800; display: grid; place-items: center; }
.w-btb-chu > b { display: block; font-size: 1.02rem; margin-bottom: .25rem; }
.w-btb-chu p { margin: 0; color: #475569; font-size: .93rem; line-height: 1.5; }
.w-btb-kiem { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.w-btb-kiem li { background: #fff; border: 1px solid var(--w-vien); border-left: 4px solid #f59e0b; border-radius: 10px; padding: .75rem .9rem; color: #334155; line-height: 1.5; }
/* Khung điện thoại */
.w-btb-dt { margin: auto auto 0; width: 210px; border-radius: 30px; background: #111827; padding: 9px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); }
.w-btb-man { position: relative; height: 330px; border-radius: 22px; background: #f8fafc; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 22px 10px 10px; font-size: 11px; color: #1f2937; }
.w-btb-man::before { content: ""; position: absolute; top: 7px; left: 50%; width: 54px; height: 8px; margin-left: -27px; border-radius: 6px; background: #111827; }
.w-btb-man.mo::after { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1; }
.w-btb-man.mh { background: linear-gradient(160deg, #60a5fa, #a78bfa); justify-content: center; align-items: center; }
.w-btb-dong-gia { height: 10px; border-radius: 5px; background: #e2e8f0; }
.w-btb-dong-gia.ngan { width: 60%; }
.w-btb-web-dau { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 8px; padding: 6px 8px; color: #0b3d91; }
.w-btb-logo { width: 16px; height: 16px; border-radius: 5px; background: var(--bs-primary); }
.w-btb-nut { display: inline-block; position: relative; border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 9px; font-weight: 700; background: #fff; color: #334155; }
.w-btb-nut.xanh { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.w-btb-the-moi { margin-top: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px; box-shadow: 0 6px 18px rgba(15, 23, 42, .15); display: flex; flex-wrap: wrap; gap: 5px; }
.w-btb-the-moi b, .w-btb-the-moi small { flex-basis: 100%; }
.w-btb-the-moi small { color: #64748b; font-size: 10px; }
.w-btb-the-moi.trai { width: 190px; margin-top: auto; }
.w-btb-hop { position: absolute; z-index: 2; left: 10px; right: 10px; background: #fff; border-radius: 14px; padding: 12px; display: grid; gap: 6px; box-shadow: 0 10px 30px rgba(15, 23, 42, .3); }
.w-btb-hop.duoi { bottom: 10px; }
.w-btb-hop.tren { top: 52px; }
.w-btb-hop.giua { top: 50%; transform: translateY(-50%); }
.w-btb-hop small { color: #64748b; font-size: 10px; }
.w-btb-hop-nut { display: flex; justify-content: flex-end; gap: 6px; }
.w-btb-hop.ios { left: 6px; right: 6px; text-align: center; padding: 12px 0 0; background: rgba(245, 245, 247, .97); }
.w-btb-hop.ios > b, .w-btb-hop.ios > small { padding: 0 12px; }
.w-btb-hop-nut.ios { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid #d1d5db; margin-top: 4px; }
.w-btb-hop-nut.ios span { position: relative; padding: 9px 2px; color: #2563eb; font-size: 10px; white-space: nowrap; }
.w-btb-hop-nut.ios span + span { border-left: 1px solid #d1d5db; }
.w-btb-hop-nut.ios .dam { font-weight: 700; }
.w-btb-chuong { width: 26px; height: 26px; border-radius: 50%; background: #eef4ff; }
.w-btb-chuong::before { content: "🔔"; display: block; text-align: center; line-height: 26px; font-size: 13px; }
.w-btb-chuong.nho { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.w-btb-chuong.nho::before { line-height: 16px; font-size: 9px; }
.w-btb-app-thanh { display: flex; justify-content: space-between; align-items: center; background: #0068ff; color: #fff; border-radius: 8px; padding: 6px 8px; }
.w-btb-app-thanh .w-btb-cham { position: relative; padding: 0 4px; border-radius: 6px; font-weight: 800; }
.w-btb-menu { position: absolute; z-index: 2; top: 50px; right: 10px; width: 150px; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .25); display: grid; }
.w-btb-menu span { position: relative; padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
.w-btb-tb { background: rgba(255, 255, 255, .96); border-radius: 12px; padding: 8px; display: flex; gap: 7px; box-shadow: 0 6px 18px rgba(15, 23, 42, .18); }
.w-btb-tb small { display: block; color: #64748b; font-size: 10px; }
.w-btb-tb-ic { flex: none; width: 22px; height: 22px; border-radius: 6px; background: url("/assets/img/icon-192.png") center / cover, var(--bs-primary); }
.w-btb-khoi { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; display: grid; gap: 6px; justify-items: start; }
.w-btb-xanh-la { color: #15803d; font-weight: 700; }
.w-btb-safari { margin-top: auto; display: flex; justify-content: space-around; align-items: center; background: rgba(255, 255, 255, .95); border-radius: 14px; padding: 7px 4px; color: #2563eb; font-size: 15px; }
.w-btb-safari > span { position: relative; display: grid; place-items: center; min-width: 26px; }
.w-btb-sheet { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; background: #f2f2f7; border-radius: 14px; display: grid; overflow: visible; }
.w-btb-sheet span { position: relative; background: #fff; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; }
.w-btb-sheet span:first-child { border-radius: 14px 14px 0 0; }
.w-btb-sheet span:last-child { border-radius: 0 0 14px 14px; border-bottom: 0; }
.w-btb-cong { float: right; font-style: normal; font-weight: 700; }
.w-btb-ios-dau { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.w-btb-ios-dau span { color: #2563eb; min-width: 30px; }
.w-btb-ios-dau span:last-child { text-align: right; }
.w-btb-ios-dau .xanh-chu { position: relative; font-weight: 700; }
.w-btb-them { display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 10px; padding: 8px; }
.w-btb-them img, .w-btb-luoi-app img { border-radius: 10px; display: block; }
.w-btb-them small { display: block; color: #64748b; }
.w-btb-ios-dong { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 10px; padding: 8px 10px; }
.w-btb-ios-dong.mo { opacity: .45; }
.w-btb-gat { position: relative; width: 30px; height: 18px; border-radius: 9px; background: #d1d5db; flex: none; }
.w-btb-gat::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.w-btb-gat.bat { background: #22c55e; }
.w-btb-gat.bat::after { left: 14px; }
.w-btb-luoi-app { display: grid; grid-template-columns: repeat(4, 34px); gap: 10px; }
.w-btb-luoi-app i { width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .45); }
.w-btb-luoi-app img { width: 34px; height: 34px; }
.w-btb-luoi-app span { position: relative; }
.w-btb-ten-app { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.w-btb-dia-chi { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 16px; padding: 5px 8px; color: #334155; }
.w-btb-dia-chi .w-btb-cham { position: relative; z-index: 3; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.w-btb-link { color: #2563eb !important; font-weight: 700; }
/* Khung máy tính */
.w-btb-pc { margin: auto auto 0; width: 100%; max-width: 320px; border-radius: 10px; border: 1px solid #cbd5e1; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); background: #f8fafc; font-size: 11px; color: #1f2937; }
.w-btb-pc-thanh { display: flex; align-items: center; gap: 4px; background: #e2e8f0; padding: 6px 8px; }
.w-btb-pc-thanh i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.w-btb-pc-thanh span { flex: 1; margin-left: 6px; background: #fff; border-radius: 10px; padding: 3px 8px; }
.w-btb-pc-thanh .w-btb-cham { position: relative; border-radius: 50%; padding: 0 2px; }
.w-btb-pc-man { position: relative; height: 180px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.w-btb-hop.pc { position: static; width: 190px; padding: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .22); }
/* Chỗ cần bấm */
.w-btb-cham { outline: 3px solid #f59e0b; outline-offset: 2px; border-radius: 8px; }
.w-btb-tay { position: absolute; right: -6px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: rgba(245, 158, 11, .85); box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); animation: w-btb-nhap 1.4s ease-out infinite; pointer-events: none; z-index: 3; }
@keyframes w-btb-nhap { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); } 100% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); } }
@media (prefers-reduced-motion: reduce) { .w-btb-tay { animation: none; } }
.w-btb-man .w-btb-hop, .w-btb-man .w-btb-menu, .w-btb-man .w-btb-sheet { z-index: 2; }
@media (max-width: 991.98px) { .w-btb-dau { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .w-btb-buoc > li { padding: .85rem; } .w-btb-tabs label { padding: .5rem .8rem; } }
/* Thẻ mời bật + Cài đặt: link hướng dẫn */
.w-push-moi-hd { font-size: .8rem; }

/* /dang-ky: ô bẫy bot (ChongBot) — người thật không thấy, trình đọc màn hình bỏ qua */
.w-bay { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Khách: yêu thích tạm (tim đỏ + số ở đầu trang), lời nhắc đăng ký đúng lúc (cuối màn hình, đóng nhớ 7 ngày), khối mời giữ danh sách */
.w-dau-yt { display: inline-flex; align-items: center; gap: .3rem; color: #dc3545; font-size: .95rem; padding: .35rem .6rem; border-radius: 99px; background: #fff0f1; margin-right: .5rem; }
.w-nhac { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 1040; width: min(560px, calc(100% - 24px)); background: #0b3d91; color: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, .25); padding: .85rem 2.4rem .85rem 1rem; animation: w-nhac-len .3s ease-out; }
@media (min-width: 992px) { .w-nhac { bottom: 24px; } }
@keyframes w-nhac-len { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.w-nhac-than { display: flex; align-items: center; gap: .8rem; }
.w-nhac-than > i { font-size: 1.4rem; color: #ffd166; }
.w-nhac-than div { flex: 1; display: flex; flex-direction: column; font-size: .9rem; line-height: 1.3; }
.w-nhac-than div span { opacity: .85; font-size: .82rem; }
.w-nhac-dong { position: absolute; top: 6px; right: 6px; background: none; border: 0; color: #fff; opacity: .75; font-size: 1rem; padding: .3rem .5rem; }
.w-yt-moi { padding: .7rem 1rem; border-radius: 12px; background: #e8f0fe; color: #0b3d91; font-size: .92rem; }

/* Phân trang web công khai (partials/phan-trang kieu=web): số tròn, Trước/Sau dạng viên, trang hiện tại gradient */
.w-phan-trang { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.w-phan-trang-so { font-size: .85rem; color: #58687e; }
.w-phan-trang-so b { color: #0b3d91; }
.w-phan-trang-nut { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.w-pt-so { display: flex; align-items: center; gap: .3rem; }
.w-pt-trang, .w-pt-mui { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .6rem; border-radius: 99px; font-weight: 600; font-size: .95rem; color: #334155; background: #fff; border: 1px solid var(--w-vien); text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.w-pt-trang:hover, .w-pt-mui:hover { background: #eef3fb; border-color: #c7d5ea; color: #0b3d91; transform: translateY(-1px); }
.w-pt-dang, .w-pt-dang:hover { color: #fff; background: linear-gradient(135deg, #0d6efd, #0b3d91); border-color: transparent; box-shadow: 0 6px 16px rgba(13, 110, 253, .28); transform: none; cursor: default; }
.w-pt-mui { gap: .4rem; padding: 0 1rem; }
.w-pt-mui i { font-size: .75rem; }
.w-pt-tat { opacity: .4; pointer-events: none; }
.w-pt-cham { padding: 0 .2rem; color: #94a3b8; }
@media (max-width: 575.98px) { .w-pt-mui span { display: none; } .w-pt-mui { padding: 0; min-width: 40px; } }

/* Hero vai gia sư: thẻ bên phải là lớp mới (icon môn thay avatar), dòng số liệu lớp */
.w-hero-gs .w-hero-the-av i { font-size: 1.1rem; }
.w-hero-gs .w-hero-tin > i { font-size: 1.3rem; margin-right: .6rem; }

/* Điện thoại: thẻ bài cẩm nang nằm ngang — ảnh nhỏ bên trái, chữ bên phải (gọn, 4 bài không tốn cả màn hình) */
@media (max-width: 767.98px) {
  .w-bv { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; }
  .w-bv-anh { aspect-ratio: auto; min-height: 100%; font-size: 1.6rem; }
  .w-bv-anh img { position: absolute; inset: 0; }
  .w-bv-anh { position: relative; }
  .w-bv-than { padding: .65rem .8rem .7rem; }
  .w-bv-than small { font-size: .74rem; }
  .w-bv-than h3 { font-size: .93rem; margin: .2rem 0 .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .w-bv-than p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; }
}

/* ===== Chân trang (partials/chan-trang): nền xanh đậm, thương hiệu + liên hệ bên trái, 4 cột liên kết; điện thoại: accordion ===== */
.w-footer { background: linear-gradient(180deg, #0b1f4d 0%, #071638 100%); color: #c7d2e5; margin-top: 3.5rem; padding: 3rem 0 1.25rem; font-size: .9rem; }
.w-footer a { color: #c7d2e5; text-decoration: none; }
.w-footer a:hover { color: #fff; }
.w-footer-tren { display: grid; grid-template-columns: minmax(260px, 1.25fr) 3fr; gap: 2.5rem 3rem; }
.w-footer-brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 800; color: #fff; }
.w-footer-brand:hover { color: #fff; }
.w-footer-logo { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #2563eb, #0d6efd); color: #fff; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(13, 110, 253, .35); }
.w-footer-tagline { margin: .9rem 0 1rem; color: #9fb0cc; line-height: 1.55; max-width: 34rem; }
.w-footer-lienhe { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.w-footer-lienhe a { display: inline-flex; align-items: center; gap: .6rem; color: #e2e8f0; }
.w-footer-lienhe .w-footer-diachi { display: inline-flex; align-items: flex-start; gap: .6rem; color: #b6c3da; line-height: 1.4; }
.w-footer-lienhe i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #93c5fd; font-size: .85rem; }
.w-footer-cta { display: flex; flex-wrap: wrap; gap: .5rem; }
.w-footer-cta .btn-nhan, .w-footer-cta .btn-nhan:hover { color: #451a03; font-weight: 700; }
.w-footer-cta .btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, .45); }
.w-footer-cta .btn-outline-light:hover { color: #0b1f4d; background: #fff; }
.w-footer-cot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.w-footer-nhom summary { list-style: none; font-weight: 700; color: #fff; font-size: .95rem; margin-bottom: .75rem; display: flex; justify-content: space-between; align-items: center; cursor: default; }
.w-footer-nhom summary::-webkit-details-marker { display: none; }
.w-footer-nhom summary i { display: none; font-size: .7rem; color: #93c5fd; transition: transform .2s; }
.w-footer-nhom ul { list-style: none; margin: 0; padding: 0; }
.w-footer-nhom li { margin-bottom: .45rem; }
.w-footer-nhom li a { display: inline-block; padding: .05rem 0; }
.w-footer-2cot { columns: 2; column-gap: 1rem; }
.w-footer-2cot li { break-inside: avoid; }
.w-footer-cuoi { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.25rem; padding-top: 1.1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: .82rem; color: #8fa1c0; }
.w-footer-phu { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.w-footer-phu a { color: #b6c3da; }
@media (max-width: 991.98px) {
  .w-footer-tren { grid-template-columns: 1fr; gap: 2rem; }
  .w-footer-cot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .w-footer { padding: 2.25rem 0 1rem; }
  .w-footer-cot { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .w-footer-nhom { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .w-footer-nhom summary { margin: 0; padding: .9rem 0; cursor: pointer; }
  .w-footer-nhom summary i { display: inline; }
  .w-footer-nhom[open] summary i { transform: rotate(180deg); }
  .w-footer-nhom ul { padding-bottom: .9rem; }
  .w-footer-lienhe { flex-direction: row; flex-wrap: wrap; gap: .5rem .9rem; }
  .w-footer-cta .btn { flex: 1; }
  .w-footer-cuoi { flex-direction: column; align-items: flex-start; }
  body.co-tab-duoi .w-footer { padding-bottom: 4.5rem; }
}

/* ===== Hồ sơ gia sư /gs/{id} — điện thoại làm chuẩn, máy tính nới ra ===== */
.w-hs-dau { display: block; padding: 1rem; border-radius: 14px; }
.w-hs-top { display: flex; align-items: center; gap: .85rem; }
.w-hs-anh { flex: 0 0 auto; }
.w-hs-anh img, .w-hs-anh .w-avatar-lon { width: 84px; height: 84px; border-radius: 14px; font-size: 1.8rem; }
.w-hs-ten { min-width: 0; flex: 1; }
.w-hs-ten h1 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 .3rem; display: block; }
.w-hs-nhan { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.w-hs-nhan .w-huyhieu, .w-hs-nhan .w-nhan-tt { font-size: .74rem; }
.w-hs-nhan .w-online-chu { font-size: .78rem; }
.w-hs-sao-noi { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; margin-top: .35rem; font-size: .86rem; color: #475569; }
.w-hs-sao-noi i { color: #94a3b8; }
.w-hs-tieude { font-size: .98rem; color: #334155; margin: .85rem 0 0; line-height: 1.45; }
.w-hs-meta { display: grid; gap: .3rem; color: #475569; font-size: .86rem; margin-top: .6rem; line-height: 1.45; }
.w-hs-meta i { color: #94a3b8; margin-right: .25rem; }
.w-hs-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; border-top: 1px solid var(--w-vien); padding-top: .9rem; margin-top: .9rem; }
.w-hs-stat > div { text-align: center; background: #f8fafc; border-radius: 10px; padding: .5rem .2rem; min-width: 0; }
.w-hs-stat b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--w-xanh-dam); line-height: 1.15; }
.w-hs-stat span { display: block; font-size: .68rem; color: #58687e; line-height: 1.2; margin-top: .15rem; }
.w-hs-hanhdong { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; border-top: 1px solid var(--w-vien); padding-top: .9rem; margin-top: .9rem; align-items: stretch; }
.w-hs-hanhdong .w-hs-gia { grid-column: 1 / -1; margin: 0; font-size: .9rem; }
.w-hs-hanhdong .w-hs-gia b { font-size: 1.35rem; }
.w-hs-hanhdong .w-hs-chinh, .w-hs-hanhdong .w-goi-so { grid-column: 1 / -1; }
.w-hs-hanhdong .w-goi-so { display: flex; gap: .5rem; }
.w-hs-hanhdong .w-goi-so .btn { flex: 1; }
.w-hs-hanhdong > form { margin: 0; display: grid; }
.w-hs-hanhdong .btn { white-space: nowrap; padding: .55rem .6rem; font-size: .92rem; }
.w-hs-hanhdong .btn-primary.w-hs-chinh { padding: .7rem; font-size: 1rem; font-weight: 700; }
.w-hs-hanhdong > .small, .w-hs-hanhdong > a.small { grid-column: 1 / -1; }
.w-hs-chan { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .74rem; color: #64748b; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--w-vien); line-height: 1.4; }
.w-hs-chan a { margin-left: 0; }
.w-hs-khoi { padding: 1rem; border-radius: 14px; }
.w-hs-khoi h2 { font-size: 1.05rem; margin-bottom: .75rem; }
.w-hs-gioithieu { line-height: 1.6; font-size: .95rem; }
/* Môn dạy: mỗi môn một khối, các dòng cấp · thời lượng · giá */
.w-hsmon-ds { display: grid; gap: .6rem; }
.w-hsmon { border: 1px solid var(--w-vien); border-radius: 12px; overflow: hidden; }
.w-hsmon-ten { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: #f1f5f9; font-weight: 700; }
.w-hsmon-ten i { color: var(--bs-primary); }
.w-hsmon-ten a { color: #0f172a; }
.w-hsmon-dong > div { text-align: left; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "cap gia" "phut gia"; align-items: center; column-gap: .75rem; padding: .5rem .8rem; border-top: 1px solid #eef2f7; }
.w-hsmon-dong > div:first-child { border-top: 0; }
.w-hsmon-cap { grid-area: cap; font-weight: 600; font-size: .93rem; }
.w-hsmon-phut { grid-area: phut; font-size: .78rem; color: #58687e; }
.w-hsmon-gia { grid-area: gia; font-size: 1rem; color: var(--w-xanh-dam); white-space: nowrap; }
.w-hsmon-gia::after { content: " /buổi"; font-size: .72rem; font-weight: 500; color: #58687e; }
.w-lich th, .w-lich td { padding: .45rem .3rem; font-size: .85rem; }
.w-dg-tong { grid-template-columns: 90px 1fr; gap: .9rem; }
@media (max-width: 575.98px) {
  .w-hs-dau { grid-template-columns: none; }
  .w-hs-anh { text-align: left; }
  .w-breadcrumb { font-size: .82rem; }
}
@media (min-width: 768px) {
  /* máy tính: ảnh cạnh tên; tiêu đề, meta, số liệu, hành động, chân trải hết bề ngang */
  .w-hs-dau { padding: 1.5rem; border-radius: 16px; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0; align-items: start; } /* row-gap 0: bản gốc gap 1.25rem làm các dòng rời rạc */
  .w-hs-top { display: contents; }
  .w-hs-anh { grid-column: 1; grid-row: 1; }
  .w-hs-ten { grid-column: 2; align-self: center; }
  .w-hs-tieude, .w-hs-meta { grid-column: 1 / -1; } /* tiêu đề + dòng thông tin trải hết bề ngang (như điện thoại), không chừa trống dưới ảnh */
  .w-hs-tieude { margin: .9rem 0 0; font-weight: 500; color: #1e293b; }
  .w-hs-meta { margin-top: .5rem; }
  .w-hs-stat, .w-hs-hanhdong, .w-hs-chan { grid-column: 1 / -1; }
  .w-hs-anh img, .w-hs-anh .w-avatar-lon { width: 96px; height: 96px; border-radius: 16px; font-size: 2.1rem; }
  .w-hs-ten h1 { font-size: 1.6rem; }
  .w-hs-tieude { font-size: 1.05rem; }
  .w-hs-meta { font-size: .9rem; grid-template-columns: 1fr; }
  .w-hs-stat { gap: .6rem; }
  .w-hs-stat b { font-size: 1.35rem; }
  .w-hs-stat span { font-size: .78rem; }
  .w-hs-hanhdong { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .w-hs-hanhdong .w-hs-gia { flex: 1 1 auto; margin-right: auto; }
  .w-hs-hanhdong .btn, .w-hs-hanhdong .btn-primary.w-hs-chinh { padding: .5rem 1rem; font-size: .95rem; font-weight: 600; }
  .w-hs-hanhdong .w-goi-so { display: inline-flex; }
  .w-hs-chan { font-size: .78rem; }
  .w-hs-chan a { margin-left: auto; }
  .w-hs-khoi { padding: 1.25rem 1.5rem; border-radius: 16px; }
  .w-hs-khoi h2 { font-size: 1.1rem; margin-bottom: .9rem; }
  .w-hsmon-dong > div { grid-template-columns: 1fr auto auto; grid-template-areas: "cap phut gia"; column-gap: 1.25rem; }
  .w-hsmon-phut { font-size: .85rem; }
  .w-hsmon-gia { font-size: 1.05rem; }
  .w-dg-tong { grid-template-columns: 110px 1fr; gap: 1.25rem; }
}

/* ===== Trang tin /lop/{số} — điện thoại làm chuẩn ===== */
.w-tin-dau h1 { font-size: 1.25rem; font-weight: 800; line-height: 1.3; margin: 0 0 .35rem; }
.w-tin-meta { font-size: .82rem; color: #64748b; }
.w-tin-gia { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .7rem; font-size: .95rem; color: #475569; }
.w-tin-gia b { font-size: 1.45rem; font-weight: 800; color: #15803d; }
.w-tin-gia small { font-size: .82rem; }
.w-tin-gia .badge { font-size: .78rem; padding: .4em .7em; }
.w-tin-cta { margin-top: .9rem; padding-top: .9rem; }
.w-tin-cta .btn-lg { font-size: 1rem; padding: .7rem 1rem; font-weight: 700; }
.w-tin-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.w-tin-luoi > div { display: grid; grid-template-columns: 1.4rem 1fr; grid-template-areas: "icon nhan" "icon gia"; column-gap: .45rem; row-gap: .05rem; align-items: start; background: #f8fafc; border-radius: 10px; padding: .55rem .6rem; min-width: 0; }
.w-tin-luoi > div > i { grid-area: icon; color: var(--bs-primary); font-size: .95rem; margin-top: .15rem; text-align: center; }
.w-tin-luoi small { grid-area: nhan; font-size: .7rem; text-transform: uppercase; letter-spacing: .02em; color: #64748b; }
.w-tin-luoi b { grid-area: gia; font-size: .9rem; font-weight: 600; color: #0f172a; line-height: 1.35; overflow-wrap: anywhere; }
.w-tin-luoi .w-tin-rong { grid-column: 1 / -1; }
.w-nhip-trai h2, .w-hs-khoi > h2.h6 { font-size: .82rem; }
@media (max-width: 575.98px) {
  .w-tin-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-tin-cta > .btn-lg { flex: 1 1 100%; }
  .w-tin-cta > .small { flex: 1 1 100%; }
}
@media (min-width: 768px) {
  .w-tin-dau h1 { font-size: 1.5rem; }
  .w-tin-meta { font-size: .86rem; }
  .w-tin-gia { justify-content: flex-start; gap: 1rem; }
  .w-tin-gia b { font-size: 1.6rem; }
  .w-tin-luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .w-tin-luoi .w-tin-rong { grid-column: span 2; }
  .w-tin-luoi b { font-size: .92rem; }
  .w-tin-cta .btn-lg { font-size: 1rem; padding: .6rem 1.25rem; }
}

/* ===== Trang chủ trên điện thoại: gọn, không tràn ngang ===== */
@media (max-width: 575.98px) {
  .w-khoi-tc { padding-top: 2rem; padding-bottom: 2rem; }
  .w-tieude-muc { margin-bottom: 1rem; }
  .w-tieude-muc h2 { font-size: 1.2rem; line-height: 1.3; }
  .w-tieude-muc .text-secondary { font-size: .9rem; }
  /* chip "Tìm nhiều": một hàng trượt ngang, không cắt chữ */
  .w-hero-chip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem; padding-bottom: .15rem; }
  .w-hero-chip::-webkit-scrollbar { display: none; }
  .w-hero-chip > * { flex: 0 0 auto; white-space: nowrap; }
  .w-hero-dang { display: flex; }
  /* dải tin cậy: 2×2, chữ xuống dòng được */
  .w-tin-cay .container > div { grid-template-columns: 32px 1fr; column-gap: .55rem; padding: .8rem .7rem; min-width: 0; }
  .w-tin-cay i { width: 32px; height: 32px; font-size: .9rem; border-radius: 9px; }
  .w-tin-cay b { font-size: .86rem; line-height: 1.25; overflow-wrap: anywhere; }
  .w-tin-cay small { font-size: .74rem; line-height: 1.3; }
  /* 4 bước: thẻ gọn */
  .w-buoc-luoi { gap: .6rem; }
  .w-buoc2 { padding: .95rem 1rem; border-radius: 14px; grid-template-columns: 36px minmax(0, 1fr); column-gap: .7rem; }
  .w-buoc2 > i { width: 36px; height: 36px; }
  .w-buoc2 h3 { font-size: 1rem; }
  .w-buoc2 p { font-size: .86rem; margin-top: .45rem; }
  .w-buoc2 em { font-size: 2.4rem; bottom: -.2rem; right: .7rem; }
  /* học phí tham khảo: số không gãy dòng */
  .w-hp-bang { gap: .6rem; padding: 1rem; border-radius: 14px; }
  .w-hp-cap { padding: .8rem .7rem; }
  .w-hp-cap b { font-size: .95rem; }
  .w-hp-cap strong { font-size: 1.15rem; white-space: nowrap; margin-top: .25rem; }
  .w-hp-cap span { font-size: .74rem; }
  /* cam kết: 2 nút chia đôi hàng, số liệu gọn */
  .w-cam-ket { padding: 2.5rem 0; }
  .w-cam-ket h2 { font-size: 1.45rem; }
  .w-cam-ket p { font-size: .95rem; margin: .8rem 0 1.1rem; }
  .w-cam-ket-trai .d-flex { gap: .5rem !important; }
  .w-cam-ket-trai .d-flex > .btn { flex: 1 1 0; font-size: .95rem; padding: .65rem .5rem; white-space: nowrap; }
  .w-cam-ket .container { gap: 1.5rem; }
  .w-cam-ket-so { gap: .6rem; }
  .w-cam-ket-so div { padding: .9rem 1rem; border-radius: 12px; }
  .w-cam-ket-so b { font-size: 1.6rem; }
  .w-cam-ket-so small { font-size: .82rem; }
}

/* ===== Thẻ gia sư trong danh sách trên điện thoại: ảnh + tên một hàng, tiêu đề/thông tin trải hết, giá + hoạt động một hàng ===== */
@media (max-width: 575.98px) {
  .w-the.w-the-bao { padding: .85rem; gap: .7rem; }
  .w-the-bao .w-the-than { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: .7rem; row-gap: .55rem; align-items: center; }
  .w-the-bao .w-the-anh { float: none; margin: 0; width: 64px; grid-column: 1; grid-row: 1; align-self: start; }
  .w-the-bao .w-the-anh img, .w-the-bao .w-avatar-lon { width: 64px; height: 64px; font-size: 1.5rem; }
  .w-the-bao .w-the-nhan-nb { font-size: .62rem; padding: .08rem .4rem; bottom: -7px; }
  .w-the-bao .w-the-dau { grid-column: 2; grid-row: 1; gap: .3rem .45rem; align-self: center; }
  .w-the-bao .w-the-dau h3 { font-size: 1rem; width: 100%; line-height: 1.25; }
  .w-the-bao .w-the-tieude, .w-the-bao .w-the-thongtin, .w-the-bao .w-the-mon { grid-column: 1 / -1; }
  .w-the-bao .w-the-tieude { margin: 0; font-size: .9rem; line-height: 1.4; color: #334155; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .w-the-bao .w-the-thongtin { font-size: .82rem; }
  .w-the-bao .w-the-thongtin > span { margin-bottom: .05rem; }
  .w-the-bao .w-the-mon { margin-top: .2rem; gap: .3rem; }
  .w-the-bao .w-the-mon .w-chip { font-size: .78rem; padding: .15rem .55rem; }
  .w-the-bao .w-the-phai { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .5rem; column-gap: .5rem; align-items: center; padding-top: .65rem; }
  .w-the-bao .w-the-gia { grid-column: 1 / -1; grid-row: 1; white-space: nowrap; }
  .w-the-bao .w-the-gia b { font-size: 1.05rem; }
  .w-the-bao .w-the-phai > span[data-hd] { grid-column: 2; grid-row: 2; font-size: .76rem; text-align: right; white-space: nowrap; }
  .w-the-bao .w-the-hinhthuc { grid-column: 1; grid-row: 2; }
  .w-the-bao .w-the-nut { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .w-the-bao .w-the-nut .btn { padding: .45rem .5rem; font-size: .88rem; }
}
/* Thẻ tin điện thoại: hàng chip bắt đầu dưới biểu tượng môn, trải hết bề ngang (không kẹp cạnh icon rồi gãy dòng) */
@media (max-width: 575.98px) {
  .w-tin-mon { width: 40px; height: 40px; font-size: 1.05rem; margin: 0 .7rem .35rem 0; border-radius: 11px; }
  .w-tin-dau { min-height: 40px; }
  .w-tin-chip { clear: left; margin: .35rem 0 .45rem; }
}
/* Bảng học phí (/hoc-phi) điện thoại: số không gãy dòng, hàng thấp, chữ gọn */
.w-bang-hp td.text-end, .w-bang-ss td.text-end { white-space: nowrap; }
@media (max-width: 575.98px) {
  .w-bang-hp th, .w-bang-hp td { padding: .55rem .7rem; font-size: .9rem; }
  .w-bang-hp thead th { font-size: .7rem; letter-spacing: .03em; }
  .w-hp-o { padding: .85rem .95rem; }
  .w-hp-o b { font-size: 1.3rem; }
}

/* ===== Huy hiệu thành tích đã xác minh (partials/huy-hieu-tt) + khối trên hồ sơ ===== */
.w-huyhieu-tt { background: #fef3c7; color: #92400e; text-decoration: none; }
a.w-huyhieu-tt:hover { background: #fde68a; color: #78350f; }
.w-huyhieu-tt-noi_tieng { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #451a03; }
.w-huyhieu-tt-olympic, .w-huyhieu-tt-hsg_qg { background: #ede9fe; color: #5b21b6; }
.w-huyhieu-tt-chung_chi, .w-huyhieu-tt-du_hoc { background: #dbeafe; color: #1e40af; }
.w-tt-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.w-tt-ds li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; padding: .6rem .8rem; border: 1px solid var(--w-vien); border-radius: 12px; background: #fffdf5; }
.w-tt-ds li > i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #fef3c7; color: #b45309; font-size: 1rem; }
.w-tt-ds b { display: block; font-size: .95rem; }
.w-tt-ds span { font-size: .86rem; color: #475569; }
@media (max-width: 575.98px) { .w-tt-ds li { grid-template-columns: 34px minmax(0, 1fr); } .w-tt-ds li > a { grid-column: 2; } }

/* ===== Icon SVG inline (helpers svg_icon / icon_mon): cỡ theo font-size của chỗ đặt, như icon font ===== */
.w-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; flex: 0 0 auto; }
.w-ic .n { fill: currentColor; fill-opacity: .14; stroke: none; }
.w-mon-ic .w-ic, .w-tin-mon .w-ic { width: 1.25em; height: 1.25em; vertical-align: middle; }
.w-hsmon-ten .w-ic { width: 1.2em; height: 1.2em; margin-right: .1rem; color: var(--bs-primary); }
.w-tt-ds li > .w-ic { width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: #fef3c7; color: #b45309; }
.w-huyhieu .w-ic { width: 1.05em; height: 1.05em; }
.w-tin-luoi > div > .w-ic { grid-area: icon; color: var(--bs-primary); width: 1.15em; height: 1.15em; margin-top: .1rem; }

/* ===== /lam-gia-su trên điện thoại: hero gọn, bảng so sánh thành thẻ, bước xếp ngang icon–chữ ===== */
@media (max-width: 767.98px) {
  .w-lgs-nut > .btn { flex: 1 1 100%; }
  .w-lgs-so { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .w-lgs-so > div { flex-direction: column; align-items: flex-start; gap: .1rem; padding: .7rem .75rem; }
  .w-lgs-so b { font-size: 1.25rem; line-height: 1.1; }
  .w-lgs-so span { font-size: .76rem; line-height: 1.3; }
  /* bảng so sánh → mỗi tiêu chí một thẻ: nhãn trên, hai cột Trung tâm | Gia Sư Miễn Phí */
  .w-bang-ss-mobi thead { display: none; }
  .w-bang-ss-mobi, .w-bang-ss-mobi tbody { display: block; }
  .w-bang-ss-mobi tr { display: grid; grid-template-columns: 1fr 1fr; padding: .6rem 0; border-bottom: 1px solid var(--w-vien); }
  .w-bang-ss-mobi tr:last-child { border-bottom: 0; }
  .w-bang-ss-mobi th, .w-bang-ss-mobi td { display: block; border: 0; padding: .15rem .8rem; width: auto; font-size: .88rem; }
  .w-bang-ss-mobi tbody th { grid-column: 1 / -1; width: auto; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #58687e; padding-bottom: .3rem; }
  .w-bang-ss-mobi td::before { display: block; font-size: .7rem; font-weight: 600; color: #94a3b8; margin-bottom: .1rem; }
  .w-bang-ss-mobi td:nth-child(2)::before { content: "Trung tâm thường gặp"; }
  .w-bang-ss-mobi td:nth-child(3)::before { content: "Gia Sư Miễn Phí"; color: var(--bs-primary); }
  .w-bang-ss-mobi .w-bang-ss-ta { background: none; font-weight: 600; }
  .w-bang-ss-mobi td:nth-child(2) { color: #64748b; }
  /* bước / huy hiệu: icon bên trái, chữ bên phải, thẻ thấp */
  .w-lgs-buoc { --bs-gutter-y: .6rem; }
  .w-lgs-buoc .w-buoc { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .8rem; padding: .9rem 1rem; border-radius: 12px; align-items: start; }
  .w-lgs-buoc .w-buoc i { width: 44px; height: 44px; font-size: 1.15rem; margin: 0; grid-row: 1 / 3; }
  .w-lgs-buoc .w-buoc h3 { font-size: .98rem; margin: 0 0 .2rem; }
  .w-lgs-buoc .w-buoc p { font-size: .86rem; line-height: 1.45; }
  .w-giasu-hop { padding: 1.1rem; }
  .w-cta { padding: 2rem 0; text-align: center; }
  .w-cta h2 { font-size: 1.35rem; }
}
/* ===== /lam-gia-su PC: icon không đứng một mình — icon trái, tiêu đề cùng hàng, mô tả bên dưới ===== */
@media (min-width: 768px) {
  .w-lgs-buoc .w-buoc { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .85rem; align-items: center; padding: 1.25rem 1.35rem; }
  .w-lgs-buoc .w-buoc i { width: 44px; height: 44px; font-size: 1.25rem; margin: 0; border-radius: 12px; }
  .w-lgs-buoc .w-buoc h3 { margin: 0; font-size: 1.05rem; }
  .w-lgs-buoc .w-buoc p { grid-column: 1 / -1; margin-top: .75rem; font-size: .92rem; line-height: 1.5; }
}
/* ===== /lam-gia-su (bản mới 10/2026): hero lọc môn × tỉnh + bảng số, máy tính thu nhập, lộ trình 5 mốc ===== */
.w-lgs-hero { padding: 2.5rem 0 1.5rem; }
.w-lgs-loc { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: end; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .8rem; margin-top: 1rem; }
.w-lgs-loc label { display: block; margin: 0; }
.w-lgs-loc label span { display: block; font-size: .72rem; font-weight: 600; color: #58687e; margin: 0 0 .25rem .1rem; text-transform: uppercase; letter-spacing: .03em; }
.w-lgs-loc .btn { white-space: nowrap; padding-top: .5rem; padding-bottom: .5rem; }
.w-lgs-bang { background: #fff; border: 1px solid var(--w-vien); border-radius: 18px; padding: 1.1rem 1.2rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); }
.w-lgs-bang-dau { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.w-lgs-bang-dau b { font-size: 1.02rem; color: #0f172a; }
.w-lgs-bang-dau small { color: #64748b; }
.w-lgs-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.w-lgs-so > * { display: block; background: var(--w-nen-nhe); border-radius: 12px; padding: .75rem .8rem; color: inherit; }
.w-lgs-so a:hover { background: #eef4ff; color: inherit; }
.w-lgs-so b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--w-xanh-dam); }
.w-lgs-so span { display: block; font-size: .78rem; color: #58687e; line-height: 1.3; margin-top: .15rem; }
.w-lgs-gia { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .8rem; padding: .8rem .9rem; border: 1px dashed #bfd3f5; border-radius: 12px; background: #f6f9ff; }
.w-lgs-gia small { display: block; font-size: .76rem; color: #58687e; }
.w-lgs-gia b { display: block; font-size: 1.15rem; color: #0f172a; line-height: 1.2; margin: .1rem 0; }
.w-lgs-gia-phi { text-align: right; flex: 0 0 auto; }
.w-lgs-gia-phi b { color: #15803d; font-size: 1.35rem; }
.w-lgs-bang-nut { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.w-lgs-bang-nut .btn { flex: 1 1 auto; }
.w-lgs-tin { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1.4rem; color: #58687e; font-size: .88rem; }
.w-lgs-tin b { color: #0f172a; }
/* máy tính thu nhập */
.w-lgs-may { padding: 1.25rem 1.35rem; margin: 0; }
.w-lgs-may-hang { margin-bottom: 1rem; }
.w-lgs-may-hang label { display: flex; justify-content: space-between; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.w-lgs-may-hang output { color: var(--bs-primary); font-weight: 800; }
.w-lgs-may-moc { display: flex; justify-content: space-between; font-size: .72rem; color: #94a3b8; }
.w-lgs-may-kq { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.w-lgs-may-chinh { background: linear-gradient(145deg, #0b3d91, #0f172a); color: #fff; border-radius: 14px; padding: 1.1rem 1.2rem; }
.w-lgs-may-chinh small { display: block; opacity: .75; font-size: .78rem; }
.w-lgs-may-chinh b { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.15; margin: .25rem 0; letter-spacing: -.01em; }
.w-lgs-may-ss { display: grid; gap: .6rem; }
.w-lgs-may-ss > div { border: 1px solid var(--w-vien); border-radius: 12px; padding: .7rem .85rem; font-size: .84rem; color: #475569; }
.w-lgs-may-ss small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; margin-bottom: .15rem; }
.w-lgs-may-ss b { color: #b91c1c; }
.w-lgs-may-ok { background: #f0fdf4; border-color: #bbf7d0 !important; }
.w-lgs-may-ok small { color: #15803d; }
.w-lgs-may-ok b { color: #15803d; }
.w-lgs-khac { background: var(--w-nen-nhe); border-radius: 18px; padding: 1.25rem 1.35rem; height: 100%; }
.w-lgs-khac h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 1rem; }
.w-lgs-khac ul { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .8rem; }
.w-lgs-khac li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: .7rem; align-items: start; }
.w-lgs-khac li i { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--bs-primary); display: grid; place-items: center; border: 1px solid var(--w-vien); }
.w-lgs-khac li b { display: block; font-size: .95rem; }
.w-lgs-khac li span { display: block; font-size: .86rem; color: #475569; line-height: 1.45; }
/* lộ trình 5 mốc */
.w-lgs-tien { background: #fff; border: 1px solid var(--w-vien); border-radius: 99px; padding: .4rem .9rem; font-size: .9rem; color: #58687e; }
.w-lgs-tien b { color: var(--w-xanh-dam); font-size: 1.05rem; }
.w-lgs-moc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.w-lgs-moc li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: .7rem; align-items: start; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: 1rem 1rem 1.05rem; }
.w-lgs-moc-so { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #eef4ff; color: var(--bs-primary); font-size: .95rem; }
.w-lgs-moc li.dat { border-color: #bbf7d0; background: #f6fef9; }
.w-lgs-moc li.dat .w-lgs-moc-so { background: #16a34a; color: #fff; }
.w-lgs-moc li.ke { border-color: var(--bs-primary); box-shadow: 0 8px 24px rgba(37, 99, 235, .12); }
.w-lgs-moc-than { min-width: 0; }
.w-lgs-moc-dau { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: .35rem; }
.w-lgs-moc-dau i { color: var(--bs-primary); font-size: .9rem; }
.w-lgs-moc-dau h3 { font-size: .98rem; font-weight: 700; margin: 0; }
.w-lgs-moc-dau em { font-style: normal; font-size: .7rem; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 99px; padding: .1rem .5rem; }
.w-lgs-moc p { font-size: .85rem; color: #475569; line-height: 1.45; margin: 0 0 .6rem; }
.w-lgs-moc .btn { padding: .25rem .7rem; }
/* gia sư tiêu biểu / đánh giá */
.w-lgs-gs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-lgs-dg { display: grid; gap: .8rem; }
.w-lgs-dg .w-dg-v2 { padding: 1rem 1.1rem; }
.w-lgs-dg .w-dg-v2 p { font-size: .92rem; }
@media (max-width: 1199.98px) { .w-lgs-moc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .w-lgs-hero { padding: 1.5rem 0 1.25rem; }
  .w-lgs-loc { grid-template-columns: 1fr 1fr; padding: .65rem; }
  .w-lgs-loc .btn { grid-column: 1 / -1; }
  .w-lgs-bang { padding: .9rem; border-radius: 14px; }
  .w-lgs-so { gap: .45rem; }
  .w-lgs-so > * { padding: .6rem .55rem; }
  .w-lgs-so b { font-size: 1.25rem; }
  .w-lgs-so span { font-size: .72rem; }
  .w-lgs-gia { padding: .65rem .75rem; }
  .w-lgs-gia b { font-size: 1rem; }
  .w-lgs-gia-phi b { font-size: 1.2rem; }
  .w-lgs-bang-nut .btn { flex: 1 1 100%; }
  .w-lgs-tin { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem; font-size: .8rem; margin-top: 1rem; }
  .w-lgs-may { padding: 1rem; }
  .w-lgs-may-kq { grid-template-columns: 1fr; }
  .w-lgs-may-chinh b { font-size: 1.6rem; }
  .w-lgs-khac { padding: 1rem; }
  .w-lgs-moc { grid-template-columns: 1fr; gap: .55rem; }
  .w-lgs-moc li { padding: .8rem .85rem; }
  .w-lgs-gs { grid-template-columns: 1fr 1fr; gap: .6rem; }
}
@media (max-width: 479.98px) { .w-lgs-gs { grid-template-columns: 1fr; } }
/* ===== /cam-nang (làm lại 10/2026): hub hai làn lộ trình, theo môn, chủ đề + trụ cột, số liệu sàn; trang môn; trang số liệu; bài viết ===== */
.w-cn-dau { background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 60%, #fff 100%); border-bottom: 1px solid var(--w-vien); padding: 1.2rem 0 1.6rem; }
.w-cn-dau-than { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 1.5rem; align-items: end; margin-top: .6rem; }
.w-cn-tim { position: relative; display: flex; gap: .5rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .45rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); }
.w-cn-tim > i { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.w-cn-tim .form-control { border: 0; padding-left: 2.2rem; box-shadow: none; }
.w-cn-lan-tab { display: inline-flex; gap: .3rem; background: var(--w-nen-nhe); border: 1px solid var(--w-vien); border-radius: 99px; padding: .25rem; margin-bottom: 1rem; }
.w-cn-lan-tab button { border: 0; background: none; border-radius: 99px; padding: .45rem 1.1rem; font-weight: 600; color: #475569; }
.w-cn-lan-tab button.dang { background: #fff; color: var(--w-xanh-dam); box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.w-cn-lan { display: none; }
.w-cn-lan.dang { display: block; }
.w-cn-lan-dau { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.w-cn-lan-dau > i { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--w-xanh-dam); color: #fff; font-size: 1.2rem; flex: 0 0 auto; }
.w-cn-lan-dau h2 { font-size: 1.35rem; font-weight: 800; margin: 0; }
.w-cn-lan-dau p { margin: 0; color: #58687e; font-size: .92rem; }
.w-cn-buoc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; counter-reset: b; }
.w-cn-buoc > li { background: #fff; border: 1px solid var(--w-vien); border-radius: 16px; padding: 1rem 1.05rem 1.1rem; position: relative; }
.w-cn-buoc > li:not(:last-child)::after { content: ""; position: absolute; top: 1.85rem; right: -.95rem; width: .95rem; border-top: 2px dashed #bfd3f5; }
.w-cn-buoc-dau { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .65rem; align-items: start; margin-bottom: .7rem; }
.w-cn-buoc-dau > span { width: 34px; height: 34px; border-radius: 50%; background: #eef4ff; color: var(--bs-primary); font-weight: 800; display: grid; place-items: center; }
.w-cn-buoc-dau h3 { font-size: 1rem; font-weight: 800; margin: .1rem 0 .1rem; }
.w-cn-buoc-dau small { display: block; color: #64748b; font-size: .78rem; line-height: 1.35; }
.w-cn-buoc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.w-cn-buoc ul a { display: block; padding: .38rem .45rem .38rem 1.1rem; position: relative; font-size: .88rem; line-height: 1.4; color: #1e293b; border-radius: 8px; }
.w-cn-buoc ul a::before { content: ""; position: absolute; left: .35rem; top: .85rem; width: 5px; height: 5px; border-radius: 50%; background: var(--bs-primary); }
.w-cn-buoc ul a:hover { background: #f1f6ff; color: var(--w-xanh-dam); }
.w-cn-mon { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }
.w-cn-mon a { display: flex; flex-direction: column; gap: .2rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .85rem .9rem; color: inherit; transition: border-color .15s, box-shadow .15s; }
.w-cn-mon a:hover { border-color: var(--bs-primary); box-shadow: 0 6px 18px rgba(37, 99, 235, .08); color: inherit; }
.w-cn-mon b { font-size: .98rem; }
.w-cn-mon small { color: #64748b; font-size: .76rem; line-height: 1.35; }
.w-cn-mon-ic { width: 30px; height: 30px; color: var(--bs-primary); font-size: 1.3rem; margin-bottom: .25rem; }
.w-cn-cd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.w-cn-cd-the { background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .45rem; }
.w-cn-cd-ten { font-weight: 800; color: #0f172a; font-size: 1.02rem; }
.w-cn-cd-ten small { font-weight: 500; color: #94a3b8; font-size: .78rem; margin-left: .25rem; }
.w-cn-cd-tru { font-size: .87rem; color: #334155; line-height: 1.4; }
.w-cn-cd-tru i { color: #f59e0b; margin-right: .2rem; }
.w-cn-sl { display: block; height: 100%; background: linear-gradient(160deg, #0b3d91, #0f172a); color: #fff; border-radius: 18px; padding: 1.2rem 1.25rem; }
.w-cn-sl:hover { color: #fff; box-shadow: 0 12px 30px rgba(11, 61, 145, .25); }
.w-cn-sl-dau { display: flex; gap: .7rem; align-items: center; margin-bottom: .9rem; }
.w-cn-sl-dau > i { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.w-cn-sl-dau b { display: block; }
.w-cn-sl-dau small { opacity: .7; font-size: .78rem; }
.w-cn-sl ul { list-style: none; padding: 0; margin: 0 0 .9rem; display: grid; gap: .55rem; }
.w-cn-sl li { display: flex; gap: .6rem; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: .55rem; }
.w-cn-sl li b { flex: 0 0 auto; font-size: 1.05rem; min-width: 6.5rem; }
.w-cn-sl li span { font-size: .83rem; opacity: .8; line-height: 1.35; }
.w-cn-sl-xem { font-weight: 600; font-size: .9rem; }
.w-cn-moi { display: grid; gap: .7rem; }
.w-cn-moi-the { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .55rem; color: inherit; }
.w-cn-moi-the:hover { border-color: var(--bs-primary); color: inherit; }
.w-cn-moi-the .w-bv-anh { border-radius: 10px; overflow: hidden; font-size: 1.6rem; }
.w-cn-moi-the h3 { font-size: .98rem; font-weight: 700; margin: .15rem 0 .25rem; color: #0f172a; }
.w-cn-moi-the p { font-size: .84rem; color: #475569; margin: 0; }
.w-cn-hay { counter-reset: h; list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.w-cn-hay li { counter-increment: h; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: .6rem; background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; padding: .7rem .85rem; }
.w-cn-hay li::before { content: counter(h); grid-row: 1 / 3; font-weight: 900; font-size: 1.35rem; color: #cbd5e1; line-height: 1.1; }
.w-cn-hay a { font-weight: 600; color: #0f172a; font-size: .92rem; line-height: 1.4; }
.w-cn-hay small { color: #94a3b8; font-size: .76rem; }
/* danh sách: lọc */
.w-cn-loc { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.25rem; }
.w-cn-loc-dt { display: inline-flex; background: var(--w-nen-nhe); border: 1px solid var(--w-vien); border-radius: 99px; padding: .2rem; }
.w-cn-loc-dt input { display: none; }
.w-cn-loc-dt span { display: block; padding: .28rem .8rem; border-radius: 99px; font-size: .85rem; font-weight: 600; color: #475569; cursor: pointer; }
.w-cn-loc-dt input:checked + span { background: #fff; color: var(--w-xanh-dam); box-shadow: 0 1px 6px rgba(15, 23, 42, .08); }
.w-cn-loc-q { display: flex; gap: .3rem; margin-left: auto; }
.w-cn-loc-q .form-control { width: 200px; }
/* trang môn */
.w-cn-mon-dau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 1.25rem; align-items: center; margin-bottom: .5rem; }
.w-cn-mon-ten { display: flex; gap: .9rem; align-items: center; }
.w-cn-mon-ten .w-cn-mon-ic { width: 54px; height: 54px; font-size: 2rem; padding: .7rem; border-radius: 14px; background: #eef4ff; margin: 0; flex: 0 0 auto; }
.w-cn-mon-so { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.w-cn-mon-so > * { display: block; background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; padding: .65rem .75rem; color: inherit; }
.w-cn-mon-so a:hover { border-color: var(--bs-primary); color: inherit; }
.w-cn-mon-so b { display: block; font-size: 1.12rem; color: var(--w-xanh-dam); line-height: 1.2; }
.w-cn-mon-so span { display: block; font-size: .74rem; color: #64748b; line-height: 1.3; margin-top: .1rem; }
.w-cn-bang td { font-size: .88rem; padding: .4rem .25rem; }
/* trang số liệu */
.w-sl-tong { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0 1.75rem; }
.w-sl-tong > div { background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .9rem 1rem; }
.w-sl-tong b { display: block; font-size: 1.45rem; font-weight: 800; color: var(--w-xanh-dam); line-height: 1.15; }
.w-sl-tong span { display: block; font-size: .8rem; color: #58687e; margin-top: .2rem; line-height: 1.35; }
.w-sl-bang td, .w-sl-bang th { white-space: nowrap; }
.w-sl-bang td a { color: #0f172a; }
.w-sl-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.w-sl-cot > div { background: var(--w-nen-nhe); border-radius: 12px; padding: .75rem .85rem; }
.w-sl-cot span { display: block; font-size: .8rem; color: #58687e; }
.w-sl-cot b { display: block; font-size: 1.12rem; color: #0f172a; }
.w-sl-cot small { color: #94a3b8; font-size: .74rem; }
.w-sl-ca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.w-sl-ca > div { background: var(--w-nen-nhe); border-radius: 12px; padding: .65rem .8rem; display: flex; justify-content: space-between; align-items: baseline; }
.w-sl-ca b { font-size: 1.2rem; color: var(--w-xanh-dam); }
.w-sl-thu { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; height: 120px; align-items: end; }
.w-sl-thu > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3rem; }
.w-sl-thu i { display: block; width: 100%; max-width: 34px; background: linear-gradient(180deg, #3b82f6, #1d4ed8); border-radius: 6px 6px 2px 2px; min-height: 4px; }
.w-sl-thu span { font-size: .75rem; color: #64748b; }
.w-sl-tinh { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.w-sl-tinh a { background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; padding: .7rem .85rem; color: inherit; }
.w-sl-tinh a:hover { border-color: var(--bs-primary); color: inherit; }
.w-sl-tinh b { display: block; }
.w-sl-tinh span { font-size: .78rem; color: #64748b; }
/* bài viết */
.w-cn-bv-lan { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--w-xanh-dam); background: #eef4ff; border-radius: 99px; padding: .25rem .75rem; margin-bottom: .6rem; }
.w-cn-song { border: 1px solid #bfd3f5; background: #f6f9ff; border-radius: 16px; padding: 1rem 1.1rem; margin-top: 1.75rem; }
.w-cn-song-dau { font-weight: 700; font-size: .92rem; color: var(--w-xanh-dam); margin-bottom: .7rem; }
.w-cn-song-dau i { margin-right: .3rem; }
.w-cn-song-so { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.w-cn-song-so > * { display: block; background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; padding: .6rem .7rem; color: inherit; }
.w-cn-song-so a:hover { border-color: var(--bs-primary); color: inherit; }
.w-cn-song-so b { display: block; font-size: 1.1rem; color: #0f172a; }
.w-cn-song-so span { display: block; font-size: .74rem; color: #64748b; line-height: 1.3; }
.w-cn-huu { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.5rem; padding: .8rem 1rem; border: 1px dashed var(--w-vien); border-radius: 12px; }
.w-cn-huu > span { font-weight: 600; margin-right: .3rem; }
.w-cn-ke { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.25rem; }
.w-cn-ke a { display: block; border: 1px solid var(--w-vien); border-radius: 14px; padding: .8rem 1rem; color: inherit; background: #fff; }
.w-cn-ke a:hover { border-color: var(--bs-primary); color: inherit; }
.w-cn-ke small { display: block; color: var(--bs-primary); font-weight: 600; font-size: .78rem; margin-bottom: .15rem; }
.w-cn-ke b { font-size: .93rem; line-height: 1.4; }
.w-cn-ke-sau { text-align: right; grid-column: 2; }
@media (max-width: 1199.98px) { .w-cn-buoc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w-cn-buoc > li:nth-child(2)::after { display: none; } .w-cn-mon { grid-template-columns: repeat(4, minmax(0, 1fr)); } .w-cn-mon-dau { grid-template-columns: 1fr; } .w-sl-tinh { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .w-cn-dau { padding: .8rem 0 1.1rem; }
  .w-cn-dau-than { grid-template-columns: 1fr; gap: .9rem; }
  .w-cn-lan-tab { display: flex; width: 100%; }
  .w-cn-lan-tab button { flex: 1; padding: .45rem .5rem; }
  .w-cn-lan-dau h2 { font-size: 1.15rem; }
  .w-cn-buoc { grid-template-columns: 1fr; gap: .6rem; }
  .w-cn-buoc > li { padding: .85rem .9rem .9rem; }
  .w-cn-buoc > li::after { display: none; }
  .w-cn-mon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .w-cn-mon a { padding: .7rem .75rem; }
  .w-cn-mon a:nth-child(n+9) { display: none; }
  .w-cn-cd { grid-template-columns: 1fr; }
  .w-cn-moi-the { grid-template-columns: 96px minmax(0, 1fr); gap: .7rem; }
  .w-cn-moi-the p { display: none; }
  .w-cn-loc-q { margin-left: 0; width: 100%; }
  .w-cn-loc-q .form-control { width: auto; flex: 1; }
  .w-cn-loc-dt { width: 100%; }
  .w-cn-loc-dt label { flex: 1; text-align: center; }
  .w-cn-mon-so, .w-cn-song-so { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-sl-tong { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-sl-tong b { font-size: 1.2rem; }
  .w-sl-tinh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-cn-ke { grid-template-columns: 1fr; }
  .w-cn-ke-sau { grid-column: auto; }
}
/* ===== Mã nhúng số liệu sống trong bài (App\Support\MaNhung) ===== */
.w-mn { margin: 1.1rem 0 1.4rem; }
.w-mn-cuon { overflow-x: auto; border: 1px solid #bfd3f5; border-radius: 12px; background: #fff; }
.w-noidung .w-mn-bang { width: 100%; margin: 0; border-collapse: collapse; font-size: .92rem; }
.w-noidung .w-mn-bang th, .w-noidung .w-mn-bang td { border: 0; border-bottom: 1px solid var(--w-vien); padding: .55rem .75rem; vertical-align: top; }
.w-noidung .w-mn-bang tr:last-child td { border-bottom: 0; }
.w-noidung .w-mn-bang th { background: #f1f6ff; color: var(--w-xanh-dam); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.w-noidung .w-mn-bang .so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.w-noidung .w-mn-bang small { color: #64748b; }
.w-mn-chu { font-size: .8rem; color: #58687e; margin: .45rem .1rem 0; line-height: 1.45; }
.w-mn-chu i { color: var(--bs-primary); margin-right: .2rem; }
@media (max-width: 575.98px) { .w-noidung .w-mn-bang { font-size: .84rem; } .w-noidung .w-mn-bang th, .w-noidung .w-mn-bang td { padding: .45rem .55rem; } }

/* ---- /hoc-phi (thongtin/hoc-phi): máy tính học phí, phân bố, ma trận lớp × trình độ, môn, yếu tố, quận ---- */
.w-hpm { max-width: 1100px; }
.w-hpm-dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.w-hpm-muc { margin-top: 2.25rem; }
.w-hpm-muc h2 small { font-size: .85rem; margin-left: .35rem; }
.w-hpm-may { background: #fff; border: 1px solid var(--w-vien); border-radius: 18px; padding: 1.25rem 1.25rem 1.1rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .05); }
.w-hpm-chon { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: .6rem; }
.w-hpm-chon label { display: grid; gap: .2rem; margin: 0; }
.w-hpm-chon label span { font-size: .78rem; font-weight: 600; color: #475569; }
.w-hpm-kq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.25rem; margin-top: 1.1rem; align-items: start; min-height: 9rem; }
.w-hpm-so small { display: block; color: #475569; font-weight: 600; }
.w-hpm-so > b { display: block; font-size: 1.9rem; font-weight: 800; color: var(--w-xanh-dam); line-height: 1.15; margin: .15rem 0 .3rem; }
.w-hpm-so .w-hpm-thang { color: #0f172a; font-weight: 600; }
.w-hpm-su { list-style: none; padding: 0; margin: .7rem 0 .9rem; display: grid; gap: .35rem; font-size: .92rem; color: #334155; }
.w-hpm-su i { width: 1.1rem; color: var(--bs-primary); }
.w-hpm-nut { display: flex; gap: .5rem; flex-wrap: wrap; }
.w-hpm-ghi { font-size: .8rem; color: #64748b; margin-top: .5rem; }
/* phân bố: một sắc — cột trong khoảng phổ biến đậm, ngoài khoảng nhạt; vạch trung vị */
.w-hpm-pb { position: relative; padding-top: 1.3rem; }
.w-hpm-cot { display: flex; align-items: flex-end; gap: 2px; height: 120px; border-bottom: 1px solid #cbd5e1; }
.w-hpm-cot span { flex: 1; min-width: 3px; background: #c7d7fb; border-radius: 4px 4px 0 0; position: relative; }
.w-hpm-cot span.trong { background: var(--bs-primary); }
.w-hpm-cot span:hover { filter: brightness(.88); }
.w-hpm-cot span[data-meo]:hover::after { content: attr(data-meo); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; font-size: .72rem; padding: .25rem .45rem; border-radius: 6px; white-space: nowrap; z-index: 2; pointer-events: none; }
.w-hpm-truc { display: flex; justify-content: space-between; font-size: .72rem; color: #64748b; margin-top: .25rem; }
.w-hpm-vach { position: absolute; top: 0; bottom: 1.15rem; border-left: 2px dashed #0f172a; }
.w-hpm-vach em { position: absolute; top: 0; left: 4px; font-size: .72rem; font-style: normal; font-weight: 700; color: #0f172a; white-space: nowrap; }
.w-hpm-vach.de { border-left-color: #b45309; }
.w-hpm-vach.de em { color: #b45309; top: auto; bottom: 0; }
.w-hpm-cu { font-size: .78rem; color: #475569; display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .35rem; }
.w-hpm-cu i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: -1px; margin-right: .25rem; }
/* thẻ */
.w-hpm-td, .w-hpm-yt { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.w-hpm-the { display: grid; gap: .2rem; align-content: start; background: #fff; border: 1px solid var(--w-vien); border-radius: 14px; padding: .9rem 1rem; color: inherit; }
a.w-hpm-the:hover { border-color: var(--bs-primary); color: inherit; }
.w-hpm-the small { font-weight: 600; color: #475569; }
.w-hpm-the small i { color: var(--bs-primary); margin-right: .2rem; }
.w-hpm-the > b { font-size: 1.3rem; font-weight: 800; color: var(--w-xanh-dam); }
.w-hpm-the > span { font-size: .8rem; color: #64748b; }
.w-hpm-the .w-hpm-lon { font-size: 1.6rem; }
.w-hpm-dong { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; border-bottom: 1px dashed var(--w-vien); padding: .2rem 0; }
.w-hpm-dong b { color: #0f172a; }
/* bảng */
.w-hpm-bang th, .w-hpm-bang td { white-space: nowrap; vertical-align: middle; font-size: .9rem; }
.w-hpm-bang thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: #64748b; font-weight: 700; }
.w-hpm-bang tbody th { font-weight: 600; }
.w-hpm-bang tbody th, .w-hpm-bang thead th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; } /* điện thoại: cuộn ngang vẫn thấy cột lớp / môn */
.w-hpm-o0 { background: #eff6ff !important; } .w-hpm-o1 { background: #dbeafe !important; } .w-hpm-o2 { background: #bfdbfe !important; }
.w-hpm-o3 { background: #93c5fd !important; } .w-hpm-o4 { background: #60a5fa !important; color: #0b1d4a; font-weight: 600; }
.w-hpm-it { color: #94a3b8 !important; font-style: italic; }
.w-hpm-chu { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: .78rem; color: #64748b; margin-top: .45rem; }
.w-hpm-chu i { width: 1.4rem; height: .7rem; border-radius: 2px; }
.w-hpm-chu span:first-child { margin-right: .3rem; } .w-hpm-chu i + span { margin-left: .3rem; }
.w-hpm-lech { font-weight: 600; color: #475569; } .w-hpm-lech.len { color: #0b3d91; } .w-hpm-lech.xuong { color: #64748b; }
.w-hpm-tim { max-width: 220px; }
/* quận: thanh ngang theo trung vị */
.w-hpm-quan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1.5rem; }
.w-hpm-q { display: grid; grid-template-columns: 9.5rem 1fr 3.2rem; align-items: center; gap: .5rem; color: inherit; font-size: .88rem; padding: .2rem 0; }
.w-hpm-q:hover { color: var(--bs-primary); }
.w-hpm-q span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-hpm-q i { height: .55rem; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--bs-primary) var(--r), #e2e8f0 var(--r)); }
.w-hpm-q b { text-align: right; }
.w-hpm-hai { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.w-hpm-faq details { border-bottom: 1px solid var(--w-vien); padding: .7rem 0; }
.w-hpm-faq summary { font-weight: 600; cursor: pointer; }
.w-hpm-faq p { margin: .5rem 0 0; color: #334155; }
.w-hpm-dinh { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid var(--w-vien); box-shadow: 0 -6px 20px rgba(15, 23, 42, .08); padding: .55rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .9rem; }
.co-tab-duoi .w-hpm-dinh { bottom: 60px; }
@media (min-width: 992px) { .w-hpm-dinh { display: none !important; } }
@media (max-width: 991.98px) {
  .w-hpm-chon { grid-template-columns: 1fr 1fr; }
  .w-hpm-kq, .w-hpm-hai { grid-template-columns: 1fr; }
  .w-hpm-quan { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) { .w-hpm-so > b { font-size: 1.55rem; } .w-hpm-q { grid-template-columns: 8rem 1fr 3rem; } .w-hpm-may { padding: 1rem; } }
.w-hpm-kq.w-dang-loc { opacity: .5; transition: opacity .15s; }

/* ---- Hồ sơ gia sư (tutor/xem, làm lại 10/2026): tab điện thoại, thẻ "Hợp với con bạn", giá so mặt bằng, đã xác minh, lịch tóm tắt, khía cạnh đánh giá ---- */
.w-hs-tab { position: sticky; top: max(0px, calc(var(--w-dau, 60px) - 4px)); z-index: 1010; display: flex; background: #fff; border-bottom: 1px solid var(--w-vien); margin: .75rem -12px 0; padding: 0 12px; overflow-x: auto; }
.w-hs-tab a { flex: 1 0 auto; text-align: center; padding: .6rem .5rem; font-size: .88rem; font-weight: 600; color: #475569; border-bottom: 2px solid transparent; white-space: nowrap; }
.w-hs-tab a:hover, .w-hs-tab a:focus { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
#hs-dau, #hoc-phi, #danh-gia, #hop-voi-ban { scroll-margin-top: calc(var(--w-dau, 60px) + 52px); }
.w-hshop { border-color: #bfdbfe; background: linear-gradient(180deg, #f5f9ff, #fff 60%); }
.w-hshop-chon { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: .5rem; margin-bottom: .75rem; }
.w-hshop-kq { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.w-hshop-kq li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .35rem; font-size: .93rem; color: #334155; }
.w-hshop-kq li > i { margin-top: .2rem; }
.w-hshop-kq .co { color: #15803d; } .w-hshop-kq .khong { color: #b91c1c; } .w-hshop-kq .chua { color: #94a3b8; }
.w-hshop-kq small { display: block; color: #64748b; }
.w-hs-giaso { font-size: .9rem; color: #334155; background: #f8fafc; border: 1px solid var(--w-vien); border-radius: 10px; padding: .5rem .75rem; margin: -.25rem 0 .9rem; }
.w-hs-giaso i { color: var(--bs-primary); margin-right: .25rem; }
.w-hs-xm { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.w-hs-xm li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; }
.w-hs-xm li > i, .w-hs-xm li > svg, .w-hs-xm li > img { color: #15803d; font-size: 1.1rem; margin-top: .15rem; width: 1.3rem; height: 1.3rem; }
.w-hs-xm b { display: block; } .w-hs-xm span { font-size: .85rem; color: #64748b; }
.w-hs-lich { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.w-hs-lich b { color: #0f172a; margin-right: .25rem; }
.w-dg-kc, .w-dg-loc { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .9rem 0 .2rem; font-size: .85rem; }
.w-dg-kc > span:first-child { color: #64748b; margin-right: .2rem; }
.w-dg-kc .w-chip b { color: var(--bs-primary); margin-left: .2rem; }
.w-dg-loc .w-chip { cursor: pointer; border: 1px solid var(--w-vien); background: #fff; }
.w-dg-loc .w-chip.dang { border-color: var(--bs-primary); color: var(--bs-primary); background: #eff6ff; }
.w-lop-gon-khac { grid-column: 1 / -1; font-style: normal; font-size: .78rem; color: #0b3d91; }
@media (max-width: 575.98px) { .w-hshop-chon { grid-template-columns: 1fr 1fr; } .w-hshop-chon [data-hshop-kv] { grid-column: 1 / -1; } }
#danh-gia .w-dg-tong { display: grid; grid-template-columns: 90px minmax(0, 1fr); } /* .w-dg-tong bị khai lại dạng flex ở khối khác → thanh sao co lại 0 */
#danh-gia .w-dg-thanh { min-width: 0; }
@media (min-width: 992px) { .w-hs-phai .w-hshop { margin-top: 0; } .w-hs-phai .w-hshop-chon { grid-template-columns: 1fr 1fr; } .w-hs-phai .w-hshop-chon [data-hshop-kv] { grid-column: 1 / -1; } }
.w-hs-lich-dau { font-weight: 700; font-size: .92rem; margin: 1rem 0 .35rem; } .w-hs-lich-dau i { color: var(--bs-primary); margin-right: .25rem; }
@media (min-width: 768px) { .w-hs-xm { grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; } }
@media (max-width: 575.98px) { .w-breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* điện thoại: đường dẫn một dòng */

/* ---- Trang lớp /lop/{id} (job/xem, làm lại 10/2026): giá quy đổi + so mặt bằng, tiến trình ứng tuyển, khối cạnh tranh ---- */
.w-tin-so { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.w-tin-so > span { font-size: .82rem; color: #334155; background: #f1f5f9; border-radius: 999px; padding: .22rem .65rem; }
.w-tin-so > span.cao { background: #ecfdf5; color: #065f46; }
.w-tin-so b { color: #0f172a; } .w-tin-so small { color: #64748b; }
.w-tin-tg { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding: 0; margin: 1rem 0 0; counter-reset: b; }
.w-tin-tg li { position: relative; padding-top: 1.2rem; font-size: .8rem; color: #94a3b8; line-height: 1.25; }
.w-tin-tg li::before { content: ''; position: absolute; top: .3rem; left: 0; right: 0; height: 4px; border-radius: 2px; background: #e2e8f0; }
.w-tin-tg li.xong { color: #0f172a; } .w-tin-tg li.xong::before { background: var(--bs-primary); }
.w-tin-tg b { display: block; font-weight: 600; } .w-tin-tg small { color: #64748b; }
.w-ct-dau { display: flex; align-items: baseline; gap: .5rem; } .w-ct-dau b { font-size: 1.8rem; font-weight: 800; color: var(--w-xanh-dam); line-height: 1; } .w-ct-dau span { color: #475569; }
.w-ct-nhom { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.w-ct-nhom .w-chip b { color: var(--bs-primary); margin-left: .2rem; }
@media (max-width: 575.98px) { .w-tin-tg { grid-template-columns: 1fr 1fr; row-gap: .6rem; } }
.w-tin-yc { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1rem; margin: 0 0 .8rem; font-size: .93rem; }
.w-tin-yc dt { font-weight: 600; color: #475569; } .w-tin-yc dt i { color: var(--bs-primary); width: 1.1rem; } .w-tin-yc dd { margin: 0; color: #0f172a; }
@media (max-width: 575.98px) { .w-tin-yc { grid-template-columns: 1fr; gap: .1rem; } .w-tin-yc dd { margin-bottom: .45rem; } }
.w-uv-ss { background: #fff; border: 1px solid var(--w-vien); border-radius: 12px; padding: .6rem .85rem; margin-bottom: 1rem; }
.w-uv-ss summary { font-weight: 700; font-size: .92rem; cursor: pointer; } .w-uv-ss summary i { color: var(--bs-primary); margin-right: .25rem; }
.w-uv-ss table { margin-top: .5rem; font-size: .88rem; } .w-uv-ss th, .w-uv-ss td { white-space: nowrap; }
.w-uv-ss tbody th { font-weight: 600; position: sticky; left: 0; background: #fff; }
.w-uv-ss .w-uv-tot { background: #ecfdf5 !important; color: #065f46; font-weight: 600; }
.w-ct-hop { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .75rem; font-size: .85rem; }
.w-ct-hop-nhan { color: #475569; margin-right: .15rem; }
.w-ct-hop-o { border: 1px solid var(--w-vien); border-radius: 999px; padding: .15rem .6rem; background: #fff; color: #334155; }
.w-ct-hop-o b { margin-right: .15rem; } .w-ct-hop-o.du { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .w-ct-hop-o.kha { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.w-ct-toi { margin-top: .6rem; background: #eff6ff; border-radius: 10px; padding: .45rem .7rem; font-size: .9rem; color: #1e3a8a; }
.w-utc-hop { text-align: center; }
@media (min-width: 768px) { .w-utc-hop small { display: none; } } /* máy tính: cột đã có tiêu đề Hợp tin */
@media (max-width: 767.98px) { .w-utc-hop { text-align: left; } }

/* ---- Trang lớp: khối "Ai đang ứng tuyển" (partials.ai-ung-tuyen) — màu mức hợp: du xanh, kha vàng, thieu xám đỏ ---- */
.w-ai-kl { font-size: .98rem; color: #1e293b; margin: .2rem 0 .9rem; }
.w-ai-bd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: end; padding: .75rem; background: #f8fafc; border-radius: 12px; }
.w-ai-cot { display: grid; gap: .35rem; justify-items: center; text-align: center; }
.w-ai-cham { display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; gap: 3px; min-height: 30px; max-width: 150px; }
.w-ai-cham span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 700; color: #fff; background: #94a3b8; }
.w-ai-cot.du .w-ai-cham span { background: #16a34a; } .w-ai-cot.kha .w-ai-cham span { background: #f59e0b; } .w-ai-cot.thieu .w-ai-cham span { background: #cbd5e1; color: #334155; }
.w-ai-cham span.toi { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bs-primary); }
.w-ai-cham span.ban { width: auto; padding: 0 .45rem; border-radius: 999px; background: #fff !important; color: var(--bs-primary) !important; border: 2px dashed var(--bs-primary); font-size: .7rem; }
.w-ai-cham span.them { background: #e2e8f0 !important; color: #475569 !important; font-size: .62rem; }
.w-ai-cot small { font-size: .76rem; color: #475569; } .w-ai-cot small b { color: #0f172a; }
.w-ai-nhip { margin-top: .75rem; } .w-ai-nhip small { display: block; color: #64748b; font-size: .8rem; margin-top: .25rem; }
.w-ai-nhom { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: #64748b; margin-top: .45rem; } .w-ai-nhom b { color: #0f172a; }
.w-ai-ds { border: 1px solid var(--w-vien); border-radius: 12px; overflow: hidden; margin-top: .9rem; }
.w-ai-dong { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .65rem .8rem; border-top: 1px solid var(--w-vien); box-shadow: inset 3px 0 0 transparent; }
.w-ai-dong:first-child { border-top: 0; }
.w-ai-dong.du { box-shadow: inset 3px 0 0 #16a34a; } .w-ai-dong.kha { box-shadow: inset 3px 0 0 #f59e0b; } .w-ai-dong.thieu { box-shadow: inset 3px 0 0 #cbd5e1; }
.w-ai-dong.la-toi { background: #eef4ff; } .w-ai-dong.duoc-chon { background: #f0fdf4; } .w-ai-dong.mo-di > :not(.w-ai-tt) { opacity: .55; }
.w-ai-dong.ma { background: repeating-linear-gradient(135deg, #f8fbff, #f8fbff 8px, #eef4ff 8px, #eef4ff 16px); outline: 2px dashed #93c5fd; outline-offset: -4px; }
.w-ai-anh { width: 40px; height: 40px; border-radius: 50%; background: #e0e7ff; color: #3730a3; display: grid; place-items: center; font-weight: 700; position: relative; overflow: visible; }
.w-ai-anh img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.w-ai-anh.ma { background: #fff; border: 2px dashed var(--bs-primary); color: var(--bs-primary); font-size: .72rem; }
.w-ai-anh .w-cham-online { position: absolute; right: 0; bottom: 0; }
.w-ai-ten { font-weight: 600; line-height: 1.3; } .w-ai-ten a { color: #0f172a; } .w-ai-ten em { font-style: normal; font-size: .72rem; background: var(--bs-primary); color: #fff; border-radius: 6px; padding: .05rem .35rem; margin-left: .2rem; }
.w-ai-than small { display: block; color: #64748b; font-size: .8rem; line-height: 1.35; } .w-ai-than small i { color: #f59e0b; }
.w-ai-tc { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.w-ai-tc i { font-size: .8rem; width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border-radius: 6px; cursor: help; }
.w-ai-tc i.ok { background: #dcfce7; color: #15803d; } .w-ai-tc i.thieu { background: #fee2e2; color: #b91c1c; }
.w-ai-diem { font-weight: 800; font-size: .78rem; border-radius: 6px; padding: .1rem .4rem; margin-right: .1rem; }
.w-ai-diem.du { background: #16a34a; color: #fff; } .w-ai-diem.kha { background: #f59e0b; color: #fff; } .w-ai-diem.thieu { background: #e2e8f0; color: #334155; }
.w-ai-tt { display: grid; justify-items: end; gap: .15rem; text-align: right; } .w-ai-tt small { color: #64748b; font-size: .76rem; }
.w-ai-chu { display: flex; flex-wrap: wrap; gap: .2rem .75rem; font-size: .74rem; color: #64748b; margin-top: .55rem; }
.w-ai-chu i { margin-right: .15rem; } .w-ai-chu .ok { color: #15803d; } .w-ai-chu .thieu { color: #b91c1c; }
@media (max-width: 575.98px) {
  .w-ai-dong { grid-template-columns: 36px minmax(0, 1fr); } .w-ai-tt { grid-column: 2; justify-items: start; grid-auto-flow: column; gap: .5rem; align-items: center; }
  .w-ai-anh, .w-ai-anh img { width: 36px; height: 36px; }
  .w-ai-cham span { width: 20px; height: 20px; font-size: .6rem; }
}

/* Trang lớp — làm lại bố cục (điện thoại trước) */
.w-hs-khoi .w-tin-dau { display: block; }
.w-tin-nd { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--w-vien); line-height: 1.3; }
.w-tin-nd .w-avatar, .w-tin-nd img.w-avatar { width: 34px; height: 34px; font-size: .85rem; border-radius: 50%; object-fit: cover; }
.w-tin-nd b { font-size: .9rem; } .w-tin-nd i { font-size: .8rem; }
.w-tin-nd small { display: block; color: #64748b; font-size: .76rem; }
.w-ai-goi { margin-top: .3rem; font-size: .76rem; color: #15803d; background: #f0fdf4; border-radius: 6px; padding: .2rem .45rem; display: inline-block; }
.w-ai-goi.thieu { color: #b91c1c; background: #fef2f2; }
.w-ai-chu-go { color: #94a3b8; }
.w-ai-tt-m { display: none; } .w-ai-tt-m b { font-weight: 600; }
@media (max-width: 575.98px) { .w-ai-tt-m { display: inline; } }
@media (min-width: 992px) { .w-ai-chu-go { display: none; } }
@media (max-width: 575.98px) {
  .w-ai-kl { font-size: .92rem; margin-bottom: .7rem; }
  .w-ai-bd { padding: .6rem .4rem; gap: .25rem; }
  .w-ai-dong { grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: .55rem; padding: .6rem .65rem; }
  .w-ai-dong:not(.ma) .w-ai-tt { display: none; }
  .w-ai-ten { font-size: .92rem; }
  .w-ai-than small { font-size: .76rem; }
  .w-ai-tc { gap: .25rem; } .w-ai-tc i { width: 1.6rem; height: 1.6rem; }
  .w-ai-dong.ma .w-ai-tt { grid-column: 2 / -1; justify-items: stretch; } .w-ai-dong.ma .w-ai-tt .btn { width: 100%; }
  .w-ai-chu { font-size: .72rem; gap: .15rem .6rem; }
  .w-tin-gia b { font-size: 1.6rem; }
}

/* ai-ung-tuyen: chữ thay biểu đồ chấm */
.w-ai-ban { margin: .2rem 0 .5rem; padding: .55rem .75rem; border-radius: 10px; background: #eef4ff; color: #1e3a8a; font-size: .95rem; }
.w-ai .w-ai-kl { margin: .2rem 0 .35rem; }
.w-ai p.w-ai-nhip { margin: 0; font-size: .82rem; color: #64748b; } .w-ai p.w-ai-nhip i { margin-right: .2rem; }

/* ai-ung-tuyen: 3 ô mức hợp (bấm lọc) + dòng thông tin có icon */
.w-ai-o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .35rem; }
.w-ai-o button { display: grid; justify-items: start; gap: 0; text-align: left; padding: .55rem .7rem; border-radius: 12px; border: 1.5px solid transparent; line-height: 1.2; transition: border-color .15s, box-shadow .15s; }
.w-ai-o button b { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.w-ai-o button span { font-size: .84rem; font-weight: 700; color: #0f172a; }
.w-ai-o button small { font-size: .72rem; color: #64748b; }
.w-ai-o .du { background: #f0fdf4; } .w-ai-o .du b { color: #15803d; }
.w-ai-o .kha { background: #fffbeb; } .w-ai-o .kha b { color: #d97706; }
.w-ai-o .thieu { background: #f1f5f9; } .w-ai-o .thieu b { color: #64748b; }
.w-ai-o button.chon.du { border-color: #16a34a; } .w-ai-o button.chon.kha { border-color: #f59e0b; } .w-ai-o button.chon.thieu { border-color: #94a3b8; }
.w-ai-o button:disabled { opacity: .5; }
.w-ai-o button:not(:disabled):hover { box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.w-ai-giai { font-size: .74rem; color: #94a3b8; margin: .35rem 0 .2rem; }
.w-ai-tin { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .3rem; font-size: .84rem; color: #475569; }
.w-ai-tin li { display: flex; gap: .45rem; align-items: baseline; } .w-ai-tin i { color: #94a3b8; width: 1rem; text-align: center; flex: none; } .w-ai-tin b { color: #0f172a; }
@media (max-width: 575.98px) { .w-ai-o { gap: .35rem; } .w-ai-o button { padding: .5rem .55rem; } .w-ai-o button b { font-size: 1.35rem; } .w-ai-o button span { font-size: .78rem; } .w-ai-o button small { font-size: .68rem; } }
/* SĐT người đăng: 4 số cuối + cách có số */
.w-sdt-ph { margin-top: .75rem; padding: .65rem .8rem; border-radius: 12px; background: #f8fafc; border: 1px dashed #cbd5e1; }
.w-sdt-so { font-size: 1.15rem; font-weight: 800; color: #0f172a; letter-spacing: .04em; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.w-sdt-so i { color: var(--bs-primary); font-size: .95rem; } .w-sdt-so span { color: #94a3b8; letter-spacing: .12em; }
.w-sdt-so em { font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: 0; color: #64748b; background: #e2e8f0; border-radius: 6px; padding: .1rem .4rem; }
a.w-sdt-so.du { color: #15803d; text-decoration: none; }
.w-sdt-ph small { display: block; margin-top: .3rem; font-size: .78rem; color: #475569; }
.w-sdt-cach { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .8rem; color: #475569; display: grid; gap: .15rem; }
.w-sdt-cach b { color: #0f172a; }

/* ô mức hợp: số bên trái, chữ bên phải (một khối, không để số đứng riêng một hàng) */
.w-ai-o button { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "so ten" "so phu"; column-gap: .55rem; align-items: center; }
.w-ai-o button b { grid-area: so; font-size: 1.75rem; }
.w-ai-o button span { grid-area: ten; align-self: end; }
.w-ai-o button small { grid-area: phu; align-self: start; }
@media (max-width: 575.98px) { /* điện thoại: 3 ô thành 3 dòng ngang gọn: số · tên · mô tả */
  .w-ai-o { grid-template-columns: 1fr; gap: .3rem; }
  .w-ai-o button { grid-template-columns: 2rem auto minmax(0, 1fr); grid-template-areas: "so ten phu"; column-gap: .5rem; padding: .35rem .7rem; border-radius: 10px; }
  .w-ai-o button b { font-size: 1.3rem; text-align: center; } .w-ai-o button span { font-size: .86rem; align-self: center; } .w-ai-o button small { font-size: .76rem; align-self: center; } }

/* ai-ung-tuyen theo năng lực (NangLuc): bậc, điều kiện, bằng chứng */
.w-ai-o .noi_bat { background: #f0fdf4; } .w-ai-o .noi_bat b { color: #15803d; }
.w-ai-o .tot { background: #eff6ff; } .w-ai-o .tot b { color: #1d4ed8; }
.w-ai-o .dat { background: #f8fafc; } .w-ai-o .dat b { color: #64748b; }
.w-ai-o .moi { background: #faf5ff; } .w-ai-o .moi b { color: #7c3aed; }
.w-ai-o button.chon.noi_bat { border-color: #16a34a; } .w-ai-o button.chon.tot { border-color: #3b82f6; } .w-ai-o button.chon.dat { border-color: #94a3b8; } .w-ai-o button.chon.moi { border-color: #a78bfa; }
@media (min-width: 576px) { .w-ai-o { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.w-ai-dong.noi_bat { box-shadow: inset 3px 0 0 #16a34a; } .w-ai-dong.tot { box-shadow: inset 3px 0 0 #3b82f6; } .w-ai-dong.dat { box-shadow: inset 3px 0 0 #cbd5e1; } .w-ai-dong.moi { box-shadow: inset 3px 0 0 #c4b5fd; }
.w-ai-dong { align-items: start; }
.w-ai-hang { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; border-radius: 6px; background: #f1f5f9; color: #475569; font-size: .72rem; font-weight: 800; margin-right: .35rem; vertical-align: 1px; }
.w-ai-nhan { display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: center; margin-top: .35rem; }
.w-ai-bac { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .12rem .55rem; }
.w-ai-bac.noi_bat { background: #16a34a; color: #fff; } .w-ai-bac.tot { background: #dbeafe; color: #1d4ed8; } .w-ai-bac.dat { background: #f1f5f9; color: #475569; } .w-ai-bac.moi { background: #ede9fe; color: #6d28d9; }
.w-ai-dk { font-size: .74rem; } .w-ai-dk.ok { color: #15803d; } .w-ai-dk.thieu { color: #b45309; }
.w-ai-bc { list-style: none; padding: 0; margin: .35rem 0 0; display: grid; gap: .15rem; font-size: .8rem; color: #334155; line-height: 1.4; }
.w-ai-bc li { display: grid; grid-template-columns: 1rem 1fr; gap: .4rem; } .w-ai-bc i { color: #3b82f6; font-size: .75rem; margin-top: .22rem; text-align: center; }
.w-ai-bc b { color: #0f172a; } .w-ai-bc li.mo { color: #94a3b8; } .w-ai-bc li.mo i { color: #cbd5e1; }
.w-ai-bc li.yeu { color: #b45309; } .w-ai-bc li.yeu i { color: #d97706; } .w-ai-bc li.yeu small { color: #94a3b8; }
.w-ai-ban small { display: block; margin-top: .2rem; font-size: .8rem; color: #1e40af; }

/* Lớp học: hỏi nhanh định kỳ, tiêu chí đánh giá, lý do kết thúc/huỷ */
.w-hoi-nhanh { border: 1.5px solid #bfdbfe; background: #f8fbff; }
.w-hoi-dong { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; padding: .4rem 0; border-top: 1px dashed var(--w-vien); font-size: .9rem; }
.w-hoi-dong:first-of-type { border-top: 0; }
.w-hoi-chon { display: flex; flex-wrap: wrap; gap: .3rem; }
.w-hoi-chon .btn { min-width: 2.1rem; }
.w-ly-do { display: grid; gap: .3rem; font-size: .9rem; }
.w-ly-do label { display: flex; gap: .5rem; align-items: center; padding: .35rem .55rem; border: 1px solid var(--w-vien); border-radius: 8px; cursor: pointer; }
.w-ly-do label:has(input:checked) { border-color: var(--bs-primary); background: #eff6ff; }
.w-dg-tc { border: 1px solid var(--w-vien); border-radius: 10px; padding: .3rem .75rem; }
/* Hồ sơ gia sư: "Hệ thống ghi nhận" */
.w-hs-ht { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.w-hs-ht li { display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; align-items: start; }
.w-hs-ht li > i { width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center; background: #eff6ff; color: #2563eb; font-size: .9rem; }
.w-hs-ht li.tot > i { background: #f0fdf4; color: #16a34a; } .w-hs-ht li.yeu > i { background: #fffbeb; color: #d97706; }
.w-hs-ht b { color: #0f172a; } .w-hs-ht li > div > span { display: block; font-size: .8rem; color: #64748b; }
.w-hs-ht-chu { font-size: .78rem; color: #94a3b8; margin-top: .6rem; }

/* Trang lớp: uy tín người đăng (UyTinPh) */
.w-ph-gon { list-style: none; padding: 0; margin: .55rem 0 0; display: grid; gap: .2rem; font-size: .8rem; color: #334155; }
.w-ph-gon li { display: grid; grid-template-columns: 1rem 1fr; gap: .4rem; } .w-ph-gon i { color: #94a3b8; font-size: .72rem; margin-top: .22rem; text-align: center; }
.w-ph-gon li.tot i { color: #16a34a; } .w-ph-gon li.yeu i { color: #d97706; } .w-ph-gon b { color: #0f172a; }
.w-ph-trich { margin: .55rem 0 0; padding: .45rem .65rem; border-left: 3px solid #bfdbfe; background: #f8fafc; border-radius: 0 8px 8px 0; font-size: .8rem; color: #334155; font-style: italic; }
.w-ph-trich i { color: #93c5fd; font-size: .7rem; } .w-ph-trich small { font-style: normal; color: #94a3b8; }
.w-nhip-uy { background: #dcfce7; color: #166534; }

/* Thẻ gia sư /gia-su: bằng chứng hệ thống (GiaTriGs::theThe) */
.w-the-bc { list-style: none; padding: 0; margin: .35rem 0 .1rem; display: grid; gap: .1rem; font-size: .82rem; color: #334155; clear: left; }
.w-the-bc li { display: flex; gap: .35rem; align-items: baseline; } .w-the-bc i { color: #16a34a; font-size: .78rem; } .w-the-bc b { color: #0f172a; }
.w-the-bc li.mo { color: #64748b; } .w-the-bc li.mo i { color: #94a3b8; }
@media (max-width: 575.98px) { .w-the-bao .w-the-bc { grid-column: 1 / -1; margin-top: 0; } }
.w-vi-tri-gy { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .25rem; font-size: .84rem; }
.w-vi-tri-gy li::before { content: "↑ "; color: #16a34a; font-weight: 700; } .w-vi-tri-gy a { white-space: nowrap; font-weight: 600; }
.w-uv-nl { margin: .45rem 0 .35rem; padding: .45rem .6rem; background: #f8fafc; border-radius: 10px; }

/* /lop thẻ tin: mời, uy tín người đăng, mặt bằng học phí, mức hợp của gia sư */
.w-nhan-moi-ut { background: #dcfce7; color: #166534; } .w-nhan-uy { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.w-chip-mb-cao { background: #f0fdf4 !important; color: #15803d !important; border-color: #bbf7d0 !important; }
.w-chip-mb-thap { background: #f8fafc !important; color: #64748b !important; }
.w-tin-hop { clear: left; margin-top: .35rem; font-size: .82rem; color: #92400e; } .w-tin-hop i { color: #f59e0b; } .w-tin-hop.du { color: #15803d; } .w-tin-hop.du i { color: #16a34a; }
.w-thi-truong { font-size: .82rem; color: #475569; margin: .1rem 0 .6rem; line-height: 1.45; } .w-thi-truong i { color: #94a3b8; margin-right: .2rem; } .w-thi-truong b { color: #0f172a; }

/* ===== Ngăn kéo ☰ cho khách (partials/ngan-khach, bản vẽ MenuMobi): đầu trắng, 2 menu chủ đạo, lưới ô việc, nhóm mở/gập ===== */
.w-mm-tang1-khach { background: #fff; }
.w-nk { display: flex; flex-direction: column; height: 100%; min-height: 0; color: #1e293b; }
.w-nk-dau { flex: none; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 10px; border-bottom: 1px solid #e5e9f0; }
.w-nk-logo { display: flex; align-items: center; gap: 8px; color: #0b1d4a; text-decoration: none; }
.w-nk-logo span { width: 32px; height: 32px; border-radius: 9px; background: #2563eb; display: flex; align-items: center; justify-content: center; }
.w-nk-logo b { font-size: 16px; font-weight: 800; }
.w-nk-dong { width: 44px; height: 44px; border: 0; background: transparent; color: #52627a; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.w-nk-than { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; }
.w-nk-tim { margin: 14px 10px; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 12px; background: #f1f5f9; }
.w-nk-tim label { flex: 1 1 0; min-width: 0; display: flex; margin: 0; }
.w-nk-tim input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: #1e293b; }
.w-nk-hai { margin: 0 10px; padding: 4px; border-radius: 12px; background: #f1f5f9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.w-nk-hai button { height: 42px; border: 0; border-radius: 9px; background: transparent; color: #52627a; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; }
.w-nk-hai button.on { background: #fff; color: #0b1d4a; box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
.w-nk-phan[hidden] { display: none; }
.w-nk-lon { margin: 8px 10px 0; min-height: 60px; padding: 10px 12px 10px 14px; border-radius: 14px; background: #eef4ff; border: 1px solid #c7d7fe; color: #0b1d4a; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.w-nk-lon > span { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center; }
.w-nk-lon em { flex: 1 1 0; min-width: 0; font-style: normal; }
.w-nk-lon b { display: block; font-size: 15.5px; }
.w-nk-lon small { display: block; font-size: 12.5px; color: #52627a; }
.w-nk-o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 10px 6px; }
.w-nk-o a { height: 90px; border-radius: 14px; background: var(--nen); color: #0b1d4a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; text-decoration: none; }
.w-nk-o span { width: 36px; height: 36px; border-radius: 11px; background: #fff; color: var(--mau); display: flex; align-items: center; justify-content: center; }
.w-nk-o b { font-size: 13px; font-weight: 700; line-height: 1.2; padding: 0 4px; }
.w-nk-kv { margin: 8px 10px 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid #e5e9f0; color: #0b1d4a; text-decoration: none; }
.w-nk-kv span { flex: 1 1 0; font-size: 14px; }
.w-nk-kv em { font-style: normal; font-size: 13.5px; font-weight: 600; color: #1d4ed8; }
.w-nk-muc { padding: 18px 10px 0; }
.w-nk-muc > small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #52627a; }
.w-nk-nhom { margin-top: 6px; border: 1px solid #e5e9f0; border-radius: 14px; overflow: hidden; }
.w-nk-nhom details + details { border-top: 1px solid #e5e9f0; }
.w-nk-nhom summary { height: 50px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: #0b1d4a; list-style: none; cursor: pointer; }
.w-nk-nhom summary::-webkit-details-marker { display: none; }
.w-nk-nhom summary svg { color: #52627a; transition: transform .2s; }
.w-nk-nhom details[open] summary svg { transform: rotate(180deg); }
.w-nk-nhom details > div { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 14px 14px; }
.w-nk-nhom details > div a { padding: 7px 12px; border-radius: 999px; background: #f1f5f9; color: #0b1d4a; font-size: 13.5px; font-weight: 500; text-decoration: none; }
.w-nk-ds { display: flex; flex-direction: column; margin-top: 4px; }
.w-nk-ds a { height: 46px; display: flex; align-items: center; justify-content: space-between; color: #0b1d4a; font-size: 15px; border-bottom: 1px solid #f1f5f9; text-decoration: none; }
.w-nk-app { margin: 18px 10px 0; padding: 14px; border-radius: 14px; background: #f5f7fb; display: flex; gap: 12px; align-items: center; }
.w-nk-app > span { flex: none; width: 40px; height: 40px; border-radius: 11px; background: #2563eb; display: flex; align-items: center; justify-content: center; }
.w-nk-app > div { flex: 1 1 0; min-width: 0; font-size: 13px; color: #52627a; line-height: 1.4; }
.w-nk-app > div b { display: block; font-size: 14px; color: #0b1d4a; }
.w-nk-app > a { flex: none; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid #c7d2fe; background: #fff; color: #1d4ed8; font-size: 13px; font-weight: 700; display: flex; align-items: center; text-decoration: none; }
.w-nk-chan { padding: 16px 10px; font-size: 12px; color: #94a3b8; }
.w-nk-chan a { color: #94a3b8; }
.w-nk-tim label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Tấm tìm kiếm bung (điện thoại, partials/tim-bung, bản vẽ TimMobi): khối trắng từ trên xuống, nút Đóng dạng thẻ treo bên dưới ===== */
.w-tb { position: fixed; inset: 0; z-index: 1070; }
.w-tb[hidden] { display: none; }
body.w-tb-mo { overflow: hidden; }
body.w-tb-mo .w-omni-ds { display: none !important; }
.w-tb-nen { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(11, 29, 74, .45); animation: w-tb-hien .15s ease; }
.w-tb-khoi { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; animation: w-tb-xuong .2s ease; }
@keyframes w-tb-hien { from { opacity: 0; } }
@keyframes w-tb-xuong { from { transform: translateY(-24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .w-tb-nen, .w-tb-khoi { animation: none; } }
.w-tb-tam { align-self: stretch; max-height: min(540px, calc(100dvh - 70px)); background: #fff; box-shadow: 0 24px 60px rgba(11, 29, 74, .28); position: relative; z-index: 1; display: flex; flex-direction: column; }
.w-tb-dau { flex: none; padding: 10px 12px; }
.w-tb-form { margin: 0; }
.w-tb-o { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; margin: 0; border: 2px solid #2563eb; border-radius: 999px; background: #fff; }
.w-tb-an { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.w-tb-o input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: #0b1d4a; }
.w-tb-o input::-webkit-search-cancel-button { display: none; }
.w-tb-xoa { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f5f9; color: #52627a; display: flex; align-items: center; justify-content: center; }
.w-tb-xoa[hidden] { display: none; }
.w-tb-tim { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center; }
.w-tb-hang { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-left: 4px; }
.w-tb-loai { display: flex; padding: 3px; border-radius: 999px; background: #f1f5f9; }
.w-tb-loai button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #52627a; font: inherit; font-size: 13.5px; font-weight: 700; }
.w-tb-loai button.on { background: #fff; color: #0b1d4a; box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
.w-tb-kv { position: relative; display: flex; align-items: center; gap: 5px; margin: 0; font-size: 13.5px; font-weight: 600; color: #0b1d4a; white-space: nowrap; max-width: 46%; }
.w-tb-kv span { overflow: hidden; text-overflow: ellipsis; }
.w-tb-kv select { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; }
.w-tb-than { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #eef2f7; padding: 6px 12px 16px; }
.w-tb-than [hidden] { display: none !important; }
.w-tb-nhan { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 4px 6px; }
.w-tb-nhan b, .w-tb-nhan-don { font-size: 13px; color: #52627a; }
.w-tb-nhan button { border: 0; background: none; padding: 0; color: #1d4ed8; font-size: 13px; }
.w-tb-nhan-don { display: block; padding: 16px 4px 10px; }
.w-tb-gan > div { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 4px; }
.w-tb-gan a { flex: 1 1 0; min-width: 0; color: #0b1d4a; font-size: 15px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-tb-gan button { width: 32px; height: 32px; border: 0; background: transparent; color: #94a3b8; font-size: 18px; }
.w-tb-chip { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.w-tb-chip a { padding: 8px 14px; border-radius: 999px; border: 1px solid #e5e9f0; color: #0b1d4a; font-size: 14px; text-decoration: none; }
.w-tb-meo { margin: 18px 4px 0; padding: 12px 14px; border-radius: 12px; background: #f8fafc; font-size: 13px; line-height: 1.5; color: #52627a; }
.w-tb-meo b { color: #334155; }
.w-tb-chinh { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px; border-radius: 14px; background: #eef4ff; color: #0b1d4a; text-decoration: none; }
.w-tb-chinh > span { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center; }
.w-tb-chinh div { flex: 1 1 0; min-width: 0; }
.w-tb-chinh small { display: block; font-size: 12px; font-weight: 700; color: #1d4ed8; }
.w-tb-chinh b { display: block; font-size: 16px; }
.w-tb-nhom { padding-top: 12px; }
.w-tb-nhom > small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #52627a; padding: 0 4px 4px; }
.w-tb-muc { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 4px; border-radius: 10px; color: #0b1d4a; text-decoration: none; }
.w-tb-muc > span { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.w-tb-muc div { flex: 1 1 0; min-width: 0; }
.w-tb-muc em { display: block; font-style: normal; font-size: 15px; font-weight: 500; }
.w-tb-muc em b { font-weight: 700; }
.w-tb-muc small { display: block; font-size: 12.5px; color: #52627a; }
.w-tb-trong { margin: 14px 4px 0; padding: 12px 14px; border-radius: 12px; background: #f8fafc; font-size: 13.5px; line-height: 1.5; color: #52627a; }
.w-tb-dong { position: relative; z-index: 2; margin-top: -1px; height: 44px; padding: 0 26px; border: 0; border-radius: 0 0 16px 16px; background: #fff; color: #0b1d4a; font: inherit; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; box-shadow: 0 10px 20px rgba(11, 29, 74, .22); }

/* ===== Hero trang chủ khách / phụ huynh (trangchu/hero-ph, bản vẽ Main + Desktop) ===== */
.w-hm { background: #f5f7fb; }
.w-hm-trai { min-width: 0; } /* nhãn số lớp định vị theo .w-hm (nằm trên ảnh) */
.w-hm { position: relative; }
.w-hm-anh img { display: block; width: 100%; height: 290px; object-fit: cover; object-position: 50% 35%; }
.w-hm-nhan { position: absolute; left: 10px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(11, 29, 74, .88); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.w-hm-nhan:hover { color: #fff; }
.w-hm-nhan span { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.w-hm-the { position: relative; margin: -70px 10px 0; padding: 20px 18px 18px; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(11, 29, 74, .16); display: flex; flex-direction: column; gap: 12px; }
.w-hm-the h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 800; color: #0b1d4a; letter-spacing: -.4px; text-wrap: balance; }
.w-hm-the > p { margin: 0; font-size: 15px; line-height: 1.5; color: #52627a; }
.w-hm-the > p b { color: #166534; }
.w-hm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 2px 0 0; }
.w-hm-o { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; font-size: 12px; font-weight: 600; color: #52627a; }
.w-hm-o select { width: 100%; height: 48px; border: 1px solid #d5dbe5; border-radius: 12px; padding: 0 30px 0 10px; font: inherit; font-size: 16px; font-weight: 600; color: #1e293b; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352627a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.w-hm-o select:focus { outline: 2px solid #2563eb; outline-offset: 2px; }
.w-hm-kv, .w-hm-nut { grid-column: 1 / -1; }
.w-hm-nut { height: 52px; border: 0; border-radius: 12px; background: #2563eb; color: #fff; font: inherit; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.w-hm-nut:hover { background: #1d4ed8; }
.w-hm-phu { display: flex; flex-direction: column; gap: 12px; }
.w-hm-dang { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: #fff7e6; color: #451a03; font-size: 14px; line-height: 1.35; text-decoration: none; }
.w-hm-dang:hover { color: #451a03; }
.w-hm-dang > span { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #f59e0b; color: #451a03; display: flex; align-items: center; justify-content: center; }
.w-hm-dang em { flex: 1 1 0; font-style: normal; }
.w-hm-truoc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: #52627a; }
.w-hm-truoc a { border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 999px; padding: 6px 12px; color: #1d4ed8; font-weight: 600; text-decoration: none; }
.w-hm-phai { display: none; }
.w-hm-so { background: #fff; }
.w-hm-so-khung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 22px 10px 6px; }
.w-hm-so-khung > div { border: 1px solid #e5e9f0; border-radius: 14px; padding: 12px 12px 11px; background: #f8fafc; }
.w-hm-so-khung span { display: none; }
.w-hm-so-khung p { margin: 0; font-size: 12.5px; line-height: 1.35; color: #52627a; }
.w-hm-so-khung p b { display: block; font-size: 20px; font-weight: 800; color: #0b1d4a; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 991.98px) {
  .w-hm-khung { padding: 0; max-width: none; }
  .w-hm { background: #fff; }
}
@media (min-width: 992px) {
  /* Ý tưởng A: ảnh tràn 2/3 phải, thẻ tìm trắng nổi đè mép ảnh (như bản điện thoại phóng to), hàng bằng chứng nổi góc dưới ảnh */
  .w-hm { position: relative; overflow: hidden; }
  .w-hm-anh img { position: absolute; right: 0; top: 0; width: 66%; height: 100%; object-fit: cover; object-position: 40% 40%; }
  .w-hm-khung { position: relative; min-height: 720px; padding-top: 56px; padding-bottom: 56px; display: flex; align-items: center; }
  .w-hm-trai { position: relative; z-index: 1; width: 620px; max-width: 46%; min-width: 520px; background: #fff; border-radius: 26px; padding: 36px 36px 30px; box-shadow: 0 24px 60px rgba(11, 29, 74, .18); display: flex; flex-direction: column; gap: 16px; }
  .w-hm-nhan { position: static; align-self: flex-start; background: #f0fdf4; color: #166534; font-size: 14px; padding: 7px 13px; gap: 8px; }
  .w-hm-nhan:hover { color: #14532d; }
  .w-hm-nhan span { background: #22c55e; }
  .w-hm-the { margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; gap: 16px; }
  .w-hm-the h1 { font-size: clamp(40px, 3.3vw, 52px); line-height: 1.1; letter-spacing: -1px; }
  .w-hm-the > p { font-size: 17px; line-height: 1.55; }
  .w-hm-form { gap: 12px; margin-top: 4px; }
  .w-hm-o { font-size: 13px; gap: 5px; }
  .w-hm-o select { height: 52px; }
  .w-hm-nut { height: 58px; border-radius: 14px; font-size: 18px; }
  .w-hm-dang { padding: 13px 14px; border-radius: 14px; font-size: 15px; }
  .w-hm-dang > span { width: 36px; height: 36px; }
  .w-hm-truoc { font-size: 14px; }
  .w-hm-phai { display: flex; position: absolute; z-index: 1; right: 0; bottom: 44px; gap: 14px; align-items: stretch; }
  .w-hm-gs, .w-hm-xt { background: #fff; border-radius: 18px; box-shadow: 0 16px 36px rgba(11, 29, 74, .22); }
  .w-hm-gs { width: 300px; padding: 14px; display: flex; gap: 12px; align-items: center; color: #1e293b; text-decoration: none; transition: transform .15s; }
  .w-hm-gs:hover { transform: translateY(-2px); color: #1e293b; }
  .w-hm-gs > img, .w-hm-gs > span { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
  .w-hm-gs > span { background: #eef4ff; color: #1d4ed8; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  .w-hm-gs div { min-width: 0; }
  .w-hm-gs b { display: block; font-size: 15px; color: #0b1d4a; }
  .w-hm-gs small { display: block; font-size: 12.5px; color: #52627a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-hm-gs em { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: #92400e; }
  .w-hm-xt { width: 172px; padding: 14px 16px; font-size: 13px; line-height: 1.35; color: #52627a; display: flex; flex-direction: column; justify-content: center; }
  .w-hm-xt b { font-size: 24px; color: #166534; font-variant-numeric: tabular-nums; line-height: 1.2; }
  .w-hm-xt-sao b { color: #0b1d4a; }
  .w-hm-xt-sao b span { color: #f59e0b; }
  .w-hm-so { border-bottom: 1px solid #e5e9f0; }
  .w-hm-so-khung { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 26px; padding-bottom: 26px; }
  .w-hm-so-khung > div { border: 0; padding: 0; background: none; display: flex; align-items: center; gap: 14px; }
  .w-hm-so-khung span { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--nen); color: var(--mau); display: flex; align-items: center; justify-content: center; }
  .w-hm-so-khung p { font-size: 14px; }
  .w-hm-so-khung p b { font-size: 24px; line-height: 1.15; }
}
/* máy tính vừa: bớt ô số trong hàng bằng chứng cho khỏi đè thẻ tìm (< 1280 chỉ còn thẻ gia sư / lớp, < 1440 thêm 1 ô số) */
@media (min-width: 992px) and (max-width: 1279.98px) { .w-hm-xt { display: none; } .w-hm-phai { bottom: 28px; } }
@media (min-width: 1280px) and (max-width: 1439.98px) { .w-hm-xt + .w-hm-xt { display: none; } }
/* hero bản gia sư: ô "lớp hợp hồ sơ" tông xanh, thẻ nổi là lớp mới */
.w-hm-hop { background: #eef4ff; color: #0b1d4a; }
.w-hm-hop:hover { color: #0b1d4a; }
.w-hm-hop > span { background: #2563eb; color: #fff; }
@media (min-width: 992px) {
  .w-hm-lopnoi > span { border-radius: 14px !important; background: #eef4ff !important; color: #1d4ed8 !important; }
  .w-hm-lopnoi > span svg, .w-hm-lopnoi > span i { width: 26px; height: 26px; font-size: 22px; }
  .w-hm-gia { color: #166534 !important; }
}

/* ===== Tấm chọn khu vực (điện thoại, trangchu/hero-ph, bản vẽ KhuVuc): trượt từ dưới, có ô tìm quận/huyện và tỉnh ===== */
.w-hm-kv-nut { display: none; }
@media (max-width: 991.98px) {
  .w-hm-kv select { display: none; }
  .w-hm-kv-nut { display: block; width: 100%; height: 48px; border: 1px solid #d5dbe5; border-radius: 12px; padding: 0 30px 0 10px; font: inherit; font-size: 16px; font-weight: 600; color: #1e293b; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352627a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
}
.w-kv { position: fixed; inset: 0; z-index: 1070; }
.w-kv[hidden], .w-kv-buoc[hidden] { display: none; }
body.w-kv-mo { overflow: hidden; }
.w-kv-nen { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(11, 29, 74, .45); animation: w-tb-hien .15s ease; }
.w-kv-tam { position: absolute; left: 0; right: 0; bottom: 0; height: min(740px, calc(100dvh - 40px)); background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); display: flex; flex-direction: column; animation: w-kv-len .22s ease; }
@keyframes w-kv-len { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .w-kv-tam, .w-kv-nen { animation: none; } }
.w-kv-keo { flex: none; align-self: center; width: 40px; height: 4px; margin-top: 8px; border-radius: 999px; background: #d5dbe5; }
.w-kv-buoc { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.w-kv-dau { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 0 14px; }
.w-kv-dau-lui { justify-content: flex-start; gap: 2px; padding-left: 2px; }
.w-kv-dau b { font-size: 18px; color: #0b1d4a; }
.w-kv-x { width: 44px; height: 44px; border: 0; background: transparent; color: #52627a; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.w-kv-dau-lui .w-kv-x { color: #0b1d4a; }
.w-kv-tren { flex: none; padding: 4px 12px 0; display: flex; flex-direction: column; gap: 10px; }
.w-kv-tinh { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #c7d7fe; background: #eef4ff; font: inherit; color: #0b1d4a; text-align: left; }
.w-kv-tinh span { flex: 1 1 0; min-width: 0; font-size: 15px; }
.w-kv-tinh small { font-size: 12.5px; color: #52627a; }
.w-kv-tinh em { flex: none; font-style: normal; font-size: 13.5px; font-weight: 700; color: #1d4ed8; }
.w-kv-o { display: flex; align-items: center; gap: 8px; height: 46px; margin: 0; padding: 0 14px; border-radius: 12px; background: #f1f5f9; }
.w-kv-o input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: #0b1d4a; }
.w-kv-ds { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px 14px; }
.w-kv-dong { width: 100%; height: 50px; display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid #f1f5f9; background: transparent; font: inherit; color: #0b1d4a; padding: 0 2px; text-align: left; }
.w-kv-dong span { flex: none; width: 32px; height: 32px; border-radius: 10px; background: #eef4ff; color: #1d4ed8; display: flex; align-items: center; justify-content: center; }
.w-kv-dong b { flex: 1 1 0; font-size: 15px; font-weight: 600; }
.w-kv-dong.on b { color: #1d4ed8; font-weight: 800; }
.w-kv-nhom { display: block; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #52627a; padding: 16px 2px 6px; }
.w-kv-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.w-kv-luoi button { padding: 9px 12px; border-radius: 12px; border: 1px solid #e5e9f0; background: #fff; font: inherit; color: #0b1d4a; text-align: left; min-width: 0; }
.w-kv-luoi button.on { border-color: #2563eb; background: #eef4ff; }
.w-kv-luoi b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-kv-luoi small { font-size: 12px; color: #52627a; }
.w-kv-hang { width: 100%; height: 48px; display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid #f1f5f9; background: transparent; font: inherit; color: #0b1d4a; padding: 0 2px; text-align: left; }
.w-kv-hang span { font-size: 15px; font-weight: 500; }
.w-kv-hang.on span { font-weight: 700; color: #1d4ed8; }
.w-kv-hang small { font-size: 12.5px; color: #52627a; }
.w-kv-trong { padding: 24px 6px; text-align: center; font-size: 14px; color: #52627a; margin: 0; }
.w-kv-chan { flex: none; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #eef2f7; }
.w-kv-xem { width: 100%; height: 52px; border: 0; border-radius: 12px; background: #2563eb; color: #fff; font: inherit; font-size: 16px; font-weight: 700; }
.w-loi-tat a.w-loi-tat-gs { background: transparent; border-color: transparent; color: #1d4ed8; font-weight: 700; } /* khách: Trở thành gia sư — link chữ, không phải chip lối tắt */
.w-loi-tat a.w-loi-tat-gs:hover { text-decoration: underline; }

/* ===== Đầu trang 2 dải (10/2026): ♥ Đã lưu, nút Đăng nhập gọn, mục phải dải menu, mega Tìm gia sư 3 cột + dòng trợ giúp ===== */
.w-dau-icon em:empty { display: none; }
.w-dau-luu span i { color: #e11d48; }
.w-dau-vao { height: 44px; display: inline-flex; align-items: center; gap: .45rem; padding: 0 1rem; border: 1px solid var(--w-vien, #e5e9f0); border-radius: 11px; color: #0b1d4a; font-weight: 700; text-decoration: none; white-space: nowrap; }
.w-dau-vao:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.w-menu-phai { align-items: center; margin-left: auto; }
.w-menu-gs { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; color: #52627a; text-decoration: none; white-space: nowrap; }
.w-menu-gs b { color: #1d4ed8; }
.w-menu-gs i { color: #1d4ed8; font-size: .8rem; }
.w-menu-gs:hover b { text-decoration: underline; }
.w-menu-hop { display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .9rem; border-radius: 99px; background: #f0fdf4; color: #166534; font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.w-menu-hop:hover { background: #dcfce7; color: #14532d; }
@media (min-width: 992px) { .w-mega-luoi-3c { grid-template-columns: 1.3fr 1.7fr auto; gap: 1.5rem; } .w-mega-luoi-3c .w-mega-cot + .w-mega-cot { padding-left: 1.5rem; } .w-mega-luoi-3c .w-mega-lien { white-space: nowrap; } }
.w-mega-tro { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--w-vien, #e5e9f0); font-size: .88rem; color: #52627a; }
.w-mega-tro a { font-weight: 600; }

/* ===== Đầu trang 2 dải: khớp bản vẽ Header* (PC ≥ 992) — ô tìm dạng viên, menu chỉ chữ, mega mới, ẩn dải menu khi cuộn xuống ===== */
@media (min-width: 992px) {
  .w-omni { height: 50px; border-radius: 999px; padding: 0 5px; align-items: center; gap: 6px; }
  .w-omni-loai { padding: 3px; background: #f1f5f9; border-radius: 999px; height: 42px; }
  .w-omni-loai button { border-radius: 999px; padding: 0 14px; font-size: 13.5px; font-weight: 700; color: #52627a; }
  .w-omni-loai button.active { color: #0b1d4a; }
  .w-omni-o input { padding: 0 6px; font-size: 16px; color: #0b1d4a; }
  .w-omni-tinh { height: 36px; padding: 0 4px 0 12px; color: #1d4ed8; }
  .w-omni-tinh select { font-size: 14px; font-weight: 700; color: #0b1d4a; }
  .w-omni-tinh:focus-within { background: transparent; }
  .w-omni-nut { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
  .w-omni-nut span { display: none; }
  .w-omni-nut i { font-size: 1.05rem; }
  .w-omni-ds { top: calc(100% + 10px); border-radius: 18px; }
  .w-dau-duoi .w-menu-ic { display: inline-block; width: 18px; height: 18px; color: #2563eb; opacity: 1; margin-right: 2px; vertical-align: -3px; flex: none; } /* icon nét (bản vẽ Header 2 dải), cùng bộ với ngăn kéo điện thoại */
  .w-dau-duoi .nav-link.active .w-menu-ic, .w-dau-duoi .w-mega.mo > .nav-link .w-menu-ic { color: #1d4ed8; }
  .w-dau-duoi { transition: margin-top .2s ease; }
  .w-header.an-menu .w-dau-duoi { margin-top: -49px; visibility: hidden; transition: margin-top .2s ease, visibility 0s linear .2s; }
}
.w-menu-hop em { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #16a34a; color: #fff; font-style: normal; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }

/* Mega mới (.w-mg) */
.w-mg { display: grid; gap: 28px; align-items: start; padding: 4px 0; }
.w-mg-tim { grid-template-columns: 1.5fr 1fr 1fr 380px; }
.w-mg-lop { grid-template-columns: 1.5fr 1fr 380px; }
.w-mg-cot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w-mg-tieu { display: block; font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #52627a; padding: 0 10px 8px; }
.w-mg-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.w-mg-cot a { display: block; padding: 8px 10px; border-radius: 9px; color: #0b1d4a; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-mg-cot a:hover { background: #f1f5f9; color: #1d4ed8; }
.w-mg-cot a.w-mg-het { color: #1d4ed8; font-weight: 700; }
.w-mg-the { border-radius: 18px; background: #0b1d4a; color: #fff; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.w-mg-the small { font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #fcd34d; }
.w-mg-the b { font-size: 21px; line-height: 1.25; }
.w-mg-the span { font-size: 14px; line-height: 1.5; color: #c7d2fe; }
.w-mg-the a { align-self: flex-start; margin-top: 4px; height: 44px; padding: 0 18px; border-radius: 11px; background: #fff; color: #0b1d4a; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.w-mg-the a:hover { background: #eef4ff; color: #0b1d4a; }
.w-mg-so { border-radius: 18px; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.w-mg-so small { font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #166534; }
.w-mg-so b { font-size: 40px; line-height: 1; color: #0b1d4a; font-variant-numeric: tabular-nums; }
.w-mg-so > span { font-size: 14px; line-height: 1.5; color: #52627a; }
.w-mg-so div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.w-mg-nut, .w-mg-nut2 { height: 44px; padding: 0 16px; border-radius: 11px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none; }
.w-mg-nut { background: #2563eb; color: #fff; }
.w-mg-nut:hover { background: #1d4ed8; color: #fff; }
.w-mg-nut2 { border: 1px solid #c7d2fe; background: #fff; color: #1d4ed8; }
.w-mg-nut2:hover { border-color: #2563eb; }
.w-mg-tro { display: flex; flex-wrap: wrap; gap: .4rem 22px; margin-top: 18px; padding: 14px 10px 0; border-top: 1px solid #eef2f7; font-size: 14px; color: #52627a; }
.w-mg-tro a { font-weight: 600; }
@media (max-width: 1279.98px) { .w-mg-tim { grid-template-columns: 1.4fr 1fr 1fr 300px; gap: 20px; } .w-mg-lop { grid-template-columns: 1.4fr 1fr 320px; gap: 20px; } }
/* Phụ huynh: mục phải dải menu "Tin của tôi · N ứng viên mới"; màn 992–1439: ẩn tên cạnh ảnh đại diện để ô tìm đủ rộng */
.w-menu-tin { display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .9rem; border-radius: 99px; background: #eef4ff; color: #0b1d4a; font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.w-menu-tin i { color: #1d4ed8; }
.w-menu-tin:hover { background: #dbeafe; color: #0b1d4a; }
.w-menu-tin em { height: 20px; padding: 0 8px; border-radius: 999px; background: #e11d48; color: #fff; font-style: normal; font-size: 12px; display: inline-flex; align-items: center; }
@media (min-width: 992px) and (max-width: 1439.98px) { .w-dau-tk .w-dau-nguoi-chu { display: none; } }

/* ===== Chân trang theo bản vẽ Desktop (10/2026): nền xanh đậm phẳng, số gọi nổi bật, nút Facebook/Zalo, cột chip khu vực + môn ===== */
.w-footer-moi { background: #0b1d4a; color: #c7d2fe; font-size: 14px; margin-top: 72px; padding: 52px 0 0; }
.w-footer-moi a { color: #c7d2fe; }
.w-footer-moi a:hover { color: #fff; }
.w-footer-moi .w-footer-tren { grid-template-columns: minmax(280px, 1.4fr) 3.6fr; gap: 36px 48px; }
.w-footer-moi .w-footer-logo { background: #2563eb; width: 40px; height: 40px; border-radius: 11px; }
.w-footer-moi .w-footer-brand { font-size: 19px; }
.w-footer-moi .w-footer-tagline { color: #c7d2fe; line-height: 1.6; max-width: 340px; margin: 14px 0; }
.w-footer-moi .w-footer-lienhe { gap: 8px; margin-bottom: 14px; }
.w-footer-moi .w-footer-lienhe a, .w-footer-moi .w-footer-diachi { color: #c7d2fe; }
.w-footer-moi .w-footer-lienhe i { width: auto; height: auto; background: none; color: #93c5fd; font-size: 15px; }
.w-footer-moi .w-footer-goi { color: #fff !important; font-size: 16px; font-weight: 700; }
.w-footer-mxh { display: flex; gap: 8px; }
.w-footer-mxh a { height: 40px; min-width: 40px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff !important; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; text-decoration: none; }
.w-footer-mxh a:hover { background: rgba(255, 255, 255, .16); }
.w-footer-mxh .w-footer-zalo { font-weight: 800; font-size: 13px; }
.w-footer-moi .w-footer-cot { grid-template-columns: 1fr 1fr 1.6fr; gap: 24px 48px; }
.w-footer-moi .w-footer-nhom summary { color: #fff; font-size: 15px; margin-bottom: 12px; }
.w-footer-moi .w-footer-nhom li { margin-bottom: 10px; }
.w-footer-chipcot { display: flex; flex-direction: column; gap: 6px; }
.w-footer-moi .w-footer-chip { display: flex; flex-wrap: wrap; gap: 8px; }
.w-footer-moi .w-footer-chip li { margin: 0; }
.w-footer-moi .w-footer-chip a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #e0e7ff; font-size: 13px; }
.w-footer-moi .w-footer-chip a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.w-footer-moi .w-footer-cuoi { margin-top: 36px; padding: 18px 0; font-size: 13px; color: #a5b4fc; border-top-color: rgba(255, 255, 255, .12); }
.w-footer-moi .w-footer-phu { gap: 6px 18px; }
.w-footer-moi .w-footer-phu a { color: #c7d2fe; }
@media (max-width: 991.98px) { .w-footer-moi .w-footer-tren { grid-template-columns: 1fr; } .w-footer-moi .w-footer-cot { grid-template-columns: 1fr 1fr; } .w-footer-moi .w-footer-chipcot { grid-column: 1 / -1; } }
@media (max-width: 767.98px) {
  .w-footer-moi { margin-top: 40px; padding-top: 32px; }
  .w-footer-moi .w-footer-cot { grid-template-columns: 1fr; gap: 0; }
  .w-footer-moi .w-footer-chipcot { gap: 0; }
  .w-footer-moi .w-footer-nhom summary { margin: 0; }
  .w-footer-moi .w-footer-lienhe { flex-direction: column; }
  body.co-tab-duoi .w-footer-moi { padding-bottom: 4.5rem; }
}
@media (min-width: 768px) { .w-footer-chipcot { gap: 18px; } }
/* iPad (768–1199px): thương hiệu | Phụ huynh | Gia sư trên một hàng, chip khu vực + môn chia đôi bên dưới — tránh khối thương hiệu nửa trống và cột chip dài */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .w-footer-moi .w-footer-tren { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px 32px; }
  .w-footer-moi .w-footer-cot { display: contents; }
  .w-footer-moi .w-footer-chipcot { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .w-footer-moi .w-footer-tagline { max-width: none; }
  .w-footer-moi .w-footer-cuoi { margin-top: 28px; }
}

/* Chia sẻ hồ sơ / giới thiệu nhận Xu (partials/chia-se, taikhoan/gioi-thieu) */
.w-cs-anh { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--w-vien); margin-bottom: .75rem; }
.w-cs-nut { display: flex; flex-wrap: wrap; gap: .5rem; }
.w-cs-nut .btn { flex: 1 1 auto; }
.w-gt-dau { display: flex; gap: 1rem; align-items: center; background: linear-gradient(135deg, #fff7e6, #fff); border-color: #fde3b0; }
.w-gt-qua { flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--w-nhan); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.w-gt .w-khoi { padding: 1rem 1.25rem; }
.w-gt-so .w-khoi { padding: .75rem .25rem; }
.w-lop-that { font-size: .875rem; color: var(--bs-secondary-color); margin-top: .15rem; } .w-lop-that b { color: #15803d; }

/* Tin học phí cao bất thường (TinNghi, tin_tim.gia_gap ≥ 30) */
.w-gia-cao { display: block; margin-top: 2px; font-style: normal; font-size: .72rem; font-weight: 600; color: #b45309; }
.w-gia-cao-ghi { margin-top: .5rem; padding: .5rem .75rem; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: .86rem; line-height: 1.45; }