/* ==============================================
   RESET & ROOT
   ============================================== */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

:root {
   --b800: #002b78;
   --b700: #003ca6;
   --b600: #1450b8;
   --b500: #1a6bcc;
   --b400: #2d82e0;
   --b300: #93c5fd;
   --b200: #bfdcff;
   --b100: #deeeff;
   --b50: #f0f7ff;
   --o600: #d45d00;
   --o500: #f07000;
   --o300: #ffad5c;
   --o100: #fff3e0;
   --white: #fff;
   --gray50: #F9FAFB;
   --gray100: #F3F4F6;
   --gray200: #E5E7EB;
   --gray300: #D1D5DB;
   --gray400: #9CA3AF;
   --gray500: #6B7280;
   --gray600: #4B5563;
   --gray700: #374151;
   --gray800: #1F2937;
   --gray900: #111827;
   --gold: #F59E0B;
   --ease: cubic-bezier(.4, 0, .2, 1);
   --font: 'Be Vietnam Pro', 'Inter', sans-serif;
   --r-sm: 4px;
   --r-md: 6px;
   --r-lg: 8px;
   --r-xl: 10px;
   --sh-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
   --sh-md: 0 4px 12px rgba(0, 0, 0, .1);
   --sh-lg: 0 8px 24px rgba(0, 0, 0, .1);
}

@media(max-width:1024px) {
   :root {
      --fs-h1: 36px;
      --fs-h2: 28px
   }
}

@media(max-width:768px) {
   :root {
      --fs-h1: 26px;
      --fs-h2: 22px
   }
}

html {
   scroll-behavior: smooth;
   overflow-x: clip
}

body {
   font-family: var(--font);
   font-size: 15px;
   line-height: 1.65;
   color: var(--gray800);
   background: #fff;
   overflow-x: clip
}

h1 {
   font-size: var(--fs-h1, 46px);
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -.02em
}

h2 {
   font-size: var(--fs-h2, 34px);
   font-weight: 800;
   line-height: 1.25
}

a {
   text-decoration: none;
   color: inherit
}

ul {
   list-style: none
}

button {
   cursor: pointer;
   border: none;
   background: none;
   font-family: inherit
}

img {
   display: block;
   max-width: 100%
}

/* SCROLL REVEAL */
.rv {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.rvL {
   opacity: 0;
   transform: translateX(-40px);
   transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.rvR {
   opacity: 0;
   transform: translateX(40px);
   transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.rv.on,
.rvL.on,
.rvR.on {
   opacity: 1;
   transform: none
}

/* Khối nằm sẵn trong màn hình đầu (footer.php gắn .rv-now): hiện ngay, không chạy hiệu ứng */
.rv-now {
   transition: none !important
}

/* Khối đầu trang (màn hình đầu tiên): hiện ngay, không chờ JS/GSAP → LCP nhanh.
   Chỉ giữ hiệu ứng trượt nhẹ bằng CSS, chữ luôn hiển thị (opacity 1) */
.hero .rv, .hero .rvL, .hero .rvR,
.breadcrumb.rv, .page-header.rv, .search-header-sec.rv, .auth-sec.rv,
.tutor-detail-sec.rv, .article-sec.rv, .dashboard-sec.rv, .page-404.rv, .pg-hero.rv {
   opacity: 1 !important;
   visibility: visible !important;
   transform: none;
   animation: etutorRise .7s cubic-bezier(.22, 1, .36, 1) both
}

.hero .rvL { animation-name: etutorRiseL }
.hero .rvR { animation-name: etutorRiseR }

@keyframes etutorRise { from { transform: translateY(16px) } to { transform: none } }
@keyframes etutorRiseL { from { transform: translateX(-24px) } to { transform: none } }
@keyframes etutorRiseR { from { transform: translateX(24px) } to { transform: none } }

@media (prefers-reduced-motion: reduce) {
   .hero .rv, .hero .rvL, .hero .rvR,
   .breadcrumb.rv, .page-header.rv, .search-header-sec.rv, .auth-sec.rv,
   .tutor-detail-sec.rv, .article-sec.rv, .dashboard-sec.rv, .page-404.rv, .pg-hero.rv { animation: none }
}

.d1 {
   transition-delay: .06s !important
}

.d2 {
   transition-delay: .12s !important
}

.d3 {
   transition-delay: .18s !important
}

.d4 {
   transition-delay: .24s !important
}

.d5 {
   transition-delay: .30s !important
}

.d6 {
   transition-delay: .36s !important
}

/* LAYOUT */
.wrap {
   width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 40px
}

section {
   padding: 72px 0
}

.sec-label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 700;
   color: var(--b600);
   letter-spacing: .1em;
   text-transform: uppercase;
   margin-bottom: 8px
}

.sec-label::before {
   content: '';
   display: block;
   width: 22px;
   height: 22px;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 2050 2050' data-name='Layer 2' id='Layer_2' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%234d4c78;%7D.cls-2%7Bfill:%2367baeb;%7D.cls-3%7Bfill:%23de3226;%7D.cls-4%7Bfill:%23231f20;%7D.cls-5%7Bfill:%23f4c23f;%7D.cls-6%7Bfill:%23b9b1e0;%7D.cls-7%7Bfill:%2346a1f8;%7D.cls-8%7Bfill:%23b11a31;%7D.cls-9%7Bfill:%23f4a93f;%7D.cls-10%7Bfill:%23b1a9d6;%7D.cls-11%7Bfill:%2383d0fb;%7D.cls-12%7Bfill:%23fad564;%7D.cls-13%7Bfill:%23f44533;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3E%3C/title%3E%3Cpath class='cls-1' d='M1358.2,830.7H1254.3a20,20,0,0,1,0-40h103.9a20,20,0,0,1,0,40Z'%3E%3C/path%3E%3Cpath class='cls-1' d='M1053.8,1298.4a20.2,20.2,0,0,1-19.3-14.5,190.8,190.8,0,0,1-7.2-51.6c0-103.1,83.9-187,187-187h282.8A107.5,107.5,0,0,0,1604.5,938c0-59.1-48.2-107.3-107.4-107.3h-67.3a20,20,0,0,1,0-40h67.3c81.3,0,147.4,66.1,147.4,147.3s-66.1,147.3-147.4,147.3H1214.3c-81.1,0-147,66-147,147a146.4,146.4,0,0,0,5.7,40.6,20,20,0,0,1-13.7,24.7A21.5,21.5,0,0,1,1053.8,1298.4Z'%3E%3C/path%3E%3Cpath class='cls-1' d='M1430.7,1806.7H650.4a20,20,0,1,1,0-40h780.3c95.8,0,173.8-77.9,173.8-173.7s-78-173.8-173.8-173.8H1214.3a186.1,186.1,0,0,1-136.3-58.9,20,20,0,0,1,29.2-27.4,145.3,145.3,0,0,0,107.1,46.3h216.4a213.8,213.8,0,0,1,0,427.5Z'%3E%3C/path%3E%3Cpath class='cls-1' d='M575,1806.7H478.4a20,20,0,1,1,0-40H575a20,20,0,0,1,0,40Z'%3E%3C/path%3E%3Cpolygon class='cls-2' points='915.7 516.6 618.3 1626.2 405.5 1569.2 700.5 468.5 913.3 525.5 915.7 516.6'%3E%3C/polygon%3E%3Cpath class='cls-3' d='M738.9,324.9A110.3,110.3,0,0,1,873.8,247h0a110.1,110.1,0,0,1,77.9,134.9l-16.4,61.5-212.8-57Z'%3E%3C/path%3E%3Cpolygon class='cls-4' points='700.5 468.5 722.5 386.4 722.5 386.4 700.5 468.5 700.5 468.5'%3E%3C/polygon%3E%3Cpolygon class='cls-4' points='915.7 516.6 935.3 443.4 935.3 443.4 915.7 516.6'%3E%3C/polygon%3E%3Cpolygon class='cls-5' points='913.3 525.5 700.5 468.5 722.5 386.4 935.3 443.4 915.7 516.6 913.3 525.5'%3E%3C/polygon%3E%3Cpath class='cls-6' d='M618.3,1626.2l-212.8-57,33.8,218c3.1,19.8,28.2,26.5,40.8,10.9Z'%3E%3C/path%3E%3Cpolygon class='cls-7' points='618.3 1626.2 562.3 1611.2 857.2 510.5 913.3 525.5 915.7 516.6 618.3 1626.2'%3E%3C/polygon%3E%3Cpath class='cls-8' d='M722.5,386.4h0l156.7,42,16.5-61.5a110.2,110.2,0,0,0-50.9-123.6,107.4,107.4,0,0,1,29,3.7h0a110.1,110.1,0,0,1,77.9,134.9l-16.4,61.5Z'%3E%3C/path%3E%3Cpolygon class='cls-9' points='857.2 510.5 859.6 501.6 879.2 428.4 935.3 443.4 915.7 516.6 913.3 525.5 857.2 510.5'%3E%3C/polygon%3E%3Cpath class='cls-10' d='M439.3,1787.2l-3-19.4,126-156.6,56,15L480.1,1798.1C467.5,1813.7,442.4,1807,439.3,1787.2Z'%3E%3C/path%3E%3Cpath class='cls-1' d='M750.3,762.8a20,20,0,0,0-36.6,4.8L534.8,1435.2a20,20,0,0,0,38.6,10.4L752.3,778A19.9,19.9,0,0,0,750.3,762.8Z'%3E%3C/path%3E%3Cpath class='cls-1' d='M791.1,610.4a19.8,19.8,0,0,0-12.1-9.3,20,20,0,0,0-24.5,14.2l-19.3,72a20,20,0,0,0,38.6,10.4l19.3-72.1A20,20,0,0,0,791.1,610.4Z'%3E%3C/path%3E%3Crect class='cls-11' height='278.37' rx='24.6' ry='24.6' transform='translate(317.3 -101) rotate(15)' width='49.1' x='517.8' y='1015.5'%3E%3C/rect%3E%3Crect class='cls-11' height='106.15' rx='24.6' ry='24.6' transform='translate(258.3 -125.5) rotate(15)' width='49.1' x='581.1' y='865.3'%3E%3C/rect%3E%3Crect class='cls-12' height='61.1' rx='24.6' ry='24.6' transform='translate(138.2 -175.2) rotate(15)' width='49.1' x='710' y='406.7'%3E%3C/rect%3E%3Crect class='cls-13' height='107.2' rx='24.6' ry='24.6' transform='translate(114.7 -185.8) rotate(15)' width='49.1' x='738.5' y='288.9'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   flex-shrink: 0;
   margin-top: -2px;
}

.sec-title {
   font-size: var(--fs-h2, 34px);
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 10px
}

.sec-desc {
   font-size: 15px;
   color: var(--gray500);
   line-height: 1.7
}

.sec-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 28px
}

.sec-link {
   font-size: 14px;
   font-weight: 600;
   color: var(--b600);
   display: flex;
   align-items: center;
   gap: 4px;
   white-space: nowrap
}

.sec-link:hover {
   text-decoration: underline
}

.sec-link svg {
   width: 15px;
   height: 15px
}

.shimmer {
   height: 1px;
   background: var(--gray200)
}

/* ANNOUNCE BAR */
.announce-bar {
   background: var(--b700);
   padding: 7px 40px;
   text-align: center;
   font-size: 13px;
   color: rgba(255, 255, 255, .85);
   position: relative
}

.announce-bar a {
   color: #ffb066; /* cam sáng: đủ tương phản (≥4.5:1) trên nền xanh đậm */
   font-weight: 600
}

.announce-bar strong {
   color: #fff
}

/* HEADER */
.header-wrapper-nav {
   background: var(--white);
   border-bottom: 1px solid var(--gray200);
   position: sticky;
   top: 0;
   z-index: 1000;
   transition: box-shadow .25s
}

.header-wrapper-nav.scrolled {
   box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
}

.nav {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 40px
}

.nav-inner {
   display: flex;
   align-items: center;
   gap: 16px;
   height: 64px
}

.logo {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-shrink: 0
}

.site-logo {
   max-height: 44px;
   width: auto;
   object-fit: contain;
   display: block;
}

.nav-links {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0;
   flex: 1;
   height: 100%
}

.nav-item {
   font-size: 14px;
   font-weight: 600;
   color: var(--gray700);
   padding: 0 12px;
   height: 100%;
   position: relative;
   display: flex;
   align-items: center;
   gap: 3px;
   white-space: nowrap;
   transition: color .15s
}

.nav-item:hover,
.nav-item.active {
   color: var(--b600)
}

.nav-item::after {
   content: '';
   position: absolute;
   bottom: -1px;
   left: 12px;
   right: 12px;
   height: 2px;
   background: var(--b600);
   opacity: 0;
   transition: opacity .15s
}

.nav-item.active::after {
   opacity: 1
}

.nav-item svg {
   width: 13px;
   height: 13px
}

.nav-item-wrap {
   position: relative;
   height: 100%
}

.nav-dropdown {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   background: var(--white);
   border: 1px solid var(--gray200);
   border-radius: var(--r-lg);
   padding: 6px;
   min-width: 220px;
   width: max-content;
   box-shadow: var(--sh-lg);
   opacity: 0;
   pointer-events: none;
   transform: translateY(-4px);
   transition: opacity .15s, transform .15s;
   z-index: 100
}

.nav-item-wrap:hover .nav-dropdown {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0)
}

.nav-dropdown::before {
   content: "";
   position: absolute;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
}

.nav-dropdown-link {
   display: flex;
   align-items: center;
   gap: 10px;
   white-space: nowrap;
   padding: 8px 12px;
   font-size: 14px;
   font-weight: 500;
   color: var(--gray700);
   border-radius: var(--r-md);
   transition: background .12s, color .12s
}

.nav-dropdown-link:hover {
   background: var(--b50);
   color: var(--b600)
}

/* Icon màu trong menu con (etutor_nav_item_icon_html) */
.nav-dd-icon {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 8px;
   background: var(--gray50, #f8fafc);
   transition: transform .15s, background .12s
}

.nav-dropdown-link:hover .nav-dd-icon {
   background: var(--white);
   transform: scale(1.08)
}

.mnav-dropdown-link .nav-dd-icon {
   width: 26px;
   height: 26px
}

.nav-actions {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   margin-left: auto
}

.nav-login {
   font-size: 14px;
   font-weight: 600;
   color: var(--b600);
   padding: 7px 16px;
   border-radius: var(--r-md);
   border: 1.5px solid var(--b400);
   transition: background .15s
}

.nav-login:hover {
   background: var(--b50)
}

.nav-cta {
   font-size: 14px;
   font-weight: 700;
   color: var(--white);
   background: var(--o500);
   padding: 8px 20px;
   border-radius: var(--r-md);
   transition: background .15s;
   white-space: nowrap
}

.nav-cta:hover {
   background: var(--o600)
}

.hamburger {
   display: none;
   padding: 5px 8px;
   border-radius: var(--r-md);
   color: var(--b600);
   border: 1.5px solid var(--b600);
   background: var(--b50);
   cursor: pointer;
}

.hamburger:hover {
   background: var(--b100)
}

.hamburger svg {
   width: 24px;
   height: 24px;
   display: block;
}

/* MOBILE NAV */
.mobile-nav {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .45);
   z-index: 2000
}

.mobile-nav.open {
   display: block
}

.mobile-nav-panel {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 290px;
   background: var(--white);
   padding: 20px 18px;
   overflow-y: auto;
   transform: translateX(100%);
   transition: transform .3s var(--ease)
}

.mobile-nav.open .mobile-nav-panel {
   transform: translateX(0)
}

.mnav-close {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: var(--r-md);
   background: var(--gray100);
   color: var(--gray700);
   font-size: 16px;
   margin-bottom: 20px;
   margin-left: auto;
   cursor: pointer
}

.mnav-link {
   display: block;
   font-size: 15px;
   font-weight: 600;
   color: var(--gray800);
   padding: 11px 0;
   border-bottom: 1px solid var(--gray100)
}

.mnav-item-group {
   border-bottom: 1px solid var(--gray100)
}

.mnav-link-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between
}

.mnav-toggle {
   padding: 8px;
   color: var(--gray500)
}

.mnav-dropdown {
   display: none;
   padding: 4px 0 10px 14px
}

.mnav-item-group.open .mnav-dropdown {
   display: block
}

.mnav-dropdown-link {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   color: var(--gray600);
   padding: 7px 0
}

.mnav-cta {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 700;
   color: var(--white);
   background: var(--b600);
   padding: 11px 20px;
   border-radius: var(--r-md);
   margin-top: 20px;
   justify-content: center
}

/* HERO */
.hero {
   background: #f4f8ff;
   padding: 56px 0 0;
   position: relative;
   overflow: hidden
}

.hero-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 48px;
   min-height: 500px
}

.hero-left {
   position: relative;
   z-index: 2
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: linear-gradient(90deg, rgba(20, 80, 184, .05) 0%, rgba(20, 80, 184, .1) 100%);
   border: 1px solid rgba(20, 80, 184, .15);
   border-radius: 100px;
   padding: 6px 16px 6px 6px;
   font-size: 12px;
   font-weight: 800;
   color: var(--b700);
   margin-bottom: 20px;
   letter-spacing: .05em;
   text-transform: uppercase;
   box-shadow: 0 4px 12px rgba(20, 80, 184, .05)
}

.hero-badge-icon {
   width: 26px;
   height: 26px;
   background: linear-gradient(135deg, var(--o500) 0%, var(--o600) 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   box-shadow: 0 2px 8px rgba(240, 112, 0, .35)
}

.hero-title {
   font-size: var(--fs-h1, 46px);
   font-weight: 800;
   color: var(--gray900);
   line-height: 1.18;
   margin-bottom: 16px
}

.hero-title .hl-orange {
   color: var(--o500)
}

.hero-desc {
   font-size: 15px;
   color: var(--gray600);
   line-height: 1.7;
   margin-bottom: 28px;
   max-width: 460px
}

.hero-btns {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 36px
}

.btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   background: var(--b600);
   padding: 12px 26px;
   border-radius: var(--r-md);
   transition: background .15s;
   border: none
}

.btn-primary:hover {
   background: var(--b700)
}

.btn-primary svg,
.btn-secondary svg {
   width: 17px;
   height: 17px;
   flex-shrink: 0
}

.btn-secondary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 600;
   color: var(--gray700);
   background: #fff;
   padding: 11px 22px;
   border-radius: var(--r-md);
   border: 1.5px solid var(--gray300);
   transition: border-color .15s, color .15s
}

.btn-secondary:hover {
   border-color: var(--b400);
   color: var(--b600)
}

/* Floating cards */
.hero-right {
   position: relative;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
   z-index: 2
}

.hero-img-wrap {
   position: relative;
   width: 100%;
   max-width: 520px
}

.hero-img-wrap img {
   width: 100%;
   border-radius: var(--r-xl) var(--r-xl) 0 0;
   object-fit: cover;
   object-position: top center;
   height: 500px
}

/* Floating cards */
.hero-float-card {
   position: absolute;
   background: transparent;
   border-radius: var(--r-lg);
   padding: 10px 14px;
   box-shadow: none;
   border: 0;
   text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff;
   display: flex;
   align-items: center;
   gap: 10px;
   animation: floatUp 4s ease-in-out infinite
}

.hero-float-card.card-1 {
   top: 40px;
   left: -36px;
   animation-delay: 0s
}

.hero-float-card.card-2 {
   bottom: 100px;
   left: -44px;
   animation-delay: 1.5s
}

.hero-float-card.card-3 {
   top: 150px;
   right: -16px;
   animation-delay: .8s
}

@keyframes floatUp {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-6px)
   }
}

/* Thẻ trang trí lơ lửng: chỉ nhún 2 lần rồi đứng yên (lặp vô hạn làm khung hình đổi liên tục → Speed Index cao);
   tắt hẳn trên mobile và khi người dùng chọn giảm chuyển động */
.hero-float-card,
.ah-float-card {
   animation-iteration-count: 2 !important
}

@media (max-width: 782px), (prefers-reduced-motion: reduce) {
   .hero-float-card,
   .ah-float-card {
      animation: none !important
   }
}

.hfc-icon {
   width: 34px;
   height: 34px;
   border-radius: var(--r-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.hfc-icon.blue {
   background: rgba(222, 238, 255, .75);
   color: var(--b600)
}

.hfc-icon.orange {
   background: rgba(255, 243, 224, .75);
   color: var(--o600)
}

.hfc-icon.green {
   background: rgba(220, 252, 231, .75);
   color: #16a34a
}

.hfc-icon svg {
   width: 16px;
   height: 16px
}

.hfc-text {
   display: flex;
   flex-direction: column;
   line-height: 1.2
}

.hfc-num {
   font-size: 14px;
   font-weight: 800;
   color: var(--gray900)
}

.hfc-lbl {
   font-size: 11px;
   color: var(--gray500)
}

.hfc-stars {
   color: var(--gold);
   font-size: 13px
}

.hfc-rating-num {
   font-size: 14px;
   font-weight: 800;
   color: var(--gray900)
}

.hfc-avatars {
   display: flex;
   align-items: center
}

.hfc-av {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, .8);
   margin-left: -8px;
   background: rgba(222, 238, 255, .85);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   font-weight: 700;
   color: var(--b700)
}

.hfc-av:first-child {
   margin-left: 0
}

.hfc-more {
   font-size: 10px;
   color: var(--gray500);
   margin-left: 5px
}

/* SEARCH SECTION */
.search-section {
   padding: 40px 0;
   background: var(--gray50);
   position: relative;
   z-index: 10;
   margin-top: -30px;
}

.search-box {
   background: #11316b;
   border-radius: var(--r-xl);
   padding: 16px 24px;
   margin-bottom: 24px;
   box-shadow: var(--sh-lg);
}

.search-box-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
}

.search-title {
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   white-space: nowrap;
}

.search-fields {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: 1;
   justify-content: flex-end;
   flex-wrap: wrap;
}

.field-group {
   flex: 1;
   min-width: 140px;
   max-width: 200px;
}

.field-select {
   height: 44px;
   border: none;
   border-radius: 6px;
   padding: 0 14px;
   font-size: 14px;
   color: var(--gray700);
   width: 100%;
   cursor: pointer;
   outline: none;
}

.search-btn {
   height: 44px;
   padding: 0 24px;
   background: var(--o500);
   color: #fff;
   font-size: 15px;
   font-weight: 700;
   border-radius: 6px;
   border: none;
   cursor: pointer;
   transition: background .15s;
   white-space: nowrap;
}

.search-btn:hover {
   background: var(--o600);
}

/* STATS GRID */
.stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
}

.stat-card {
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 18px 20px;
   display: flex;
   align-items: center;
   gap: 16px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
   transition: transform .2s, box-shadow .2s;
   cursor: default;
}

.stat-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.stat-icon {
   width: 44px;
   height: 44px;
   flex-shrink: 0;
   color: #11316b;
   display: flex;
   align-items: center;
   justify-content: center;
}

.stat-icon svg {
   width: 100%;
   height: 100%;
   display: block;
}

.stat-info {
   display: flex;
   flex-direction: column;
   line-height: 1.3;
}

.stat-num {
   font-size: 22px;
   font-weight: 800;
   color: var(--o500);
   margin-bottom: 2px;
}

.stat-lbl {
   font-size: 13px;
   color: var(--gray700);
   font-weight: 500;
}

/* SUBJECTS */
.subjects {
   background: var(--gray50)
}

.subject-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 14px
}

.subject-card {
   background: #fff;
   border-radius: var(--r-lg);
   padding: 22px 14px;
   text-align: center;
   border: 1.5px solid var(--gray100);
   cursor: pointer;
   transition: border-color .2s, box-shadow .2s, transform .2s
}

.subject-card:hover {
   border-color: var(--b400);
   box-shadow: var(--sh-md);
   transform: translateY(-3px)
}

.subject-icon-wrap {
   width: 64px;
   height: 64px;
   border-radius: var(--r-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 14px
}

.subject-icon-wrap svg {
   width: 32px;
   height: 32px
}

.subject-name {
   font-size: 13px;
   font-weight: 700;
   color: var(--gray900);
   margin-bottom: 3px
}

.subject-count {
   font-size: 11px;
   color: var(--gray500)
}

/* subject bg colors */
.sub-math .subject-icon-wrap {
   background: #dbeafe
}

.sub-eng .subject-icon-wrap {
   background: #fce7f3
}

.sub-phys .subject-icon-wrap {
   background: #ede9fe
}

.sub-chem .subject-icon-wrap {
   background: #d1fae5
}

.sub-viet .subject-icon-wrap {
   background: #fef3c7
}

.sub-it .subject-icon-wrap {
   background: #e0f2fe
}

/* TUTORS */
.tutors {
   background: #fff
}

.tutor-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px
}

.tutor-card {
   background: #fff;
   border-radius: var(--r-lg);
   border: 1.5px solid var(--gray100);
   overflow: hidden;
   transition: box-shadow .2s, transform .2s;
   cursor: pointer
}

.tutor-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--sh-lg)
}

.tutor-img-wrap {
   position: relative;
   aspect-ratio: 3/4;
   overflow: hidden
}

.tutor-img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
   transition: transform .4s var(--ease)
}

.tutor-card:hover .tutor-img-wrap img {
   transform: scale(1.04)
}

.tutor-fav {
   position: absolute;
   top: 8px;
   right: 8px;
   width: 30px;
   height: 30px;
   background: rgba(255, 255, 255, .92);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gray400);
   cursor: pointer
}

.tutor-fav:hover {
   color: #ef4444
}

.tutor-fav svg {
   width: 15px;
   height: 15px
}

.tutor-badge-verified {
   position: absolute;
   bottom: 8px;
   left: 8px;
   background: #16a34a;
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   padding: 3px 7px;
   border-radius: var(--r-sm);
   letter-spacing: .04em
}

.tutor-info {
   padding: 12px
}

.tutor-name {
   font-size: 14px;
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 2px
}

.tutor-subject {
   font-size: 12px;
   color: var(--b600);
   font-weight: 600;
   margin-bottom: 5px
}

.tutor-stars {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   font-size: 12px;
   color: var(--gold);
   margin-bottom: 6px;
   line-height: 1.4;
}

.tutor-stars span {
   color: var(--gray500);
   font-size: 11px;
   margin-left: 4px;
   margin-top: 1px;
}

.tutor-meta {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   color: var(--gray500);
   margin-bottom: 8px
}

.tutor-meta svg {
   width: 12px;
   height: 12px;
   color: var(--gray400)
}

.tutor-price {
   font-size: 14px;
   font-weight: 800;
   color: var(--b600);
   margin-bottom: 10px
}

.tutor-price small {
   font-size: 11px;
   font-weight: 500;
   color: var(--gray500)
}

.btn-view {
   display: block;
   text-align: center;
   font-size: 13px;
   font-weight: 600;
   color: var(--b600);
   border: 1.5px solid var(--b400);
   border-radius: var(--r-md);
   padding: 7px 0;
   transition: background .15s, color .15s
}

.btn-view:hover {
   background: var(--b600);
   color: #fff
}

.tutor-slider-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-top: 28px
}

.arr-btn {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 1.5px solid var(--gray200);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gray600);
   transition: background .15s, border-color .15s, color .15s;
   cursor: pointer;
   position: relative;
   z-index: 10;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
}

.arr-btn:hover {
   background: var(--b50);
   border-color: var(--b400);
   color: var(--b600)
}

.arr-btn svg {
   width: 17px;
   height: 17px
}

/* CLASSES */
.classes {
   background: var(--gray50)
}

.class-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-bottom: 28px
}

.class-card {
   background: #fff;
   border-radius: var(--r-lg);
   border: 1.5px solid var(--gray100);
   padding: 20px;
   transition: box-shadow .2s, transform .2s, border-color .2s;
   display: flex;
   flex-direction: column;
   cursor: pointer
}

.class-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--sh-lg);
   border-color: var(--b200)
}

.class-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px
}

.class-id {
   font-size: 12px;
   font-weight: 600;
   color: var(--gray500);
   letter-spacing: 0.5px;
   text-transform: uppercase
}

.class-badge {
   background: #dcfce7;
   color: #16a34a;
   font-size: 11px;
   font-weight: 700;
   padding: 4px 8px;
   border-radius: 12px
}

.class-title {
   font-size: 16px;
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 16px;
   line-height: 1.4
}

.class-details {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 20px;
   flex-grow: 1
}

.class-detail {
   display: flex;
   align-items: flex-start;
   font-size: 13px;
   line-height: 1.4
}

.class-detail svg {
   width: 16px;
   height: 16px;
   color: var(--gray400);
   margin-right: 8px;
   flex-shrink: 0;
   margin-top: 1px
}

.class-detail span {
   color: var(--gray500);
   width: 76px;
   flex-shrink: 0
}

.class-detail strong {
   color: var(--gray800);
   font-weight: 600
}

.class-price {
   font-size: 18px;
   font-weight: 800;
   color: var(--b700);
   margin-bottom: 14px;
   padding-top: 14px;
   border-top: 1px dashed var(--gray200)
}

.class-price small {
   font-size: 13px;
   font-weight: 600;
   color: var(--gray600)
}

.class-extra-badges {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 16px
}

.class-extra-badge {
   font-size: 11px;
   font-weight: 600;
   padding: 4px 8px;
   border-radius: 4px
}

.badge-gray {
   background: var(--gray100);
   color: var(--gray600)
}

.badge-orange {
   background: #ffedd5;
   color: #ea580c
}

.btn-class {
   display: block;
   text-align: center;
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   background: var(--b700);
   border-radius: var(--r-md);
   padding: 10px 0;
   transition: background .15s
}

.btn-class:hover {
   background: var(--b800)
}

.class-footer {
   display: flex;
   justify-content: center
}

.btn-outline {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 600;
   color: var(--gray700);
   background: #fff;
   border: 1.5px solid var(--gray300);
   border-radius: var(--r-md);
   padding: 10px 24px;
   transition: all .15s;
   cursor: pointer
}

.btn-outline:hover {
   background: var(--gray50);
   border-color: var(--gray400);
   color: var(--gray900)
}

/* HOW IT WORKS */
.how-it-works {
   background: #fff
}

.steps-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   position: relative;
   margin-top: 32px
}

.steps-grid::before {
   content: '';
   position: absolute;
   top: 45%;
   left: 12%;
   right: 12%;
   border-top: 2px dashed #cbd5e1;
   z-index: 0
}

.step-card {
   text-align: left;
   position: relative;
   z-index: 1;
   background: #fff;
   border-radius: var(--r-lg);
   padding: 24px;
   display: flex;
   flex-direction: column
}

.step-card:nth-child(1) {
   border: 1.5px solid #bfdbfe;
   background: linear-gradient(180deg, #f0f9ff 0%, #fff 70%)
}

.step-card:nth-child(2) {
   border: 1.5px solid #fed7aa;
   background: linear-gradient(180deg, #fff7ed 0%, #fff 70%)
}

.step-card:nth-child(3) {
   border: 1.5px solid #bbf7d0;
   background: linear-gradient(180deg, #f0fdf4 0%, #fff 70%)
}

.step-card:nth-child(4) {
   border: 1.5px solid #e9d5ff;
   background: linear-gradient(180deg, #faf5ff 0%, #fff 70%)
}

.step-img-wrap {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   height: 80px;
   transition: transform .3s
}

.step-card:hover .step-img-wrap {
   transform: translateY(-5px)
}

.step-img-wrap svg {
   width: 80px;
   height: 80px
}

.step-card:nth-child(1) .step-img-wrap {
   color: #2563eb
}

.step-card:nth-child(2) .step-img-wrap {
   color: #f97316
}

.step-card:nth-child(3) .step-img-wrap {
   color: #16a34a
}

.step-card:nth-child(4) .step-img-wrap {
   color: #9333ea
}

.step-title-wrap {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 10px
}

.step-num {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   flex-shrink: 0
}

.step-card:nth-child(1) .step-num {
   background: #2563eb
}

.step-card:nth-child(2) .step-num {
   background: #f97316
}

.step-card:nth-child(3) .step-num {
   background: #16a34a
}

.step-card:nth-child(4) .step-num {
   background: #9333ea
}

.step-title {
   font-size: 15px;
   font-weight: 800;
   color: var(--gray900)
}

.step-desc {
   font-size: 13px;
   color: var(--gray600);
   line-height: 1.6
}

/* TESTIMONIALS */
.testimonials {
   background: #fff
}

.testi-grid {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding-bottom: 24px;
   -ms-overflow-style: none;
   /* IE and Edge */
   scrollbar-width: none;
   /* Firefox */
}

.testi-grid::-webkit-scrollbar {
   display: none;
   /* Chrome, Safari and Opera */
}

.testi-card {
   flex: 0 0 calc(33.333% - 14px);
   scroll-snap-align: start;
   background: var(--gray50);
   border-radius: var(--r-lg);
   padding: 24px;
   border: 1.5px solid var(--gray100);
   transition: box-shadow .2s, transform .2s
}

.testi-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--sh-md)
}

.testi-stars {
   color: var(--gold);
   font-size: 14px;
   margin-bottom: 12px;
   letter-spacing: 1px
}

.testi-text {
   font-size: 14px;
   color: var(--gray600);
   line-height: 1.7;
   margin-bottom: 18px
}

.testi-author {
   display: flex;
   align-items: center;
   gap: 10px
}

.testi-av-placeholder {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--b100);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   font-weight: 800;
   color: var(--b600);
   flex-shrink: 0
}

.testi-name {
   font-size: 14px;
   font-weight: 700;
   color: var(--gray900)
}

.testi-role {
   font-size: 12px;
   color: var(--gray500)
}

.testi-nav {
   display: flex;
   justify-content: center;
   gap: 6px;
   margin-top: 28px
}

.testi-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--gray300);
   cursor: pointer;
   transition: background .2s, width .2s;
   border: none
}

.testi-dot.active {
   background: var(--b500);
   width: 22px;
   border-radius: 3px
}

/* BLOG */
.blog {
   background: var(--gray50)
}

.blog-head {
   display: flex;
   flex-direction: column;
   gap: 20px;
   margin-bottom: 32px;
}

.blog-filter {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   padding-bottom: 8px;
   /* For scrollbar */
   justify-content: flex-start;
}

.blog-filter::-webkit-scrollbar {
   display: none;
}

.filter-btn {
   background: var(--gray100);
   color: var(--gray700);
   border: 1px solid var(--gray200);
   padding: 8px 16px;
   border-radius: var(--r-md);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
   transition: all .2s var(--ease);
}

.filter-btn:hover {
   background: var(--gray200);
   color: var(--gray900);
}

.filter-btn.active {
   background: var(--b600);
   color: #fff;
   border-color: var(--b600);
   box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.blog-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--gray200);
}

.blog-search {
   display: flex;
   align-items: center;
   background: #fff;
   border: 1px solid var(--gray300);
   border-radius: var(--r-md);
   padding: 8px 12px;
   flex-grow: 1;
   max-width: 400px;
   gap: 10px;
   transition: border-color .2s;
}

.blog-search:focus-within {
   border-color: var(--b500);
}

.blog-search svg {
   width: 18px;
   height: 18px;
   color: var(--gray500);
}

.blog-search input {
   border: none;
   outline: none;
   font-size: 14px;
   width: 100%;
   color: var(--gray700);
   background: transparent;
}

.blog-grid {
   display: flex;
   flex-wrap: nowrap;
   gap: 20px;
   margin-top: 32px;
   overflow: hidden;
}

/* Trang Kiến thức: lưới nhiều hàng thay vì slider 1 hàng */
.blog-grid--list {
   flex-wrap: wrap;
   overflow: visible;
}

.blog-grid--list .blog-card {
   margin-bottom: 4px;
}

@media (max-width: 1023px) {
   .blog-grid--list .blog-card {
      flex: 0 0 calc(50% - 10px);
   }
}

.blog-card {
   flex: 0 0 calc(25% - 15px);
   min-width: 0;
   background: #fff;
   border-radius: var(--r-lg);
   border: 1.5px solid var(--gray100);
   overflow: hidden;
   transition: box-shadow .2s, transform .2s, border-color .2s;
   display: flex;
   flex-direction: column;
}


.blog-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--sh-md);
   border-color: var(--b200)
}

.blog-img-wrap {
   display: block;
   position: relative;
   aspect-ratio: 16/10;
   overflow: hidden
}

.blog-img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s var(--ease)
}

.blog-card:hover .blog-img-wrap img {
   transform: scale(1.05)
}

.blog-tag {
   position: absolute;
   top: 12px;
   left: 12px;
   background: rgba(255, 255, 255, .95);
   color: var(--b700);
   font-size: 11px;
   font-weight: 700;
   padding: 5px 12px;
   border-radius: var(--r-md);
   letter-spacing: 0.3px;
   z-index: 2
}

.blog-info {
   padding: 20px;
   flex-grow: 1;
   display: flex;
   flex-direction: column
}

.blog-title {
   font-size: 16px;
   font-weight: 800;
   line-height: 1.45;
   margin-bottom: 10px
}

.blog-title a {
   color: var(--gray900);
   text-decoration: none;
   transition: color .15s
}

.blog-title a:hover {
   color: var(--b600)
}

.blog-desc {
   font-size: 14px;
   color: var(--gray600);
   line-height: 1.6;
   margin-bottom: 20px;
   flex-grow: 1;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.blog-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 12px;
   color: var(--gray500);
   padding-top: 16px;
   border-top: 1px dashed var(--gray200)
}

.blog-meta span {
   display: inline-flex;
   align-items: center;
   gap: 6px
}

.blog-meta svg {
   width: 14px;
   height: 14px;
   color: var(--gray400)
}

/* CTA BANNER */
.cta-banner {
   background: var(--gray50);
   padding: 72px 0;
   position: relative;
   border-top: 1px solid var(--gray100);
   border-bottom: 1px solid var(--gray100)
}

.cta-inner {
   text-align: center;
   position: relative;
   z-index: 2
}

.cta-emoji {
   font-size: 48px;
   margin-bottom: 16px;
   display: block
}

.cta-title {
   font-size: var(--fs-h2, 34px);
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 12px;
   line-height: 1.25
}

.cta-desc {
   font-size: 15px;
   color: var(--gray600);
   margin-bottom: 28px;
   max-width: 500px;
   margin-left: auto;
   margin-right: auto
}

.cta-btns {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap
}

.btn-white {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 700;
   color: var(--b700);
   background: #fff;
   padding: 12px 28px;
   border-radius: var(--r-md);
   transition: background .15s
}

.btn-white:hover {
   background: var(--gray100)
}

.btn-outline-white {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 600;
   color: #fff;
   border: 2px solid rgba(255, 255, 255, .35);
   padding: 11px 24px;
   border-radius: var(--r-md);
   transition: border-color .15s, background .15s
}

.btn-outline-white:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .08)
}

.cta-checks {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 18px;
   flex-wrap: wrap
}

.cta-check {
   font-size: 13px;
   color: var(--gray600);
   display: flex;
   align-items: center;
   gap: 5px;
   font-weight: 500
}

.cta-check svg {
   width: 15px;
   height: 15px;
   color: var(--b500)
}

/* FOOTER */
.footer {
   background: var(--gray900);
   padding: 52px 0 0
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 40px;
   padding-bottom: 40px;
   border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.footer-brand .logo-brand {
   color: #fff
}

.footer-brand .logo-tagline {
   color: var(--gray500)
}

.footer-brand .logo-icon-wrap {
   background: var(--b600)
}

.f-desc {
   font-size: 14px;
   color: var(--gray400);
   line-height: 1.7;
   margin: 14px 0 20px
}

.f-socials {
   display: flex;
   gap: 8px
}

.soc-btn {
   width: 36px;
   height: 36px;
   border-radius: var(--r-md);
   border: 1px solid rgba(255, 255, 255, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gray400);
   transition: background .15s, color .15s
}

.soc-btn:hover {
   background: var(--b600);
   color: #fff
}

.soc-btn svg {
   width: 17px;
   height: 17px
}

.f-col-title {
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 16px
}

.f-links {
   display: flex;
   flex-direction: column;
   gap: 9px
}

.f-link {
   font-size: 14px;
   color: var(--gray400);
   transition: color .15s
}

.f-link:hover {
   color: #fff
}

.f-contact-items {
   display: flex;
   flex-direction: column;
   gap: 11px
}

.f-citem {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   font-size: 14px;
   color: var(--gray400)
}

.f-citem svg {
   width: 16px;
   height: 16px;
   color: var(--b400);
   flex-shrink: 0;
   margin-top: 2px
}

.footer-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 0
}

.footer-copy {
   font-size: 13px;
   color: #9CA3AF /* đủ tương phản (≥4.5:1) trên nền footer tối */
}

.footer-copy a {
   color: inherit;
   font-weight: 600;
   text-decoration: none;
   transition: color .2s
}

.footer-copy a:hover {
   color: #fff;
   text-decoration: underline
}

.footer-payments {
   display: flex;
   align-items: center;
   gap: 7px
}

.payment-badge {
   padding: 3px 8px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--r-sm);
   font-size: 12px;
   font-weight: 700;
   color: var(--gray400)
}

/* BACK TO TOP */
.btt-wrap {
   position: fixed;
   bottom: 28px;
   right: 28px;
   cursor: pointer;
   opacity: 0;
   transform: translateY(12px);
   transition: opacity .25s, transform .25s;
   z-index: 500
}

.btt-wrap.visible {
   opacity: 1;
   transform: translateY(0)
}

.btt-btn {
   width: 48px;
   height: 48px;
   background: var(--b600);
   border-radius: var(--r-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   box-shadow: var(--sh-md)
}

.btt-btn:hover {
   background: var(--b700)
}

.btt-btn svg {
   width: 19px;
   height: 19px
}

/* FLOATING CONTACT */
.fc-wrap {
   position: fixed;
   bottom: 84px;
   right: 28px;
   z-index: 500;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 8px;
   pointer-events: none;
}

.fc-menu {
   display: flex;
   flex-direction: column;
   gap: 7px;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateY(8px) scale(.97);
   transform-origin: bottom right;
   transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}

.fc-menu.active {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateY(0) scale(1);
   transition: opacity .2s, transform .2s, visibility 0s linear 0s;
}

.fc-item {
   display: flex;
   align-items: center;
   gap: 9px;
   background: #fff;
   border-radius: var(--r-md);
   padding: 9px 12px;
   box-shadow: var(--sh-md);
   font-size: 13px;
   font-weight: 600;
   color: var(--gray700);
   transition: transform .15s;
   border: 1px solid var(--gray100)
}

.fc-item:hover {
   transform: translateX(-2px)
}

.fc-icon {
   width: 34px;
   height: 34px;
   border-radius: var(--r-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.fc-icon svg {
   width: 16px;
   height: 16px
}

.fc-phone {
   background: #dbeafe;
   color: var(--b600)
}

.fc-zalo {
   background: #dbeafe;
   color: var(--b600);
   font-size: 10px;
   font-weight: 800
}

.fc-msg {
   background: #fce7f3;
   color: #be185d
}

.fc-btn {
   width: 48px;
   height: 48px;
   background: var(--b600);
   border-radius: var(--r-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   box-shadow: var(--sh-md);
   cursor: pointer;
   transition: background .15s;
   pointer-events: auto;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
}

.fc-btn:hover {
   background: var(--b700)
}

.fc-btn svg {
   width: 26px;
   height: 26px
}

/* RESPONSIVE TABLET (≤1024px) */
@media(max-width:1024px) {
   .wrap {
      padding: 0 24px
   }

   .hero-grid {
      grid-template-columns: 1fr;
      gap: 0
   }

   .hero-right {
      display: none
   }

   .hero-btns {
      justify-content: center
   }

   .hero-stats {
      justify-content: center
   }

   .hero-left {
      text-align: center
   }

   .hero-desc {
      margin-left: auto;
      margin-right: auto
   }

   .search-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
   }

   .field-group {
      max-width: none;
   }

   .search-btn {
      width: 100%;
      justify-content: center
   }

   .stats-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .subject-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .tutor-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .class-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .steps-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .steps-grid::before {
      display: none
   }

   .testi-card {
      flex: 0 0 calc(50% - 10px);
   }

   .blog-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 32px
   }

   .announce-bar,
   .nav {
      padding-left: 24px;
      padding-right: 24px
   }
}

/* RESPONSIVE MOBILE (≤768px) */
@media(max-width:768px) {
   section {
      padding: 48px 0
   }

   .wrap {
      padding: 0 16px
   }

   .announce-bar {
      font-size: 11px;
      padding: 6px 16px
   }

   .nav {
      padding: 0 16px
   }

   .nav-links,
   .nav-actions {
      display: none
   }

   .hamburger {
      display: flex !important
   }

   .nav-inner {
      gap: 0;
      justify-content: space-between
   }

   .hero {
      padding: 36px 0 0
   }

   .hero-stats {
      flex-direction: column;
      align-items: center;
      gap: 14px
   }

   .search-fields {
      grid-template-columns: 1fr
   }

   .stats-grid {
      grid-template-columns: 1fr
   }

   .subject-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .tutor-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px
   }

   .class-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px
   }

   .steps-grid {
      grid-template-columns: 1fr
   }

   .testi-card {
      flex: 0 0 85%;
   }

   .blog-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
   }

   .blog-filter {
      justify-content: flex-start;
   }

   .blog-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
   }

   .blog-search {
      max-width: 100%;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .footer-bar {
      flex-direction: column;
      gap: 10px;
      text-align: center
   }

   .sec-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px
   }

   .search-section {
      padding: 20px 0
   }

   .search-box {
      padding: 20px 16px;
   }

   .search-box-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
   }

   .search-title {
      font-size: 20px;
      text-align: center;
      white-space: normal;
   }

   .search-fields {
      flex-direction: column;
      justify-content: stretch;
      gap: 10px;
   }

   .field-group {
      min-width: unset;
      max-width: unset;
      width: 100%;
      flex: unset;
   }

   .field-select {
      width: 100%;
      height: 46px;
      font-size: 15px;
   }

   .search-btn {
      width: 100%;
      height: 48px;
      font-size: 16px;
      margin-top: 4px;
      border-radius: 8px;
   }

   .btt-wrap,
   .fc-wrap {
      right: 12px
   }

   .btt-wrap {
      bottom: 16px
   }

   .fc-wrap {
      bottom: 68px
   }

   /* Dịch nút slider nav sang trái để tránh nút chat nổi */
   .tutor-slider-nav,
   .blog-nav {
      justify-content: flex-start;
      padding-right: 80px;
   }

   .cta-btns {
      flex-direction: column;
      align-items: center
   }

   .cta-checks {
      gap: 10px;
      flex-direction: column;
      align-items: center
   }

   /* Hiện 2 bài viết mỗi hàng trên mobile */
   .blog-card {
      flex: 0 0 calc(50% - 10px);
   }

   .blog-info {
      padding: 12px
   }

   .blog-title {
      font-size: 14px;
      margin-bottom: 6px
   }

   .blog-desc {
      font-size: 12px;
      margin-bottom: 12px;
      -webkit-line-clamp: 2
   }

   .blog-meta {
      font-size: 11px;
      padding-top: 10px;
      border-top: 1px dashed var(--gray200);
      flex-direction: column;
      align-items: flex-start;
      gap: 4px
   }

   .blog-meta svg {
      width: 12px;
      height: 12px
   }

   .blog-tag {
      font-size: 10px;
      padding: 3px 8px;
      top: 8px;
      left: 8px
   }

   .class-card {
      padding: 10px
   }

   .class-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px
   }

   .class-title {
      font-size: 14px
   }

   .class-details {
      gap: 6px
   }

   .class-detail {
      font-size: 12px;
      align-items: flex-start
   }

   .class-detail span {
      display: none
   }

   /* Hide label to save space */
   .class-detail strong {
      white-space: normal;
      line-height: 1.4;
      padding-top: 1px
   }

   .class-detail svg {
      width: 14px;
      height: 14px;
      margin-top: 1px;
      flex-shrink: 0
   }

   .class-price {
      font-size: 14px;
      margin-top: 12px
   }

   .btn-class {
      padding: 10px;
      font-size: 13px;
      margin-top: 12px
   }



   .tutor-name {
      font-size: 14px
   }

   .tutor-subject {
      font-size: 12px
   }

   .tutor-badge {
      font-size: 10px;
      padding: 3px 6px
   }

   .tutor-details {
      gap: 6px;
      margin-bottom: 12px
   }

   .tutor-detail {
      font-size: 11px
   }

   .tutor-detail svg {
      width: 12px;
      height: 12px
   }
}

@media(max-width:480px) {
   .hero-btns {
      flex-direction: column;
      align-items: stretch
   }

   .btn-primary,
   .btn-secondary {
      justify-content: center
   }
}

/* ==============================================
   ABOUT PAGE
   ============================================== */
.breadcrumb {
   padding: 24px 0;
   font-size: 14px;
   color: var(--gray500)
}

.breadcrumb a {
   color: var(--gray700);
   font-weight: 500;
   transition: color .15s
}

.breadcrumb a:hover {
   color: var(--b600)
}

.breadcrumb span {
   color: var(--b600);
   font-weight: 600
}

.about-hero {
   padding: 40px 0 50px;
   position: relative;
   overflow: hidden
}

.about-hero-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center
}

.ah-title {
   font-size: 42px;
   font-weight: 800;
   color: var(--gray900);
   line-height: 1.2;
   margin-bottom: 20px
}

.ah-desc {
   font-size: 16px;
   color: var(--gray600);
   line-height: 1.7;
   margin-bottom: 32px
}

.ah-features {
   display: flex;
   gap: 24px;
   margin-bottom: 32px
}

.ah-feat {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 12px
}

.ah-feat-icon {
   width: 64px;
   height: 64px;
   background: var(--b50);
   border: 2px solid var(--b100);
   color: var(--b600);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   box-shadow: 0 4px 12px rgba(20, 80, 184, .08);
   transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}

.ah-feat:hover .ah-feat-icon {
   transform: translateY(-4px) scale(1.05);
   box-shadow: 0 8px 24px rgba(20, 80, 184, .15);
   background: var(--white);
   border-color: var(--b200);
}

.ah-feat-txt {
   font-size: 14px;
   font-weight: 700;
   color: var(--gray800)
}

.ah-img-wrap {
   position: relative;
   width: 100%;
   max-width: 540px;
   margin-left: auto
}

/* Ảnh hero hiển thị trơn, không bo khung */
.ah-img-wrap img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: contain
}

.ah-float-card {
   position: absolute;
   background: #fff;
   border-radius: var(--r-lg);
   padding: 16px 20px;
   box-shadow: var(--sh-lg);
   display: flex;
   align-items: flex-start;
   gap: 14px;
   width: 280px;
   border: 1px solid var(--gray100);
   animation: floatUp 4s ease-in-out infinite
}

.ah-float-card.card-top {
   top: 40px;
   left: -50px;
   animation-delay: 0s
}

.ah-float-card.card-bottom {
   bottom: 50px;
   right: -40px;
   animation-delay: 1.5s
}

.ah-fc-icon {
   width: 40px;
   height: 40px;
   background: var(--o100);
   color: var(--o600);
   border-radius: var(--r-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   flex-shrink: 0
}

.ah-float-card strong {
   display: block;
   font-size: 14px;
   color: var(--gray900);
   margin-bottom: 4px
}

.ah-float-card p {
   font-size: 12px;
   color: var(--gray500);
   line-height: 1.4
}

.astats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   background: #fff;
   border-radius: var(--r-xl);
   padding: 32px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, .04);
   border: 1px solid var(--gray100);
   margin-bottom: 50px
}

.astat-card {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 0 12px
}

.astat-card:not(:last-child) {
   border-right: 1px solid var(--gray200)
}

.astat-icon {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0
}

.astat-icon.blue {
   background: #eff6ff;
   color: #2563eb
}

.astat-icon.green {
   background: #f0fdf4;
   color: #16a34a
}

.astat-icon.purple {
   background: #faf5ff;
   color: #9333ea
}

.astat-icon.orange {
   background: #fff7ed;
   color: #ea580c
}

.astat-num {
   font-size: 24px;
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 2px
}

.astat-lbl {
   font-size: 13px;
   color: var(--gray500);
   font-weight: 500
}

.mission-vision {
   padding: 60px 0
}

.mv-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center
}

.mv-card {
   background: #fff;
   border-radius: var(--r-lg);
   padding: 32px;
   box-shadow: var(--sh-md);
   border: 1px solid var(--gray100);
   margin-bottom: 24px
}

.mv-card:last-child {
   margin-bottom: 0
}

.mv-icon {
   width: 80px;
   height: 80px;
   background: var(--b50);
   color: var(--b600);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   margin-bottom: 20px
}

.mv-card h3 {
   font-size: 20px;
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 12px
}

.mv-card p {
   font-size: 15px;
   color: var(--gray600);
   line-height: 1.7
}

.team {
   background: var(--gray50);
   padding: 60px 0
}

.team-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
   margin-top: 40px
}

/* Ảnh nền trong suốt: không khung, không bóng, không cắt ảnh */
.team-img img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: contain
}

.team-content .sec-desc {
   margin-bottom: 24px;
   font-size: 16px
}

.team-list {
   margin-bottom: 32px;
   display: flex;
   flex-direction: column;
   gap: 16px
}

.team-list li {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 15px;
   color: var(--gray800);
   font-weight: 500
}

.team-list li svg {
   width: 20px;
   height: 20px;
   color: var(--b600)
}

.timeline-sec {
   padding: 60px 0;
   background: #fff
}

.timeline {
   display: flex;
   justify-content: space-between;
   position: relative;
   margin-top: 60px;
   padding-bottom: 40px
}

.timeline::before {
   content: '';
   position: absolute;
   top: 28px;
   left: 40px;
   right: 40px;
   height: 2px;
   background: var(--gray200);
   z-index: 0
}

.tl-item {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   width: 180px
}

.tl-icon {
   width: 80px;
   height: 80px;
   background: #fff;
   border: 2px solid var(--gray200);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   margin-bottom: 20px;
   transition: border-color .2s, box-shadow .2s
}

.tl-item:hover .tl-icon {
   border-color: var(--b500);
   box-shadow: 0 0 0 4px var(--b100)
}

.tl-year {
   font-size: 18px;
   font-weight: 800;
   color: var(--b700);
   margin-bottom: 12px
}

.tl-item p {
   font-size: 13px;
   color: var(--gray600);
   line-height: 1.5
}

.about-cta-wrap {
   padding: 0 40px;
   margin-top: 20px;
   margin-bottom: 60px;
   max-width: 1280px;
   margin-left: auto;
   margin-right: auto
}

.about-cta {
   background: var(--b700);
   border-radius: var(--r-xl);
   padding: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   position: relative;
   overflow: hidden
}

.about-cta::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 40%;
   background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="80" fill="rgba(255,255,255,0.05)"/></svg>') center/cover;
   pointer-events: none
}

.acta-title {
   font-size: 28px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 12px;
   line-height: 1.3
}

.acta-desc {
   font-size: 16px;
   color: rgba(255, 255, 255, .8);
   max-width: 600px
}

.acta-btns {
   display: flex;
   gap: 16px;
   flex-shrink: 0;
   position: relative;
   z-index: 2
}

@media(max-width:1024px) {

   .about-hero-grid,
   .mv-grid,
   .team-grid {
      grid-template-columns: 1fr;
      gap: 40px
   }

   .ah-img-wrap {
      margin: 0 auto
   }

   .ah-float-card.card-top {
      left: -20px
   }

   .ah-float-card.card-bottom {
      right: -20px
   }

   .astats-grid {
      grid-template-columns: 1fr 1fr;
      padding: 24px;
      gap: 24px
   }

   .astat-card {
      border: none !important;
      padding: 0
   }

   .timeline {
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
      padding-bottom: 0
   }

   .timeline::before {
      top: 0;
      bottom: 0;
      left: 28px;
      right: auto;
      width: 2px;
      height: 100%
   }

   .tl-item {
      flex-direction: row;
      text-align: left;
      width: 100%;
      gap: 20px
   }

   .tl-icon {
      margin-bottom: 0;
      flex-shrink: 0;
      position: relative;
      z-index: 2
   }

   .tl-year {
      margin-bottom: 4px
   }

   .about-cta {
      flex-direction: column;
      text-align: center;
      padding: 40px 24px
   }

   .about-cta-wrap {
      padding: 0 24px
   }
}

@media(max-width:768px) {

   .about-hero,
   .mission-vision,
   .team,
   .timeline-sec {
      padding: 40px 0
   }

   .ah-title {
      font-size: 32px
   }

   .ah-features {
      flex-direction: column;
      gap: 16px
   }

   .ah-feat {
      flex-direction: row;
      text-align: left
   }

   .ah-float-card {
      display: none
   }

   .astats-grid {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .astat-card {
      flex-direction: row;
      justify-content: flex-start
   }

   .acta-btns {
      flex-direction: column;
      width: 100%
   }

   .acta-btns a {
      width: 100%;
      justify-content: center
   }
}

/* ==========================================================================
   SEARCH PAGE (TIM GIA SU)
   ========================================================================== */
.search-page {
   background: #fff;
}

.search-header-sec {
   background: #fff;
   padding: 40px 0;
   text-align: center;
   border-bottom: 1px solid var(--gray200);
}

.page-header {
   background: #fff;
   padding: 40px 0;
   text-align: center;
}

.search-header-sec .search-title {
   font-size: 32px;
   font-weight: 800;
   color: var(--b800);
   margin-bottom: 12px;
}

.search-desc {
   color: var(--gray600);
   margin-bottom: 30px;
   font-size: 16px;
}

.search-bar {
   display: flex;
   align-items: center;
   max-width: 800px;
   margin: 0 auto;
   background: #fff;
   border: 1px solid var(--gray300);
   border-radius: 8px;
   padding: 6px;
   box-shadow: var(--sh-sm);
}

.sb-input {
   display: flex;
   align-items: center;
   flex: 1;
   padding: 0 16px;
}

.sb-input svg {
   color: var(--gray500);
   margin-right: 12px;
}

.sb-input input {
   width: 100%;
   border: none;
   outline: none;
   font-size: 16px;
   font-family: inherit;
   color: var(--gray900);
}

.sb-divider {
   width: 1px;
   height: 28px;
   background: var(--gray200);
   margin: 0 12px;
}

.sb-divider-mobile {
   display: none;
}

.sb-location {
   display: flex;
   align-items: center;
   padding: 0 16px 0 4px;
}

.sb-location svg {
   color: var(--o500);
   margin-right: 8px;
}

.sb-select {
   border: none;
   outline: none;
   background: transparent;
   font-size: 15px;
   font-family: inherit;
   color: var(--gray800);
   cursor: pointer;
   font-weight: 500;
}

.sb-btn {
   padding: 10px 24px;
   font-size: 15px;
   border-radius: 6px;
}

/* Search Layout */
.search-layout-sec {
   padding: 60px 0;
}

.search-layout-wrap {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 40px;
   align-items: start;
}

/* Sidebar */
.search-sidebar {
   background: #fff;
   border-radius: 12px;
   padding: 24px;
   box-shadow: var(--sh-sm);
   border: 1px solid var(--gray100);
}

.filter-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--gray200);
}

.filter-header h2,
.filter-header h3 {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 18px;
   font-weight: 700;
   color: var(--b900);
   margin: 0;
}

.clear-filter {
   font-size: 13px;
   color: var(--o500);
   cursor: pointer;
   font-weight: 500;
}

.clear-filter:hover {
   text-decoration: underline;
}

.filter-group {
   margin-bottom: 24px;
}

.filter-group:last-child {
   margin-bottom: 0;
}

.filter-title {
   font-size: 15px;
   font-weight: 700;
   color: var(--gray900);
   margin-bottom: 16px;
}

/* Custom Checkbox & Radio */
.filter-check,
.filter-radio {
   display: flex;
   align-items: center;
   position: relative;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 14px;
   color: var(--gray700);
   user-select: none;
}

.filter-check input,
.filter-radio input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
}

.checkmark,
.radiomark {
   height: 18px;
   width: 18px;
   background-color: var(--gray100);
   border: 1px solid var(--gray300);
   border-radius: 4px;
   margin-right: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
}

.radiomark {
   border-radius: 50%;
}

.filter-check:hover input~.checkmark,
.filter-radio:hover input~.radiomark {
   background-color: var(--gray200);
}

.filter-check input:checked~.checkmark,
.filter-radio input:checked~.radiomark {
   background-color: var(--o500);
   border-color: var(--o500);
}

.checkmark:after,
.radiomark:after {
   content: "";
   position: absolute;
   display: none;
}

.filter-check input:checked~.checkmark:after,
.filter-radio input:checked~.radiomark:after {
   display: block;
}

.filter-check .checkmark:after {
   width: 4px;
   height: 8px;
   border: solid white;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
   margin-bottom: 2px;
}

.filter-radio .radiomark:after {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: white;
}

.filter-more {
   font-size: 13px;
   color: var(--b600);
   font-weight: 500;
   cursor: pointer;
   display: inline-block;
   margin-top: 4px;
}

.filter-more:hover {
   text-decoration: underline;
}

.filter-select {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--gray300);
   border-radius: 6px;
   font-family: inherit;
   font-size: 14px;
   color: var(--gray800);
   background: #fff;
   outline: none;
   cursor: pointer;
}

.filter-select:focus {
   border-color: var(--b500);
}

/* Content Area */
.sc-topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
}

.sc-count {
   font-size: 15px;
   color: var(--gray600);
}

.sc-count strong {
   color: var(--gray900);
}

.sc-sort {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   color: var(--gray700);
}

.sort-select {
   padding: 8px 12px;
   border: 1px solid var(--gray300);
   border-radius: 6px;
   font-family: inherit;
   font-size: 14px;
   outline: none;
   background: #fff;
   cursor: pointer;
}

/* Grid Override */
.search-grid {
   margin-bottom: 40px;
   grid-template-columns: repeat(4, 1fr);
}

.class-grid.search-grid {
   grid-template-columns: repeat(3, 1fr);
}

/* Pagination */
.pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.page-link {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 36px;
   height: 36px;
   padding: 0 8px;
   border-radius: 6px;
   background: #fff;
   border: 1px solid var(--gray200);
   color: var(--gray700);
   font-weight: 500;
   font-size: 14px;
   text-decoration: none;
   transition: all 0.2s;
}

.page-link:hover {
   border-color: var(--b500);
   color: var(--b600);
}

.page-link.active {
   background: var(--b600);
   color: #fff;
   border-color: var(--b600);
}

.page-dots {
   color: var(--gray500);
   font-weight: 600;
}

.btn-filter-mobile {
   display: none;
   align-items: center;
   gap: 6px;
   padding: 8px 12px;
   border: 1px solid var(--gray300);
   background: #fff;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
   color: var(--gray800);
   cursor: pointer;
   white-space: nowrap;
   flex-shrink: 0;
}

.filter-close-mobile {
   display: none;
   justify-content: flex-end;
   margin-bottom: 16px;
   cursor: pointer;
   color: var(--gray600);
}

@media (max-width: 1199px) {

   .nav-links,
   .nav-actions {
      display: none !important;
   }

   .hamburger {
      display: flex !important;
   }

   .nav-inner {
      gap: 0;
      justify-content: space-between;
   }

   .nav {
      padding: 0 16px;
   }
}

/* Responsive Search Page */
@media (max-width: 991px) {
   .search-layout-wrap {
      grid-template-columns: 1fr;
   }

   .search-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 300px;
      height: 100vh;
      background: #fff;
      z-index: 1000;
      overflow-y: auto;
      margin: 0;
      padding: 24px;
      border-radius: 0;
      box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
      transform: translateX(-100%) !important;
      transition: transform 0.3s ease !important;
      opacity: 1 !important;
      visibility: visible !important;
   }

   .search-sidebar.show-mobile {
      transform: translateX(0) !important;
   }

   .filter-close-mobile {
      display: flex;
   }

   .btn-filter-mobile {
      display: flex;
   }

   .sc-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 16px;
      gap: 12px;
      flex-wrap: wrap;
   }

   .sc-topbar {
      flex-direction: column;
      align-items: flex-start;
   }

   .search-bar {
      margin: 0 20px;
   }

   .search-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .class-grid.search-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   .search-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
   }

   .class-grid.search-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 576px) {
   .search-layout-sec {
      padding-top: 24px;
   }

   .sc-topbar {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
   }

   .sc-actions {
      flex-wrap: nowrap;
   }

   .sc-sort span {
      display: none;
   }

   .search-bar {
      flex-direction: column;
      gap: 6px;
      padding: 8px;
   }

   .sb-divider {
      width: 100%;
      height: 1px;
      margin: 2px 0;
   }

   .sb-divider-mobile {
      display: block;
   }

   .sb-input,
   .sb-location {
      width: 100%;
      padding: 4px;
   }

   .sb-select {
      flex: 1;
   }

   .sb-btn {
      width: 100%;
      margin-top: 6px;
   }
}

/* FAQ Section */
.faq-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.faq-item {
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-md);
   overflow: hidden;
}

.faq-question {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
   font-size: 16px;
   font-weight: 700;
   color: var(--b800);
   cursor: pointer;
   background: var(--gray50);
}

.faq-question:hover {
   background: var(--b50);
}

.faq-answer {
   padding: 20px;
   font-size: 15px;
   color: var(--gray600);
   line-height: 1.6;
   border-top: 1px solid var(--gray200);
   display: none;
}

/* By default, let's make first one open for display purposes in static html */
.faq-item.active .faq-answer {
   display: block;
}

.faq-item.active .faq-question {
   background: #fff;
   color: var(--b600);
}

/* Contact Section */
.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
}

.contact-info-card {
   background: #fff;
   padding: 32px;
   border-radius: var(--r-xl);
   border: 1px solid var(--gray200);
   box-shadow: var(--sh-sm);
}

.contact-form-card {
   background: #fff;
   padding: 32px;
   border-radius: var(--r-xl);
   border: 1px solid var(--gray200);
   box-shadow: var(--sh-sm);
}

.c-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   margin-bottom: 24px;
}

.c-icon {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--b50);
   color: var(--b600);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.c-text h4 {
   font-size: 16px;
   font-weight: 700;
   color: var(--gray900);
   margin-bottom: 4px;
}

.c-text p {
   font-size: 15px;
   color: var(--gray600);
}

.form-group {
   margin-bottom: 20px;
}

.form-group label {
   display: block;
   font-size: 14px;
   font-weight: 600;
   color: var(--gray900);
   margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
   width: 100%;
   padding: 12px 16px;
   border: 1px solid var(--gray300);
   border-radius: var(--r-md);
   font-size: 15px;
   outline: none;
   transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
   border-color: var(--b500);
   box-shadow: 0 0 0 4px var(--b50);
}

.form-submit {
   width: 100%;
   padding: 14px;
   border: none;
   background: var(--b600);
   color: #fff;
   font-size: 16px;
}

/* FAQ Section */
.faq-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.faq-item {
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-md);
   overflow: hidden;
}

.faq-question {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
   font-size: 16px;
   font-weight: 700;
   color: var(--b800);
   cursor: pointer;
   background: var(--gray50);
}

.faq-question:hover {
   background: var(--b50);
}

.faq-answer {
   padding: 20px;
   font-size: 15px;
   color: var(--gray600);
   line-height: 1.6;
   border-top: 1px solid var(--gray200);
   display: none;
}

/* By default, let's make first one open for display purposes in static html */
.faq-item.active .faq-answer {
   display: block;
}

.faq-item.active .faq-question {
   background: #fff;
   color: var(--b600);
}

/* Contact Section */
.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
}

.contact-info-card {
   background: #fff;
   padding: 32px;
   border-radius: var(--r-xl);
   border: 1px solid var(--gray200);
   box-shadow: var(--sh-sm);
}

.contact-form-card {
   background: #fff;
   padding: 32px;
   border-radius: var(--r-xl);
   border: 1px solid var(--gray200);
   box-shadow: var(--sh-sm);
}

.c-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   margin-bottom: 24px;
}

.c-icon {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--b50);
   color: var(--b600);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.c-text h4 {
   font-size: 16px;
   font-weight: 700;
   color: var(--gray900);
   margin-bottom: 4px;
}

.c-text p {
   font-size: 15px;
   color: var(--gray600);
}

.form-group {
   margin-bottom: 20px;
}

.form-group label {
   display: block;
   font-size: 14px;
   font-weight: 600;
   color: var(--gray900);
   margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
   width: 100%;
   padding: 12px 16px;
   border: 1px solid var(--gray300);
   border-radius: var(--r-md);
   font-size: 15px;
   outline: none;
   transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
   border-color: var(--b500);
   box-shadow: 0 0 0 4px var(--b50);
}

.form-submit {
   width: 100%;
   padding: 14px;
   border: none;
   background: var(--b600);
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   border-radius: var(--r-md);
   cursor: pointer;
   transition: background 0.3s;
}

.form-submit:hover {
   background: var(--b700);
}

.role-group {
   display: flex;
   gap: 16px;
   margin-bottom: 20px;
}

.role-label {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
   padding: 12px 24px;
   border: 1px solid var(--gray300);
   border-radius: var(--r-md);
   cursor: pointer;
   transition: all .2s;
   margin-bottom: 0;
   text-align: left;
   font-weight: 500;
}

.role-label input {
   margin: 0 !important;
   width: auto !important;
}

.auth-card {
   width: 100%;
   max-width: 540px;
   margin: 0 auto;
   background: #fff;
   padding: 40px;
   border-radius: var(--r-xl);
   box-shadow: var(--sh-md);
   border: 1px solid var(--gray200);
}

@media (max-width: 768px) {
   .contact-grid {
      grid-template-columns: 1fr;
   }

   .role-group {
      flex-direction: column;
      gap: 10px;
   }

   .auth-card {
      padding: 24px;
   }
}

/* ==========================================================================
   TUTOR DETAIL PAGE (CHI TIET GIA SU)
   ========================================================================== */

.td-layout {
   display: grid;
   grid-template-columns: 320px minmax(0, 1fr);
   gap: 32px;
   align-items: start;
}

/* Sidebar */
.td-sidebar {
   position: sticky;
   top: 100px;
}

.td-card {
   background: #fff;
   border-radius: var(--r-xl);
   padding: 24px;
   border: 1px solid var(--gray200);
   box-shadow: var(--sh-sm);
   text-align: center;
}

.td-img-wrap {
   width: 140px;
   height: 140px;
   margin: 0 auto 20px;
   position: relative;
   border-radius: 50%;
   border: 4px solid #fff;
   box-shadow: var(--sh-md);
}

.td-img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

.td-badge-verified {
   position: absolute;
   bottom: -8px;
   left: 50%;
   transform: translateX(-50%);
   background: #16a34a;
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 20px;
   white-space: nowrap;
   border: 2px solid #fff;
}

.td-name {
   font-size: 24px;
   font-weight: 800;
   color: var(--b800);
   margin-bottom: 4px;
}

.td-subject {
   font-size: 15px;
   font-weight: 600;
   color: var(--b600);
   margin-bottom: 12px;
}

.td-stars {
   color: #f59e0b;
   font-size: 16px;
   margin-bottom: 20px;
}

.td-stars span {
   color: var(--gray600);
   font-size: 13px;
   margin-left: 6px;
}

.td-quick-info {
   text-align: left;
   margin-bottom: 24px;
   padding-top: 20px;
   border-top: 1px solid var(--gray200);
}

.td-qi-item {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   color: var(--gray700);
   margin-bottom: 12px;
   font-weight: 500;
}

.td-qi-item svg {
   color: var(--b500);
}

.td-profile-info {
   text-align: left;
   margin-bottom: 24px;
   padding-top: 20px;
   border-top: 1px solid var(--gray200);
}

.td-pi-title {
   font-size: 15px;
   font-weight: 800;
   color: var(--b800);
   text-transform: uppercase;
   margin-bottom: 12px;
}

.td-pi-row {
   display: flex;
   justify-content: space-between;
   padding: 12px 0;
   border-bottom: 1px solid var(--gray100);
   font-size: 14px;
}

.td-pi-row:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

.td-pi-row span {
   color: var(--gray500);
}

.td-pi-row strong {
   color: var(--b800);
   font-weight: 600;
   text-align: right;
   max-width: 60%;
   line-height: 1.4;
}

/* Tabs */
.td-tabs {
   display: flex;
   gap: 32px;
   border-bottom: 1px solid var(--gray200);
   margin-bottom: 32px;
}

.td-tab-btn {
   background: none;
   border: none;
   font-size: 16px;
   font-weight: 700;
   color: var(--gray500);
   padding: 0 0 16px 0;
   cursor: pointer;
   position: relative;
   transition: color .2s;
}

.td-tab-btn:hover {
   color: var(--b600);
}

.td-tab-btn.active {
   color: var(--b600);
}

.td-tab-btn.active::after {
   content: '';
   position: absolute;
   bottom: -1px;
   left: 0;
   width: 100%;
   height: 3px;
   background: var(--b600);
   border-radius: 3px 3px 0 0;
}

.td-tab-content {
   display: none;
   animation: fadeIn .3s ease;
}

.td-tab-content.active {
   display: block;
}

/* Certificates */
.td-cert-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 24px;
}

.td-cert-item {
   border: 1px solid var(--gray200);
   border-radius: var(--r-lg);
   overflow: hidden;
   background: #fff;
   box-shadow: var(--sh-sm);
   transition: transform .2s, box-shadow .2s;
   cursor: pointer;
}

.td-cert-item:hover {
   transform: translateY(-4px);
   box-shadow: var(--sh-md);
}

.td-cert-img-wrap {
   position: relative;
   overflow: hidden;
}

.td-cert-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity .3s;
}

.td-cert-item:hover .td-cert-overlay {
   opacity: 1;
}

.td-cert-img {
   width: 100%;
   height: 180px;
   object-fit: cover;
   border-bottom: 1px solid var(--gray200);
   display: block;
}

.td-cert-name {
   padding: 16px;
   font-size: 14px;
   font-weight: 700;
   color: var(--b800);
   text-align: center;
}

.td-actions {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.td-btn-primary {
   width: 100%;
   padding: 14px;
   background: var(--b600);
   color: #fff;
   border: none;
   border-radius: var(--r-md);
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: background .2s;
}

.td-btn-primary:hover {
   background: var(--b700);
}

.td-btn-secondary {
   width: 100%;
   padding: 12px;
   background: #fff;
   color: var(--b600);
   border: 1px solid var(--b200);
   border-radius: var(--r-md);
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: all .2s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.td-btn-secondary:hover {
   background: var(--b50);
}

.td-stats {
   display: flex;
   justify-content: space-between;
   margin-top: 24px;
   padding-top: 20px;
   border-top: 1px solid var(--gray200);
}

.td-stat-box strong {
   display: block;
   font-size: 16px;
   color: var(--gray900);
   margin-bottom: 4px;
}

.td-stat-box span {
   font-size: 12px;
   color: var(--gray500);
}

/* Main Content */
.td-main {
   background: #fff;
   border-radius: var(--r-xl);
   padding: 40px;
   border: 1px solid var(--gray200);
   box-shadow: var(--sh-sm);
}

.td-section {
   margin-bottom: 40px;
}

.td-section:last-child {
   margin-bottom: 0;
}

.td-section-title {
   font-size: 20px;
   font-weight: 700;
   color: var(--b800);
   margin-bottom: 20px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--gray200);
}

.td-content-text p {
   font-size: 15px;
   color: var(--gray700);
   line-height: 1.7;
   margin-bottom: 16px;
}

/* Timeline */
.td-timeline {
   list-style: none;
   padding: 0;
   margin: 0;
   position: relative;
}

.td-timeline::before {
   content: '';
   position: absolute;
   top: 8px;
   bottom: 0;
   left: 6px;
   width: 2px;
   background: var(--b100);
}

.td-timeline li {
   position: relative;
   padding-left: 32px;
   margin-bottom: 24px;
}

.td-time-dot {
   position: absolute;
   top: 6px;
   left: 0;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--b500);
   border: 3px solid #fff;
   box-shadow: 0 0 0 2px var(--b100);
}

.td-time-content strong {
   display: block;
   font-size: 16px;
   color: var(--gray900);
   margin-bottom: 4px;
}

.td-time-date {
   display: inline-block;
   font-size: 13px;
   font-weight: 600;
   color: var(--b600);
   background: var(--b50);
   padding: 2px 8px;
   border-radius: 12px;
   margin-bottom: 8px;
}

.td-time-content p {
   font-size: 14px;
   color: var(--gray600);
   line-height: 1.6;
}

/* Tags */
.td-tag-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.td-tag {
   background: var(--gray50);
   color: var(--gray700);
   font-size: 13px;
   font-weight: 500;
   padding: 6px 12px;
   border-radius: 20px;
   border: 1px solid var(--gray200);
}

/* Schedule Grid */
.td-schedule-grid {
   display: grid;
   grid-template-columns: repeat(7, minmax(80px, 1fr));
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 8px;
}

.td-sch-col {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.td-sch-head {
   font-size: 13px;
   font-weight: 700;
   color: var(--gray700);
   text-align: center;
   padding: 8px 0;
   background: var(--gray50);
   border-radius: var(--r-sm);
   border: 1px solid var(--gray200);
}

.td-sch-slot {
   font-size: 12px;
   font-weight: 600;
   text-align: center;
   padding: 12px 4px;
   border-radius: var(--r-sm);
}

.td-sch-slot.available {
   background: var(--b50);
   color: var(--b600);
   border: 1px solid var(--b200);
}

.td-sch-slot.busy {
   background: var(--gray100);
   color: var(--gray400);
   border: 1px solid var(--gray200);
}

/* Reviews */
.td-review {
   margin-bottom: 24px;
   padding-bottom: 24px;
   border-bottom: 1px solid var(--gray200);
}

.td-review-head {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 12px;
}

.td-reviewer-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #16a34a;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 700;
}

.td-reviewer-name {
   font-size: 15px;
   font-weight: 700;
   color: var(--gray900);
}

.td-review-content {
   font-size: 14px;
   color: var(--gray600);
   line-height: 1.6;
}

.article-layout {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 40px;
   align-items: start;
}

.article-main,
.article-sidebar-card {
   background: #fff;
   padding: 32px;
   border-radius: var(--r-xl);
   border: 1px solid var(--gray200);
}

.article-sidebar-card {
   padding: 24px;
}

@media (max-width: 992px) {
   .td-layout {
      grid-template-columns: minmax(0, 1fr);
   }

   .article-layout {
      grid-template-columns: 1fr !important;
   }

   .td-sidebar {
      position: static;
   }

   .td-main {
      padding: 24px;
   }

   .td-schedule-grid {
      overflow-x: auto;
      padding-bottom: 8px;
   }

   .td-sch-col {
      min-width: 80px;
   }
}

/* ==========================================================================
   MODAL (POPUP LIEN HE)
   ========================================================================== */
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(15, 23, 42, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   padding: 20px;
   backdrop-filter: blur(4px);
}

.modal-content {
   background: #fff;
   width: 100%;
   max-width: 500px;
   border-radius: var(--r-xl);
   padding: 32px;
   position: relative;
   box-shadow: var(--sh-md);
   max-height: 90vh;
   overflow-y: auto;
}

.modal-close {
   position: absolute;
   top: 24px;
   right: 24px;
   background: none;
   border: none;
   color: var(--gray500);
   cursor: pointer;
   transition: color .2s;
}

.modal-close:hover {
   color: var(--gray900);
}

.modal-title {
   font-size: 24px;
   font-weight: 800;
   color: var(--b800);
   margin-bottom: 4px;
}

.modal-subtitle {
   font-size: 15px;
   color: var(--gray500);
   margin-bottom: 24px;
}

.modal-banner {
   background: var(--b50);
   border: 1px solid var(--b200);
   border-radius: var(--r-md);
   padding: 16px;
   text-align: center;
   margin-bottom: 24px;
}

.mb-label {
   font-size: 13px;
   font-weight: 600;
   color: var(--gray600);
   margin-bottom: 8px;
}

.mb-phone {
   font-size: 24px;
   font-weight: 800;
   color: var(--b800);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.modal-desc {
   font-size: 15px;
   color: var(--gray600);
   margin-bottom: 20px;
   line-height: 1.6;
}

.modal-form .form-row-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.modal-form .req {
   color: #ef4444;
}

.modal-submit {
   width: 100%;
   padding: 14px;
   background: #f59e0b;
   /* Orange color requested */
   color: #fff;
   border: none;
   border-radius: var(--r-md);
   font-size: 16px;
   font-weight: 700;
   cursor: pointer;
   transition: background .2s;
   margin-top: 8px;
}

.modal-submit:hover {
   background: #d97706;
}

.modal-footer-note {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: 8px;
   margin-top: 24px;
   font-size: 13px;
   color: var(--gray500);
   text-align: left;
}

.modal-footer-note svg {
   flex-shrink: 0;
   margin-top: 2px;
}

@media (max-width: 500px) {
   .modal-form .form-row-2 {
      grid-template-columns: 1fr;
   }

   .modal-content {
      padding: 24px 20px;
   }

   .modal-title {
      font-size: 20px;
   }

   .modal-subtitle {
      font-size: 14px;
      margin-bottom: 16px;
   }

   .mb-phone {
      font-size: 18px;
   }

   .mb-label {
      font-size: 11px;
   }

   .modal-banner {
      padding: 12px;
   }

   .td-tabs {
      gap: 12px;
   }

   .td-tab-btn {
      flex: 1;
      text-align: center;
   }
}

@media (max-width: 768px) {
   .article-layout {
      gap: 24px;
   }

   .article-main,
   .article-sidebar-card {
      padding: 20px;
   }
}

/* ==========================================================================
   THƯ VIỆN TÀI LIỆU (plugin Gia Sư HCM Tài Liệu)
   Kế thừa .class-card / .search-* / .td-* để đồng bộ với trang Lớp đang tuyển
   ========================================================================== */

/* Chip bộ lọc đang chọn (dùng chung) */
.active-filters-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center }
.af-chip { background: var(--b50); color: var(--b700); padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px }
.af-chip i { cursor: pointer; font-style: normal; font-weight: 700; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--b200); color: var(--b800) }
.af-clear-all { font-size: 13px; color: #dc2626; cursor: pointer; text-decoration: underline; margin-left: 8px }

/* Ô tìm kiếm không có chọn khu vực */
.doc-search-bar .sb-input { flex: 1 }

/* Chip danh mục */
.doc-cat-chips {
   display: flex;
   gap: 8px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 24px
}

.doc-cat-chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 16px;
   border-radius: var(--r-md);
   background: var(--gray100);
   border: 1px solid var(--gray200);
   color: var(--gray700);
   font-size: 14px;
   font-weight: 600;
   white-space: nowrap;
   transition: all .2s var(--ease)
}

.doc-cat-chip small {
   font-size: 12px;
   font-weight: 600;
   color: var(--gray500);
   background: #fff;
   border-radius: 999px;
   padding: 1px 7px
}

.doc-cat-chip:hover { background: var(--gray200); color: var(--gray900) }

.doc-cat-chip.active {
   background: var(--b600);
   border-color: var(--b600);
   color: #fff;
   box-shadow: 0 4px 12px rgba(37, 99, 235, .25)
}

.doc-cat-chip.active small { background: rgba(255, 255, 255, .2); color: #fff }

/* Icon danh mục (SVG nhiều màu / emoji) trong nút danh mục */
.doc-cat-ico {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 26px;
   height: 26px;
   margin-left: -8px;
   border-radius: 6px;
   background: #fff;
   font-size: 15px;
   line-height: 1
}

.doc-cat-ico svg { width: 20px; height: 20px; display: block }
.doc-cat-chip.active .doc-cat-ico { background: #fff }

/* Thẻ tài liệu */
.doc-card { padding: 0; overflow: hidden }
.doc-card > :not(.doc-cover) { margin-left: 18px; margin-right: 18px }
.doc-card .btn-class { margin-bottom: 18px }

.doc-cover {
   position: relative;
   display: block;
   aspect-ratio: 4 / 3;
   background: var(--gray50);
   border-bottom: 1px solid var(--gray100);
   overflow: hidden
}

.doc-cover img { width: 100%; height: 100%; object-fit: cover; display: block }

.doc-cover-ph {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   color: var(--doc-color, var(--gray500));
   background: linear-gradient(135deg, #fff, var(--gray50))
}

.doc-cover-ph strong { font-size: 15px; font-weight: 800; letter-spacing: 1px }

/* Nhãn quyền ở góc dưới phải: không đè lên tiêu đề / danh mục in trên ảnh bìa */
.doc-badge {
   position: absolute;
   bottom: 10px;
   right: 10px;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .4px;
   padding: 4px 9px;
   border-radius: 999px;
   box-shadow: var(--sh-sm)
}

.doc-badge-free { background: #dcfce7; color: #15803d }
.doc-badge-pro { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f }

.doc-meta-top {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 14px;
   margin-bottom: 8px
}

.doc-type {
   font-size: 11px;
   font-weight: 800;
   color: var(--doc-color, var(--gray500));
   border: 1.5px solid currentColor;
   border-radius: 4px;
   padding: 1px 6px
}

.doc-cat {
   font-size: 12px;
   font-weight: 600;
   color: var(--b700);
   background: var(--b50);
   border-radius: 4px;
   padding: 3px 8px
}

.doc-cat:hover { background: var(--b100) }

.doc-title { margin-bottom: 10px; flex-grow: 1 }
.doc-title a { color: inherit }
.doc-title a:hover { color: var(--b700) }

.doc-stats {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 14px;
   font-size: 13px;
   color: var(--gray500);
   padding-top: 12px;
   margin-bottom: 14px;
   border-top: 1px dashed var(--gray200)
}

.doc-stats span { display: inline-flex; align-items: center; gap: 4px }

.doc-empty {
   grid-column: 1 / -1;
   text-align: center;
   padding: 60px 20px;
   color: var(--gray500)
}

.doc-empty svg { color: var(--gray300); margin-bottom: 12px }

/* Chi tiết tài liệu */
.doc-detail-sec { padding: 40px 0 80px; background: #f8fafc }
.doc-side-card { text-align: left }
.doc-cover-lg { border-radius: var(--r-lg); border: 1px solid var(--gray200); margin-bottom: 20px }

.doc-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   padding: 13px 16px;
   border-radius: var(--r-md);
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   transition: background .15s, transform .15s
}

.doc-btn:hover { transform: translateY(-1px); color: #fff }
.doc-btn-download { background: var(--b700) }
.doc-btn-download:hover { background: var(--b800) }
.doc-btn-login { background: var(--gray800) }
.doc-btn-login:hover { background: var(--gray900) }
.doc-btn-upgrade { background: linear-gradient(135deg, #b45309, #92400e) }

.doc-lock-note {
   font-size: 13px;
   color: var(--gray600);
   line-height: 1.5;
   margin: 12px 0 0;
   text-align: center
}

.doc-lock-note a { color: var(--b700); font-weight: 600; text-decoration: underline }

/* Nút xem trước */
.doc-btn-preview {
   margin-top: 10px;
   background: #fff;
   color: var(--b700);
   border: 1.5px solid var(--b700);
   cursor: pointer;
   font-family: inherit
}

.doc-btn-preview:hover { background: var(--b50, #eff6ff); color: var(--b800) }

/* Mô tả tài liệu: danh sách có dấu đầu dòng */
.td-content-text ul,
.td-content-text ol { margin: 0 0 16px; padding-left: 22px; font-size: 15px; color: var(--gray700); line-height: 1.7 }
.td-content-text ul { list-style: disc }
.td-content-text ol { list-style: decimal }
.td-content-text li { margin-bottom: 4px }
.td-content-text li::marker { color: var(--b700) }

/* Modal xem trước */
html.doc-pv-open { overflow: hidden }

/* Ẩn nút nổi (chatbot, lên đầu trang, liên hệ nhanh) khi đang xem tài liệu */
html.doc-pv-open #etcb-bubble,
html.doc-pv-open #etcb-panel,
html.doc-pv-open .btt-wrap,
html.doc-pv-open .fc-wrap { display: none }

.doc-pv {
   position: fixed;
   inset: 0;
   z-index: 10000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px
}

.doc-pv[hidden] { display: none }

.doc-pv-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .72) }

.doc-pv-box {
   position: relative;
   display: flex;
   flex-direction: column;
   width: min(980px, 100%);
   height: min(92vh, 1200px);
   background: #fff;
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: 0 24px 60px rgba(0, 0, 0, .35)
}

.doc-pv-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 10px 12px 10px 20px;
   border-bottom: 1px solid var(--gray200)
}

.doc-pv-title { font-size: 15px; color: var(--b800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }

.doc-pv-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 13px; color: var(--gray600) }

.doc-pv-icon {
   width: 34px;
   height: 34px;
   border: 1px solid var(--gray200);
   border-radius: var(--r-md);
   background: #fff;
   color: var(--gray800);
   font-size: 20px;
   line-height: 1;
   cursor: pointer
}

.doc-pv-icon:hover { background: var(--gray50); border-color: var(--gray300) }
.doc-pv-close { margin-left: 4px; font-size: 24px }
.doc-pv-zoom { min-width: 42px; text-align: center; font-weight: 600 }
.doc-pv-page { margin: 0 6px; white-space: nowrap }

.doc-pv-dl {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 34px;
   padding: 0 12px;
   border-radius: var(--r-md);
   background: var(--b700);
   color: #fff;
   font-weight: 600
}

.doc-pv-dl:hover { background: var(--b800); color: #fff }

.doc-pv-body { position: relative; flex: 1; overflow: auto; background: #e5e7eb; overscroll-behavior: contain }

.doc-pv-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; min-width: min-content }

.doc-pv-sheet { flex-shrink: 0; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12) }
.doc-pv-sheet canvas { display: block; width: 100%; height: 100% }

.doc-pv-status { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: var(--gray600); font-size: 15px; padding: 0 20px }
.doc-pv-status.is-error { color: #b91c1c }

.doc-pv-locked { position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px 20px; overflow: hidden }
.doc-pv-locked-cover { position: absolute; inset: 0 }
.doc-pv-locked-cover img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.8); transform: scale(1.1) }

.doc-pv-locked-box {
   position: relative;
   max-width: 420px;
   padding: 32px 28px;
   background: #fff;
   border-radius: var(--r-lg);
   text-align: center;
   box-shadow: 0 16px 40px rgba(0, 0, 0, .25)
}

.doc-pv-locked-box svg { color: #b45309; margin-bottom: 10px }
.doc-pv-locked-box h3 { font-size: 19px; color: var(--b800); margin-bottom: 8px }
.doc-pv-locked-box p { font-size: 14px; color: var(--gray600); line-height: 1.6; margin-bottom: 18px }
.doc-pv-more { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--b700); font-weight: 600; text-decoration: underline }

@media (max-width: 640px) {
   .doc-pv { padding: 0 }
   .doc-pv-box { height: 100%; border-radius: 0 }
   .doc-pv-head { padding: 8px 8px 8px 14px }
   .doc-pv-title, .doc-pv-zoom, .doc-pv-dl span { display: none }
   .doc-pv-head { justify-content: flex-end }
   .doc-pv-tools { width: 100%; justify-content: space-between }
   .doc-pv-pages { padding: 10px; gap: 10px }
}

.doc-info-list { list-style: none; padding: 0; margin: 20px 0 0 }

.doc-info-list li {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   padding: 10px 0;
   border-top: 1px solid var(--gray100);
   font-size: 14px
}

.doc-info-list span { color: var(--gray500) }
.doc-info-list strong { color: var(--gray800); font-weight: 600 }

.doc-detail-title {
   font-size: 28px;
   font-weight: 800;
   color: var(--gray900);
   line-height: 1.3;
   margin-bottom: 28px
}

.doc-tags { display: grid; grid-template-columns: 110px 1fr; gap: 12px; margin: 0 }
.doc-tags dt { color: var(--gray500); font-size: 14px; padding-top: 4px }
.doc-tags dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px }

.doc-tags dd span {
   background: var(--gray100);
   color: var(--gray700);
   font-size: 13px;
   font-weight: 600;
   padding: 4px 10px;
   border-radius: 999px
}

.doc-related { margin-top: 48px }
.doc-related .td-section-title { border: none; padding-bottom: 0 }

/* Trang Gói Pro */
.pro-hero { text-align: center; background: linear-gradient(180deg, var(--b50), #fff) }
.pro-hero h1 { font-size: 34px; font-weight: 800; color: var(--b800); margin: 14px 0 12px }
.pro-hero p { color: var(--gray600); font-size: 16px; max-width: 620px; margin: 0 auto }
.pro-hero-badge { position: static; display: inline-block }
.pro-sec { padding: 20px 0 80px }
.pro-wrap { max-width: 980px; margin: 0 auto }

.pro-status {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   text-align: center;
   background: #fff;
   border: 1.5px dashed var(--b300);
   border-radius: var(--r-xl);
   padding: 24px;
   margin-bottom: 32px
}

.pro-status strong { font-size: 17px; color: var(--gray900) }
.pro-status span { color: var(--gray600) }
.pro-status-active { border: 1.5px solid #f59e0b; background: #fffbeb }
.pro-status-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px }

.pro-benefits {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-bottom: 32px
}

.pro-benefit {
   background: #fff;
   border: 1.5px solid var(--gray100);
   border-radius: var(--r-xl);
   padding: 22px 18px;
   transition: box-shadow .2s, transform .2s
}

.pro-benefit:hover { transform: translateY(-3px); box-shadow: var(--sh-md) }
.pro-benefit-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; transition: transform .2s var(--ease) }
.pro-benefit-ico svg { width: 36px; height: 36px; display: block }
.pro-benefit:hover .pro-benefit-ico { transform: scale(1.06) rotate(-3deg) }
.pro-ico-1 { background: #eff6ff }
.pro-ico-2 { background: #eef2ff }
.pro-ico-3 { background: #faf5ff }
.pro-ico-4 { background: #f0f9ff }
.pro-benefit h3 { font-size: 16px; font-weight: 800; color: var(--gray900); margin: 10px 0 6px }
.pro-benefit p { font-size: 14px; color: var(--gray600); line-height: 1.55; margin: 0 }
.pro-howto .pro-status-actions { justify-content: flex-start; margin-top: 20px }

/* Dashboard: gói tài khoản + tài liệu đã tải */

@media (max-width: 991px) {
   .pro-benefits { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 768px) {
   .doc-cat-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch }
   .doc-detail-title { font-size: 22px }
   .doc-tags { grid-template-columns: 1fr; gap: 6px }
   .doc-tags dd { margin-bottom: 8px }
   .pro-hero h1 { font-size: 26px }
   .pro-benefits { grid-template-columns: 1fr }
}

/* ==========================================================================
   BẢNG ĐIỀU KHIỂN TÀI KHOẢN (/dashboard/) + ĐƠN NHẬN LỚP
   ========================================================================== */
.dash-sec { padding: 32px 0 72px; background: #f8fafc; min-height: calc(100vh - 300px) }
.dash-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: start }

/* Sidebar */
.dash-side {
   position: sticky;
   top: 96px;
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   box-shadow: var(--sh-sm);
   overflow: hidden
}

.dash-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 20px 22px; background: linear-gradient(180deg, var(--b50), #fff); border-bottom: 1px solid var(--gray100) }

.dash-avatar {
   width: 76px;
   height: 76px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30px;
   font-weight: 800;
   color: #fff;
   background: linear-gradient(135deg, var(--b500), var(--b800));
   box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(0, 43, 120, .2)
}

.dash-avatar { overflow: hidden }
.dash-avatar img { width: 100%; height: 100%; object-fit: cover; display: block }
.dash-avatar-tutor { background: linear-gradient(135deg, var(--o300), var(--o600)) }
.dash-avatar-student { background: linear-gradient(135deg, #34d399, #059669) }

.dash-name { display: block; font-size: 17px; font-weight: 800; color: var(--gray900); word-break: break-word }
.dash-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px }

.dash-role {
   display: inline-flex;
   align-items: center;
   padding: 3px 10px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 700;
   background: var(--b100);
   color: var(--b700)
}

.dash-role-tutor { background: var(--o100); color: var(--o600) }
.dash-role-student { background: #d1fae5; color: #047857 }
.dash-role-admin { background: #ede9fe; color: #6d28d9 }
.dash-role-pro { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f }
.dash-joined { color: var(--gray500); font-size: 12px }

.dash-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px }

.dash-nav-link {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 14px;
   border-radius: var(--r-md);
   color: var(--gray700);
   font-size: 14.5px;
   font-weight: 600;
   transition: background .15s, color .15s
}

.dash-nav-link svg { flex-shrink: 0; color: var(--gray400); transition: color .15s }
.dash-nav-link:hover { background: var(--gray50); color: var(--b700) }
.dash-nav-link:hover svg { color: var(--b600) }
.dash-nav-link.active { background: var(--b600); color: #fff; box-shadow: 0 4px 12px rgba(20, 80, 184, .25) }
.dash-nav-link.active svg { color: #fff }
.dash-logout { margin-top: 8px; border-top: 1px solid var(--gray100); border-radius: 0 0 var(--r-md) var(--r-md); padding-top: 14px; color: #dc2626 }
.dash-logout svg { color: #f87171 }
.dash-logout:hover { background: #fef2f2; color: #b91c1c }
.dash-logout:hover svg { color: #dc2626 }

/* Nội dung */
.dash-main { min-width: 0; display: flex; flex-direction: column; gap: 20px }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.dash-title { font-size: 26px; font-weight: 800; color: var(--gray900); line-height: 1.25 }
.dash-sub { color: var(--gray600); font-size: 15px; margin-top: 6px }
.dash-head-cta { padding: 10px 18px; font-size: 14px }

.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }

.dash-stat {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 18px;
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   transition: border-color .15s, box-shadow .15s, transform .15s
}

a.dash-stat:hover { border-color: var(--b300); box-shadow: var(--sh-md); transform: translateY(-2px) }
.dash-stat strong { font-size: 28px; font-weight: 800; color: var(--gray900); line-height: 1.1; margin-top: 10px }
.dash-stat small { color: var(--gray600); font-size: 13.5px; font-weight: 500 }

.dash-stat-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }
.ico-blue { background: var(--b100); color: var(--b600) }
.ico-green { background: #d1fae5; color: #059669 }
.ico-amber { background: #fef3c7; color: #d97706 }
.ico-violet { background: #ede9fe; color: #7c3aed }
.ico-orange { background: var(--o100); color: var(--o600) }

/* Thẻ gói */
.dash-plan {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 18px 22px;
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl)
}

.dash-plan.is-pro { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fcd34d }
.dash-plan-ico { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gray100); color: var(--gray500); flex-shrink: 0 }
.dash-plan.is-pro .dash-plan-ico { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f }
.dash-plan-text { flex: 1; min-width: 0 }
.dash-plan-text small { display: block; color: var(--gray500); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px }
.dash-plan-text strong { display: block; font-size: 16px; color: var(--gray900) }
.dash-plan-text span { display: block; color: var(--gray600); font-size: 14px; margin-top: 2px }
.dash-plan-lg { padding: 24px }
.dash-plan-lg .dash-plan-ico { width: 60px; height: 60px }
.dash-plan-lg .dash-plan-text strong { font-size: 22px; margin: 2px 0 }
.dash-plan-btn { padding: 10px 20px; font-size: 14px; white-space: nowrap }

.dash-alert { padding: 12px 16px; border-radius: var(--r-md); background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-size: 14px }

/* Thẻ nội dung */
.dash-card { background: #fff; border: 1px solid var(--gray200); border-radius: var(--r-xl); padding: 22px 24px }
.dash-card-flush { padding: 0; overflow: hidden }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px }
.dash-card-head h2 { font-size: 17px; font-weight: 700; color: var(--gray900) }
.dash-card-head a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--b600) }
.dash-card-head a:hover { color: var(--b800) }

.dash-rows { list-style: none; margin: 0; padding: 0 }
.dash-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gray100) }
.dash-rows li:first-child { border-top: none; padding-top: 0 }
.dash-row-main { min-width: 0 }
.dash-row-main a { display: block; color: var(--gray900); font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dash-row-main a:hover { color: var(--b700) }
.dash-row-main small { color: var(--gray500); font-size: 12.5px }

.dash-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 20px; color: var(--gray500) }
.dash-empty svg { color: var(--gray300) }
.dash-empty p { max-width: 420px; font-size: 14.5px }
.dash-empty .btn-primary { padding: 10px 20px; font-size: 14px }

/* Nhãn trạng thái */
.app-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; background: var(--gray100); color: var(--gray600) }
.app-badge.is-pending { background: #fef3c7; color: #b45309 }
.app-badge.is-accepted { background: #d1fae5; color: #047857 }
.app-badge.is-rejected { background: #fee2e2; color: #b91c1c }
.app-badge.is-cancelled { background: var(--gray100); color: var(--gray500) }
.app-badge.is-pro { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f }
.app-badge.is-free { background: #dcfce7; color: #15803d }

/* Lớp mới / gia sư nổi bật */
.dash-class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }

.dash-class {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 14px 16px;
   border: 1px solid var(--gray200);
   border-radius: var(--r-lg);
   transition: border-color .15s, box-shadow .15s
}

.dash-class:hover { border-color: var(--b300); box-shadow: var(--sh-sm) }
.dash-class-subj { align-self: flex-start; padding: 2px 8px; border-radius: 4px; background: var(--b50); color: var(--b700); font-size: 12px; font-weight: 700 }
.dash-class strong { color: var(--gray900); font-size: 14.5px; line-height: 1.4 }
.dash-class small { display: inline-flex; align-items: center; gap: 4px; color: var(--gray500); font-size: 13px }
.dash-class em { font-style: normal; color: var(--o600); font-weight: 700; font-size: 14px }

.dash-tutor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }

.dash-tutor {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 4px;
   padding: 18px 12px;
   border: 1px solid var(--gray200);
   border-radius: var(--r-lg);
   transition: border-color .15s, box-shadow .15s
}

.dash-tutor:hover { border-color: var(--b300); box-shadow: var(--sh-sm) }
.dash-tutor-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--b100); color: var(--b700); font-size: 24px; font-weight: 800; margin-bottom: 6px }
.dash-tutor-photo img { width: 100%; height: 100%; object-fit: cover }
.dash-tutor strong { color: var(--gray900); font-size: 14.5px }
.dash-tutor small { color: var(--gray500); font-size: 12.5px; line-height: 1.4 }
.dash-tutor em { font-style: normal; color: var(--o600); font-weight: 700; font-size: 13px }

.dash-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, var(--b700), var(--b800)); border: none; color: #fff }
.dash-cta-card h2 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 4px }
.dash-cta-card p { color: rgba(255, 255, 255, .85); font-size: 14px; max-width: 520px }
.dash-cta-card .btn-primary { background: var(--o500); padding: 11px 22px; font-size: 14px }
.dash-cta-card .btn-primary:hover { background: var(--o600) }

/* Lọc trạng thái đơn */
.dash-filter { display: flex; gap: 8px; flex-wrap: wrap }

.dash-filter a {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 14px;
   border-radius: var(--r-md);
   background: var(--gray100);
   border: 1px solid var(--gray200);
   color: var(--gray700);
   font-size: 14px;
   font-weight: 600;
   transition: all .2s var(--ease)
}

.dash-filter a span { font-size: 12px; background: #fff; border-radius: 999px; padding: 0 7px; color: var(--gray500) }
.dash-filter a:hover { background: var(--gray200); color: var(--gray900) }
.dash-filter a.active { background: var(--b600); border-color: var(--b600); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .25) }
.dash-filter a.active span { background: rgba(255, 255, 255, .2); color: #fff }

/* Danh sách đơn nhận lớp */
.dash-apps { list-style: none; margin: 0; padding: 0 }
.dash-app { display: flex; gap: 20px; justify-content: space-between; padding: 20px 24px; border-top: 1px solid var(--gray100) }
.dash-app:first-child { border-top: none }
.dash-app-main { min-width: 0; flex: 1 }
.dash-app-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px }
.dash-app-code { font-size: 12.5px; color: var(--gray500); font-weight: 600 }
.dash-app-title { display: block; color: var(--gray900); font-size: 16px; font-weight: 700; line-height: 1.4 }
.dash-app-title:hover { color: var(--b700) }
.dash-app-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; color: var(--gray600); font-size: 13.5px }
.dash-app-meta span { display: inline-flex; align-items: center; gap: 4px }
.dash-app-meta svg { color: var(--gray400) }
.dash-app-price { color: var(--o600); font-weight: 700 }
.dash-app-note { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--gray50); color: var(--gray600); font-size: 13.5px }
.dash-app-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; text-align: right }
.dash-app-side small { color: var(--gray500); font-size: 12.5px }
.dash-app-side .dash-btn-ghost { margin-top: 8px }

.dash-btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 14px;
   border: 1px solid var(--gray300);
   border-radius: var(--r-md);
   background: #fff;
   color: var(--gray700);
   font-size: 13.5px;
   font-weight: 600;
   font-family: inherit;
   cursor: pointer;
   white-space: nowrap;
   transition: all .15s
}

.dash-btn-ghost:hover { border-color: var(--b300); color: var(--b700); background: var(--b50) }
.dash-btn-ghost[data-cancel-app]:hover { border-color: #fca5a5; color: #b91c1c; background: #fef2f2 }
.dash-btn-ghost:disabled { opacity: .6; cursor: wait }

/* Tài liệu của tôi */
.dash-docs { list-style: none; margin: 0; padding: 0 }
.dash-doc { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--gray100) }
.dash-doc:first-child { border-top: none }
.dash-doc-thumb { width: 72px; height: 54px; border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; background: var(--gray100); display: flex; align-items: center; justify-content: center; color: var(--gray500); font-size: 12px; font-weight: 800 }
.dash-doc-thumb img { width: 100%; height: 100%; object-fit: cover }
.dash-doc-main { flex: 1; min-width: 0 }
.dash-doc-title { display: block; color: var(--gray900); font-weight: 600; font-size: 14.5px; line-height: 1.4 }
.dash-doc-title:hover { color: var(--b700) }
.dash-doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; color: var(--gray500); font-size: 12.5px }

.dash-pager { display: flex; justify-content: center; gap: 6px; padding: 16px; border-top: 1px solid var(--gray100) }
.dash-pager a { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); border: 1px solid var(--gray200); color: var(--gray700); font-weight: 600; font-size: 14px }
.dash-pager a.active, .dash-pager a:hover { background: var(--b600); border-color: var(--b600); color: #fff }

/* Quyền lợi Pro */
.dash-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.dash-benefit { display: flex; gap: 14px; align-items: flex-start }
.dash-benefit strong { display: block; color: var(--gray900); font-size: 15px; margin-bottom: 2px }
.dash-benefit p { color: var(--gray600); font-size: 13.5px; line-height: 1.55 }

/* Form hồ sơ */
.dash-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px }
.dash-form .form-group { margin-bottom: 18px }
.dash-form .form-group select { width: 100%; padding: 12px 14px; border: 1px solid var(--gray300); border-radius: var(--r-md); font-size: 15px; font-family: inherit; background: #fff; outline: none }
.dash-form .form-group select:focus { border-color: var(--b500); box-shadow: 0 0 0 4px var(--b50) }
.dash-form .form-group input:disabled { background: var(--gray50); color: var(--gray500); cursor: not-allowed }
.dash-form .form-group textarea { font-family: inherit; resize: vertical }
.dash-form .req { color: #dc2626 }
.dash-col-full { grid-column: 1 / -1 }
.dash-hint { display: block; margin-top: 6px; color: var(--gray500); font-size: 12.5px }
.dash-hint a { color: var(--b600); font-weight: 600 }
.dash-form-foot { display: flex; justify-content: flex-end; padding-top: 4px }
.dash-form-foot .btn-primary { cursor: pointer; font-family: inherit; padding: 11px 24px; font-size: 14.5px }
.dash-form-foot .btn-primary:disabled { opacity: .7; cursor: wait }

/* Thông báo nổi */
.dash-toast {
   position: fixed;
   left: 50%;
   bottom: 28px;
   z-index: 10001;
   max-width: calc(100% - 32px);
   padding: 12px 20px;
   border-radius: var(--r-lg);
   background: #065f46;
   color: #fff;
   font-size: 14.5px;
   font-weight: 600;
   box-shadow: var(--sh-lg);
   transform: translate(-50%, 16px);
   opacity: 0;
   transition: opacity .25s, transform .25s
}

.dash-toast.is-error { background: #b91c1c }
.dash-toast.show { opacity: 1; transform: translate(-50%, 0) }

/* Trang chi tiết lớp: trạng thái + nút nhận lớp */
.class-status-pill { display: inline-block; margin-bottom: 16px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #dcfce7; color: #16a34a }
.class-status-pill.is-done { background: var(--b100); color: var(--b700) }
.class-status-pill.is-closed { background: #fee2e2; color: #b91c1c }
.td-btn-primary:disabled { background: var(--gray300); color: var(--gray600); cursor: not-allowed }
.apply-track { display: block; text-align: center; color: #fff }
.apply-track:hover { color: #fff }
.apply-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--gray50); font-size: 14px; color: var(--gray700); font-weight: 600 }
.apply-hint { margin-top: 10px; font-size: 13px; color: var(--gray600); text-align: center; line-height: 1.5 }
.apply-hint a { color: var(--b600); font-weight: 700 }
.apply-msg { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: #fef2f2; color: #b91c1c; font-size: 14px }
.apply-msg.is-ok { background: #ecfdf5; color: #047857 }
.apply-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 8px 0 4px }
.apply-done svg { color: #059669 }
.apply-done p { color: var(--gray700); font-size: 15px; line-height: 1.6 }
.apply-done .modal-submit { display: block; text-align: center; color: #fff }

@media (max-width: 1199px) {
   .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 991px) {
   .dash-layout { grid-template-columns: 1fr }
   .dash-side { position: static }
   .dash-profile { flex-direction: row; text-align: left; padding: 16px 18px }
   .dash-avatar { width: 56px; height: 56px; font-size: 22px; flex-shrink: 0 }
   .dash-badges { justify-content: flex-start; margin: 4px 0 }
   .dash-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding: 10px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch }
   .dash-nav::-webkit-scrollbar { display: none }
   .dash-nav-link { flex-shrink: 0; padding: 9px 14px; white-space: nowrap; background: var(--gray50) }
   .dash-logout { margin-top: 0; border-top: none; border-radius: var(--r-md); padding-top: 9px }
}

@media (max-width: 640px) {
   .dash-sec { padding: 20px 0 48px }
   .dash-title { font-size: 22px }
   .dash-head-cta { width: 100%; justify-content: center }
   .dash-stats { gap: 10px }
   .dash-stat { padding: 14px }
   .dash-stat strong { font-size: 24px }
   .dash-stat-ico { width: 36px; height: 36px; border-radius: 10px }
   .dash-plan { flex-wrap: wrap; padding: 16px }
   .dash-plan-btn { width: 100%; justify-content: center }
   .dash-card { padding: 18px 16px }
   .dash-card-flush { padding: 0 }
   .dash-class-grid, .dash-benefits, .dash-form-grid { grid-template-columns: 1fr }
   .dash-tutor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
   .dash-app { flex-direction: column; gap: 10px; padding: 16px }
   .dash-app-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; text-align: left }
   .dash-app-side .dash-btn-ghost { margin: 4px 0 0 auto }
   .dash-doc { padding: 14px 16px; gap: 12px; flex-wrap: wrap }
   .dash-doc-thumb { width: 56px; height: 42px }
   .dash-doc .dash-btn-ghost { margin-left: 68px }
   .dash-form-foot .btn-primary { width: 100%; justify-content: center }
}

/* ==========================================================================
   TÌM KIẾM TRÊN BẢN ĐỒ (assets/js/map-search.js)
   ========================================================================== */
.search-bar-row { display: flex; align-items: stretch; justify-content: center; gap: 12px; max-width: 1000px; margin: 0 auto }
.search-bar-row .search-bar { flex: 1; min-width: 0; margin-left: 0; margin-right: 0 }

.sb-map-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   padding: 0 22px;
   border: none;
   border-radius: var(--r-lg);
   background: #0f9d8a;
   color: #fff;
   font-family: inherit;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   box-shadow: var(--sh-sm);
   transition: background .2s, transform .2s
}

.sb-map-btn:hover { background: #0b8474; transform: translateY(-1px) }
.map-ico { display: inline-flex; flex-shrink: 0 }

.map-pane, .map-toggle-btn { display: none }

/* ── Chế độ bản đồ: danh sách trái, bản đồ phải ── */
.map-mode .search-layout-sec { padding: 24px 0 40px; overflow-x: clip }
.map-mode .search-layout-sec > .wrap { max-width: none !important; padding: 0 24px }
.map-mode .search-layout-wrap { grid-template-columns: minmax(380px, 46%) 1fr; gap: 24px }
.map-mode .search-header-sec { padding-bottom: 8px }
.map-mode .search-title, .map-mode .search-desc { display: none }
.map-mode .sb-map-btn { display: none }
.map-mode .footer, .map-mode .page-content { display: none }

.map-mode .map-pane {
   display: block;
   animation: mapFade .25s ease;
   position: sticky;
   top: calc(var(--map-top, 64px) + 12px);
   height: calc(100vh - var(--map-top, 64px) - 24px);
   min-height: 420px;
   border-radius: var(--r-xl);
   overflow: hidden;
   border: 1px solid var(--gray200);
   box-shadow: var(--sh-md);
   background: #e5e7eb
}

.map-canvas { position: absolute; inset: 0 }

@keyframes mapFade { from { opacity: 0 } to { opacity: 1 } }
.map-mode .search-content { animation: mapFade .25s ease }

/* Bộ lọc thành ngăn kéo khi đang xem bản đồ (nằm dưới thanh admin, trên header & nút chat) */
.map-mode .search-sidebar {
   position: fixed;
   top: var(--map-adminbar, 0px);
   left: 0;
   width: min(340px, 88vw);
   height: calc(100vh - var(--map-adminbar, 0px));
   height: calc(100dvh - var(--map-adminbar, 0px));
   z-index: 100001;
   padding: 20px 20px 32px;
   overflow-y: auto;
   margin: 0;
   border-radius: 0;
   box-shadow: 2px 0 15px rgba(0, 0, 0, .2);
   transform: translateX(-105%) !important;
   transition: transform .3s ease !important;
   opacity: 1 !important;
   visibility: visible !important
}

.map-mode .search-sidebar.show-mobile { transform: translateX(0) !important }
.map-mode .filter-close-mobile, .map-mode .btn-filter-mobile { display: flex }
.map-mode .filter-close-mobile { position: sticky; top: -20px; z-index: 2; justify-content: flex-end; margin: -20px -20px 8px; padding: 12px 14px; background: #fff; cursor: pointer }

.map-filter-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(15, 23, 42, .45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s }
.map-mode.map-filters-open .map-filter-backdrop { opacity: 1; visibility: visible }

/* Danh sách hẹp: thẻ 2 cột (gia sư) / 1–2 cột (lớp) */
.map-mode .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px }
.map-mode .sc-topbar { flex-wrap: wrap; gap: 10px }

.map-hl { outline: 2px solid var(--b600); outline-offset: 2px; box-shadow: 0 8px 24px rgba(20, 80, 184, .18) !important }

/* Thanh công cụ trên bản đồ */
.map-top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }

.map-place {
   flex: 1;
   min-width: 200px;
   display: flex;
   align-items: center;
   gap: 8px;
   height: 42px;
   padding: 0 12px;
   background: #fff;
   border-radius: var(--r-lg);
   box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
   color: var(--gray500)
}

.map-place input { flex: 1; min-width: 0; border: none; outline: none; font-family: inherit; font-size: 14px; color: var(--gray900); background: transparent }

.map-btn, .map-radius {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 42px;
   padding: 0 14px;
   border: none;
   border-radius: var(--r-lg);
   background: #fff;
   color: var(--gray800);
   font-family: inherit;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
   white-space: nowrap
}

.map-btn:hover { background: var(--gray50) }
.map-near-btn { color: var(--b700) }
.map-near-btn.is-loading { opacity: .6; pointer-events: none }
.map-close-btn { background: #0f9d8a; color: #fff }
.map-close-btn:hover { background: #0b8474 }
.map-radius { padding-right: 8px; outline: none }

.map-area-btn {
   position: absolute;
   top: 66px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 5;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 18px;
   border: none;
   border-radius: 999px;
   background: var(--b700);
   color: #fff;
   font-family: inherit;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   box-shadow: 0 6px 18px rgba(0, 43, 120, .35)
}

.map-btn[hidden], .map-area-btn[hidden], .map-status[hidden], .map-loading[hidden], .map-radius[hidden], .map-place[hidden] { display: none }

.map-status {
   position: absolute;
   left: 12px;
   bottom: 16px;
   z-index: 5;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   max-width: calc(100% - 90px);
   padding: 8px 8px 8px 14px;
   border-radius: 999px;
   background: #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
   font-size: 13px;
   font-weight: 600;
   color: var(--b800)
}

.map-status-x { display: inline-flex; padding: 4px; border: none; border-radius: 50%; background: var(--gray100); color: var(--gray600); cursor: pointer }
.map-status-x:hover { background: #fee2e2; color: #b91c1c }

.map-count { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; padding: 6px 14px; border-radius: 999px; background: rgba(17, 24, 39, .78); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none }
.map-count:empty { display: none }
.map-status:not([hidden]) ~ .map-count { left: auto; right: 64px; transform: none }

.map-loading { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: var(--gray600); font-weight: 600 }

/* Pin */
.map-pin {
   transform: translate(-50%, -100%);
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
   border: 2px solid #fff;
   border-radius: 999px;
   background: var(--o500);
   color: #fff;
   font-family: inherit;
   font-size: 13px;
   font-weight: 800;
   line-height: 1.2;
   white-space: nowrap;
   cursor: pointer;
   box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
   transition: transform .15s, background .15s
}

.map-pin::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; border-bottom: 0 }
.map-pin-tutor { background: var(--b600); padding: 3px 10px 3px 3px }
.map-pin-av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--b700); font-size: 12px; font-weight: 800 }
.map-pin-av img { width: 100%; height: 100%; object-fit: cover }
.map-pin:hover, .map-pin.is-hover { transform: translate(-50%, -100%) scale(1.12); z-index: 30 !important; background: var(--b800) }
.map-pin-class:hover, .map-pin-class.is-hover { background: var(--o600) }

.map-cluster {
   transform: translate(-50%, -50%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 3px solid rgba(255, 255, 255, .9);
   border-radius: 50%;
   background: var(--b600);
   color: #fff;
   font-family: inherit;
   font-weight: 800;
   cursor: pointer;
   box-shadow: 0 0 0 6px rgba(20, 80, 184, .25), 0 3px 10px rgba(0, 0, 0, .25);
   transition: transform .15s
}

.map-cluster:hover { transform: translate(-50%, -50%) scale(1.1) }
.map-cluster-sm { width: 38px; height: 38px; font-size: 14px }
.map-cluster-md { width: 46px; height: 46px; font-size: 15px }
.map-cluster-lg { width: 56px; height: 56px; font-size: 16px }

.map-user-dot { transform: translate(-50%, -50%); width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 8px rgba(37, 99, 235, .2), 0 2px 6px rgba(0, 0, 0, .3) }

/* Thẻ thông tin khi bấm pin */
.map-popup {
   transform: translate(-50%, calc(-100% - 44px));
   width: 280px;
   padding: 14px;
   border-radius: var(--r-lg);
   background: #fff;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
   cursor: default
}

.map-popup::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; border-bottom: 0 }
.map-popup-x { position: absolute; top: 8px; right: 8px; display: inline-flex; padding: 4px; border: none; border-radius: 50%; background: var(--gray100); color: var(--gray600); cursor: pointer }
.map-popup-head { display: flex; gap: 10px; align-items: flex-start; padding-right: 22px }
.map-popup-av { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--b100); color: var(--b700); font-weight: 800 }
.map-popup-av img { width: 100%; height: 100%; object-fit: cover }
.map-popup-meta { min-width: 0 }
.map-popup-code { display: block; color: var(--gray500); font-size: 11.5px; font-weight: 700 }
.map-popup-title { display: block; color: var(--gray900); font-size: 15px; font-weight: 800; line-height: 1.35 }
.map-popup-title:hover { color: var(--b700) }
.map-popup-sub { display: block; margin-top: 2px; color: var(--gray600); font-size: 13px }
.map-popup-info { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 12px; font-size: 13px; color: var(--gray600) }
.map-popup-area { display: inline-flex; align-items: flex-start; gap: 4px }
.map-popup-price { color: var(--o600); font-size: 15px }
.map-popup-btn { display: block; padding: 9px; border-radius: var(--r-md); background: var(--b600); color: #fff; font-size: 14px; font-weight: 700; text-align: center }
.map-popup-btn:hover { background: var(--b700); color: #fff }

/* Khoảng cách trên thẻ */
.map-dist { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 700; white-space: nowrap }
.tutor-info > .map-dist { margin-bottom: 6px }
.class-head .map-dist { margin-left: auto }

/* ── Máy tính bảng / điện thoại ── */
@media (max-width: 991px) {
   .search-bar-row { flex-direction: column; margin: 0 20px }
   .search-bar-row .search-bar { margin: 0 }
   .sb-map-btn { justify-content: center; padding: 12px }

   .map-mode .search-layout-sec > .wrap { padding: 0 12px }
   .map-mode .search-layout-wrap { grid-template-columns: 1fr }
   .map-mode .search-content { display: none }
   .map-mode .search-layout-sec { padding: 12px 0 }
   .map-mode .map-pane { height: calc(100vh - var(--map-top, 64px) - 24px); height: calc(100dvh - var(--map-top, 64px) - 24px); border-radius: var(--r-lg) }
   .map-mode.map-show-list .search-content { display: block }
   .map-mode.map-show-list .map-pane { display: none }

   .map-mode .map-toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      position: fixed;
      left: 16px;
      bottom: 20px;
      z-index: 999;
      padding: 12px 22px;
      border: none;
      border-radius: 999px;
      background: var(--gray900);
      color: #fff;
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .35)
   }

   .map-top { flex-wrap: wrap }
   .map-place { flex-basis: 100%; order: -1 }
   .map-btn > span:not(.map-ico) { display: none }
   .map-btn { padding: 0 12px }
   .map-area-btn { top: 116px }
   .map-count { bottom: 76px }
   .map-status { bottom: 76px }
   .map-mode .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
}

@media (max-width: 640px) {
   .map-mode .search-grid { grid-template-columns: 1fr !important }
   .map-popup { width: 240px }
}

/* ==============================================
   NỘI DUNG BÀI VIẾT (single.php .post-content)
   ============================================== */
.post-content p {
   margin: 0 0 18px;
}

.post-content h2 {
   font-size: 26px;
   font-weight: 800;
   line-height: 1.35;
   color: var(--b800);
   letter-spacing: -.01em;
   margin: 44px 0 16px;
   padding-left: 14px;
   border-left: 4px solid var(--o500);
}

.post-content h3 {
   font-size: 20px;
   font-weight: 700;
   line-height: 1.4;
   color: var(--b700);
   margin: 30px 0 12px;
}

.post-content a {
   color: var(--b600);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.post-content a:hover {
   color: var(--o500);
}

.post-content strong {
   color: var(--gray900);
}

.post-content ul,
.post-content ol {
   margin: 0 0 20px;
   padding-left: 24px;
}

.post-content ul {
   list-style: disc;
}

.post-content ol {
   list-style: decimal;
}

.post-content li {
   margin-bottom: 8px;
   padding-left: 4px;
}

.post-content li::marker {
   color: var(--o500);
   font-weight: 700;
}

.post-content .wp-block-table {
   margin: 24px 0 28px;
   overflow-x: auto;
   border-radius: 14px;
   border: 1px solid var(--gray200);
   box-shadow: 0 2px 10px rgba(15, 40, 90, .05);
}

.post-content .wp-block-table table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   font-size: 15px;
   line-height: 1.6;
   margin: 0;
}

.post-content .wp-block-table thead {
   border: 0;
}

.post-content .wp-block-table th,
.post-content .wp-block-table td {
   padding: 13px 16px;
   border: 0;
   border-bottom: 1px solid var(--gray100);
   text-align: left;
   vertical-align: top;
}

.post-content .wp-block-table thead th {
   background: var(--b700);
   color: #fff;
   font-weight: 700;
   font-size: 14px;
   letter-spacing: .01em;
   border-bottom: 0;
}

.post-content .wp-block-table tbody td:first-child {
   font-weight: 700;
   color: var(--b800);
   min-width: 120px;
}

.post-content .wp-block-table tbody tr:nth-child(even) td {
   background: var(--gray50);
}

.post-content .wp-block-table tbody tr:hover td {
   background: var(--b50);
}

.post-content .wp-block-table tbody tr:last-child td {
   border-bottom: 0;
}

.post-content .wp-block-image {
   margin: 28px 0;
}

.post-content .wp-block-image img {
   width: 100%;
   height: auto;
   border-radius: 12px;
   display: block;
}

.post-content #ez-toc-container {
   margin: 8px 0 32px;
}

/* FAQ trong bài viết dùng lại giao diện trang Hỏi đáp */
.post-content .faq-list {
   margin: 8px 0 36px;
}

.post-content .faq-question h3 {
   margin: 0;
}

.post-content .faq-answer p:last-child,
.post-content .faq-answer ul:last-child {
   margin-bottom: 0;
}

@media (max-width: 768px) {
   .post-content h2 {
      font-size: 22px;
      margin-top: 36px;
   }

   .post-content h3 {
      font-size: 18px;
   }

   .post-content .wp-block-table table {
      font-size: 14px;
      min-width: 560px;
   }

   .post-content .wp-block-table th,
   .post-content .wp-block-table td {
      padding: 10px 12px;
   }
}

/* Không cho bảng/ảnh rộng kéo cột bài viết tràn màn hình (grid item mặc định min-width: auto) */
.article-layout > * {
   min-width: 0;
}

.post-content {
   overflow-wrap: break-word;
}

@media (max-width: 768px) {
   .article-main h1 {
      font-size: 24px !important;
   }
}

/* ==============================================
   MỤC LỤC BÀI VIẾT (inc/toc.php) — sidebar trái
   ============================================== */
.article-layout.has-toc {
   grid-template-columns: 300px minmax(0, 1fr);
   grid-template-areas: "side main";
}

.article-layout.has-toc .article-main {
   grid-area: main;
}

.article-layout.has-toc .article-sidebar {
   grid-area: side;
   align-self: stretch;
}

.post-content [id] {
   scroll-margin-top: 130px;
}

.post-toc__list a:focus {
   outline: none;
}

.post-toc__list a:focus-visible {
   outline: 2px solid var(--o500);
   outline-offset: 1px;
}

.post-toc {
   position: sticky;
   top: 96px;
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 116px);
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 20px 14px 14px 20px;
   box-shadow: 0 4px 18px rgba(15, 40, 90, .06);
}

.post-toc__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 0 6px 14px 0;
   margin-bottom: 10px;
   border-bottom: 1px solid var(--gray100);
}

.post-toc__title {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 17px;
   font-weight: 800;
   color: var(--b800);
}

.post-toc__title svg {
   color: var(--o500);
}

.post-toc__toggle,
.post-toc__close {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border: 0;
   border-radius: 50%;
   background: var(--b700);
   color: #fff;
   transition: transform .25s, background .2s;
}

.post-toc__toggle:hover,
.post-toc__close:hover {
   background: var(--o500);
}

.post-toc__close {
   display: none;
   font-size: 22px;
   line-height: 1;
   background: var(--gray100);
   color: var(--gray700);
}

.post-toc.is-collapsed .post-toc__toggle {
   transform: rotate(180deg);
}

.post-toc.is-collapsed .post-toc__list {
   display: none;
}

.post-toc.is-collapsed .post-toc__head {
   border-bottom: 0;
   margin-bottom: 0;
   padding-bottom: 0;
}

.post-toc__list {
   list-style: none;
   margin: 0;
   padding: 0 6px 0 0;
   overflow-y: auto;
   counter-reset: toc;
   scrollbar-width: thin;
}

.post-toc__list li {
   margin: 2px 0;
}

.post-toc__list a {
   display: block;
   padding: 8px 10px;
   border-radius: 8px;
   border-left: 3px solid transparent;
   color: var(--gray700);
   font-size: 14.5px;
   line-height: 1.5;
   transition: background .15s, color .15s;
}

.post-toc__list .toc-d0 {
   counter-increment: toc;
}

.post-toc__list .toc-d0 > a::before {
   content: counter(toc) ". ";
   font-weight: 700;
   color: var(--b600);
}

.post-toc__list .toc-d1 > a {
   padding-left: 26px;
   font-size: 14px;
}

.post-toc__list .toc-d2 > a {
   padding-left: 40px;
   font-size: 13.5px;
}

.post-toc__list .toc-d3 > a,
.post-toc__list .toc-d4 > a {
   padding-left: 54px;
   font-size: 13.5px;
}

.post-toc__list a:hover {
   background: var(--gray50);
   color: var(--b700);
}

.post-toc__list a.is-active {
   background: var(--b50);
   color: var(--b800);
   font-weight: 700;
   border-left-color: var(--o500);
}

.toc-fab,
.toc-overlay {
   display: none;
}

/* Thẻ "Chủ đề nổi bật" + "Bài viết mới nhất" xuống dưới bài khi có mục lục */
.article-more {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   margin-top: 32px;
}

.article-more .article-sidebar-card {
   margin-bottom: 0 !important;
}

@media (max-width: 1023px) {
   .article-layout.has-toc {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "main";
   }

   .article-layout.has-toc .article-sidebar {
      grid-area: auto;
      display: contents;
   }

   .post-toc {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 10001;
      width: min(86vw, 340px);
      max-height: none;
      border-radius: 0 18px 18px 0;
      padding: 20px 14px 20px 20px;
      transform: translateX(-105%);
      transition: transform .28s ease;
      box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
   }

   .post-toc.is-open {
      transform: none;
   }

   .post-toc .post-toc__toggle {
      display: none;
   }

   .post-toc .post-toc__close {
      display: flex;
   }

   .post-toc.is-collapsed .post-toc__list {
      display: block;
   }

   .toc-fab {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      left: 16px;
      bottom: 20px;
      z-index: 9999;
      width: 50px;
      height: 50px;
      border: 0;
      border-radius: 50%;
      background: var(--b700);
      color: #fff;
      box-shadow: 0 6px 18px rgba(0, 43, 120, .35);
   }

   .toc-overlay {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(15, 23, 42, .45);
   }

   .toc-overlay[hidden] {
      display: none;
   }

   .article-more {
      grid-template-columns: 1fr;
   }
}

/* ==============================================
   TRANG FOOTER: Chính sách, Quy trình, Hỗ trợ, Báo cáo vấn đề
   (page-chinh-sach.php, page-quy-trinh.php, page-ho-tro.php, page-bao-cao.php)
   ============================================== */
.pg-hero {
   background: linear-gradient(180deg, var(--b50) 0%, #fff 100%);
   padding: 56px 0 48px;
   text-align: center;
   border-bottom: 1px solid var(--gray100);
}

.pg-hero--compact {
   padding: 44px 0 36px;
}

.pg-hero .sec-label {
   justify-content: center;
}

.pg-hero__title {
   font-size: var(--fs-h1, 40px);
   font-weight: 800;
   color: var(--b800);
   line-height: 1.25;
   margin-bottom: 14px;
}

.pg-hero__desc {
   max-width: 680px;
   margin: 0 auto;
   font-size: 16px;
   line-height: 1.7;
   color: var(--gray600);
}

.pg-hero__btns {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   margin-top: 26px;
}

.pg-hero__btns:empty {
   display: none;
}

.pg-meta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 18px;
   padding: 6px 14px;
   border-radius: 999px;
   background: #fff;
   border: 1px solid var(--gray200);
   font-size: 13px;
   color: var(--gray600);
}

.pg-meta svg {
   color: var(--b600);
}

.pg-narrow {
   max-width: 880px;
}

/* Nội dung soạn thảo */
.pg-prose {
   font-size: 15.5px;
   line-height: 1.8;
   color: var(--gray700);
}

.pg-prose > * + * {
   margin-top: 12px;
}

.pg-prose h3 {
   font-size: 17px;
   font-weight: 700;
   color: var(--gray900);
   margin-top: 20px;
}

.pg-prose ul,
.pg-prose ol {
   padding-left: 22px;
}

.pg-prose ul {
   list-style: disc;
}

.pg-prose ol {
   list-style: decimal;
}

.pg-prose li::marker {
   color: var(--b600);
}

.pg-form textarea,
.pg-form input {
   font: inherit;
   font-size: 15px;
}

.pg-prose li + li {
   margin-top: 6px;
}

.pg-prose a {
   color: var(--b600);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.pg-prose strong {
   color: var(--gray900);
}

.pg-prose table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14.5px;
   display: block;
   overflow-x: auto;
}

.pg-prose th,
.pg-prose td {
   border: 1px solid var(--gray200);
   padding: 10px 12px;
   text-align: left;
   vertical-align: top;
}

.pg-prose th {
   background: var(--b50);
   color: var(--b800);
   font-weight: 700;
}

/* Trang chính sách */
.pg-policy {
   padding: 48px 0 64px;
}

.pg-policy__grid {
   max-width: 880px;
   margin: 0 auto;
}

.pg-policy__grid.has-toc {
   max-width: none;
   display: grid;
   grid-template-columns: 280px minmax(0, 1fr);
   gap: 40px;
   align-items: start;
}

.pg-toc {
   position: sticky;
   top: 96px;
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 18px 14px 14px;
   box-shadow: 0 4px 18px rgba(15, 40, 90, .06);
   max-height: calc(100vh - 116px);
   overflow-y: auto;
}

.pg-toc summary {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 800;
   color: var(--b800);
   cursor: pointer;
   list-style: none;
   padding: 0 6px 12px;
}

.pg-toc summary::-webkit-details-marker {
   display: none;
}

.pg-toc summary svg {
   color: var(--o500);
}

.pg-toc ol {
   list-style: none;
   margin: 0;
   padding: 10px 0 0;
   border-top: 1px solid var(--gray100);
}

.pg-toc a {
   display: block;
   padding: 7px 10px;
   border-radius: 8px;
   border-left: 3px solid transparent;
   font-size: 14px;
   line-height: 1.45;
   color: var(--gray700);
}

.pg-toc a:hover {
   background: var(--b50);
   color: var(--b700);
}

.pg-toc a.is-active {
   background: var(--b50);
   border-left-color: var(--o500);
   color: var(--b800);
   font-weight: 700;
}

.pg-policy__body {
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 40px 44px;
   box-shadow: var(--sh-sm);
}

.pg-policy__intro {
   padding: 18px 20px;
   margin-bottom: 8px;
   background: var(--b50);
   border-left: 4px solid var(--b600);
   border-radius: var(--r-md);
}

.pg-policy__sec {
   padding: 28px 0 0;
   scroll-margin-top: 110px;
}

.pg-policy__sec + .pg-policy__sec {
   margin-top: 28px;
   border-top: 1px solid var(--gray100);
}

.pg-policy__sec h2 {
   font-size: 21px;
   font-weight: 800;
   color: var(--b800);
   margin-bottom: 12px;
}

.pg-operator {
   margin-top: 36px;
   padding: 22px 24px;
   border-radius: var(--r-lg);
   background: var(--gray50);
   border: 1px solid var(--gray200);
}

.pg-operator__title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 800;
   color: var(--b800);
   margin-bottom: 14px;
}

.pg-operator__title svg {
   color: var(--b600);
}

.pg-operator dl {
   display: grid;
   grid-template-columns: 180px 1fr;
   gap: 8px 16px;
   font-size: 14.5px;
}

.pg-operator dt {
   color: var(--gray500);
}

.pg-operator dd {
   color: var(--gray900);
   font-weight: 600;
   word-break: break-word;
}

.pg-operator a {
   color: var(--b600);
}

.pg-related {
   margin-top: 28px;
}

.pg-related__title {
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 10px;
}

.pg-related__list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.pg-related__list a {
   padding: 8px 14px;
   border: 1px solid var(--gray200);
   border-radius: 999px;
   font-size: 14px;
   color: var(--gray700);
   transition: border-color .15s, color .15s;
}

.pg-related__list a:hover {
   border-color: var(--b400);
   color: var(--b600);
}

/* Trang quy trình */
.pg-tabs {
   display: inline-flex;
   gap: 6px;
   padding: 6px;
   margin: 8px 0;
   background: var(--gray100);
   border-radius: 999px;
}

.pg-tab {
   border: 0;
   background: transparent;
   padding: 10px 22px;
   border-radius: 999px;
   font: inherit;
   font-size: 15px;
   font-weight: 700;
   color: var(--gray600);
   cursor: pointer;
   transition: background .15s, color .15s;
}

.pg-tab.is-active {
   background: #fff;
   color: var(--b700);
   box-shadow: var(--sh-sm);
}

.pg-tab:focus-visible {
   outline: 2px solid var(--o500);
   outline-offset: 2px;
}

.pg-panel__name {
   font-size: 20px;
   font-weight: 800;
   color: var(--b800);
   margin-top: 12px;
}

.pg-panel__intro {
   margin-top: 12px;
   max-width: 760px;
}

.pg-steps {
   grid-template-columns: repeat(var(--cols, 4), 1fr);
}

.pg-step-icon svg {
   width: 72px;
   height: 72px;
   filter: drop-shadow(0 6px 10px rgba(15, 40, 90, .12));
}

.pg-panel__btn {
   margin-top: 28px;
   text-align: center;
}

.pg-cards-sec {
   background: var(--gray50);
}

.pg-cards-sec--first {
   background: #fff;
}

.pg-cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 24px;
}

.pg-card {
   display: block;
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 24px;
   color: inherit;
   transition: border-color .2s, box-shadow .2s, transform .2s;
}

.pg-cards--links .pg-card:hover {
   border-color: var(--b300);
   box-shadow: var(--sh-md);
   transform: translateY(-3px);
}

.pg-card__icon {
   width: 64px;
   height: 64px;
   border-radius: 16px;
   background: linear-gradient(135deg, var(--b50) 0%, #fff 100%);
   border: 1px solid var(--b100);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
   transition: transform .2s;
}

.pg-card:hover .pg-card__icon {
   transform: scale(1.06) rotate(-3deg);
}

/* Trang khu vực: ô icon to hơn, nền pastel đổi màu theo thứ tự thẻ */
.kv-sec .pg-card__icon {
   width: 72px;
   height: 72px;
   border-radius: 20px;
   border: 0;
   background: #fff4e5;
   box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .18);
}

.kv-sec .pg-card:nth-child(3n+2) .pg-card__icon {
   background: #e8f8ef;
   box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .18);
}

.kv-sec .pg-card:nth-child(3n+3) .pg-card__icon {
   background: #f1edff;
   box-shadow: inset 0 0 0 1px rgba(124, 92, 231, .18);
}

.kv-sec .pg-card__icon svg {
   filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .12));
}

.pg-card h3 {
   font-size: 17px;
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 8px;
}

.pg-card p {
   font-size: 14.5px;
   line-height: 1.65;
   color: var(--gray600);
}

.pg-card__more {
   display: inline-block;
   margin-top: 14px;
   font-size: 14px;
   font-weight: 700;
   color: var(--b600);
}

.pg-box {
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 32px;
   box-shadow: var(--sh-sm);
}

.pg-tips-sec .pg-box {
   margin-top: 20px;
}

.pg-box__title {
   font-size: 22px;
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 12px;
}

.pg-faq {
   margin-top: 24px;
}

.pg-faq .faq-question {
   width: 100%;
   border: 0;
   font: inherit;
   font-size: 16px;
   font-weight: 700;
   text-align: left;
   gap: 12px;
}

.pg-faq .faq-question svg {
   flex-shrink: 0;
   transition: transform .2s;
}

.pg-faq .faq-item.active .faq-question svg {
   transform: rotate(180deg);
}

.pg-faq .faq-answer p + p {
   margin-top: 8px;
}

.pg-btn-ghost {
   background: transparent;
   color: #fff;
   border-color: rgba(255, 255, 255, .5);
}

.pg-btn-ghost:hover {
   color: #fff;
   border-color: #fff;
}

/* Trung tâm hỗ trợ */
.pg-support__grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr;
   gap: 24px;
   align-items: start;
}

.pg-channels {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin-top: 18px;
}

.pg-channel {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px;
   border: 1px solid var(--gray200);
   border-radius: var(--r-lg);
   color: var(--gray700);
   font-size: 14.5px;
   word-break: break-word;
}

a.pg-channel:hover {
   border-color: var(--b300);
   background: var(--b50);
}

.pg-channel strong {
   display: block;
   font-size: 13px;
   color: var(--gray500);
   font-weight: 600;
}

.pg-channel .c-icon {
   width: 46px;
   height: 46px;
   background: var(--b50);
}

.pg-note {
   margin-top: 16px;
   font-size: 14px;
   color: var(--gray500);
}

.pg-linklist {
   list-style: none;
   margin: 8px 0 0;
   padding: 0;
}

.pg-linklist a {
   display: flex;
   justify-content: space-between;
   padding: 13px 0;
   border-bottom: 1px solid var(--gray100);
   color: var(--gray700);
   font-weight: 600;
}

.pg-linklist a:hover {
   color: var(--b600);
}

/* Báo cáo vấn đề */
.pg-report {
   padding: 48px 0 72px;
}

.pg-report__grid {
   grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
   align-items: start;
}

.pg-report__side {
   display: grid;
   gap: 20px;
}

.pg-form select {
   width: 100%;
   padding: 12px 16px;
   border: 1px solid var(--gray300);
   border-radius: var(--r-md);
   font: inherit;
   font-size: 15px;
   background: #fff;
}

.pg-form select:focus {
   border-color: var(--b500);
   box-shadow: 0 0 0 4px var(--b50);
   outline: none;
}

.pg-form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.pg-form__hint {
   margin: -12px 0 18px;
   font-size: 13px;
   color: var(--gray500);
}

.pg-form .form-group .pg-form__hint {
   margin: 6px 0 0;
}

.pg-form .req {
   color: #dc2626;
}

.pg-roles {
   border: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 10px 20px;
}

.pg-roles legend {
   width: 100%;
   font-size: 14px;
   font-weight: 600;
   color: var(--gray900);
   margin-bottom: 8px;
}

.form-group .pg-radio {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 500;
   margin: 0;
}

.form-group .pg-radio input,
.pg-consent input {
   width: auto;
   accent-color: var(--b600);
}

.pg-consent {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin-bottom: 20px;
   font-size: 14px;
   color: var(--gray700);
   line-height: 1.55;
}

.pg-consent input {
   margin-top: 3px;
}

.pg-consent a {
   color: var(--b600);
   text-decoration: underline;
}

.pg-form .form-submit {
   border-radius: var(--r-md);
   font-weight: 700;
   cursor: pointer;
}

.pg-hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

.pg-alert {
   padding: 14px 16px;
   border-radius: var(--r-md);
   margin-bottom: 20px;
   font-size: 14.5px;
   line-height: 1.6;
}

.pg-alert--ok {
   background: #f0fdf4;
   border: 1px solid #bbf7d0;
   color: #166534;
}

.pg-alert--err {
   background: #fef2f2;
   border: 1px solid #fecaca;
   color: #991b1b;
}

.pg-emergency {
   display: flex;
   gap: 14px;
   padding: 20px;
   border-radius: var(--r-xl);
   background: #fff7ed;
   border: 1px solid #fed7aa;
}

.pg-emergency__icon {
   color: var(--o600);
   flex-shrink: 0;
}

.pg-emergency .pg-prose {
   font-size: 14.5px;
}

@media(max-width:1024px) {
   .pg-policy__grid.has-toc,
   .pg-support__grid,
   .pg-report__grid {
      grid-template-columns: minmax(0, 1fr);
   }

   .pg-toc {
      position: static;
      max-height: none;
   }

   .pg-toc:not([open]) summary {
      padding-bottom: 0;
   }

   .pg-steps,
   .pg-cards {
      grid-template-columns: repeat(2, 1fr);
   }

   .pg-steps::before {
      display: none;
   }
}

@media(max-width:768px) {
   .pg-hero {
      padding: 36px 0 32px;
   }

   .pg-policy__body {
      padding: 24px 18px;
   }

   .pg-policy__sec h2 {
      font-size: 19px;
   }

   .pg-operator dl {
      grid-template-columns: 1fr;
      gap: 2px;
   }

   .pg-operator dd {
      margin-bottom: 8px;
   }

   .pg-steps,
   .pg-cards,
   .pg-channels,
   .pg-form__row {
      grid-template-columns: 1fr;
   }

   .pg-form__row {
      gap: 0;
   }

   .pg-tabs {
      display: flex;
      width: 100%;
   }

   .pg-tab {
      flex: 1;
      padding: 10px 12px;
   }

   .pg-box {
      padding: 22px 18px;
   }
}

/* ==============================================
   FLUENT FORMS (giao diện chung cho mọi form Fluent trên site)
   ============================================== */
.fluentform .frm-fluent-form .ff-el-group {
   margin-bottom: 18px;
}

.fluentform .frm-fluent-form .ff-el-input--label label {
   font-size: 14px;
   font-weight: 600;
   color: var(--gray900);
}

.fluentform .frm-fluent-form .ff-el-is-required.asterisk-right label::after {
   color: #dc2626;
}

.fluentform .frm-fluent-form .ff-el-form-control {
   width: 100%;
   padding: 12px 16px;
   border: 1px solid var(--gray300);
   border-radius: var(--r-md);
   font: inherit;
   font-size: 15px;
   color: var(--gray900);
   background: #fff;
   box-shadow: none;
   transition: border-color .2s, box-shadow .2s;
}

.fluentform .frm-fluent-form .ff-el-form-control:focus {
   border-color: var(--b500);
   box-shadow: 0 0 0 4px var(--b50);
   outline: none;
}

.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
   color: var(--gray400);
}

.fluentform .frm-fluent-form select.ff-el-form-control {
   height: auto;
}

.fluentform .frm-fluent-form .ff-el-help-message {
   font-size: 13px;
   font-style: normal;
   color: var(--gray500);
   font-style: normal;
   margin-top: 6px;
}

.fluentform .frm-fluent-form .ff-el-form-check-label {
   font-size: 14px;
   color: var(--gray700);
   display: inline-flex;
   align-items: flex-start;
   gap: 8px;
   line-height: 1.55;
}

.fluentform .frm-fluent-form .ff-el-form-check-input {
   accent-color: var(--b600);
   margin-top: 3px;
}

.fluentform .frm-fluent-form .ff_list_inline .ff-el-form-check {
   margin-right: 18px;
}

.fluentform .frm-fluent-form .ff-el-tc a,
.fluentform .frm-fluent-form .ff-el-form-check-label a {
   color: var(--b600);
   text-decoration: underline;
}

.fluentform .frm-fluent-form .ff-t-container {
   gap: 16px;
}

.fluentform .frm-fluent-form .ff-t-cell {
   padding: 0 !important;
}

.fluentform .frm-fluent-form .ff-btn-submit {
   width: 100%;
   padding: 14px;
   border: 0;
   border-radius: var(--r-md);
   background: var(--b600) !important;
   color: #fff !important;
   font: inherit;
   font-size: 16px;
   font-weight: 700;
   cursor: pointer;
   transition: background .2s;
}

.fluentform .frm-fluent-form .ff-btn-submit:hover {
   background: var(--b700) !important;
   opacity: 1;
}

.modal-form .fluentform .frm-fluent-form .ff-btn-submit {
   background: #f59e0b !important;
}

.modal-form .fluentform .frm-fluent-form .ff-btn-submit:hover {
   background: #d97706 !important;
}

.fluentform .frm-fluent-form .error.text-danger {
   font-size: 13px;
   color: #dc2626;
   margin-top: 4px;
}

.fluentform .ff-message-success {
   padding: 16px 18px;
   border: 1px solid #bbf7d0;
   border-radius: var(--r-md);
   background: #f0fdf4;
   color: #166534;
   font-size: 15px;
   line-height: 1.6;
   box-shadow: none;
}

@media(max-width:768px) {
   .fluentform .frm-fluent-form .ff-t-container {
      flex-direction: column;
      gap: 0;
   }
}

/* ==============================================
   TRANG CHI TIẾT TÀI LIỆU: Nội dung, Trích đoạn, Câu hỏi thường gặp
   ============================================== */
.doc-facts {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   list-style: none;
   margin: 0 0 16px;
   padding: 0;
}

.doc-facts li {
   padding: 5px 12px;
   border-radius: 999px;
   background: var(--b50);
   color: var(--b700);
   font-size: 13.5px;
   font-weight: 600;
}

.doc-toc {
   margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: doctoc;
   border: 1px solid var(--gray200);
   border-radius: var(--r-lg);
   overflow: hidden;
}

.doc-toc li {
   counter-increment: doctoc;
   display: flex;
   gap: 12px;
   padding: 11px 16px;
   font-size: 15px;
   color: var(--gray800);
   line-height: 1.5;
}

.doc-toc li + li {
   border-top: 1px solid var(--gray100);
}

.doc-toc li::before {
   content: counter(doctoc);
   flex: 0 0 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--b600);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
}

.doc-sample {
   position: relative;
   max-height: 420px;
   overflow: hidden;
   padding: 20px 22px 0;
   border: 1px solid var(--gray200);
   border-radius: var(--r-lg);
   background: #fff;
   font-size: 15px;
   line-height: 1.7;
   color: var(--gray800);
}

.doc-sample p + p {
   margin-top: 10px;
}

.doc-sample ol {
   padding-left: 22px;
   margin: 0;
}

.doc-sample ol > li {
   margin-bottom: 14px;
}

.doc-sample ol > li::marker {
   font-weight: 700;
   color: var(--b600);
}

.doc-sample .choices {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2px 18px;
   margin-top: 4px;
   color: var(--gray700);
}

.doc-sample math {
   font-size: 1.15em;
}

.doc-sample table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
}

.doc-sample td,
.doc-sample th {
   border: 1px solid var(--gray200);
   padding: 6px 8px;
}

.doc-sample-fade {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 70px 16px 18px;
   text-align: center;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 55%);
}

.doc-sample-fade p {
   margin-bottom: 10px;
   font-size: 14px;
   color: var(--gray600);
}

.doc-sample-fade .doc-btn {
   display: inline-flex;
   width: auto;
   padding-left: 28px;
   padding-right: 28px;
}

.doc-faq details {
   border: 1px solid var(--gray200);
   border-radius: var(--r-md);
   background: #fff;
}

.doc-faq details + details {
   margin-top: 10px;
}

.doc-faq summary {
   cursor: pointer;
   padding: 14px 44px 14px 16px;
   font-weight: 700;
   color: var(--b800);
   list-style: none;
   position: relative;
}

.doc-faq summary::-webkit-details-marker {
   display: none;
}

.doc-faq summary::after {
   content: '+';
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 20px;
   color: var(--b600);
}

.doc-faq details[open] summary::after {
   content: '−';
}

.doc-faq details p {
   padding: 0 16px 14px;
   font-size: 15px;
   line-height: 1.7;
   color: var(--gray700);
}

@media(max-width:768px) {
   .doc-sample .choices {
      grid-template-columns: 1fr;
   }

   .doc-sample {
      padding: 16px 16px 0;
   }
}

/* Liên hệ nổi: icon màu theo kênh (điện thoại, Zalo, Messenger) */
.fc-icon.fc-brand {
   width: 34px;
   height: 34px;
   background: none;
   border-radius: 50%;
   filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .18));
}

.fc-icon.fc-brand svg {
   width: 34px;
   height: 34px;
}

.fc-item:hover .fc-brand {
   transform: scale(1.06);
}

.fc-brand {
   transition: transform .15s;
}

/* ==============================================
   LỚP HỌC: trạng thái chưa có lớp, đăng ký nhận lớp, lớp tương tự
   ============================================== */
.cl-empty-msg {
   text-align: center;
   padding: 40px 24px;
   border: 1px dashed var(--b200);
   border-radius: var(--r-xl);
   background: linear-gradient(180deg, var(--b50) 0%, #fff 100%);
}

.cl-empty-msg__icon {
   display: flex;
   justify-content: center;
   margin-bottom: 12px;
}

.cl-empty-msg h3 {
   font-size: 20px;
   font-weight: 800;
   color: var(--b800);
   margin-bottom: 8px;
}

.cl-empty-msg p {
   max-width: 560px;
   margin: 0 auto;
   color: var(--gray600);
   line-height: 1.7;
}

.cl-empty-msg__btns,
.cl-home-empty__btns {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   margin-top: 20px;
}

.cl-anchor {
   position: relative;
   top: -110px;
   display: block;
}

.cl-signup {
   background: var(--gray50);
   scroll-margin-top: 90px;
}

.cl-signup__head {
   text-align: center;
   max-width: 720px;
   margin: 0 auto 28px;
}

.cl-signup__head .sec-label {
   justify-content: center;
}

.cl-signup__grid {
   display: grid;
   grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
   gap: 24px;
   align-items: start;
}

.cl-signup__card,
.cl-signup__side {
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 28px;
   box-shadow: var(--sh-sm);
}

.cl-tabs {
   margin: 0 0 18px;
}

.cl-panel__intro {
   margin-bottom: 16px;
   font-size: 14.5px;
   color: var(--gray600);
}

.cl-signup__side h3 {
   font-size: 18px;
   font-weight: 800;
   color: var(--gray900);
   margin-bottom: 16px;
}

.cl-steps {
   list-style: none;
   margin: 0;
   padding: 0;
   counter-reset: clstep;
}

.cl-steps li {
   counter-increment: clstep;
   position: relative;
   padding: 0 0 18px 44px;
}

.cl-steps li::before {
   content: counter(clstep);
   position: absolute;
   left: 0;
   top: 0;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--b600);
   color: #fff;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
}

.cl-steps li:not(:last-child)::after {
   content: '';
   position: absolute;
   left: 14px;
   top: 34px;
   bottom: 4px;
   border-left: 2px dashed var(--b200);
}

.cl-steps strong {
   display: block;
   color: var(--gray900);
   margin-bottom: 2px;
}

.cl-steps span {
   font-size: 14px;
   color: var(--gray600);
   line-height: 1.6;
}

.cl-fee {
   margin-top: 6px;
   padding: 14px 16px;
   border-radius: var(--r-md);
   background: #fff7ed;
   border: 1px solid #fed7aa;
   font-size: 14px;
   color: var(--gray700);
   line-height: 1.6;
}

.cl-fee strong {
   display: block;
   color: #a64b00; /* cam đậm: đủ tương phản trên nền cam nhạt */
   margin-bottom: 4px;
}

.cl-fee a {
   color: var(--b600);
   text-decoration: underline;
}

.cl-home-empty {
   grid-column: 1 / -1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 28px 32px;
   border-radius: var(--r-xl);
   border: 1px solid var(--b100);
   background: linear-gradient(120deg, var(--b50) 0%, #fff 60%);
}

.cl-home-empty h3 {
   font-size: 20px;
   font-weight: 800;
   color: var(--b800);
   margin-bottom: 6px;
}

.cl-home-empty p {
   color: var(--gray600);
   line-height: 1.7;
   max-width: 640px;
}

.cl-home-empty__btns {
   margin-top: 0;
   flex-direction: column;
   flex-shrink: 0;
}

.cl-related {
   list-style: none;
   margin: 0;
   padding: 0;
   border: 1px solid var(--gray200);
   border-radius: var(--r-lg);
   overflow: hidden;
}

.cl-related li {
   padding: 12px 16px;
}

.cl-related li + li {
   border-top: 1px solid var(--gray100);
}

.cl-related a {
   display: block;
   font-weight: 700;
   color: var(--b700);
}

.cl-related span {
   font-size: 13.5px;
   color: var(--gray500);
}

@media(max-width:1024px) {
   .cl-signup__grid {
      grid-template-columns: minmax(0, 1fr);
   }

   .cl-home-empty {
      flex-direction: column;
      align-items: flex-start;
   }

   .cl-home-empty__btns {
      flex-direction: row;
   }
}

@media(max-width:768px) {
   .cl-signup__card,
   .cl-signup__side {
      padding: 20px 16px;
   }

   .cl-home-empty {
      padding: 22px 18px;
   }
}

/* Heading chuẩn SEO giữ giao diện cũ */
h2.sc-count {
   margin: 0;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.5;
}

.faq-list h2.faq-question {
   margin: 0;
   font-size: 16px;
   line-height: 1.5;
}

.blog-list-title {
   font-size: 20px;
   font-weight: 800;
   color: var(--gray900);
   margin: 0 0 16px;
}

/* ==============================================
   TRANG KHU VỰC (page-khu-vuc.php): /gia-su-binh-thanh/, /gia-su-go-vap/…
   ============================================== */
.kv-sec {
   padding: 56px 0;
}

.kv-sec .sec-title,
.kv-sec .sec-desc {
   text-align: center;
}

.kv-sec .sec-desc {
   max-width: 720px;
   margin: 0 auto;
}

.kv-sec:nth-of-type(even) {
   background: var(--gray50);
}

.kv-points {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 18px;
   list-style: none;
   margin: 22px auto 0;
   padding: 0;
   max-width: 760px;
}

.kv-points li {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 14.5px;
   font-weight: 600;
   color: var(--gray700);
}

.kv-points svg {
   color: #16a34a;
   flex-shrink: 0;
}

.kv-ward-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
   gap: 14px;
   margin-top: 28px;
}

.kv-ward {
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 16px 18px;
}

.kv-ward__name {
   display: flex;
   align-items: center;
   gap: 6px;
   font-weight: 800;
   color: var(--b800);
}

.kv-ward__name svg {
   color: var(--o500);
   flex-shrink: 0;
}

.kv-ward__from {
   margin-top: 6px;
   font-size: 13.5px;
   line-height: 1.55;
   color: var(--gray600);
}

.kv-note {
   margin-top: 16px;
   font-size: 13.5px;
   color: var(--gray500);
   text-align: center;
}

.kv-note a {
   color: var(--b600);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.kv-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
   gap: 16px;
   margin-top: 28px;
}

.kv-item {
   display: flex;
   flex-direction: column;
   gap: 6px;
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 18px 20px;
   color: inherit;
   transition: border-color .2s, box-shadow .2s, transform .2s;
}

.kv-item:hover {
   border-color: var(--b300);
   box-shadow: var(--sh-md);
   transform: translateY(-2px);
}

.kv-item__code {
   font-size: 12.5px;
   font-weight: 700;
   color: var(--b600);
}

.kv-item__title {
   font-size: 16px;
   color: var(--gray900);
   line-height: 1.45;
}

.kv-item__meta {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 13.5px;
   color: var(--gray600);
}

.kv-item__price {
   font-weight: 800;
   color: var(--o500);
}

.kv-item__badge {
   align-self: flex-start;
   font-size: 12px;
   font-weight: 600;
   color: #15803d;
   background: #f0fdf4;
   border-radius: 999px;
   padding: 3px 10px;
}

.kv-more {
   margin-top: 22px;
   text-align: center;
}

.kv-school-groups {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
   gap: 18px;
   margin-top: 28px;
}

.kv-school-group {
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   padding: 22px 24px;
}

.kv-school-group h3 {
   font-size: 16px;
   font-weight: 800;
   color: var(--b800);
   margin-bottom: 12px;
}

.kv-school-group ul {
   list-style: disc;
   padding-left: 20px;
   margin: 0;
}

.kv-school-group li {
   font-size: 14.5px;
   line-height: 1.5;
   color: var(--gray700);
}

.kv-school-group li + li {
   margin-top: 6px;
}

.kv-school-group li::marker {
   color: var(--b600);
}

.kv-fee-table {
   margin-top: 24px;
}

.kv-fee-table table {
   display: table;
   background: #fff;
}

.kv-fee-table td:first-child {
   font-weight: 700;
   color: var(--gray900);
}

.kv-chips {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   margin-top: 24px;
}

.kv-chips a {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 9px 16px;
   border: 1px solid var(--gray200);
   border-radius: 999px;
   background: #fff;
   font-size: 14.5px;
   font-weight: 600;
   color: var(--gray700);
   transition: border-color .2s, color .2s;
}

.kv-chips a:hover {
   border-color: var(--b300);
   color: var(--b700);
}

.kv-chips svg {
   color: var(--o500);
}

.kv-form {
   scroll-margin-top: 90px;
}

#hoc-phi {
   scroll-margin-top: 90px;
}

@media (max-width: 768px) {
   .kv-sec {
      padding: 40px 0;
   }

   .kv-fee-table table {
      display: block;
   }
}

/* ==============================================
   TÌM KIẾM TOÀN SITE: nút header, khung thả xuống, trang kết quả (search.php, searchform.php)
   ============================================== */
.screen-reader-text {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.nav-search-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   flex-shrink: 0;
   border-radius: var(--r-md);
   border: 1.5px solid var(--gray200);
   background: #fff;
   color: var(--b700);
   cursor: pointer;
   transition: border-color .15s, background .15s;
}

.nav-search-btn:hover,
.nav-search-btn[aria-expanded="true"] {
   border-color: var(--b400);
   background: var(--b50);
}

.site-search {
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
   background: #fff;
   border-bottom: 1px solid var(--gray200);
   box-shadow: 0 12px 28px rgba(0, 43, 120, .10);
   padding: 18px 16px 16px;
}

.site-search[hidden] {
   display: none;
}

.site-search__inner {
   max-width: 760px;
   margin: 0 auto;
}

.site-search__hint {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px 8px;
   margin-top: 12px;
   font-size: 13.5px;
   color: var(--gray500);
}

.site-search__hint a {
   padding: 4px 12px;
   border-radius: 999px;
   background: var(--gray100);
   color: var(--gray700);
   font-weight: 500;
}

.site-search__hint a:hover {
   background: var(--b100);
   color: var(--b700);
}

.ss-form {
   position: relative;
   display: flex;
   gap: 8px;
}

.ss-form__icon {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--gray400);
   pointer-events: none;
}

.ss-form input[type="search"] {
   flex: 1;
   min-width: 0;
   height: 48px;
   padding: 0 14px 0 44px;
   border: 1.5px solid var(--gray200);
   border-radius: var(--r-lg);
   font: inherit;
   font-size: 15.5px;
   color: var(--gray900);
   background: #fff;
}

.ss-form input[type="search"]:focus {
   outline: none;
   border-color: var(--b400);
   box-shadow: 0 0 0 3px var(--b100);
}

.ss-form__btn {
   height: 48px;
   padding: 0 22px;
   flex-shrink: 0;
   border: none;
   cursor: pointer;
}

.ss-hero__form {
   max-width: 680px;
   margin: 22px auto 0;
}

.ss-hero__count {
   margin-top: 14px;
   font-size: 14.5px;
   color: var(--gray600);
}

.ss-results {
   padding: 36px 0 72px;
}

.ss-wrap {
   max-width: 900px;
}

.ss-tabs {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   padding-bottom: 6px;
   margin-bottom: 22px;
   scrollbar-width: thin;
}

.ss-tab {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   flex-shrink: 0;
   padding: 8px 16px;
   border-radius: 999px;
   border: 1px solid var(--gray200);
   background: #fff;
   font-size: 14.5px;
   font-weight: 600;
   color: var(--gray700);
   white-space: nowrap;
}

.ss-tab span {
   min-width: 22px;
   padding: 1px 7px;
   border-radius: 999px;
   background: var(--gray100);
   font-size: 12.5px;
   text-align: center;
   color: var(--gray600);
}

.ss-tab:hover {
   border-color: var(--b300);
   color: var(--b700);
}

.ss-tab.is-active {
   background: var(--b700);
   border-color: var(--b700);
   color: #fff;
}

.ss-tab.is-active span {
   background: rgba(255, 255, 255, .2);
   color: #fff;
}

.ss-list {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.ss-item {
   display: grid;
   grid-template-columns: 88px minmax(0, 1fr);
   gap: 18px;
   align-items: start;
   padding: 18px;
   background: #fff;
   border: 1px solid var(--gray200);
   border-radius: var(--r-xl);
   transition: border-color .2s, box-shadow .2s;
}

.ss-item:hover {
   border-color: var(--b300);
   box-shadow: var(--sh-md);
}

.ss-item__thumb {
   width: 88px;
   height: 88px;
   border-radius: 14px;
   overflow: hidden;
   background: linear-gradient(135deg, var(--b50) 0%, #fff 100%);
   border: 1px solid var(--b100);
   display: flex;
   align-items: center;
   justify-content: center;
}

.ss-item__thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.ss-item__meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px 12px;
   font-size: 13px;
   color: var(--gray500);
   margin-bottom: 6px;
}

.ss-badge {
   padding: 2px 10px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 700;
   background: var(--b50);
   color: var(--b700);
}

.ss-badge--tai-lieu { background: #ecfdf5; color: #047857; }
.ss-badge--post { background: var(--o100); color: var(--o600); }
.ss-badge--lop-hoc { background: #f5f3ff; color: #6d28d9; }

.ss-item__title {
   font-size: 17.5px;
   font-weight: 700;
   line-height: 1.4;
}

.ss-item__title a {
   color: var(--gray900);
}

.ss-item__title a:hover {
   color: var(--b600);
}

.ss-item__desc {
   margin-top: 6px;
   font-size: 14.5px;
   line-height: 1.6;
   color: var(--gray600);
}

.ss-item mark {
   background: #fff3c4;
   color: inherit;
   padding: 0 2px;
   border-radius: 3px;
}

.ss-pagination {
   margin-top: 32px;
}

.ss-empty {
   text-align: center;
   padding: 24px 0;
}

.ss-empty__icon {
   display: flex;
   justify-content: center;
   margin-bottom: 14px;
}

.ss-empty h2 {
   font-size: 22px;
   font-weight: 800;
   color: var(--gray900);
}

.ss-empty > p {
   max-width: 560px;
   margin: 10px auto 0;
   color: var(--gray600);
}

.ss-empty__links {
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
   text-align: left;
   margin-top: 28px;
}

@media (max-width: 1024px) {
   .nav-search-btn {
      margin-left: auto;
      margin-right: 8px;
   }
}

@media (max-width: 600px) {
   .ss-item {
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 12px;
      padding: 14px;
   }

   .ss-item__thumb {
      width: 56px;
      height: 56px;
      border-radius: 10px;
   }

   .ss-item__thumb svg {
      width: 30px;
      height: 30px;
   }

   .ss-form__btn {
      padding: 0 14px;
   }

   .ss-item__title {
      font-size: 16px;
   }
}

/* Nút tìm kiếm header: kính lúp ↔ dấu X khi khung đang mở */
.nav-search-btn .nsb-close,
.nav-search-btn[aria-expanded="true"] .nsb-open {
   display: none;
}

.nav-search-btn[aria-expanded="true"] .nsb-close {
   display: block;
}

/* iOS Safari tự phóng to trang khi chạm vào ô nhập có chữ < 16px.
   Trên mobile ép mọi ô nhập (kể cả form plugin: chatbot, Fluent Forms) về 16px.
   Không dùng maximum-scale=1 vì sẽ chặn người dùng tự zoom (kém tiếp cận). */
@media (max-width: 782px) {
   input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not([type="color"]),
   select,
   textarea {
      font-size: 16px !important;
   }
}

/* Hiệu năng trang chủ: các khối dưới màn hình đầu chỉ được tính style/layout/vẽ khi sắp cuộn tới
   (giảm "Style & Layout" lúc tải và khi font web tải xong). contain-intrinsic-size giữ chỗ để thanh cuộn không nhảy. */
.subjects,
.tutors,
.classes,
.how-it-works,
.testimonials,
.blog,
.cta-banner,
footer.footer {
   content-visibility: auto;
   contain-intrinsic-size: auto 700px;
}

/* Nút đóng thanh thông báo: vùng chạm tối thiểu 24×24px (mobile) */
#announceClose {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 32px;
   min-height: 32px;
   padding: 0;
   right: 4px !important;
}

/* Trang môn học (page-mon-hoc.php) & trang tổng /gia-su-mon/ */
.mh-levels .pg-card p {
   margin: 0 0 8px;
}

.mh-levels .pg-card p:last-child {
   margin-bottom: 0;
}

.mh-step-list {
   max-width: 760px;
   margin: 0 auto;
}

.mh-sub-title {
   margin-top: 40px;
}

.mh-hub-card {
   display: block;
   color: inherit;
   text-decoration: none;
   transition: border-color .2s, box-shadow .2s, transform .2s;
}

.mh-hub-card:hover {
   border-color: var(--b300, #93c5fd);
   box-shadow: var(--sh-md);
   transform: translateY(-2px);
}

.mh-hub-card__more {
   display: inline-block;
   margin-top: 10px;
   font-weight: 700;
   color: var(--b700);
}

.kv-item__code svg {
   vertical-align: -3px;
}

/* Trang môn học: khối 4 thẻ xếp đủ 1 hàng trên desktop (tránh 3 + 1 lẻ) */
.page-template-page-mon-hoc .pg-cards {
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Menu 9 mục (thêm "Môn học"): màn hình 1200–1359px thu hẹp khoảng cách để không tràn nút Đăng nhập */
@media (min-width: 1200px) and (max-width: 1359px) {
   .nav-item {
      padding: 0 8px;
      font-size: 13.5px;
   }
}