/* Học viện · nhóm "Tiếng Trung" (tiengtrung) — 24/10/2026. CSS tự viết, dựng lại cảm giác của website trung tâm tiếng Trung tham khảo
   (nền kem ấm, đỏ son + xanh ngọc, thẻ bo 16px, tiêu đề đậm có vạch đỏ ngắn), không chép mã của trang mẫu.
   Biến: --ac (màu nhấn do trung tâm chọn, mặc định đỏ #D7262E), --ink (chữ tiêu đề). Tiền tố tt- dùng chung cho đầu/chân trang và trang con. */
.ac-fam-tiengtrung{--tt-red:var(--ac);--tt-red-d:var(--ac-d);--tt-red-s:var(--ac-s);--tt-teal:#2b8a86;--tt-teal-d:#22706d;--tt-gold:#ffd45c;
  --tt-ink:var(--ink,#1c1c24);--tt-text:#4b4f59;--tt-muted:#7d818b;--tt-line:#efe4df;--tt-bg:#fffdfc;--tt-cream:#fff6f3;--tt-cream2:#fdeeea;
  --tt-pink:#fdeeee;--tt-mint:#e8f4f1;--tt-sand:#fff3e3;--tt-sky:#edf2fb;--tt-r:16px;--tt-shadow:0 2px 12px rgba(80,40,30,.06);--tt-shadow2:0 16px 40px rgba(80,40,30,.12);
  --tt-font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;--tt-cjk:"Ma Shan Zheng","KaiTi","STKaiti","Kaiti SC","Noto Serif SC",serif}
body.ac-fam-tiengtrung{background:var(--tt-bg);color:var(--tt-text);font:16px/1.6 var(--tt-font);overflow-x:hidden}
.ac-fam-tiengtrung h1,.ac-fam-tiengtrung h2,.ac-fam-tiengtrung h3,.ac-fam-tiengtrung h4{font-family:var(--tt-font);color:var(--tt-ink)}
.ac-fam-tiengtrung em{font-style:normal;color:var(--tt-red)}
.ac-fam-tiengtrung :focus-visible{outline:2px solid var(--tt-red);outline-offset:2px}
.tt-wrap{max-width:1440px;margin:0 auto;padding:0 44px}
.tt-cjk{font-family:var(--tt-cjk);font-weight:400;line-height:1}

/* ---------- nút ---------- */
.tt-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 24px;border-radius:8px;border:0;background:var(--tt-red);color:#fff!important;
  font:600 16px/1.4 var(--tt-font);cursor:pointer;box-shadow:0 4px 12px var(--tt-red-s);transition:background .2s,translate .2s,box-shadow .2s;text-align:center}
.tt-btn:hover{background:var(--tt-red-d);translate:0 -2px;box-shadow:0 10px 22px var(--tt-red-s)}
.tt-btn svg{width:18px;height:18px;flex:none}
.tt-btn--sm{min-height:42px;padding:8px 20px;font-size:15px}
.tt-btn--teal{background:var(--tt-teal);box-shadow:0 4px 12px rgba(43,138,134,.22)}
.tt-btn--teal:hover{background:var(--tt-teal-d)}
.tt-btn--pill{border-radius:40px;min-height:60px;padding:14px 34px;font-size:19px;box-shadow:0 8px 20px var(--tt-red-s)}
.tt-btn--white{background:#fff;color:var(--tt-red)!important;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.tt-btn--white:hover{background:#fff7f2}
.tt-btn--ghost{background:transparent;border:2px solid rgba(255,255,255,.7);box-shadow:none}
.tt-btn--ghost:hover{background:rgba(255,255,255,.14);box-shadow:none}
.tt-btn--line{background:#fff;color:var(--tt-red)!important;border:1.5px solid var(--tt-red);box-shadow:none}
.tt-btn--line:hover{background:var(--tt-red);color:#fff!important}
.tt-arrow{width:16px;height:16px;flex:none;transition:translate .2s}
a:hover>.tt-arrow,button:hover>.tt-arrow{translate:3px 0}
.tt-link{display:inline-flex;align-items:center;gap:6px;color:var(--tt-red)!important;font-weight:600}
.tt-link:hover{text-decoration:underline}

/* ---------- khối & tiêu đề khối ---------- */
.tt-sec{padding:64px 0}
.tt-sec--cream{background:var(--tt-cream)}
.tt-title{margin:0 0 30px}
.tt-title h2{font-size:40px;line-height:1.2;font-weight:800;margin:0;letter-spacing:-.01em}
.tt-title h2::after{content:"";display:block;width:48px;height:3px;border-radius:2px;background:var(--tt-red);margin-top:14px}
.tt-title.is-center{text-align:center}
.tt-title.is-center h2::after{margin-left:auto;margin-right:auto}
.tt-title p{margin:14px 0 0;color:var(--tt-text);font-size:17px}
.tt-title--row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tt-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:30px;background:var(--tt-cream2);color:var(--tt-red);font-size:14px;font-weight:600;line-height:1.5}
.tt-empty{text-align:center;color:var(--tt-muted);background:#fff;border:1px dashed #e4d6d0;border-radius:var(--tt-r);padding:22px;margin:0}

/* ---------- đầu trang ---------- */
.tt-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #f1ebe8;transition:box-shadow .25s}
.tt-head.is-scrolled{box-shadow:0 6px 24px rgba(60,30,20,.08)}
.tt-head__in{display:flex;align-items:center;gap:24px;min-height:84px}
.tt-logo{display:inline-flex;align-items:center;gap:10px;flex:none;color:var(--tt-ink)!important}
.tt-logo img{height:58px;width:auto;max-width:180px;object-fit:contain}
.tt-logo b{font-size:19px;font-weight:800;line-height:1.15;max-width:220px}
.tt-nav{flex:1;display:flex;justify-content:center;align-items:center;gap:6px 34px;flex-wrap:wrap}
.tt-nav>a{position:relative;padding:8px 0;font-size:17px;font-weight:600;color:var(--tt-ink);transition:color .2s;white-space:nowrap}
.tt-nav>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--tt-red);transform:scaleX(0);transition:transform .25s}
.tt-nav>a:hover,.tt-nav>a.is-on{color:var(--tt-red)}
.tt-nav>a.is-on::after,.tt-nav>a:hover::after{transform:scaleX(1)}
.tt-nav__extra{display:none}
.tt-head__act{display:flex;align-items:center;gap:14px;flex:none}
.tt-head__login{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--tt-ink)}
.tt-head__login svg{width:22px;height:22px}
.tt-head__login:hover{color:var(--tt-red)}
.tt-head__cta.is-on{background:var(--tt-red-d)}
.tt-burger{display:none;width:44px;height:44px;border:1px solid var(--tt-line);border-radius:10px;background:#fff;cursor:pointer;padding:0 11px;flex-direction:column;justify-content:center;gap:5px}
.tt-burger i{display:block;height:2px;border-radius:2px;background:var(--tt-ink);transition:transform .25s,opacity .25s}
.tt-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tt-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.tt-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- chân trang ---------- */
.tt-foot{background:#fbfbfa;border-top:1px solid #efeae7;color:var(--tt-text);font-size:15px}
.tt-foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-top:44px;padding-bottom:28px}
.tt-logo--foot img{height:68px;max-width:200px}
.tt-foot__brand h3{margin:14px 0 10px;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.35}
.tt-foot__brand p{margin:0 0 12px;max-width:560px}
.tt-foot__info{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tt-foot__info li{display:flex;gap:8px;align-items:flex-start}
.tt-foot__info svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--tt-red)}
.tt-foot__info a:hover{color:var(--tt-red)}
.tt-foot__info b{color:var(--tt-ink)}
.tt-foot__social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.tt-foot__social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #ece4e0;color:var(--tt-ink);transition:background .2s,color .2s,border-color .2s}
.tt-foot__social a:hover{background:var(--tt-red);border-color:var(--tt-red);color:#fff}
.tt-foot__social svg{width:18px;height:18px}
.tt-foot__col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.tt-foot__col h4{margin:4px 0 8px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.tt-foot__col a{transition:color .2s}
.tt-foot__col a:hover{color:var(--tt-red)}
.tt-foot__scene{position:relative;min-height:130px;overflow:hidden}
.tt-foot__art{position:absolute;bottom:0;width:300px;height:150px;pointer-events:none}
.tt-foot__art--l{left:0}
.tt-foot__art--r{right:0}
.tt-foot__bottom{position:relative;text-align:center;padding-top:14px;padding-bottom:22px}
.tt-foot__vals{list-style:none;margin:0 0 14px;padding:0;display:flex;justify-content:center;gap:12px 36px;flex-wrap:wrap}
.tt-foot__vals li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--tt-text)}
.tt-foot__vals svg{width:22px;height:22px}
.tt-foot__vals li:nth-child(1) svg{color:var(--tt-teal)}
.tt-foot__vals li:nth-child(2) svg{color:var(--tt-teal-d)}
.tt-foot__vals li:nth-child(3) svg{color:#e35d63}
.tt-foot__copy{margin:0;font-size:13px;color:var(--tt-muted)}

/* ---------- màn hình nhỏ ---------- */
@media (max-width:1240px){
  .tt-nav{gap:6px 22px}
  .tt-nav>a{font-size:16px}
  .tt-head__login span{display:none}
}
@media (max-width:1100px){
  .tt-wrap{padding:0 24px}
  .tt-burger{display:inline-flex}
  .tt-head__in{min-height:72px;gap:14px}
  .tt-logo img{height:48px}
  .tt-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--tt-line);box-shadow:0 18px 30px rgba(60,30,20,.1);padding:8px 24px 18px;max-height:calc(100vh - 72px);overflow:auto}
  .tt-nav.is-open{display:flex}
  .tt-nav>a{padding:13px 0;border-bottom:1px solid #f4eeeb}
  .tt-nav>a::after{display:none}
  .tt-nav__extra{display:flex;gap:12px;align-items:center;justify-content:space-between;padding-top:14px}
  .tt-nav__extra>a:first-child{font-weight:600;color:var(--tt-ink)}
  .tt-head__act{margin-left:auto}
  .tt-sec{padding:52px 0}
  .tt-title h2{font-size:32px}
  .tt-foot__grid{grid-template-columns:1fr 1fr;gap:30px}
  .tt-foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  .tt-wrap{padding:0 16px}
  .tt-nav{padding:6px 16px 16px}
  .tt-head__cta{display:none}
  .tt-head__login{width:44px;height:44px;justify-content:center;border:1px solid var(--tt-line);border-radius:10px}
  .tt-logo img{height:44px;max-width:150px}
  .tt-logo b{font-size:16px;max-width:150px}
  .tt-sec{padding:44px 0}
  .tt-title{margin-bottom:22px}
  .tt-title h2{font-size:27px}
  .tt-btn--pill{min-height:54px;font-size:17px;padding:12px 26px}
  .tt-foot__art{width:190px;height:95px;opacity:.75}
  .tt-foot__scene{min-height:150px}
  .tt-foot__vals{gap:10px 18px}
}
@media (max-width:420px){
  .tt-foot__grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Khớp mẫu 26/10/2026 — đo lại trang mẫu ở 1440/390 (getComputedStyle) rồi viết lại bằng CSS riêng:
   chữ đen #1c1c24, chữ phụ #5b5f6b, viền #eee4e2, nền #fffdfc / kem #fff6f3, dòng 1.5; tiêu đề khối 34px/700 có vạch đỏ 48×3;
   đầu trang 84px viền dưới mảnh, menu 17px/500 cách 42px; nút đỏ 46px bo 8; chân trang 1.6fr/1fr/1fr, chữ 14.5px.
   ========================================================================== */
.ac-fam-tiengtrung{--tt-ink:#1c1c24;--tt-text:#5b5f6b;--tt-muted:#5b5f6b;--tt-line:#eee4e2;--tt-bg:#fffdfc;--tt-cream:#fff6f3;--tt-cream2:#fde8e7;
  --tt-teal-d:#22746f;--tt-mint:#eaf5f3;--tt-sand:#fdf4e6;--tt-sky:#eaf2fa;--tt-shadow:0 2px 10px rgba(80,40,30,.05);--tt-shadow-h:0 12px 26px rgba(80,40,30,.1);
  --tt-red-s:color-mix(in srgb,var(--ac) 25%,transparent);--tt-red-s2:color-mix(in srgb,var(--ac) 28%,transparent)}
body.ac-fam-tiengtrung{color:var(--tt-ink);line-height:1.5;-webkit-font-smoothing:antialiased}
.ac-fam-tiengtrung .tt-btn{font-family:var(--tt-font);font-weight:600;line-height:1.5;box-shadow:0 4px 12px var(--tt-red-s);transition:background .15s,translate .15s,box-shadow .15s}
.ac-fam-tiengtrung .tt-btn:hover{translate:0 0;box-shadow:0 4px 12px var(--tt-red-s)}
.ac-fam-tiengtrung .tt-btn--pill{gap:14px;box-shadow:0 8px 20px var(--tt-red-s2)}
.ac-fam-tiengtrung .tt-btn--pill:hover{translate:0 -1px}
.ac-fam-tiengtrung .tt-btn--teal{box-shadow:0 4px 12px rgba(43,138,134,.22)}
.ac-fam-tiengtrung .tt-btn--line,.ac-fam-tiengtrung .tt-btn--ghost{box-shadow:none}
.ac-fam-tiengtrung .tt-link{font-size:16px;font-weight:600;gap:4px}
.ac-fam-tiengtrung .tt-link .tt-arrow{width:16px;height:16px}
.tt-title h2{position:relative;line-height:1.25;font-weight:700;letter-spacing:0;padding-bottom:12px}
.tt-title h2::after{position:absolute;left:0;bottom:0;margin:0;width:48px;height:3px;border-radius:2px}
.tt-title.is-center h2::after{left:50%;translate:-50% 0}
.tt-title--row{align-items:flex-end;gap:16px}
.tt-title{margin:0 0 26px}
.tt-pill{background:var(--tt-cream2);font-size:14px;font-weight:600;line-height:1.5;padding:6px 14px}
.tt-head{border-bottom:1px solid #f3eceb;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tt-head.is-scrolled{box-shadow:none}
.tt-head__login{display:none}
.tt-nav>a{color:#2c2f38}
.tt-head__cta.tt-btn:hover{translate:0 0}
.tt-foot{position:relative;overflow:hidden;margin-top:30px;padding-top:40px;border-top:1px solid #f0ebe9;color:#4b4f59;font-size:14.5px;line-height:1.5}
.tt-foot__grid{padding-top:0;padding-bottom:0}
.tt-foot__brand .tt-logo{margin-bottom:12px}
.tt-foot__brand h3{margin:0 0 14px;font-size:16px;line-height:1.5;letter-spacing:.3px}
.tt-foot__brand p{margin:0 0 8px}
.tt-foot__info{gap:8px}
.tt-foot__info li{gap:6px}
.tt-foot__info svg{width:16px;height:16px;margin-top:3px}
.tt-foot__col{gap:8px}
.tt-foot__col h4{margin:0 0 6px;font-size:16px;line-height:1.5;letter-spacing:.3px}
.tt-foot__col a{color:#4b4f59}
.tt-foot__scene{position:static;min-height:0;overflow:visible}
.tt-foot__art{bottom:0;height:150px;opacity:.8}
.tt-foot__bottom{padding-top:0;padding-bottom:0}
.tt-foot__vals{margin:34px 0 0}
.tt-foot__vals li{gap:4px;font-size:13px;font-weight:400;color:#5d616b}
.tt-foot__vals svg{width:24px;height:24px}
.tt-foot__copy{position:relative;padding:18px 0 26px;font-size:13px;color:#8a8d95}
/* màn hình lớn (≥1101px): số đo đúng trang mẫu ở 1440 */
@media (min-width:1101px){
  .tt-sec{padding:56px 0}
  .tt-title h2{font-size:34px}
  .tt-head__in{min-height:84px}
  .tt-logo img{height:70px;max-width:200px}
  .tt-nav{gap:6px 42px}
  .tt-nav>a{font-size:17px;font-weight:500;line-height:1.5}
  .tt-nav>a.is-on{font-weight:600}
  .tt-nav>a::after{display:none;bottom:-2px;height:3px}
  .tt-nav>a.is-on::after{display:block;transform:none}
  .tt-head__cta.tt-btn{min-height:46px;padding:11px 24px;font-size:16px;gap:10px}
  .tt-head__cta.tt-btn svg{width:18px;height:18px}
  .ac-fam-tiengtrung .tt-btn{min-height:46px;padding:11px 24px;font-size:16px}
  .ac-fam-tiengtrung .tt-btn--sm{min-height:42px;padding:9px 20px;font-size:15px}
  .ac-fam-tiengtrung .tt-btn--pill{min-height:62px;padding:16px 34px;font-size:20px}
  .ac-fam-tiengtrung .tt-btn svg,.ac-fam-tiengtrung .tt-btn .tt-arrow{width:20px;height:20px}
  .ac-fam-tiengtrung .tt-btn--sm svg,.ac-fam-tiengtrung .tt-btn--sm .tt-arrow{width:18px;height:18px}
  .tt-logo--foot img{height:76px;max-width:220px}
  .tt-foot__grid{grid-template-columns:1.6fr 1fr 1fr;gap:40px}
  .tt-foot__vals{gap:12px 44px}
}
@media (min-width:1101px) and (max-width:1240px){
  .tt-nav{gap:6px 24px}
  .tt-nav>a{font-size:16px}
}
/* màn hình nhỏ: như trang mẫu ≤980px (thanh 68px, logo 54px, nút "Góc học tập" thu nhỏ cạnh nút menu) */
@media (max-width:1100px){
  .tt-wrap{padding:0 16px}
  .tt-head__in{min-height:68px;gap:10px}
  .tt-logo img{height:54px}
  .tt-nav{padding:6px 16px 14px;box-shadow:0 10px 20px rgba(0,0,0,.06);border-bottom:1px solid #eee}
  .tt-nav>a{padding:12px 0;font-size:17px;font-weight:500;border-bottom-color:#f4eeee}
  .tt-nav>a.is-on{color:var(--tt-red);font-weight:600}
  .tt-head__cta{display:inline-flex}
  .tt-head__cta.tt-btn{min-height:0;padding:9px 14px;font-size:14px;gap:7px}
  .tt-head__cta.tt-btn svg{width:15px;height:15px}
  .tt-burger{border:0;background:transparent;width:40px;height:40px;padding:0 8px}
  .tt-burger i{height:3px;background:#333}
  .tt-sec{padding:40px 0}
  .tt-title h2{font-size:26px}
  .tt-title{margin-bottom:26px}
  .tt-foot__grid{grid-template-columns:1fr;gap:22px}
  .tt-foot__brand{grid-column:auto}
  .tt-foot__art{opacity:.3}
  .tt-foot__vals{gap:12px 22px}
  .ac-fam-tiengtrung .tt-btn--pill{font-size:17px;padding:13px 26px;min-height:0}
}
@media (max-width:640px){
  .tt-logo img{height:54px;max-width:150px}
  .tt-foot__art{width:300px;height:150px}
}