/* ==========================================================================
   LUYỆN CHỮ ĐẸP TRÂM ANH — app.css (production stylesheet)
   Source of truth: plan/03-design-system-v2.md + plan/tokens-v2.css (approved).
   Sections 1–26 = the approved design system (kept verbatim except where marked
   "app:"), sections 27+ = shell + components added for the live site.
   Prefix: .ta-*   ·   Breakpoints: 600 (sm) · 768 (md) · 960 (lg) · 1280 (xl)
   Page-specific CSS lives in /assets/css/pages/<page>.css (scoped under .p-<page>).
   ========================================================================== */

/* app: web fonts are NOT imported here (an @import inside this file is only found after the whole file has
   downloaded). Every page loads them with <link rel="stylesheet"> in <head>, next to this file:
   https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&family=Lora:ital,wght@0,600;0,700;1,600&family=Playfair+Display:wght@700;800;900&family=Great+Vibes&family=Dancing+Script:wght@600;700&display=swap&subset=vietnamese
   (tools/sync-head.mjs keeps that tag and the modulepreload list identical on every page). */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  color-scheme: light;

  /* Brand reds (sampled from the TA logo: #B00000 shadow → #E8000B highlight) */
  --ta-red:          #D22322;   /* logo red: seal, active nav, hotline, icons */
  --ta-red-hi:       #E8262C;   /* flash-sale panel top / highlights */
  --ta-red-lo:       #C3161D;   /* flash-sale panel bottom */
  --ta-buy:          #E0262D;   /* "Mua ngay" */
  --ta-buy-hover:    #C81E25;
  --ta-maroon-500:   #A3151C;   /* serif title accent, links on cream */
  --ta-maroon-600:   #8E1A1E;   /* header base */
  --ta-maroon-700:   #771419;
  --ta-maroon-800:   #5F0F13;   /* footer, feature band */
  --ta-maroon-900:   #430A0D;   /* announcement bar */
  --ta-rose-50:      #FFF3F2;
  --ta-rose-100:     #FFE3E1;
  --ta-rose-200:     #FECACA;

  /* Golds */
  --ta-sun:          #FFB703;   /* welcome bar, search button */
  --ta-sun-600:      #E9A400;
  --ta-yellow:       #FFD60A;   /* countdown boxes */
  --ta-gold:         #ECB43A;   /* footer titles, kickers on maroon */
  --ta-gold-300:     #F7DB94;
  --ta-gold-500:     #D4A24C;   /* ornaments, hairlines */
  --ta-gold-700:     #946417;   /* gold text on cream */
  --ta-cream:        #FBF4E8;
  --ta-cream-2:      #F3E0BC;   /* benefits panels */

  /* Secondary "mực xanh" ink (commerce secondary: prices, Thêm giỏ, cart FAB) */
  --ta-ink:          #0A6F8F;
  --ta-ink-700:      #085A75;
  --ta-ink-50:       #E8F4F8;
  --ta-ink-100:      #CFE8F0;
  /* "Mực tím" violet (school ink) — Gợi ý cho bạn header, violet combo */
  --ta-violet:       #7C3AED;
  --ta-violet-2:     #9333EA;   /* app: was #A855F7 (3.96:1 under white text) */
  --ta-violet-3:     #C084FC;

  /* Semantic */
  --ta-green:        #16A34A;   /* fills, dots, icons only */
  --ta-green-700:    #15803D;   /* app: green TEXT (5.0:1 on white) */
  --ta-green-50:     #ECFDF3;
  --ta-amber:        #D97706;   /* icons / fills; text uses --ta-amber-700 */
  --ta-amber-700:    #B45309;
  --ta-buy-text:     #C81E25;   /* app: small red text on cream/paper (≥ 5:1); --ta-buy stays for buttons */
  --ta-amber-50:     #FFF7E6;
  --ta-danger:       #DC2626;

  /* Neutrals (warm) */
  --ta-text:         #1C1517;
  --ta-text-2:       #3D3437;
  --ta-lead:         #55505A;   /* grey half of two-tone titles */
  --ta-muted:        #6E6468;
  --ta-muted-2:      #736A6D;   /* app: was #9C9296 (3.0:1); now ≥ 4.5:1 on white, paper and cream */
  --ta-line:         #EDE4DA;
  --ta-line-2:       #E2D6C8;
  --ta-card:         #FFFFFF;
  --ta-paper:        #F6EFE6;
  --ta-paper-2:      #EFE5D8;

  /* Typography */
  --ta-font-ui:      "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ta-font-title:   "Lora", Cambria, "Palatino Linotype", "Times New Roman", serif;
  --ta-font-display: "Playfair Display", "Lora", Cambria, serif;
  --ta-font-script:  "Great Vibes", "Dancing Script", cursive;
  --ta-font-hand:    "Dancing Script", "Great Vibes", cursive;

  --ta-fs-micro: 10px;
  --ta-fs-2xs:   11px;
  --ta-fs-xs:    12px;
  --ta-fs-sm:    13px;
  --ta-fs-base:  15px;
  --ta-fs-md:    16px;
  --ta-fs-lg:    18px;
  --ta-fs-xl:    20px;
  --ta-fs-title: clamp(22px, 1.2rem + 0.9vw, 32px);
  --ta-fs-hero:  clamp(30px, 1rem + 3.6vw, 66px);

  /* Spacing */
  --ta-s1: 4px;  --ta-s2: 8px;  --ta-s3: 12px; --ta-s4: 16px; --ta-s5: 20px;
  --ta-s6: 24px; --ta-s7: 32px; --ta-s8: 40px; --ta-s9: 48px; --ta-s10: 64px;
  --ta-gutter: 16px;
  --ta-container: 1280px;
  --ta-sec-gap: 40px;           /* vertical rhythm between home sections */

  /* Radii */
  --ta-r-xs: 6px; --ta-r-sm: 8px; --ta-r-md: 10px; --ta-r-lg: 12px;
  --ta-r-xl: 16px; --ta-r-2xl: 20px; --ta-r-pill: 999px;

  /* Shadows */
  --ta-sh-card:   0 5px 18px rgba(15,23,42,.08);
  --ta-sh-card-h: 0 12px 28px rgba(15,23,42,.13);
  --ta-sh-raise:  0 10px 22px rgba(0,0,0,.10);
  --ta-sh-pop:    0 16px 34px rgba(0,0,0,.14);
  --ta-sh-flash:  0 12px 30px rgba(210,35,34,.36);
  --ta-sh-dock:   0 12px 26px rgba(0,0,0,.22);
  --ta-sh-gold:   0 6px 16px rgba(148,100,23,.35);
  --ta-sh-btn:    0 6px 14px rgba(224,38,45,.22);

  /* Gradients */
  --ta-g-header:  linear-gradient(90deg, #6E1216 0%, #8E1A1E 22%, #93191F 50%, #8E1A1E 78%, #6E1216 100%);
  --ta-g-topbar:  linear-gradient(90deg, #3A080B 0%, #561016 50%, #3A080B 100%);
  --ta-g-flash:   linear-gradient(180deg, var(--ta-red-hi) 0%, var(--ta-red-lo) 100%);
  --ta-g-gold:    linear-gradient(180deg, #FFE7A3 0%, #F4C24D 42%, #D9961C 100%);
  --ta-g-gold-text: linear-gradient(180deg, #F2C451 0%, #D99A24 55%, #A8701A 100%);
  --ta-g-orb:     radial-gradient(circle at 35% 28%, #FFE9A6 0%, #FFC83A 34%, #F2A400 68%, #C97F00 100%);
  --ta-g-sold:    linear-gradient(90deg, #E61D2B 0%, #F97316 45%, #F5AF19 100%);
  --ta-g-violet:  linear-gradient(90deg, #6D28D9 0%, #7C3AED 55%, #9333EA 100%); /* app: white text stays ≥ 5:1 */
  --ta-g-maroon-card: linear-gradient(115deg, rgba(48,8,12,.55) 0%, rgba(48,8,12,.18) 60%, rgba(48,8,12,0) 100%);
  --ta-g-combo-violet: linear-gradient(140deg, #5B21B6 0%, #9333EA 48%, #DB2777 100%);
  --ta-g-combo-sunset: linear-gradient(140deg, #F59E0B 0%, #F97316 40%, #E11D48 100%);
  --ta-g-combo-ocean:  linear-gradient(140deg, #1E40AF 0%, #2563EB 45%, #06B6D4 100%);
  --ta-g-combo-tet:    linear-gradient(140deg, #7F1D1D 0%, #C81E25 45%, #F59E0B 100%);

  /* Textures (pure inline SVG, no image assets) */
  --ta-tx-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23cfb48f' stroke-width='1' stroke-opacity='.30'%3E%3Cpath d='M0 6q6-5 12 0t12 0 12 0 12 0'/%3E%3Cpath d='M-6 18q6-5 12 0t12 0 12 0 12 0 12 0'/%3E%3C/g%3E%3C/svg%3E");
  --ta-tx-seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath stroke-opacity='.16' d='M0 18a18 18 0 0 1 36 0M6 18a12 12 0 0 1 24 0M12 18a6 6 0 0 1 12 0'/%3E%3Cpath stroke-opacity='.10' d='M-18 9a18 18 0 0 1 36 0M18 9a18 18 0 0 1 36 0'/%3E%3C/g%3E%3C/svg%3E");
  --ta-tx-gold-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23f2c451' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M22 2l20 20-20 20L2 22z'/%3E%3Ccircle cx='22' cy='22' r='5'/%3E%3C/g%3E%3C/svg%3E");
  --ta-ic-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cg fill='none' stroke='%23c9a04b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6h146c14 0 21 10 13 17-6 5-13-1-9-6'/%3E%3Cpath d='M6 6v84c0 14 10 21 17 13 5-6-1-13-6-9'/%3E%3Cpath d='M18 18c32 0 46 8 54 22 6 10 18 12 24 4 5-7-2-15-9-12-6 3-4 11 2 10'/%3E%3Cpath d='M18 18c0 22 6 33 18 39 9 4 11 15 4 20-7 4-14-3-10-9'/%3E%3Cpath d='M30 30c14 2 20 8 24 18M30 30c2 12 6 18 14 22'/%3E%3C/g%3E%3Cg fill='%23c9a04b'%3E%3Ccircle cx='18' cy='18' r='3.2'/%3E%3Cpath d='M78 14c9-7 21-7 29 0-8 6-20 6-29 0z' opacity='.75'/%3E%3Cpath d='M14 76c-7-9-7-21 0-29 6 8 6 20 0 29z' opacity='.75'/%3E%3Ccircle cx='120' cy='14' r='2'/%3E%3Ccircle cx='14' cy='104' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --ta-ic-blossom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23f9a8c4'%3E%3Ccircle cx='20' cy='9.5' r='7.5'/%3E%3Ccircle cx='30' cy='16.8' r='7.5'/%3E%3Ccircle cx='26.2' cy='28.6' r='7.5'/%3E%3Ccircle cx='13.8' cy='28.6' r='7.5'/%3E%3Ccircle cx='10' cy='16.8' r='7.5'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23ec4899' opacity='.85'/%3E%3Ccircle cx='20' cy='20' r='2.2' fill='%23fde68a'/%3E%3C/svg%3E");
  --ta-ic-blossom-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fcd34d'%3E%3Ccircle cx='20' cy='9.5' r='7.5'/%3E%3Ccircle cx='30' cy='16.8' r='7.5'/%3E%3Ccircle cx='26.2' cy='28.6' r='7.5'/%3E%3Ccircle cx='13.8' cy='28.6' r='7.5'/%3E%3Ccircle cx='10' cy='16.8' r='7.5'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23f59e0b'/%3E%3Ccircle cx='20' cy='20' r='2.2' fill='%23b45309'/%3E%3C/svg%3E");
  --ta-ic-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M2 10C10 0 26 0 38 10 26 20 10 20 2 10z' fill='%2386c58a'/%3E%3Cpath d='M4 10h32' stroke='%23fff' stroke-opacity='.6'/%3E%3C/svg%3E");
  --ta-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ta-ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* Motion */
  --ta-ease: cubic-bezier(.2,.8,.2,1);
  --ta-ease-out: cubic-bezier(.16,1,.3,1);
  --ta-t-fast: .15s;
  --ta-t-med: .24s;
  --ta-t-slow: .6s;
  --ta-marquee-dur: 40s;
  --ta-ticker-dur: 24s;

  /* Layers */
  --ta-z-header: 1000;
  --ta-z-mega: 1010;
  --ta-z-dock: 900;
  --ta-z-fab: 910;
  --ta-z-toast: 950;
  --ta-z-drawer: 1100;
  --ta-z-modal: 1200;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  background-color:var(--ta-paper);
  background-image:var(--ta-tx-paper);
  background-size:48px 24px;
  scroll-behavior:smooth;
  overflow-x:clip;
}
body{
  margin:0; min-width:0; max-width:100%; overflow-x:clip;
  font-family:var(--ta-font-ui); font-size:var(--ta-fs-base); line-height:1.6;
  color:var(--ta-text); background:transparent;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3,h4{ margin:0; line-height:1.25; color:var(--ta-text); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
:focus-visible{ outline:3px solid #E0262D; outline-offset:2px; border-radius:6px; } /* app: opaque (4.7:1 on white) */
/* dark surfaces (topbar, maroon header, nav drawer head, footer, contact dock): light ring */
.ta-topbar :focus-visible,.ta-masthead .ta-header :focus-visible,.ta-slimbar :focus-visible,.ta-footer :focus-visible,.ta-pagehead :focus-visible{ outline-color:#FFD66B; }
.ta-acct :focus-visible,.ta-suggest :focus-visible{ outline-color:#E0262D; } /* white pop-ups inside the header */
/* other coloured panels (≥ 3:1 against the panel): sun welcome bar → maroon (7.7:1); red flash gradient → white
   (4.4–4.7:1); maroon bands / help & guide cards → light gold (5.8–11:1). White cards inside keep the red ring. */
.ta-welcome :focus-visible{ outline-color:#5F0F13; }
.ta-flash__all:focus-visible,.shop-flash :focus-visible{ outline-color:#fff; }
.ta-band :focus-visible,.shop-help__card :focus-visible,.ta-guide__card :focus-visible{ outline-color:#FFD66B; }
.ta-flash .ta-card :focus-visible,.ta-band .ta-card :focus-visible{ outline-color:#E0262D; }
/* Playfair/Lora default to old-style figures: dates, prices and indices must sit on the baseline */
html{ font-variant-numeric:lining-nums; }
::selection{ background:#FFE08A; color:var(--ta-text); }

.ta-paper{ background-color:var(--ta-paper); background-image:var(--ta-tx-paper); background-size:48px 24px; }
.ta-container{ width:100%; max-width:var(--ta-container); margin-inline:auto; padding-inline:var(--ta-gutter); min-width:0; }
.ta-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ta-skip{ position:absolute; left:-999px; top:8px; z-index:2000; background:var(--ta-text); color:#fff; padding:8px 12px; border-radius:8px; }
.ta-skip:focus{ left:12px; }
.ta-ico{ width:18px; height:18px; flex:0 0 auto; }
.ta-muted{ color:var(--ta-muted); }
.ta-nowrap{ white-space:nowrap; }
.ta-num{ font-variant-numeric:lining-nums tabular-nums; }

/* --------------------------------------------------------------------------
   3. ANNOUNCEMENT BAR (marquee)
   -------------------------------------------------------------------------- */
.ta-topbar{
  background:var(--ta-tx-seigaiha), var(--ta-g-topbar);
  background-size:36px 18px, auto;
  color:#fff; border-bottom:1px solid rgba(255,255,255,.12);
}
.ta-topbar__row{ display:flex; align-items:center; justify-content:center; gap:10px; padding-block:5px; min-width:0; }
.ta-topbar__pill{
  flex:0 0 auto; display:inline-flex; align-items:center; padding:2px 9px;
  border-radius:var(--ta-r-pill); background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.28);
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#FFE7A3;
}
.ta-marquee{ position:relative; overflow:hidden; white-space:nowrap; min-width:0; max-width:min(860px, 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
.ta-marquee__track{ display:flex; width:max-content; animation:taMarquee var(--ta-marquee-dur) linear infinite; will-change:transform; }
.ta-marquee:hover .ta-marquee__track,.ta-marquee:focus-within .ta-marquee__track,.ta-topbar.is-paused .ta-marquee__track{ animation-play-state:paused; }
.ta-marquee__group{ flex:0 0 auto; padding-right:48px; font-size:11.5px; font-weight:700; letter-spacing:.01em; }
.ta-marquee__group b{ color:#FFD66B; font-weight:800; }
.ta-marquee__dot{ display:inline-block; width:4px; height:4px; margin:0 10px 2px; border-radius:50%; background:#FFD66B; vertical-align:middle; }
@keyframes taMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* --------------------------------------------------------------------------
   4. WELCOME BAR (yellow)
   -------------------------------------------------------------------------- */
.ta-welcome{ background:var(--ta-sun); color:var(--ta-text); border-bottom:1px solid rgba(60,20,0,.12); font-size:13px; }
.ta-welcome__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:7px; min-width:0; }
.ta-welcome__left{ display:flex; align-items:center; gap:10px; min-width:0; }
.ta-welcome__msg{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ta-welcome__msg .ta-ico{ display:inline-block; vertical-align:-3px; margin-right:6px; opacity:.6; }
.ta-welcome__phone{ display:inline-flex; align-items:center; gap:6px; font-weight:900; white-space:nowrap; }
.ta-welcome__phone .ta-ico{ width:16px; height:16px; }
.ta-welcome__right{ display:none; align-items:center; gap:14px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.ta-welcome__right a:hover{ text-decoration:underline; }
@media (min-width:768px){ .ta-welcome__right{ display:flex; } }
@media (max-width:420px){ .ta-welcome{ font-size:12px; } .ta-welcome__msg .ta-ico{ display:none; } }
/* phones: the full greeting wraps to two lines instead of being cut off */
@media (max-width:599px){ .ta-welcome__left{ flex:1 1 auto; justify-content:space-between; } .ta-welcome__msg{ white-space:normal; line-height:1.3; text-wrap:balance; } }

/* --------------------------------------------------------------------------
   5. HEADER (maroon) · brand · search · icon actions
   -------------------------------------------------------------------------- */
.ta-header{
  position:relative; color:#fff;
  background:var(--ta-tx-seigaiha), radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.07), transparent 60%), var(--ta-g-header);
  background-size:36px 18px, auto, auto;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);
}
.ta-header__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 20px; padding-block:12px; }
.ta-header.is-stuck{ position:sticky; top:0; z-index:var(--ta-z-header); box-shadow:0 10px 22px rgba(0,0,0,.18); }

.ta-brand{ display:flex; align-items:center; gap:12px; min-width:0; color:#fff; }
.ta-brand__mark{
  flex:0 0 auto; width:50px; height:50px; border-radius:50%; overflow:hidden; background:#fff;
  box-shadow:0 0 0 2px var(--ta-gold), 0 0 0 5px rgba(236,180,58,.22), 0 6px 14px rgba(0,0,0,.25);
}
.ta-brand__mark img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.ta-brand__text{ display:grid; min-width:0; line-height:1.05; }
.ta-brand__name{ font-family:var(--ta-font-display); font-weight:800; font-size:21px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.ta-brand__sub{ font-size:8.5px; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:#F7DB94; margin-top:4px; white-space:nowrap; }
.ta-brand__tag{ font-size:13px; font-weight:800; margin-top:5px; white-space:nowrap; }
@media (max-width:599px){
  .ta-brand{ gap:10px; }
  .ta-brand__mark{ width:44px; height:44px; }
  .ta-brand__text{ overflow:hidden; }
  .ta-brand__name{ font-size:18px; letter-spacing:.1em; }
  .ta-brand__sub{ font-size:7.5px; letter-spacing:.2em; overflow:hidden; text-overflow:ellipsis; }
  .ta-brand__tag{ font-size:12px; }
}
@media (max-width:400px){
  .ta-brand__sub{ display:none; }
  .ta-brand{ gap:8px; }
  .ta-brand__mark{ width:42px; height:42px; }
  .ta-brand__name{ font-size:16px; letter-spacing:.06em; }
  .ta-brand__tag{ font-size:11.5px; }
}

.ta-search{
  display:none; align-items:stretch; height:44px; width:100%; min-width:0;
  background:#fff; border:1px solid #d7d0c8; border-radius:var(--ta-r-sm); overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.ta-search input{ flex:1; min-width:0; border:0; outline:0; padding:0 14px; background:transparent; color:var(--ta-text); font-size:14px; }
.ta-search input::placeholder{ color:#8a8186; }
.ta-search button{ flex:0 0 auto; min-width:58px; border:0; background:var(--ta-sun); color:var(--ta-text); display:grid; place-items:center; transition:background var(--ta-t-fast); }
.ta-search button:hover{ background:var(--ta-sun-600); }
.ta-search:focus-within{ box-shadow:0 0 0 3px #FFD66B; }
.ta-search input:focus-visible{ outline:0; } /* the whole field shows the ring */

.ta-header__actions{ display:flex; align-items:center; gap:8px; }
@media (max-width:599px){ .ta-hbtn{ width:40px; height:40px; } }
@media (max-width:400px){ .ta-header__actions{ gap:6px; } .ta-hbtn{ width:38px; height:38px; } .ta-header__row{ gap:10px; } }
.ta-hbtn{
  position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--ta-r-md);
  background:#FFF6EC; border:1px solid #F5D9B5; color:var(--ta-maroon-600);
  transition:transform var(--ta-t-fast), background var(--ta-t-fast), box-shadow var(--ta-t-fast);
}
.ta-hbtn:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.18); }
.ta-hbtn .ta-ico{ width:19px; height:19px; }
.ta-hbtn__badge{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:var(--ta-r-pill);
  display:grid; place-items:center; background:var(--ta-buy); color:#fff; font-size:11px; font-weight:900; line-height:1;
  border:2px solid #fff; box-shadow:0 6px 12px rgba(0,0,0,.22);
}
.ta-hbtn__badge.is-bump{ animation:taBump .45s var(--ta-ease); }
@keyframes taBump{ 0%{transform:scale(1)} 35%{transform:scale(1.45)} 70%{transform:scale(.9)} 100%{transform:scale(1)} }

@media (min-width:960px){
  .ta-header__row{ grid-template-columns:270px minmax(0,1fr) auto; column-gap:26px; padding-block:12px; }
  .ta-search{ display:flex; }
  .ta-hbtn--search{ display:none; }
  .ta-header__actions{ gap:14px; }
}

/* Search suggestions dropdown */
.ta-suggest{ position:absolute; z-index:var(--ta-z-mega); background:#fff; border:1px solid var(--ta-line); border-radius:var(--ta-r-xl); box-shadow:var(--ta-sh-pop); overflow:hidden; color:var(--ta-text); }
.ta-suggest__item{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--ta-line); }
.ta-suggest__item:last-child{ border-bottom:0; }
.ta-suggest__item:hover,.ta-suggest__item[aria-selected="true"]{ background:var(--ta-cream); }
.ta-suggest__thumb{ width:44px; height:44px; flex:0 0 auto; border-radius:10px; overflow:hidden; border:1px solid var(--ta-line); }
.ta-suggest__name{ font-size:12.5px; font-weight:800; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ta-suggest__price{ font-size:13px; font-weight:800; color:var(--ta-ink); }
.ta-suggest__empty{ padding:14px; font-size:13px; color:var(--ta-muted); font-weight:600; }

/* --------------------------------------------------------------------------
   6. NAV BAR (white) · browse button · links · hotline · mega menu
   -------------------------------------------------------------------------- */
.ta-nav{ position:relative; background:#fff; border-bottom:1px solid rgba(40,10,10,.10); box-shadow:0 1px 0 rgba(255,255,255,.6); }
.ta-nav__row{ display:flex; align-items:stretch; min-height:48px; min-width:0; }
.ta-browse{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:12px; padding:0 14px 0 2px; margin-right:6px;
  border:0; background:transparent; color:var(--ta-text);
  font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.ta-browse:hover{ background:rgba(40,10,10,.05); }
.ta-burger{ position:relative; width:18px; height:2px; background:currentColor; border-radius:2px; box-shadow:0 6px 0 currentColor, 0 -6px 0 currentColor; }
.ta-browse__text{ display:none; white-space:nowrap; }
.ta-caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.55; }
.ta-browse .ta-caret{ display:none; }
.ta-nav__links{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:2px; list-style:none;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ta-nav__links::-webkit-scrollbar{ display:none; }
@media (max-width:959px){ .ta-nav__links{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); padding-right:28px; } }
.ta-nav__links a{
  position:relative; display:inline-flex; align-items:center; gap:6px; padding:12px 10px; white-space:nowrap;
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ta-text);
  transition:color var(--ta-t-fast);
}
.ta-nav__links a:hover{ color:var(--ta-red); }
.ta-nav__links a .ta-caret{ border-top-width:4px; border-left-width:3px; border-right-width:3px; opacity:.4; }
.ta-nav__links a.is-active{ color:var(--ta-red); }
.ta-nav__links a.is-active::after{ content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; border-radius:2px; background:currentColor; }
.ta-nav__links a.is-active .ta-caret{ opacity:.9; }
.ta-nav__hotline{
  display:none; flex:0 0 auto; align-items:center; gap:8px; margin-left:auto; padding:0 0 0 16px;
  border-left:1px solid rgba(40,10,10,.10); font-size:12px; font-weight:700; text-transform:uppercase; white-space:nowrap;
}
.ta-nav__hotline strong{ color:var(--ta-red); font-weight:900; letter-spacing:.02em; }
.ta-nav__hotline .ta-ico{ width:16px; height:16px; color:var(--ta-red); }
@media (min-width:960px){
  .ta-nav__row{ min-height:50px; }
  .ta-browse{ padding-right:20px; margin-right:14px; }
  .ta-browse__text,.ta-browse .ta-caret{ display:inline-block; }
  .ta-nav__links{ overflow:visible; }
  .ta-nav__hotline{ display:flex; }
}
@media (min-width:1200px){ .ta-nav__links{ gap:6px; } }

/* Mega menu (Duyệt danh mục) */
.ta-mega{
  position:absolute; left:var(--ta-gutter); top:calc(100% + 6px); z-index:var(--ta-z-mega);
  width:min(940px, calc(100% - 2 * var(--ta-gutter))); display:grid; grid-template-columns:1fr; gap:0;
  background:#fff; border:1px solid var(--ta-line); border-radius:var(--ta-r-xl); box-shadow:var(--ta-sh-pop); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s, transform .18s, visibility .18s;
}
.ta-mega.is-open,.ta-browse[aria-expanded="true"] + .ta-mega{ opacity:1; visibility:visible; transform:none; }
.ta-mega__list{ list-style:none; padding:8px; display:grid; gap:2px; }
.ta-mega__list a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--ta-r-md); font-size:13px; font-weight:700; }
.ta-mega__list a:hover,.ta-mega__list a.is-active{ background:var(--ta-cream); color:var(--ta-maroon-500); }
.ta-mega__icon{ width:30px; height:30px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; background:var(--ta-rose-50); color:var(--ta-red); }
.ta-mega__icon .ta-ico{ width:16px; height:16px; }
.ta-mega__count{ margin-left:auto; font-size:11px; font-weight:700; color:var(--ta-muted-2); }
.ta-mega__aside{ display:none; padding:18px; background:var(--ta-cream); border-left:1px solid var(--ta-line); }
@media (min-width:960px){ .ta-mega{ grid-template-columns:300px 1fr; } .ta-mega__aside{ display:block; } }

/* Mobile drawer (nav / cart) */
.ta-scrim{ position:fixed; inset:0; z-index:calc(var(--ta-z-drawer) - 1); background:rgba(25,6,8,.55); opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
.ta-scrim.is-open{ opacity:1; visibility:visible; }
.ta-drawer{
  position:fixed; top:0; bottom:0; z-index:var(--ta-z-drawer); width:min(400px, 92vw); display:flex; flex-direction:column;
  background:#fff; box-shadow:0 0 40px rgba(0,0,0,.25); transition:transform .28s var(--ta-ease-out);
}
.ta-drawer--right{ right:0; transform:translateX(105%); }
.ta-drawer--left{ left:0; transform:translateX(-105%); }
.ta-drawer--bottom{ top:auto; left:0; right:0; width:100%; max-height:86dvh; border-radius:20px 20px 0 0; transform:translateY(105%); }
.ta-drawer--bottom .ta-drawer__head{ border-radius:20px 20px 0 0; }
.ta-drawer.is-open{ transform:none; }
.ta-drawer__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; color:#fff;
  background:var(--ta-tx-seigaiha), var(--ta-g-header); background-size:36px 18px, auto; }
.ta-drawer__title{ font-size:15px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.ta-drawer__body{ flex:1; overflow:auto; padding:14px 16px; }
.ta-drawer__foot{ padding:14px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--ta-line); background:#fff; display:grid; gap:10px; }
.ta-drawer--demo{ position:relative; inset:auto; transform:none; width:100%; max-width:400px; height:auto; border-radius:var(--ta-r-xl); overflow:hidden; box-shadow:var(--ta-sh-pop); z-index:auto; }
.ta-iconbtn{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; }
.ta-iconbtn--light{ border-color:var(--ta-line); background:#fff; color:var(--ta-text); }

/* --------------------------------------------------------------------------
   7. HERO BANNER (maroon frame · cream lens · gold flourishes)
   -------------------------------------------------------------------------- */
.ta-hero{
  position:relative; overflow:hidden; isolation:isolate; color:var(--ta-text);
  background:var(--ta-tx-gold-lattice), radial-gradient(90% 120% at 50% 100%, #8E1A1E 0%, #6A1015 55%, #4E0B0F 100%);
  background-size:44px 44px, auto;
  padding:26px 0 54px;
}
.ta-hero__lens{
  position:absolute; z-index:-1; left:-46%; right:-46%; top:-34%; bottom:34px; border-radius:50%;
  background:radial-gradient(60% 70% at 50% 56%, #FFFEFA 0%, #FCF6EB 48%, #F3E3CB 100%);
  box-shadow:0 0 0 3px #D9B464, 0 0 0 10px rgba(217,180,100,.20), 0 22px 48px rgba(0,0,0,.40);
}
.ta-hero__lens::after{ /* faint paper waves inside the lens */
  content:""; position:absolute; inset:0; border-radius:inherit; background:var(--ta-tx-paper); background-size:48px 24px; opacity:.55;
}
.ta-hero__flourish{ position:absolute; z-index:0; top:10px; width:clamp(92px, 12vw, 190px); aspect-ratio:200/120; background:var(--ta-ic-flourish) center/contain no-repeat; pointer-events:none; }
.ta-hero__flourish--l{ left:10px; }
.ta-hero__flourish--r{ right:10px; transform:scaleX(-1); }
.ta-hero__spark{ position:absolute; z-index:0; color:#D9B464; font-size:14px; line-height:1; pointer-events:none; animation:taTwinkle 3.2s ease-in-out infinite; }
@keyframes taTwinkle{ 0%,100%{opacity:.25; transform:scale(.8)} 50%{opacity:1; transform:scale(1.15)} }

.ta-hero__content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding-inline:var(--ta-gutter); }

/* Seal (8 năm) */
.ta-seal{
  position:relative; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; align-content:center; margin-bottom:6px;
  color:#FFE7A3; text-align:center; line-height:1;
  background:radial-gradient(circle at 50% 35%, #B3222A 0%, #8E1A1E 55%, #5F0F13 100%);
  box-shadow:0 0 0 3px #E9C46A, 0 0 0 6px #8E1A1E, 0 0 0 8px #E9C46A, 0 10px 18px rgba(80,10,10,.35);
}
.ta-seal::before,.ta-seal::after{ /* ribbon tails */
  content:""; position:absolute; bottom:-16px; width:16px; height:26px; z-index:-1;
  background:linear-gradient(#A3151C,#6E1216); clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
}
.ta-seal::before{ left:18px; transform:rotate(16deg); }
.ta-seal::after{ right:18px; transform:rotate(-16deg); }
.ta-seal__top{ font-size:8px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.ta-seal__num{ font-family:var(--ta-font-display); font-weight:900; font-size:28px; color:#FFF3C9; margin:1px 0 0; line-height:1; }
.ta-seal__label{ font-size:7px; font-weight:800; letter-spacing:.1em; line-height:1.15; text-transform:uppercase; margin-bottom:6px; }

.ta-hero__kicker{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ta-gold-700); }
.ta-hero__title{
  font-family:var(--ta-font-display); font-weight:900; font-size:var(--ta-fs-hero); line-height:1.04; letter-spacing:-.005em;
  color:#8A1418; text-shadow:0 2px 0 rgba(255,255,255,.7), 0 6px 18px rgba(138,20,24,.18);
  max-width:15ch; text-wrap:balance;
}
.ta-hero__tagline{
  font-family:var(--ta-font-title); font-weight:700; font-size:clamp(17px, .7rem + 1.3vw, 30px); line-height:1.25;
  background:var(--ta-g-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8));
}
.ta-hero__script{ font-family:var(--ta-font-script); font-size:clamp(28px, 1rem + 2vw, 46px); line-height:1.15; color:#5F0F13; margin-top:-2px; }
.ta-hero__lede{ max-width:52ch; font-size:14px; color:var(--ta-text-2); }

.ta-hero__orbs{ list-style:none; display:flex; justify-content:center; gap:clamp(12px, 3vw, 34px); margin:10px 0 4px; flex-wrap:wrap; }
.ta-orb{ display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--ta-maroon-600); }
.ta-orb__ico{
  position:relative; width:clamp(54px, 5vw, 74px); height:clamp(54px, 5vw, 74px); border-radius:50%; display:grid; place-items:center; color:#fff;
  background:var(--ta-g-orb); box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(150,100,20,.55), 0 10px 18px rgba(120,70,0,.35), inset 0 -6px 10px rgba(160,90,0,.35), inset 0 6px 8px rgba(255,255,255,.45);
  transition:transform .2s var(--ta-ease);
}
.ta-orb__ico svg{ width:46%; height:46%; filter:drop-shadow(0 1px 1px rgba(120,60,0,.5)); }
.ta-orb:hover .ta-orb__ico{ transform:translateY(-3px) scale(1.04); }
.ta-orb__label{ font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }

.ta-ribbon{
  position:relative; display:inline-flex; align-items:center; justify-content:center; margin-top:8px; padding:6px 30px 8px;
  border-radius:var(--ta-r-pill); color:#FFF3D6; font-family:var(--ta-font-script); font-size:clamp(22px, .9rem + 1.2vw, 34px); line-height:1.1; white-space:nowrap;
  background:linear-gradient(180deg,#9B1D22 0%,#6E1216 100%);
  box-shadow:0 0 0 2px #E9C46A, 0 0 0 5px rgba(110,18,22,.85), 0 12px 22px rgba(70,8,10,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.ta-ribbon:hover{ filter:brightness(1.06); }
.ta-hero__divider{ display:block; width:min(300px, 70%); height:14px; margin-top:16px; position:relative; }
.ta-hero__divider::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg,transparent,#C9A04B 20%,#C9A04B 80%,transparent); }
.ta-hero__divider::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; transform:translate(-50%,-50%) rotate(45deg); background:#C9A04B; box-shadow:0 0 0 3px var(--ta-cream), 0 0 0 4px #C9A04B; }

/* Side visuals: real photos (left) + CSS practice sheets (right) */
.ta-hero__side{ display:none; position:absolute; z-index:1; top:50%; transform:translateY(-52%); }
.ta-hero__strip{ display:flex; justify-content:center; gap:10px; margin-top:20px; position:relative; z-index:2; padding-inline:var(--ta-gutter); }
.ta-hero__strip .ta-photo{ width:31%; max-width:150px; }
.ta-hero__strip .ta-photo:nth-child(1){ transform:rotate(-5deg); }
.ta-hero__strip .ta-photo:nth-child(2){ transform:translateY(-8px) rotate(2deg); z-index:1; }
.ta-hero__strip .ta-photo:nth-child(3){ transform:rotate(5deg); }
.ta-photo{ margin:0; background:#fff; padding:6px 6px 8px; border-radius:6px; box-shadow:0 14px 28px rgba(40,6,8,.35), 0 2px 4px rgba(0,0,0,.15); }
.ta-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px; }
.ta-photo--land img{ aspect-ratio:4/3; }
.ta-photo figcaption{ font-family:var(--ta-font-hand); font-weight:700; font-size:15px; color:var(--ta-maroon-500); text-align:center; line-height:1.2; padding-top:4px; }
@media (min-width:960px){
  .ta-hero{ padding:30px 0 64px; min-height:540px; }
  .ta-hero__lens{ left:-12%; right:-12%; top:-52%; bottom:46px; }
  .ta-hero__side{ display:block; }
  .ta-hero__side--l{ left:max(2.5%, calc(50% - 690px)); width:clamp(220px, 22vw, 330px); height:360px; }
  .ta-hero__side--r{ right:max(2.5%, calc(50% - 690px)); width:clamp(220px, 22vw, 330px); height:380px; }
  .ta-hero__side--l .ta-photo{ position:absolute; }
  .ta-hero__side--l .ta-photo:nth-child(1){ left:0; top:30px; width:62%; transform:rotate(-7deg); }
  .ta-hero__side--l .ta-photo:nth-child(2){ right:0; top:0; width:56%; transform:rotate(5deg); z-index:1; }
  .ta-hero__side--l .ta-photo:nth-child(3){ left:16%; bottom:0; width:70%; transform:rotate(-1.5deg); z-index:2; }
  .ta-hero__strip{ display:none; }
  .ta-hero__content{ max-width:640px; margin-inline:auto; }
}
@media (min-width:1280px){ .ta-hero{ min-height:560px; } }

/* CSS practice sheet (vở ô li) used in hero + product art */
.ta-sheet{
  position:absolute; width:78%; aspect-ratio:210/297; background:#fff; border-radius:3px; padding:7% 6%;
  box-shadow:0 18px 34px rgba(40,6,8,.32), 0 2px 4px rgba(0,0,0,.12);
  background-image:
    linear-gradient(90deg, transparent 9%, rgba(230,70,90,.55) 9%, rgba(230,70,90,.55) calc(9% + 1px), transparent calc(9% + 1px)),
    repeating-linear-gradient(0deg, rgba(120,140,220,.38) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(120,140,220,.38) 0 1px, transparent 1px 7px);
  container-type:inline-size;
}
.ta-sheet--back{ right:0; top:0; transform:rotate(7deg); opacity:.96; }
.ta-sheet--mid{ right:12%; top:5%; transform:rotate(-3deg); }
.ta-sheet--front{ left:0; bottom:0; transform:rotate(-8deg); }
.ta-sheet__head{ font-family:var(--ta-font-title); font-weight:700; font-size:7cqw; color:var(--ta-maroon-500); text-align:center; margin-bottom:5cqw; background:#fff; padding:1cqw 2cqw; border-radius:2px; }
.ta-sheet__row{ display:flex; justify-content:space-between; font-family:var(--ta-font-hand); font-weight:700; font-size:14cqw; line-height:1.25; color:#2B4FC9; margin-left:8%; }
.ta-sheet__row--red{ color:#D22322; }
.ta-sheet__row--ghost{ color:rgba(43,79,201,.28); }
.ta-sheet__script{ font-family:var(--ta-font-script); font-size:11cqw; color:#D22322; margin-left:8%; line-height:1.4; }

/* --------------------------------------------------------------------------
   8. SECTIONS & TITLES
   -------------------------------------------------------------------------- */
.ta-sec{ margin-top:var(--ta-sec-gap); }
.ta-sec--tight{ margin-top:24px; }
.ta-sec__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 16px; margin-bottom:16px; }
.ta-title{ font-family:var(--ta-font-title); font-weight:700; font-size:var(--ta-fs-title); line-height:1.2; color:var(--ta-lead); text-wrap:balance; }
.ta-title__lead{ color:var(--ta-lead); } /* app: the gap is a real space between the spans (screen readers, copy) */
.ta-title__accent{ color:var(--ta-maroon-500); }
.ta-sec__lead{ margin-top:8px; max-width:56rem; font-size:14px; line-height:1.6; color:var(--ta-text-2); }
.ta-sec__more{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--ta-maroon-500); white-space:nowrap; }
.ta-sec__more:hover{ text-decoration:underline; text-underline-offset:3px; }
.ta-kicker{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--ta-gold-700); }
@media (min-width:960px){ :root{ --ta-sec-gap:48px; } .ta-sec__lead{ font-size:15px; } }

/* Pill title (Giá trị thương hiệu) */
.ta-pilltitle{ display:flex; justify-content:center; }
.ta-pilltitle span{
  display:inline-flex; align-items:center; padding:10px 22px; border-radius:var(--ta-r-pill); background:#fff;
  border:2px solid rgba(232,38,44,.42); color:#B4161C; font-weight:900; font-size:15px; letter-spacing:.03em; text-transform:uppercase;
  box-shadow:0 6px 14px rgba(180,22,28,.10);
}

/* Boxed section with gradient head ("Gợi ý cho bạn" — mực tím) */
.ta-box{ background:#fff; border:1px solid var(--ta-line); border-radius:var(--ta-r-xl); box-shadow:0 6px 14px rgba(0,0,0,.05); overflow:hidden; }
.ta-box__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; color:#fff; background:var(--ta-g-violet); }
.ta-box__head--maroon{ background:var(--ta-tx-seigaiha), linear-gradient(90deg,#771419,#A3151C 60%,#C3161D); background-size:36px 18px, auto; }
.ta-box__title{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
.ta-box__title::before{ content:""; width:20px; height:20px; border-radius:6px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); }
.ta-box__body{ padding:14px; }

/* Grids */
.ta-grid{ display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.ta-grid--products{ align-items:stretch; }
@media (min-width:768px){ .ta-grid{ gap:12px; grid-template-columns:repeat(4, minmax(0,1fr)); } .ta-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; } }
@media (min-width:1024px){ .ta-grid{ gap:20px; grid-template-columns:repeat(4, minmax(0,1fr)); } .ta-grid--5{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; } }
.ta-grid--1-2-3,.ta-grid--programs{ grid-template-columns:1fr; }
@media (min-width:600px){ .ta-grid--programs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .ta-grid--programs{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:768px){ .ta-grid--1-2-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .ta-grid--1-2-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* --------------------------------------------------------------------------
   9. BUTTONS · BADGES · CHIPS
   -------------------------------------------------------------------------- */
.ta-btn{
  --_bg:#fff; --_fg:var(--ta-text); --_bd:var(--ta-line-2);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 16px;
  border-radius:var(--ta-r-md); border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  font-family:var(--ta-font-ui); font-size:13px; font-weight:800; line-height:1.15; letter-spacing:.01em; text-align:center;
  transition:transform var(--ta-t-fast), box-shadow var(--ta-t-fast), background var(--ta-t-fast), filter var(--ta-t-fast), border-color var(--ta-t-fast);
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.ta-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 18px rgba(0,0,0,.10); }
.ta-btn:active{ transform:scale(.98); }
.ta-btn[disabled],.ta-btn.is-disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.ta-btn .ta-ico{ width:16px; height:16px; }
.ta-btn--buy{ --_bg:var(--ta-buy); --_fg:#fff; --_bd:var(--ta-buy); }
.ta-btn--buy:hover{ --_bg:var(--ta-buy-hover); --_bd:var(--ta-buy-hover); box-shadow:var(--ta-sh-btn); }
.ta-btn--cart{ --_bg:var(--ta-ink); --_fg:#fff; --_bd:var(--ta-ink); }
.ta-btn--cart:hover{ --_bg:var(--ta-ink-700); --_bd:var(--ta-ink-700); box-shadow:0 6px 14px rgba(10,111,143,.25); }
.ta-btn--primary{ --_bg:var(--ta-maroon-600); --_fg:#fff; --_bd:var(--ta-maroon-600); }
.ta-btn--primary:hover{ --_bg:var(--ta-maroon-700); }
.ta-btn--gold{ --_bg:var(--ta-g-gold); --_fg:#4A2A00; --_bd:#E0A324; background:var(--ta-g-gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px rgba(150,95,10,.25); }
.ta-btn--white{ --_bg:#fff; --_fg:var(--ta-text); --_bd:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.ta-btn--white:hover{ --_bg:#FFFBEA; }
.ta-btn--ghost{ --_bg:#fff; --_fg:var(--ta-text); --_bd:var(--ta-line-2); }
.ta-btn--ghost:hover{ --_bd:#cdbfae; }
.ta-btn--outline-red{ --_bg:#fff; --_fg:var(--ta-buy); --_bd:rgba(224,38,45,.55); }
.ta-btn--google{ --_bg:#fff; --_fg:var(--ta-text); --_bd:#D9D2CB; font-weight:700; }
.ta-btn--sm{ min-height:34px; padding:7px 12px; font-size:12px; border-radius:9px; }
@media (max-width:767px){ .ta-btn--sm{ min-height:40px; } } /* touch target; card actions keep their own sizing */
.ta-btn--lg{ min-height:50px; padding:12px 24px; font-size:15px; border-radius:var(--ta-r-lg); }
.ta-btn--xl{ min-height:54px; padding:14px 28px; font-size:16px; text-transform:uppercase; letter-spacing:.04em; border-radius:var(--ta-r-lg); }
.ta-btn--block{ width:100%; }
.ta-btn--upper{ text-transform:uppercase; letter-spacing:.05em; }
.ta-btn.is-loading{ color:transparent!important; position:relative; pointer-events:none; }
.ta-btn.is-loading::after{ content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.55); border-top-color:#fff; animation:taSpin .7s linear infinite; }
.ta-btn--ghost.is-loading::after,.ta-btn--white.is-loading::after{ border-color:rgba(0,0,0,.2); border-top-color:var(--ta-text); }
.ta-btn.is-done{ --_bg:var(--ta-green); --_bd:var(--ta-green); --_fg:#fff; }
@keyframes taSpin{ to{transform:rotate(360deg)} }

.ta-link{ color:var(--ta-ink); font-weight:700; }
.ta-link:hover{ text-decoration:underline; text-underline-offset:3px; }

.ta-badge{
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px; border-radius:var(--ta-r-pill);
  font-size:10.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; line-height:1;
  background:var(--ta-buy); color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.14);
}
.ta-badge--new{ background:linear-gradient(180deg,#22C55E,#15803D); }
.ta-badge--sale{ background:linear-gradient(180deg,#F43F5E,#D0141C); }
.ta-badge--combo{ background:linear-gradient(180deg,#FBBF24,#D97706); color:#3B1F00; }
.ta-badge--teacher{ background:linear-gradient(180deg,#8B5CF6,#6D28D9); }
.ta-badge--hot{ background:linear-gradient(180deg,#FB923C,#EA580C); }
.ta-badge--soft{ background:var(--ta-rose-50); color:var(--ta-maroon-500); box-shadow:none; border:1px solid var(--ta-rose-200); }

.ta-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--ta-r-pill);
  background:var(--ta-cream); border:1px solid var(--ta-line-2); font-size:11.5px; font-weight:700; color:var(--ta-maroon-600); white-space:nowrap;
}
.ta-chip--ink{ background:var(--ta-ink-50); border-color:var(--ta-ink-100); color:var(--ta-ink-700); }
.ta-chip--btn{ cursor:pointer; transition:background var(--ta-t-fast), color var(--ta-t-fast); }
.ta-chip--btn:hover{ background:#fff; }
.ta-chip--btn[aria-pressed="true"],.ta-chip--btn.is-active{ background:var(--ta-maroon-600); border-color:var(--ta-maroon-600); color:#fff; }

.ta-status{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--ta-r-pill); font-size:11.5px; font-weight:800; white-space:nowrap; border:1px solid transparent; }
.ta-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.ta-status--ok{ background:var(--ta-green-50); color:#15803D; border-color:#BBF7D0; }
.ta-status--warn{ background:var(--ta-amber-50); color:#B45309; border-color:#FDE68A; }
.ta-status--off{ background:#F4F1EE; color:#6E6468; border-color:#E5DED6; }
.ta-status--info{ background:var(--ta-ink-50); color:var(--ta-ink-700); border-color:var(--ta-ink-100); }
.ta-status--danger{ background:var(--ta-rose-50); color:#B91C1C; border-color:var(--ta-rose-200); }

/* --------------------------------------------------------------------------
   10. PRICE
   -------------------------------------------------------------------------- */
.ta-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; }
.ta-price__now{ font-size:15px; font-weight:800; color:var(--ta-ink); letter-spacing:-.01em; font-variant-numeric:lining-nums tabular-nums; }
.ta-price__old{ font-size:11px; color:var(--ta-muted); text-decoration:line-through; font-variant-numeric:lining-nums tabular-nums; }
.ta-price__off{ display:inline-flex; align-items:center; align-self:center; padding:3px 8px; border-radius:var(--ta-r-pill); background:var(--ta-buy); color:#fff; font-size:10px; font-weight:800; line-height:1; box-shadow:0 2px 6px rgba(224,38,45,.28); }
.ta-price--lg .ta-price__now{ font-size:26px; }
.ta-price--lg .ta-price__old{ font-size:14px; }
.ta-price--lg .ta-price__off{ padding:8px 12px; font-size:12.5px; background:#F4F1EE; color:var(--ta-buy-text); border:1px solid #E5DED6; box-shadow:none; }
@media (min-width:768px){ .ta-price__now{ font-size:16px; } }
/* phones: card price on a fixed two-line layout (price / old price + %), so cards with and without a discount keep
   their meta row and buttons level across a row (the % pill no longer wraps onto a line of its own) */
@media (max-width:599px){
  .ta-card .ta-price{ row-gap:2px; column-gap:6px; min-height:38px; align-content:flex-start; }
  .ta-card .ta-price__now{ flex-basis:100%; }
}

/* --------------------------------------------------------------------------
   11. PRODUCT CARD
   -------------------------------------------------------------------------- */
.ta-card{
  position:relative; display:flex; flex-direction:column; min-width:0; height:100%;
  background:var(--ta-card); border:1px solid #EFEAE4; border-radius:var(--ta-r-lg); overflow:hidden; box-shadow:var(--ta-sh-card);
  transition:transform .2s var(--ta-ease), box-shadow .2s var(--ta-ease), border-color .2s;
}
.ta-card:hover{ transform:translateY(-4px); box-shadow:var(--ta-sh-card-h); border-color:#E6DCD2; }
.ta-card__media{ position:relative; display:block; aspect-ratio:3/2; overflow:hidden; background:#F8F5F1; isolation:isolate; }
.ta-card__media > img{ width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ta-ease); }
.ta-card:hover .ta-card__media > img{ transform:scale(1.04); }
.ta-card__quick{
  position:absolute; z-index:6; left:0; right:0; bottom:0; height:40px; display:flex; align-items:center; justify-content:center;
  background:rgba(224,38,45,.68); color:#fff; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0; transform:translateY(12px); transition:opacity .18s, transform .18s; pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .ta-card:hover .ta-card__quick,.ta-card__media:focus-visible .ta-card__quick{ opacity:1; transform:none; }
}
.ta-card__badges{ position:absolute; z-index:5; top:8px; left:8px; display:flex; flex-wrap:wrap; gap:4px; }
.ta-card__body{ position:relative; flex:1; display:flex; flex-direction:column; gap:7px; padding:10px 10px 12px; }
.ta-card__name{ font-size:12.5px; font-weight:600; line-height:1.35; min-height:2.7em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ta-text); }
.ta-card__name a::before{ content:""; position:absolute; inset:0; z-index:1; } /* whole card clickable */
.ta-card__meta{ font-size:11px; line-height:1.2; color:var(--ta-muted); }
.ta-card__meta b{ font-weight:700; color:var(--ta-text-2); }
.ta-card__meta--new{ display:inline-flex; align-items:center; gap:5px; color:#15803D; font-weight:700; }
.ta-card__meta--new::before{ content:"✦"; font-size:10px; }
.ta-card__actions{ position:relative; z-index:3; margin-top:auto; display:flex; gap:6px; }
.ta-card__actions .ta-btn{ flex:1 1 0; min-width:0; min-height:36px; padding:7px 4px; font-size:11.5px; font-weight:900; white-space:nowrap; letter-spacing:0; }
.ta-card__extra{ font-size:11.5px; color:var(--ta-muted); }
@media (min-width:1024px){
  .ta-card__body{ padding:12px 14px 14px; gap:8px; }
  .ta-card__name{ font-size:13px; }
  .ta-card__actions{ gap:8px; }
  .ta-card__actions .ta-btn{ min-height:38px; font-size:12.5px; }
}
.ta-card.is-soldout .ta-card__media::after{ content:"Đã hết suất ưu đãi"; position:absolute; inset:auto 0 0; z-index:5; padding:8px; text-align:center; font-size:12px; font-weight:800; color:#fff; background:rgba(30,20,22,.7); }
.ta-card.is-incart .ta-btn--cart{ --_bg:var(--ta-ink-50); --_fg:var(--ta-ink-700); --_bd:var(--ta-ink-100); }

/* Sold / quota progress (flash sale) — fed only by real orders vs. admin-set quota */
.ta-sold{ position:relative; z-index:3; margin-top:10px; padding-left:4px; pointer-events:none; }
.ta-sold__track{ position:relative; display:block; height:22px; border-radius:var(--ta-r-pill); background:rgba(254,226,226,.8); box-shadow:inset 0 1px 2px rgba(220,38,38,.16); }
.ta-sold__fill{
  position:absolute; inset:0 auto 0 0; width:var(--p, 0%); min-width:22px; max-width:100%; border-radius:inherit; background:var(--ta-g-sold);
  transform-origin:left center; animation:taFill 1.2s var(--ta-ease-out) both;
}
.js .ta-sold:not(.is-anim) .ta-sold__fill{ animation:none; transform:scaleX(0); } /* app: fill when in view */
.ta-sold__text{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-left:18px; font-size:11px; font-weight:800; color:#fff; letter-spacing:.02em; text-shadow:0 1px 3px rgba(0,0,0,.45); white-space:nowrap; }
.ta-sold--low .ta-sold__text{ color:#9F1C1C; text-shadow:0 1px 0 rgba(255,255,255,.6); } /* JS adds --low when fill < 50% */
.ta-sold__fire{ position:absolute; z-index:2; left:-2px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,#EF4444,#DC2626); border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.22); }
.ta-sold__fire svg{ width:15px; height:15px; }
@keyframes taFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (max-width:767px){ .ta-sold__track{ height:20px; } .ta-sold__text{ font-size:10px; } .ta-sold__fire{ width:26px; height:26px; } }

/* --------------------------------------------------------------------------
   12. PRODUCT ART PLACEHOLDERS (pure CSS: ô-ly grid + handwriting)
   Use until real thumbnails exist. Variants: --rose --sky --mint --violet --amber
   -------------------------------------------------------------------------- */
.ta-art{
  --a-main:#D22322; --a-alt:#2B4FC9; --a-grid:rgba(124,140,220,.45); --a-band:rgba(244,114,182,.20); --a-script:#E0457B; --a-title:#B4161C;
  position:absolute; inset:0; container-type:inline-size; overflow:hidden; background:#fff; display:flex; flex-direction:column; align-items:center;
  padding:0; /* never put cqw on the container itself: it resolves against the viewport */
}
.ta-art::before{ /* gold corner brackets */
  content:""; position:absolute; top:4cqw; right:4cqw; width:22cqw; height:16cqw; border-top:.7cqw solid #D4A24C; border-right:.7cqw solid #D4A24C; border-radius:0 2cqw 0 0; opacity:.9;
}
.ta-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    var(--ta-ic-blossom) -2cqw -2cqw / 14cqw 14cqw no-repeat,
    var(--ta-ic-blossom) 9cqw -3cqw / 9cqw 9cqw no-repeat,
    var(--ta-ic-leaf) 3cqw 10cqw / 10cqw 5cqw no-repeat,
    var(--ta-ic-blossom) calc(100% + 2cqw) calc(100% + 2cqw) / 14cqw 14cqw no-repeat,
    var(--ta-ic-blossom) calc(100% - 11cqw) calc(100% + 3cqw) / 8cqw 8cqw no-repeat;
}
.ta-art__brand{ position:relative; z-index:1; margin-top:5cqw; display:inline-flex; align-items:center; gap:1cqw; padding:.5cqw 3cqw; border-radius:99px; background:var(--ta-ink); color:#fff; font-size:3cqw; font-weight:700; letter-spacing:.02em; line-height:1.5; }
.ta-art__kicker{ position:relative; z-index:1; margin-top:2cqw; margin-bottom:1cqw; font-family:var(--ta-font-title); font-size:4cqw; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--a-alt); line-height:1.2; }
.ta-art__title{ position:relative; z-index:1; font-family:var(--ta-font-display); font-weight:800; font-size:8.6cqw; line-height:1.08; color:var(--a-title); text-align:center; white-space:nowrap; }
.ta-art__title--script{ font-family:var(--ta-font-script); font-weight:400; font-size:12cqw; line-height:1; }
.ta-art__sub{ position:relative; z-index:1; font-family:var(--ta-font-title); font-style:italic; font-size:3.4cqw; color:#15803D; line-height:1.4; }
.ta-art__grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6cqw; width:84cqw; margin-top:1.2cqw; } /* app: was 2.4cqw, offsets the kicker's bottom margin */
.ta-art__grid i{
  font-style:normal; display:grid; place-items:center; aspect-ratio:1/1; border:.35cqw solid var(--a-grid);
  background:
    linear-gradient(var(--a-grid),var(--a-grid)) 50% 50% / 100% .25cqw no-repeat,
    repeating-linear-gradient(0deg, rgba(124,140,220,.22) 0 .25cqw, transparent .25cqw 25%),
    repeating-linear-gradient(90deg, rgba(124,140,220,.22) 0 .25cqw, transparent .25cqw 25%);
  font-family:var(--ta-font-hand); font-weight:700; font-size:14cqw; line-height:1; color:var(--a-main); padding-bottom:1.5cqw;
}
.ta-art__grid i:nth-child(even){ color:var(--a-alt); }
.ta-art__band{
  position:absolute; z-index:1; left:0; right:0; bottom:0; height:21%; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg, transparent 0 4cqw, rgba(124,140,220,.35) 4cqw calc(4cqw + 1px)),
    var(--a-band);
  font-family:var(--ta-font-script); font-size:8cqw; color:var(--a-script); white-space:nowrap; overflow:hidden; padding:0 8cqw;
}
.ta-art--sky{ --a-main:#2563EB; --a-alt:#DB2777; --a-band:rgba(96,165,250,.18); --a-script:#1D4ED8; --a-title:#1E40AF; }
.ta-art--mint{ --a-main:#0F766E; --a-alt:#DC2626; --a-band:rgba(52,211,153,.18); --a-script:#047857; --a-title:#0F766E; --a-grid:rgba(45,160,140,.45); }
.ta-art--violet{ --a-main:#7C3AED; --a-alt:#DB2777; --a-band:rgba(192,132,252,.22); --a-script:#7C3AED; --a-title:#6D28D9; }
.ta-art--amber{ --a-main:#C2410C; --a-alt:#2563EB; --a-band:rgba(251,191,36,.22); --a-script:#B45309; --a-title:#B45309; }

/* Combo art */
.ta-art--combo{ background:var(--ta-g-combo-violet); color:#fff; }
.ta-art--combo::before{ border:0; width:auto; height:auto; inset:0; border-radius:0; opacity:1;
  background:radial-gradient(60cqw 40cqw at 50% 0%, rgba(255,255,255,.28), transparent 70%), radial-gradient(3cqw 3cqw at 12% 30%, rgba(255,255,255,.9), transparent 70%), radial-gradient(2cqw 2cqw at 86% 22%, rgba(255,255,255,.8), transparent 70%), radial-gradient(2.4cqw 2.4cqw at 78% 58%, rgba(255,240,170,.9), transparent 70%); }
.ta-art--combo::after{ background:none; }
.ta-art--sunset{ background:var(--ta-g-combo-sunset); }
.ta-art--ocean{ background:var(--ta-g-combo-ocean); }
.ta-art--tet{ background:var(--ta-g-combo-tet); }
.ta-art__pill{ position:relative; z-index:2; margin-top:6cqw; padding:.6cqw 3.4cqw; border-radius:99px; background:#E11D2E; color:#fff; font-size:4cqw; font-weight:900; letter-spacing:.06em; box-shadow:0 1cqw 2cqw rgba(0,0,0,.25); }
.ta-art--sunset .ta-art__pill,.ta-art--tet .ta-art__pill{ background:#fff; color:#C81E25; }
.ta-art__big{ position:relative; z-index:2; margin-top:1.6cqw; font-weight:900; font-size:9.4cqw; line-height:1.02; text-align:center; text-transform:uppercase; letter-spacing:.01em; text-shadow:0 .6cqw 0 rgba(0,0,0,.22), 0 1cqw 3cqw rgba(0,0,0,.25); white-space:nowrap; }
.ta-art__big em{ display:block; font-style:normal; font-size:7cqw; color:#FFE27A; }
.ta-art__stack{ position:absolute; z-index:1; left:50%; bottom:-6cqw; width:74cqw; height:36cqw; transform:translateX(-50%); }
.ta-art__stack span{ position:absolute; bottom:0; width:26cqw; aspect-ratio:210/297; border-radius:1cqw; box-shadow:0 1cqw 3cqw rgba(0,0,0,.3);
  background:
    linear-gradient(#E0262D,#E0262D) 50% 12% / 56% 1.6cqw no-repeat,
    linear-gradient(#2B4FC9,#2B4FC9) 50% 20% / 36% 1cqw no-repeat,
    linear-gradient(90deg, transparent 14%, rgba(230,70,90,.6) 14% calc(14% + 1px), transparent 0) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(124,140,220,.55) 0 1px, transparent 1px 2.6cqw),
    #fff; }
.ta-art__stack span:nth-child(1){ left:0; transform:rotate(-14deg); }
.ta-art__stack span:nth-child(2){ left:16cqw; transform:rotate(-5deg); bottom:2cqw; }
.ta-art__stack span:nth-child(3){ left:32cqw; transform:rotate(5deg); bottom:2cqw; }
.ta-art__stack span:nth-child(4){ left:48cqw; transform:rotate(14deg); }
.ta-art__foot{ position:absolute; z-index:3; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:2cqw; padding:2cqw 4cqw; background:linear-gradient(0deg, rgba(20,6,40,.55), rgba(20,6,40,0)); font-size:4.2cqw; font-weight:800; }
.ta-art__save{ padding:.8cqw 2.6cqw; border-radius:99px; background:#FFD60A; color:#5A2E00; font-size:3.8cqw; font-weight:900; white-space:nowrap; }

/* --------------------------------------------------------------------------
   13. FLASH SALE PANEL · COUNTDOWN · TICKER
   -------------------------------------------------------------------------- */
.ta-flash{
  position:relative; border-radius:var(--ta-r-xl); overflow:hidden; color:#fff;
  background:radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.14), transparent 70%), var(--ta-g-flash);
  box-shadow:var(--ta-sh-flash); border:1px solid rgba(255,255,255,.14);
}
.ta-flash::before{ content:""; position:absolute; inset:0; pointer-events:none; background:var(--ta-tx-seigaiha); background-size:36px 18px; opacity:.35; }
.ta-flash__head{ position:relative; display:grid; grid-template-columns:1fr; justify-items:center; gap:10px; padding:16px 14px 14px; text-align:center; }
.ta-flash__title{ display:flex; align-items:center; gap:10px; margin:0; font-family:var(--ta-font-title); font-weight:700; font-size:clamp(24px, 1rem + 1.2vw, 32px); line-height:1.1; color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.2); }
.ta-flash__title svg{ width:1.05em; height:1.05em; color:#FFE27A; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.ta-flash__all{ font-size:14px; font-weight:800; color:#fff; white-space:nowrap; transition:opacity var(--ta-t-fast); }
.ta-flash__all:hover{ opacity:.85; text-decoration:underline; text-underline-offset:3px; }
.ta-flash__body{ position:relative; padding:4px 10px 14px; }
.ta-flash .ta-card{ border-color:rgba(255,255,255,.6); box-shadow:0 6px 18px rgba(0,0,0,.14); }
.ta-flash .ta-card:hover{ border-color:#FECACA; box-shadow:0 12px 26px rgba(0,0,0,.2); }
.ta-flash__note{ position:relative; padding:0 14px 12px; font-size:11.5px; color:rgba(255,255,255,.85); text-align:center; }
@media (min-width:768px){
  .ta-flash__head{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; padding:18px 20px 16px; text-align:left; }
  .ta-flash__title{ justify-self:start; }
  .ta-flash__all{ justify-self:end; }
  .ta-flash__body{ padding:4px 16px 18px; }
}

.ta-countdown{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.ta-countdown__label{ font-size:13px; font-weight:800; color:#fff; white-space:nowrap; }
.ta-countdown__boxes{ display:flex; gap:8px; }
.ta-countdown__unit{ min-width:48px; padding:7px 8px 5px; border-radius:var(--ta-r-sm); background:var(--ta-yellow); color:var(--ta-text); text-align:center; box-shadow:inset 0 -3px 0 rgba(0,0,0,.10), 0 4px 10px rgba(120,10,10,.25); perspective:240px; }
.ta-countdown__num{ display:block; font-size:19px; font-weight:900; line-height:1.1; font-variant-numeric:lining-nums tabular-nums; backface-visibility:hidden; }
.ta-countdown__num.is-tick{ animation:taFlip .38s var(--ta-ease); }
.ta-countdown__unit small{ display:block; margin-top:1px; font-size:9.5px; font-weight:800; }
@keyframes taFlip{ 0%{ transform:rotateX(-90deg); opacity:.3; } 100%{ transform:none; opacity:1; } }
.ta-countdown--sm .ta-countdown__unit{ min-width:38px; padding:4px 6px; }
.ta-countdown--sm .ta-countdown__num{ font-size:15px; }

.ta-ticker{ position:relative; background:#fff; padding:10px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.4); }
.ta-ticker__viewport{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent); }
.ta-ticker__track{ display:flex; width:max-content; animation:taMarquee var(--ta-ticker-dur) linear infinite; }
.ta-ticker__group{ display:flex; align-items:center; gap:34px; padding-right:34px; }
.ta-ticker__seg{ display:inline-flex; align-items:center; gap:12px; white-space:nowrap; }
.ta-ticker__pill{ display:inline-flex; align-items:center; padding:5px 14px; border-radius:var(--ta-r-pill); background:var(--ta-maroon-600); color:#fff; font-size:12px; font-weight:900; letter-spacing:.04em; }
.ta-ticker__text{ font-size:14px; font-weight:700; color:var(--ta-text); }

/* --------------------------------------------------------------------------
   14. GUIDE BANNERS (maroon "cẩm nang" cards) · FEATURE BAND
   -------------------------------------------------------------------------- */
.ta-guide{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){ .ta-guide{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
.ta-guide__card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:150px; padding:18px 18px 16px; border-radius:var(--ta-r-xl); overflow:hidden; color:#fff;
  background:var(--ta-g-maroon-card), var(--ta-tx-seigaiha), radial-gradient(120% 140% at 100% 0%, #9B1D22 0%, #6A1015 55%, #4E0B0F 100%);
  background-size:auto, 36px 18px, auto; border:1px solid rgba(255,255,255,.14); box-shadow:0 8px 26px rgba(40,6,8,.18);
  transition:transform .18s, box-shadow .18s;
}
.ta-guide__card::after{ content:""; position:absolute; right:-18px; bottom:-26px; width:130px; height:130px; opacity:.16; background:var(--ta-ic-blossom-gold) center/contain no-repeat; pointer-events:none; }
.ta-guide__card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(40,6,8,.26); }
.ta-guide__kicker{ font-size:10.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#FDE68A; }
.ta-guide__title{ font-size:clamp(16px, .8rem + .5vw, 19px); font-weight:900; line-height:1.2; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.ta-guide__desc{ font-size:12.5px; line-height:1.5; font-weight:600; color:rgba(255,246,220,.96); max-width:24rem; }
.ta-guide__cta{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--ta-r-sm); background:#fff; color:var(--ta-text); font-size:12px; font-weight:900; box-shadow:0 2px 8px rgba(0,0,0,.14); }
.ta-guide__card:hover .ta-guide__cta{ background:#FEFCE8; }

.ta-band{
  position:relative; overflow:hidden; color:#fff; padding:40px 0;
  background:var(--ta-tx-seigaiha), radial-gradient(90% 120% at 30% 0%, #9B1D22 0%, #6A1015 50%, #4A0A0E 100%);
  background-size:36px 18px, auto;
}
.ta-band__burst{ position:absolute; width:220px; height:220px; border-radius:50%; pointer-events:none; opacity:.55;
  background:repeating-conic-gradient(from 0deg, rgba(255,214,107,0) 0deg 9deg, rgba(255,214,107,.55) 9deg 10.5deg, rgba(255,214,107,0) 10.5deg 18deg);
  -webkit-mask:radial-gradient(circle, transparent 0 18%, #000 20%, rgba(0,0,0,.5) 55%, transparent 72%); mask:radial-gradient(circle, transparent 0 18%, #000 20%, rgba(0,0,0,.5) 55%, transparent 72%);
  animation:taBurst 4s ease-in-out infinite; }
@keyframes taBurst{ 0%,100%{ transform:scale(.9) rotate(0); opacity:.35; } 50%{ transform:scale(1.05) rotate(8deg); opacity:.7; } }
.ta-band__mai{ position:absolute; width:46px; height:46px; background:var(--ta-ic-blossom-gold) center/contain no-repeat; opacity:.9; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.ta-band__grid{ position:relative; display:grid; grid-template-columns:1fr; gap:26px; align-items:center; }
.ta-band__media{ position:relative; isolation:isolate; display:grid; grid-template-columns:1.25fr .9fr; gap:14px; align-items:center; }
.ta-band__frame{ position:relative; border-radius:28px; background:#fff; padding:6px; box-shadow:0 18px 36px rgba(0,0,0,.35); }
.ta-band__frame img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:22px; }
.ta-band__frame--outline::before{ content:""; position:absolute; inset:-12px 18px 18px -12px; border:3px solid var(--ta-sun); border-radius:34px; z-index:-1; }
.ta-band__circles{ display:grid; gap:14px; }
.ta-band__circle{ width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:#fff; padding:5px; box-shadow:0 12px 26px rgba(0,0,0,.35); }
.ta-band__circle img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ta-band__kicker{ font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.ta-band__title{ margin-top:6px; font-size:clamp(22px, 1rem + 1.2vw, 30px); font-weight:900; line-height:1.2; color:#fff; }
.ta-band__title mark{ background:none; color:#FFC53D; }
.ta-band__quote{ margin-top:12px; font-size:14px; line-height:1.6; font-weight:600; color:rgba(255,255,255,.92); font-style:italic; }
.ta-band__ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.ta-band__ctas .ta-btn{ flex:1 1 180px; }
@media (min-width:960px){ .ta-band__ctas .ta-btn{ flex:0 0 auto; } }
.ta-band__checks{ margin-top:16px; list-style:none; display:grid; grid-template-columns:1fr; gap:8px 22px; }
.ta-band__checks li{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.ta-band__checks li::before{ content:""; flex:0 0 auto; width:16px; height:16px; border-radius:4px; border:1.5px solid #FFB547; background:#FFB547; -webkit-mask:var(--ta-ic-check) center/12px no-repeat; mask:var(--ta-ic-check) center/12px no-repeat; }
@media (min-width:600px){ .ta-band__checks{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .ta-band{ padding:56px 0; } .ta-band__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; } }

/* --------------------------------------------------------------------------
   15. PROGRAMS (offline classes) · SCHEDULE · TEACHERS · GALLERY
   -------------------------------------------------------------------------- */
.ta-program{ position:relative; display:flex; flex-direction:column; min-width:0; height:100%; background:#fff; border:1px solid #EFEAE4; border-radius:var(--ta-r-xl); overflow:hidden; box-shadow:var(--ta-sh-card); transition:transform .2s var(--ta-ease), box-shadow .2s; }
.ta-program:hover{ transform:translateY(-4px); box-shadow:var(--ta-sh-card-h); }
.ta-program__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
@media (min-width:600px){ .ta-program__media{ aspect-ratio:4/3; } }
.ta-program__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 40%); transition:transform .4s var(--ta-ease); }
.ta-program:hover .ta-program__media img{ transform:scale(1.05); }
.ta-program__media::after{ content:""; position:absolute; inset:45% 0 0; background:linear-gradient(180deg, rgba(67,10,13,0), rgba(67,10,13,.72)); }
.ta-program__tag{ position:absolute; z-index:1; top:10px; left:10px; }
.ta-program__num{ position:absolute; z-index:1; right:12px; bottom:4px; font-family:var(--ta-font-display); font-weight:900; font-size:44px; line-height:1; color:rgba(255,231,163,.92); text-shadow:0 2px 8px rgba(0,0,0,.35); }
.ta-program__who{ position:absolute; z-index:1; left:12px; bottom:10px; font-size:12px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.ta-program__body{ flex:1; display:flex; flex-direction:column; gap:10px; padding:14px 16px 16px; }
.ta-program__title{ font-family:var(--ta-font-title); font-weight:700; font-size:19px; line-height:1.25; color:var(--ta-maroon-500); }
.ta-program__desc{ font-size:13.5px; line-height:1.55; color:var(--ta-text-2); }
.ta-program__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ta-program__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:4px; }

/* Data table (schedule, admin, orders) */
.ta-table-wrap{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* relative: absolutely positioned bits (.ta-sr labels) stay clipped inside the scroller */
.ta-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.ta-table th{ position:sticky; top:0; text-align:left; padding:11px 14px; background:#FBF6EF; color:var(--ta-muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--ta-line); white-space:nowrap; }
.ta-table td{ padding:12px 14px; border-bottom:1px solid var(--ta-line); vertical-align:middle; }
.ta-table tbody tr:hover td{ background:#FFFCF7; }
.ta-table tbody tr:last-child td{ border-bottom:0; }
.ta-table__strong{ font-weight:800; color:var(--ta-text); }
.ta-table__date{ display:inline-flex; flex-direction:column; align-items:center; min-width:56px; padding:4px 8px; border-radius:10px; background:var(--ta-g-gold); color:#4A2A00; font-weight:900; line-height:1.1; box-shadow:var(--ta-sh-gold); }
.ta-table__date small{ font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
/* Stacked rows on phones */
@media (max-width:767px){
  .ta-table--stack thead{ display:none; }
  .ta-table--stack, .ta-table--stack tbody, .ta-table--stack tr, .ta-table--stack td{ display:block; width:100%; }
  .ta-table--stack tr{ padding:12px 14px; border-bottom:1px solid var(--ta-line); }
  .ta-table--stack td{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:5px 0; border:0; text-align:right; }
  .ta-table--stack td::before{ content:attr(data-label); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ta-muted); text-align:left; }
  .ta-table--stack td.ta-table__lead{ display:block; text-align:left; font-size:15px; }
  .ta-table--stack td.ta-table__lead::before{ display:none; }
  .ta-table--stack td.ta-table__action{ padding-top:10px; }
  .ta-table--stack td.ta-table__action::before{ display:none; }
  .ta-table--stack td.ta-table__action .ta-btn{ width:100%; }
}

.ta-teacher{ text-align:center; background:#fff; border-radius:var(--ta-r-xl); padding:18px 14px; border:1px solid #EFEAE4; box-shadow:var(--ta-sh-card); }
.ta-teacher__ph{ width:112px; height:112px; margin:0 auto 10px; border-radius:50%; overflow:hidden; padding:4px; background:var(--ta-g-gold); box-shadow:var(--ta-sh-gold); }
.ta-teacher__ph img{ width:100%; height:100%; object-fit:cover; border-radius:50%; border:3px solid #fff; }
.ta-teacher__name{ font-family:var(--ta-font-title); font-weight:700; font-size:17px; color:var(--ta-maroon-500); }
.ta-teacher__role{ font-size:12.5px; color:var(--ta-muted); }

.ta-gallery{ columns:2 160px; column-gap:10px; }
.ta-gallery__item{ break-inside:avoid; margin:0 0 10px; position:relative; border-radius:var(--ta-r-lg); overflow:hidden; background:#fff; box-shadow:var(--ta-sh-card); }
.ta-gallery__item img{ width:100%; transition:transform .35s var(--ta-ease); }
.ta-gallery__item:hover img{ transform:scale(1.04); }
.ta-gallery__cap{ position:absolute; left:8px; bottom:8px; }
@media (min-width:960px){ .ta-gallery{ columns:4 220px; column-gap:16px; } .ta-gallery__item{ margin-bottom:16px; } }

/* --------------------------------------------------------------------------
   16. FORMS · TABS · SEGMENTED · SPLIT CARD (auth / trial)
   -------------------------------------------------------------------------- */
.ta-form{ display:grid; gap:12px; }
.ta-form__row{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:600px){ .ta-form__row--2{ grid-template-columns:1fr 1fr; } }
.ta-field{ display:grid; gap:6px; min-width:0; }
.ta-label{ font-size:12.5px; font-weight:700; color:var(--ta-text-2); }
.ta-label .req{ color:var(--ta-buy); }
.ta-input,.ta-select,.ta-textarea{
  width:100%; min-height:46px; padding:11px 14px; border-radius:var(--ta-r-md); border:1px solid #DDD5CC; background:#fff; color:var(--ta-text);
  font-size:15px; outline:0; transition:border-color var(--ta-t-fast), box-shadow var(--ta-t-fast); -webkit-appearance:none; appearance:none;
}
.ta-textarea{ min-height:110px; resize:vertical; line-height:1.5; }
.ta-select{ padding-right:40px; background:#fff var(--ta-ic-chev) right 14px center / 16px no-repeat; }
.ta-input::placeholder,.ta-textarea::placeholder{ color:#A39A9E; }
.ta-input:hover,.ta-select:hover,.ta-textarea:hover{ border-color:#CBBFB3; }
.ta-input:focus,.ta-select:focus,.ta-textarea:focus{ border-color:var(--ta-ink); box-shadow:0 0 0 3px rgba(10,111,143,.16); }
.ta-field.is-error .ta-input,.ta-field.is-error .ta-select{ border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.ta-field__msg{ font-size:12px; color:#B91C1C; font-weight:600; }
.ta-field__hint{ font-size:12px; color:var(--ta-muted); }
.ta-inputgroup{ display:flex; align-items:stretch; border:1px solid #DDD5CC; border-radius:var(--ta-r-md); background:#fff; overflow:hidden; }
.ta-inputgroup .ta-input{ border:0; box-shadow:none; border-radius:0; }
.ta-inputgroup__btn{ flex:0 0 auto; min-width:48px; border:0; border-left:1px solid #E8E1D9; background:#fff; display:grid; place-items:center; color:var(--ta-text-2); }
.ta-inputgroup:focus-within{ border-color:var(--ta-ink); box-shadow:0 0 0 3px rgba(10,111,143,.16); }
.ta-check{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ta-text-2); line-height:1.45; }
.ta-check input{ flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--ta-buy); }
.ta-divider-or{ display:flex; align-items:center; gap:12px; font-size:12px; color:var(--ta-muted); }
.ta-divider-or::before,.ta-divider-or::after{ content:""; flex:1; height:1px; background:var(--ta-line); }
.ta-meter{ height:7px; border-radius:99px; background:#EDE7E1; overflow:hidden; }
.ta-meter > span{ display:block; height:100%; width:var(--v,0%); border-radius:inherit; background:#EF4444; transition:width .2s, background .2s; }
.ta-meter.is-medium > span{ background:#F59E0B; } .ta-meter.is-strong > span{ background:#10B981; }

/* Segmented tabs (login / register) */
.ta-seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:5px; border-radius:var(--ta-r-pill); background:#F3EFEB; border:1px solid #E8E1D9; }
.ta-seg__btn{ min-height:42px; border:0; border-radius:var(--ta-r-pill); background:transparent; font-size:14px; font-weight:800; color:var(--ta-text-2); transition:background .15s, box-shadow .15s; }
.ta-seg__btn[aria-selected="true"]{ background:#fff; color:var(--ta-text); box-shadow:0 8px 16px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06); }
/* Underline tabs (product detail, dashboard) */
.ta-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--ta-line); overflow-x:auto; scrollbar-width:none; }
.ta-tabs::-webkit-scrollbar{ display:none; }
.ta-tabs__btn{ position:relative; padding:12px 14px; border:0; background:transparent; font-size:14px; font-weight:800; color:var(--ta-muted); white-space:nowrap; }
.ta-tabs__btn:hover{ color:var(--ta-text); }
.ta-tabs__btn[aria-selected="true"]{ color:var(--ta-maroon-500); }
.ta-tabs__btn[aria-selected="true"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--ta-red); }

/* Split card: form left + cream benefits right (member auth, trial registration) */
.ta-split{ display:grid; grid-template-columns:1fr; background:#fff; border-radius:var(--ta-r-2xl); overflow:hidden; box-shadow:0 12px 30px rgba(60,20,10,.10); border:1px solid #EFE6DC; }
.ta-split__main{ padding:20px 16px; }
.ta-split__aside{ position:relative; padding:22px 18px; background:
  radial-gradient(160px 90px at 30% 85%, rgba(255,255,255,.75), transparent 70%),
  radial-gradient(140px 90px at 80% 78%, rgba(255,255,255,.6), transparent 70%),
  var(--ta-cream-2); }
.ta-split__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.ta-split__icon{ width:52px; height:52px; flex:0 0 auto; border-radius:50%; border:1.5px dashed #CFC4B8; display:grid; place-items:center; color:var(--ta-maroon-600); background:#fff; }
.ta-split__title{ font-size:17px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; }
.ta-split__sub{ font-size:12.5px; color:var(--ta-muted); }
.ta-split__sub a{ color:var(--ta-buy); font-weight:900; }
.ta-benefits{ list-style:none; display:grid; gap:10px; margin:14px 0 18px; }
.ta-benefits li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ta-text-2); }
.ta-benefits li::before{ content:""; flex:0 0 auto; width:14px; height:14px; margin-top:4px; border-radius:50%; background:var(--ta-buy); box-shadow:0 0 0 3px rgba(224,38,45,.15); }
.ta-split__asidetitle{ font-size:15px; font-weight:900; letter-spacing:.03em; text-transform:uppercase; text-align:center; color:var(--ta-text); }
.ta-split__asidelead{ margin-top:8px; font-size:14px; color:var(--ta-text-2); text-align:center; }
@media (min-width:960px){
  .ta-split{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
  .ta-split--even{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
  .ta-split__main{ padding:26px 24px; }
  .ta-split__aside{ padding:30px 30px; }
}

/* --------------------------------------------------------------------------
   17. TESTIMONIAL · VALUES · STATS
   -------------------------------------------------------------------------- */
.ta-reviews{ position:relative; overflow:hidden; isolation:isolate; padding:40px var(--ta-gutter) 44px; color:#fff; text-align:center; }
@media (max-width:767px){ .ta-container > .ta-reviews{ margin-inline:calc(-1 * var(--ta-gutter)); } }
.ta-reviews__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:saturate(1.05); }
.ta-reviews::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(40,8,10,.52), rgba(40,8,10,.72)); }
.ta-reviews__kicker{ font-size:12px; font-weight:900; letter-spacing:.32em; text-transform:uppercase; color:#F6C453; }
.ta-reviews__title{ margin-top:6px; font-size:clamp(24px, 1rem + 1.6vw, 36px); font-weight:900; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); text-wrap:balance; }
.ta-quote{ position:relative; max-width:860px; margin:66px auto 0; padding:66px 22px 22px; border-radius:var(--ta-r-lg); background:rgba(122,22,26,.58); border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 18px 40px rgba(0,0,0,.3); }
.ta-quote__avatar{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:50%; display:grid; place-items:center; font-family:var(--ta-font-display); font-weight:900; font-size:32px; color:#5A2E00; background:var(--ta-g-gold); border:4px solid #fff; box-shadow:0 10px 24px rgba(0,0,0,.35); }
.ta-quote__name{ font-size:19px; font-weight:900; color:#FFC53D; }
.ta-quote__role{ font-size:14px; font-style:italic; font-weight:600; color:rgba(255,255,255,.88); }
.ta-quote__text{ margin-top:12px; font-size:15px; line-height:1.65; color:#fff; }
.ta-quote__mark{ display:block; font-family:var(--ta-font-display); font-size:54px; line-height:.5; color:rgba(255,197,61,.85); margin-top:14px; }

.ta-values{ display:grid; grid-template-columns:1fr; gap:14px; }
.ta-value{ text-align:center; padding:20px 18px; background:#fff; border-radius:var(--ta-r-xl); border:1px solid #EFEAE4; box-shadow:0 10px 22px rgba(0,0,0,.06); }
.ta-value__icon{ width:54px; height:54px; margin:2px auto 10px; color:#EF4444; }
.ta-value__title{ font-size:16px; font-weight:700; color:var(--ta-text); }
.ta-value__desc{ margin-top:8px; font-size:13px; line-height:1.6; color:var(--ta-muted); }
.ta-stats{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px; }
.ta-stat{ position:relative; overflow:hidden; text-align:center; padding:20px 16px; border-radius:var(--ta-r-xl); color:#fff;
  background:var(--ta-tx-seigaiha), radial-gradient(120% 160% at 50% 0%, #8E1A1E, #5F0F13); background-size:36px 18px, auto; box-shadow:0 10px 22px rgba(0,0,0,.12); }
.ta-stat__num{ font-weight:900; font-size:38px; line-height:1.05; letter-spacing:.01em; font-variant-numeric:lining-nums tabular-nums; }
.ta-stat__label{ margin-top:8px; font-weight:800; font-size:15px; }
.ta-stat__note{ margin-top:2px; font-size:11.5px; color:rgba(255,255,255,.7); }
@media (min-width:768px){ .ta-values,.ta-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }

/* --------------------------------------------------------------------------
   18. COURSES (online) · LESSON PLAYER
   -------------------------------------------------------------------------- */
.ta-course{ position:relative; display:flex; flex-direction:column; height:100%; background:#fff; border-radius:var(--ta-r-xl); overflow:hidden; border:1px solid #EFEAE4; box-shadow:var(--ta-sh-card); transition:transform .2s var(--ta-ease), box-shadow .2s; }
.ta-course:hover{ transform:translateY(-4px); box-shadow:var(--ta-sh-card-h); }
.ta-course__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#2A0B0D; }
.ta-course__media img{ width:100%; height:100%; object-fit:cover; opacity:.92; }
.ta-course__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:rgba(224,38,45,.92); color:#fff; box-shadow:0 0 0 8px rgba(255,255,255,.22), 0 10px 22px rgba(0,0,0,.35); transition:transform .2s; }
.ta-course:hover .ta-course__play{ transform:translate(-50%,-50%) scale(1.08); }
.ta-course__dur{ position:absolute; right:8px; bottom:8px; padding:3px 8px; border-radius:6px; background:rgba(0,0,0,.65); color:#fff; font-size:11.5px; font-weight:700; }
.ta-course__body{ flex:1; display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px; }
.ta-course__title{ font-size:16px; font-weight:800; line-height:1.35; }
.ta-course__meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ta-muted); }
.ta-course__meta span{ display:inline-flex; align-items:center; gap:5px; }
.ta-course__meta .ta-ico{ width:14px; height:14px; color:var(--ta-ink); }
.ta-course__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ta-progress{ height:8px; border-radius:99px; background:#EFE8E1; overflow:hidden; }
.ta-progress > span{ display:block; height:100%; width:var(--p,0%); border-radius:inherit; background:linear-gradient(90deg,var(--ta-ink),#22B8D6); transform-origin:left; animation:taFill 1s var(--ta-ease-out) both; }
.js .ta-progress:not(.is-anim) > span{ animation:none; transform:scaleX(0); } /* app: fill when in view */

.ta-player{ display:grid; grid-template-columns:1fr; gap:16px; }
.ta-player__video{ position:relative; aspect-ratio:16/9; border-radius:var(--ta-r-xl); overflow:hidden; background:#0E0A0B; box-shadow:0 14px 34px rgba(0,0,0,.25); }
.ta-player__video iframe,.ta-player__video video{ width:100%; height:100%; border:0; }
.ta-player__wm{ position:absolute; right:12px; top:10px; font-size:11px; font-weight:700; color:rgba(255,255,255,.45); pointer-events:none; } /* dynamic watermark: email · time */
.ta-lessons{ background:#fff; border-radius:var(--ta-r-xl); border:1px solid #EFEAE4; box-shadow:var(--ta-sh-card); overflow:hidden; }
.ta-lessons__head{ padding:14px 16px; border-bottom:1px solid var(--ta-line); display:grid; gap:8px; }
.ta-lessons__sec{ padding:10px 16px; background:#FBF6EF; font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--ta-muted); border-bottom:1px solid var(--ta-line); }
.ta-lesson{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--ta-line); font-size:13.5px; }
.ta-lesson__st{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:11px; border:1.5px solid #D9D0C6; color:var(--ta-muted); }
.ta-lesson.is-done .ta-lesson__st{ background:var(--ta-green); border-color:var(--ta-green); color:#fff; }
.ta-lesson.is-current{ background:var(--ta-rose-50); box-shadow:inset 3px 0 0 var(--ta-red); font-weight:800; }
.ta-lesson.is-current .ta-lesson__st{ background:var(--ta-red); border-color:var(--ta-red); color:#fff; }
.ta-lesson.is-locked{ color:var(--ta-muted-2); }
.ta-lesson__time{ margin-left:auto; font-size:12px; color:var(--ta-muted); font-variant-numeric:lining-nums tabular-nums; }
@media (min-width:1024px){ .ta-player{ grid-template-columns:minmax(0,1fr) 360px; align-items:start; } .ta-lessons{ position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; } }

/* --------------------------------------------------------------------------
   19. PRODUCT DETAIL · CART · CHECKOUT · VietQR
   -------------------------------------------------------------------------- */
.ta-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:14px 0; font-size:12.5px; color:var(--ta-muted); }
.ta-crumbs a{ color:var(--ta-text-2); text-decoration:underline; text-underline-offset:2px; }
.ta-crumbs a:hover{ color:var(--ta-maroon-500); }
.ta-crumbs__sep{ color:var(--ta-muted-2); }
.ta-crumbs [aria-current]{ color:var(--ta-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; }

.ta-pd{ display:grid; grid-template-columns:1fr; gap:18px; padding:14px; background:#fff; border-radius:var(--ta-r-xl); border:1px solid #EFEAE4; box-shadow:0 10px 26px rgba(60,20,10,.07); }
.ta-pd__main{ position:relative; aspect-ratio:1/1; border-radius:var(--ta-r-lg); border:1px solid var(--ta-line); overflow:hidden; background:#FCFAF7; }
.ta-pd__thumbs{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.ta-pd__thumbrow{ flex:1; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; }
.ta-pd__thumb{ position:relative; flex:0 0 22%; aspect-ratio:1; border-radius:var(--ta-r-sm); border:2px solid transparent; overflow:hidden; background:#F5F1EC; scroll-snap-align:start; }
.ta-pd__thumb[aria-current="true"]{ border-color:var(--ta-ink); box-shadow:0 0 0 3px rgba(10,111,143,.15); }
.ta-pd__nav{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--ta-line-2); background:#fff; display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.ta-pd__title{ font-size:20px; font-weight:900; line-height:1.35; }
.ta-pd__specs{ display:grid; gap:4px; margin:12px 0 16px; font-size:13px; color:var(--ta-muted); }
.ta-pd__specs b{ color:var(--ta-text-2); }
.ta-pd__buy{ display:flex; flex-wrap:wrap; gap:10px; }
.ta-pd__aside{ border-radius:var(--ta-r-lg); overflow:hidden; background:#111; aspect-ratio:9/16; max-height:480px; }
@media (min-width:960px){ .ta-pd{ grid-template-columns:420px minmax(0,1fr) 260px; gap:28px; padding:16px; } .ta-pd--noaside{ grid-template-columns:440px minmax(0,1fr); } }

/* Sticky buy bar (mobile product / course detail) */
.ta-buybar{ position:fixed; z-index:var(--ta-z-fab); left:0; right:0; bottom:0; display:flex; align-items:center; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid var(--ta-line); box-shadow:0 -8px 24px rgba(0,0,0,.08); transform:translateY(110%); visibility:hidden; transition:transform .25s var(--ta-ease-out), visibility 0s linear .25s; }
.ta-buybar.is-visible{ transform:none; visibility:visible; transition:transform .25s var(--ta-ease-out), visibility 0s; }
.ta-buybar__price{ flex:1 1 auto; min-width:0; display:grid; line-height:1.2; }
.ta-buybar__price b{ font-size:17px; font-weight:900; color:var(--ta-ink); }
.ta-buybar__price s{ font-size:11.5px; color:var(--ta-muted); }
.ta-buybar .ta-btn{ min-height:44px; padding:8px 12px; }
@media (min-width:960px){ .ta-buybar{ display:none; } }
/* app: the cart FAB sits above the buy bar and the dock keeps its usual 18px gap above the FAB (84 + 54 + 18) */
body.has-buybar .ta-fab:not(.ta-fab--top){ bottom:calc(84px + env(safe-area-inset-bottom)); }
body.has-buybar .ta-dock{ bottom:calc(156px + env(safe-area-inset-bottom)); }

/* Checkout steps */
.ta-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:12px 14px; background:#fff; border-radius:var(--ta-r-lg); border:1px solid #EFEAE4; box-shadow:0 4px 12px rgba(0,0,0,.04); list-style:none; }
.ta-steps li{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:800; color:var(--ta-muted); min-width:0; }
.ta-steps__n{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1.5px solid #D6CCC1; background:#fff; font-size:13px; font-weight:900; color:var(--ta-muted); }
.ta-steps li.is-current{ color:var(--ta-text); }
.ta-steps li.is-current .ta-steps__n{ background:var(--ta-red); border-color:var(--ta-red); color:#fff; box-shadow:0 0 0 4px rgba(210,35,34,.15); }
.ta-steps li.is-done .ta-steps__n{ background:var(--ta-green); border-color:var(--ta-green); color:#fff; }
.ta-steps__t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:420px){ .ta-steps li{ flex-direction:column; gap:4px; font-size:11.5px; text-align:center; } }
/* a finished step may link back (e.g. thanh-toan → gio-hang) */
.ta-steps li > a{ display:flex; align-items:center; gap:10px; min-width:0; color:inherit; text-decoration:none; }
.ta-steps li > a:hover .ta-steps__t{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:420px){ .ta-steps li > a{ flex-direction:column; gap:4px; } }

/* Cart line */
.ta-line{ display:grid; grid-template-columns:auto 72px minmax(0,1fr); gap:10px 12px; align-items:start; padding:14px 0; border-bottom:1px solid var(--ta-line); }
.ta-line__check{ padding-top:24px; }
.ta-line__thumb{ position:relative; width:72px; aspect-ratio:3/2; border-radius:var(--ta-r-sm); overflow:hidden; border:1px solid var(--ta-line); }
.ta-line__name{ font-size:13.5px; font-weight:700; line-height:1.35; }
.ta-line__price{ font-size:14px; font-weight:900; color:var(--ta-ink); }
.ta-line__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.ta-line__addon{ margin-top:8px; padding:8px 10px; border-radius:var(--ta-r-sm); background:var(--ta-cream); border:1px dashed #E2C99B; font-size:12.5px; }
.ta-line__remove{ border:0; background:transparent; color:var(--ta-muted-2); font-size:18px; line-height:1; padding:4px; }
.ta-line__remove:hover{ color:var(--ta-buy); }
.ta-qty{ display:inline-flex; align-items:center; border:1px solid #DDD5CC; border-radius:var(--ta-r-sm); overflow:hidden; background:#fff; }
.ta-qty button{ width:32px; height:32px; border:0; background:#FBF8F5; font-size:16px; font-weight:700; }
.ta-qty button:hover{ background:var(--ta-cream); }
.ta-qty input{ width:38px; height:32px; border:0; border-inline:1px solid #EAE3DB; text-align:center; font-weight:800; font-size:14px; -moz-appearance:textfield; }

/* Summary card */
.ta-summary{ background:#fff; border-radius:var(--ta-r-xl); border:1px solid #EFEAE4; box-shadow:0 10px 24px rgba(0,0,0,.06); padding:16px; display:grid; gap:10px; }
.ta-summary__row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--ta-text-2); }
.ta-summary__row b{ color:var(--ta-text); font-variant-numeric:lining-nums tabular-nums; }
.ta-summary__row--disc b{ color:var(--ta-green-700); }
.ta-summary__total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:10px; border-top:1px dashed var(--ta-line-2); font-weight:900; }
.ta-summary__total b{ font-size:22px; color:var(--ta-buy); font-variant-numeric:lining-nums tabular-nums; }
.ta-summary__save{ display:inline-block; padding:3px 9px; border-radius:99px; background:var(--ta-green-50); color:#15803D; font-size:12px; font-weight:800; }
.ta-summary__save.is-flash{ animation:taPop .6s var(--ta-ease); }
@keyframes taPop{ 0%{transform:scale(.8);opacity:0} 60%{transform:scale(1.08);opacity:1} 100%{transform:scale(1)} }

/* Coupon ticket */
.ta-ticket{ position:relative; display:grid; grid-template-columns:92px minmax(0,1fr); background:#fff; border-radius:var(--ta-r-lg); border:1px solid #F1D8D4; box-shadow:var(--ta-sh-card); overflow:hidden; }
.ta-ticket::before,.ta-ticket::after{ content:""; position:absolute; left:84px; width:16px; height:16px; border-radius:50%; background:var(--ta-paper); border:1px solid #F1D8D4; }
.ta-ticket::before{ top:-9px; } .ta-ticket::after{ bottom:-9px; }
.ta-ticket__side{ display:grid; place-items:center; align-content:center; gap:2px; padding:12px 6px; color:#fff; text-align:center; border-right:2px dashed rgba(255,255,255,.6);
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 60%), linear-gradient(160deg,#E8262C,#A3151C); }
.ta-ticket__lbl{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.ta-ticket__val{ font-family:var(--ta-font-display); font-size:26px; font-weight:900; line-height:1; }
.ta-ticket__main{ padding:12px 14px; display:grid; gap:4px; min-width:0; }
.ta-ticket__title{ font-size:14px; font-weight:800; }
.ta-ticket__cond{ font-size:12px; color:var(--ta-muted); }
.ta-ticket__code{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; padding:6px 6px 6px 10px; border-radius:var(--ta-r-sm); background:var(--ta-cream); border:1px dashed #E2C99B; }
.ta-ticket__code b{ font-size:13px; letter-spacing:.08em; color:var(--ta-maroon-600); }

/* VietQR transfer panel */
.ta-qr{ display:grid; grid-template-columns:1fr; gap:18px; padding:16px; background:#fff; border-radius:var(--ta-r-xl); border:1px solid #EFEAE4; box-shadow:0 12px 28px rgba(60,20,10,.08); }
.ta-qr__code{ position:relative; width:min(280px, 100%); aspect-ratio:1; margin-inline:auto; padding:14px; border-radius:var(--ta-r-xl); background:#fff;
  background-image:linear-gradient(var(--ta-red),var(--ta-red)), linear-gradient(var(--ta-red),var(--ta-red)), linear-gradient(var(--ta-red),var(--ta-red)), linear-gradient(var(--ta-red),var(--ta-red)), linear-gradient(var(--ta-red),var(--ta-red)), linear-gradient(var(--ta-red),var(--ta-red)), linear-gradient(var(--ta-red),var(--ta-red)), linear-gradient(var(--ta-red),var(--ta-red));
  background-size:28px 4px, 4px 28px, 28px 4px, 4px 28px, 28px 4px, 4px 28px, 28px 4px, 4px 28px;
  background-position:0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; background-repeat:no-repeat; }
.ta-qr__code img{ width:100%; height:100%; object-fit:contain; }
.ta-qr__rows{ display:grid; gap:0; border:1px solid var(--ta-line); border-radius:var(--ta-r-lg); overflow:hidden; }
.ta-qr__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-bottom:1px solid var(--ta-line); font-size:13.5px; }
.ta-qr__row:last-child{ border-bottom:0; }
.ta-qr__row span{ color:var(--ta-muted); }
.ta-qr__row b{ font-weight:900; text-align:right; word-break:break-all; }
.ta-qr__row--hl{ background:var(--ta-amber-50); }
.ta-qr__row--hl b{ color:var(--ta-buy); letter-spacing:.06em; }
.ta-copy{ flex:0 0 auto; padding:5px 10px; border-radius:7px; border:1px solid var(--ta-ink-100); background:var(--ta-ink-50); color:var(--ta-ink-700); font-size:12px; font-weight:800; }
.ta-copy.is-copied{ background:var(--ta-green-50); border-color:#BBF7D0; color:#15803D; }
.ta-qr__status{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--ta-r-md); background:var(--ta-ink-50); color:var(--ta-ink-700); font-size:13.5px; font-weight:700; }
.ta-qr__status::before{ content:""; width:10px; height:10px; border-radius:50%; background:currentColor; animation:taPulse 1.4s ease-in-out infinite; }
.ta-qr__status.is-paid{ background:var(--ta-green-50); color:#15803D; }
.ta-qr__status.is-paid::before{ animation:none; }
@keyframes taPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(10,111,143,.45); } 50%{ box-shadow:0 0 0 7px rgba(10,111,143,0); } }
@media (min-width:768px){ .ta-qr{ grid-template-columns:300px minmax(0,1fr); padding:22px; gap:26px; } }

/* Empty state */
.ta-empty{ display:grid; justify-items:center; gap:8px; padding:34px 16px; text-align:center; background:#fff; border:1px dashed #DCCFC1; border-radius:var(--ta-r-xl); }
.ta-empty__icon{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:var(--ta-rose-50); border:2px solid var(--ta-rose-200); color:var(--ta-red); }
.ta-empty__title{ font-size:18px; font-weight:900; }
.ta-empty__text{ font-size:14px; color:var(--ta-muted); }

/* Pagination */
.ta-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; list-style:none; }
.ta-pager a,.ta-pager span{ display:grid; place-items:center; min-width:38px; height:38px; padding:0 10px; border-radius:var(--ta-r-md); background:#fff; border:1px solid var(--ta-line-2); font-size:14px; font-weight:800; color:var(--ta-text-2); }
.ta-pager a:hover{ border-color:var(--ta-maroon-500); color:var(--ta-maroon-500); }
.ta-pager [aria-current="page"]{ background:var(--ta-buy); border-color:var(--ta-buy); color:#fff; box-shadow:var(--ta-sh-btn); }

/* Skeleton */
.ta-skel{ position:relative; overflow:hidden; background:#EEE7DF; border-radius:var(--ta-r-sm); min-height:12px; }
.ta-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation:taShimmer 1.3s infinite; }
@keyframes taShimmer{ to{ transform:translateX(100%); } }
.ta-skel--media{ aspect-ratio:3/2; border-radius:0; }
.ta-skel--line{ height:12px; } .ta-skel--line.w60{ width:60%; } .ta-skel--line.w40{ width:40%; }

/* --------------------------------------------------------------------------
   20. MEMBER DASHBOARD · AFFILIATE (CTV) · ADMIN
   -------------------------------------------------------------------------- */
.ta-dash{ display:grid; grid-template-columns:1fr; gap:16px; }
.ta-dash__nav{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:6px; background:#fff; border-radius:var(--ta-r-lg); border:1px solid #EFEAE4; }
.ta-dash__nav::-webkit-scrollbar{ display:none; }
.ta-dash__nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--ta-r-md); font-size:13.5px; font-weight:700; color:var(--ta-text-2); white-space:nowrap; }
.ta-dash__nav a:hover{ background:var(--ta-cream); }
.ta-dash__nav a[aria-current="page"]{ background:var(--ta-rose-50); color:var(--ta-maroon-500); box-shadow:inset 3px 0 0 var(--ta-red); }
.ta-dash__profile{ display:flex; align-items:center; gap:12px; padding:16px; border-radius:var(--ta-r-xl); color:#fff; background:var(--ta-tx-seigaiha), var(--ta-g-header); background-size:36px 18px, auto; }
.ta-avatar{ width:56px; height:56px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:var(--ta-g-gold); color:#5A2E00; font-weight:900; font-size:20px; border:3px solid #fff; overflow:hidden; }
.ta-avatar img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:960px){ .ta-dash{ grid-template-columns:260px minmax(0,1fr); align-items:start; } .ta-dash__nav{ flex-direction:column; position:sticky; top:16px; } }

.ta-kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:960px){ .ta-kpis{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } }
.ta-kpi{ display:grid; gap:4px; padding:14px; background:#fff; border-radius:var(--ta-r-lg); border:1px solid #EFEAE4; box-shadow:0 4px 12px rgba(0,0,0,.04); }
.ta-kpi__label{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--ta-muted); }
.ta-kpi__icon{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--ta-rose-50); color:var(--ta-red); }
.ta-kpi__icon--ink{ background:var(--ta-ink-50); color:var(--ta-ink); }
.ta-kpi__icon--gold{ background:#FFF4D6; color:#B7791F; }
.ta-kpi__icon--green{ background:var(--ta-green-50); color:var(--ta-green); }
.ta-kpi__num{ font-size:24px; font-weight:900; letter-spacing:-.01em; font-variant-numeric:lining-nums tabular-nums; }
.ta-kpi__sub{ font-size:12px; color:var(--ta-muted); }
.ta-kpi--hero{ color:#fff; background:var(--ta-tx-seigaiha), linear-gradient(135deg,#8E1A1E,#C3161D); background-size:36px 18px, auto; border:0; }
.ta-kpi--hero .ta-kpi__label,.ta-kpi--hero .ta-kpi__sub{ color:rgba(255,255,255,.85); }

.ta-reflink{ display:flex; gap:8px; padding:6px; border-radius:var(--ta-r-lg); background:var(--ta-cream); border:1px dashed #E2C99B; }
.ta-reflink input{ flex:1; min-width:0; border:0; background:transparent; padding:0 8px; font-weight:700; color:var(--ta-maroon-600); outline:0; }

.ta-admin{ display:grid; grid-template-columns:1fr; min-height:100vh; background:#F6F2EE; }
.ta-admin__side{ background:var(--ta-maroon-900); color:#fff; padding:14px; }
.ta-admin__side a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--ta-r-md); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.82); }
.ta-admin__side a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.ta-admin__side a[aria-current="page"]{ background:rgba(255,183,3,.14); color:#FFD66B; box-shadow:inset 3px 0 0 var(--ta-sun); }
.ta-admin__group{ margin:14px 0 6px; padding:0 12px; font-size:10.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.ta-admin__main{ padding:16px; min-width:0; }
.ta-admin__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ta-admin__h1{ font-size:22px; font-weight:900; }
.ta-filterbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; background:#fff; border:1px solid #EFEAE4; border-radius:var(--ta-r-lg) var(--ta-r-lg) 0 0; border-bottom:0; }
.ta-filterbar .ta-input,.ta-filterbar .ta-select{ min-height:38px; padding-block:7px; font-size:13.5px; width:auto; flex:1 1 180px; min-width:0; max-width:100%; }
.ta-tablecard{ background:#fff; border:1px solid #EFEAE4; border-radius:var(--ta-r-lg); overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.04); }
.ta-filterbar + .ta-tablecard{ border-radius:0 0 var(--ta-r-lg) var(--ta-r-lg); }
@media (min-width:1024px){ .ta-admin{ grid-template-columns:248px minmax(0,1fr); } .ta-admin__side{ position:sticky; top:0; height:100vh; overflow:auto; } .ta-admin__main{ padding:24px 28px; } }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.ta-footer{ position:relative; margin-top:56px; color:#fff;
  background:var(--ta-tx-seigaiha), radial-gradient(120% 100% at 50% 0%, #7A1419 0%, #5F0F13 55%, #470B0E 100%);
  background-size:36px 18px, auto; border-top:3px solid var(--ta-gold-500); }
.ta-footer__top{ display:grid; grid-template-columns:1fr; gap:0; padding-top:28px; }
.ta-footer__brand{ display:grid; gap:12px; align-content:start; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.14); }
.ta-footer__about{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.88); max-width:34rem; }
.ta-social{ display:flex; gap:8px; }
.ta-social a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; transition:background .15s, transform .15s; }
.ta-social a:hover{ background:var(--ta-sun); color:var(--ta-maroon-800); transform:translateY(-2px); }
.ta-footer__col{ border-bottom:1px solid rgba(255,255,255,.14); }
.ta-footer__h{ margin:0; }
.ta-footer__title{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; margin:0; border:0; background:transparent; cursor:pointer; text-align:left;
  font-size:15px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ta-gold); }
.ta-footer__title::after{ content:""; width:18px; height:18px; flex:0 0 auto; background:var(--ta-gold); -webkit-mask:var(--ta-ic-chev) center/18px no-repeat; mask:var(--ta-ic-chev) center/18px no-repeat; transition:transform .2s; opacity:.85; }
.ta-footer__title[aria-expanded="true"]::after{ transform:rotate(180deg); }
.ta-footer__links{ list-style:none; display:grid; gap:2px; padding-bottom:12px; }
@media (max-width:959px){ .ta-footer__col:not(.is-open) .ta-footer__links{ display:none; } } /* app: class-based accordion */
.ta-footer__links li{ display:block; padding:5px 0; font-size:13.5px; color:rgba(255,255,255,.92); }
.ta-footer__links a{ display:inline; color:inherit; }
.ta-footer__links a:hover{ text-decoration:underline; color:#fff; }
.ta-footer__links .ta-ico{ display:inline-block; width:15px; height:15px; margin-right:8px; vertical-align:-2px; color:var(--ta-gold); }
.ta-footer__bottom{ padding:18px 0 calc(22px + env(safe-area-inset-bottom)); font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.75); display:grid; gap:10px; }
.ta-footer__bottom strong{ color:#fff; }
.ta-footer__legal{ color:var(--ta-gold); font-weight:800; }
@media (min-width:960px){
  .ta-footer__top{ grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-top:40px; padding-bottom:12px; }
  .ta-footer__brand,.ta-footer__col{ border-bottom:0; padding-bottom:0; }
  .ta-footer__title{ cursor:default; padding:0 0 10px; font-size:14px; pointer-events:none; }
  .ta-footer__title::after{ display:none; }
  .ta-footer__bottom{ grid-template-columns:1fr auto; align-items:center; border-top:1px solid rgba(255,255,255,.14); margin-top:20px; }
}

/* --------------------------------------------------------------------------
   22. FLOATING: contact dock · cart FAB · scroll-top
   -------------------------------------------------------------------------- */
.ta-dock{ position:fixed; z-index:var(--ta-z-dock); right:max(10px, env(safe-area-inset-right)); bottom:calc(96px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.ta-dock__btn{
  --dock-bg:linear-gradient(135deg,#E0262D,#8E1A1E);
  position:relative; display:flex; align-items:center; justify-content:center; gap:0; width:46px; height:46px; padding:0; overflow:hidden; white-space:nowrap;
  border-radius:var(--ta-r-pill); background:var(--dock-bg); color:#fff; border:1px solid rgba(255,255,255,.18); box-shadow:var(--ta-sh-dock);
  transition:width .18s, padding .18s, transform .18s, box-shadow .18s; animation:taFloat 2.4s ease-in-out infinite;
}
.ta-dock__btn:nth-child(2){ animation-delay:.3s; } .ta-dock__btn:nth-child(3){ animation-delay:.6s; }
.ta-dock__btn--zalo{ --dock-bg:linear-gradient(135deg,#0068FF,#00A3FF); }
.ta-dock__btn--mess{ --dock-bg:linear-gradient(135deg,#A334FA 0%,#0695FF 55%,#FF6968 100%); }
.ta-dock__ico{ position:relative; z-index:1; flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); font-weight:900; font-size:15px; }
/* app: the wiggle runs on the icon only, so the spinning ring (::after) is not re-composited inside a rotating box */
.ta-dock__ico svg{ display:block; width:16px; height:16px; animation:taAttention 1.4s ease-in-out infinite; }
.ta-dock__ico::after{ content:""; position:absolute; inset:-7px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.95) 40deg, rgba(255,255,255,0) 90deg, rgba(255,255,255,.7) 160deg, rgba(255,255,255,0) 220deg, rgba(255,255,255,.95) 300deg, rgba(255,255,255,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation:taSpin 2.1s linear infinite; }
.ta-dock__label{ position:relative; z-index:1; display:none; font-size:13px; font-weight:900; letter-spacing:.01em; }
@media (hover:hover) and (pointer:fine){
  .ta-dock__btn:hover{ width:auto; padding:0 16px 0 8px; gap:10px; transform:translateX(-2px); box-shadow:0 16px 34px rgba(0,0,0,.28); }
  .ta-dock__btn:hover .ta-dock__label{ display:block; }
}
@keyframes taFloat{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-3px,0); } }
@keyframes taAttention{ 0%,60%,100%{ transform:rotate(0); } 10%{ transform:rotate(-10deg); } 20%{ transform:rotate(10deg); } 30%{ transform:rotate(-7deg); } 40%{ transform:rotate(6deg); } 50%{ transform:rotate(-3deg); } }

.ta-fab{ position:fixed; z-index:var(--ta-z-fab); right:max(18px, env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  background:#fff; color:var(--ta-ink); border:4px solid var(--ta-ink); box-shadow:0 12px 26px rgba(0,0,0,.18), 0 0 0 6px rgba(10,111,143,.12); animation:taPulseScale 2.5s ease-in-out infinite; transition:transform .2s; }
.ta-fab:hover{ transform:scale(1.08); }
.ta-fab svg{ width:24px; height:24px; animation:taAttention 1.6s ease-in-out infinite; }
.ta-fab__badge{ position:absolute; top:-8px; right:-8px; min-width:22px; height:22px; padding:0 6px; border-radius:99px; display:grid; place-items:center; background:var(--ta-buy); color:#fff; font-size:11.5px; font-weight:900; border:2px solid #fff; }
.ta-fab--top{ bottom:calc(88px + env(safe-area-inset-bottom)); width:44px; height:44px; border-width:0; background:var(--ta-maroon-600); color:#fff; animation:none; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
.ta-fab--top.is-visible{ opacity:1; visibility:visible; }
@keyframes taPulseScale{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
body.is-cart-page .ta-fab,body.is-checkout-page .ta-fab{ display:none; }
@media (max-width:767px){ body.is-cart-page .ta-dock,body.is-checkout-page .ta-dock{ display:none; } }
@media (max-width:767px){ body.is-auth-page .ta-dock,body.is-auth-page .ta-fab:not(.ta-fab--top){ display:none; } }

/* Fly-to-cart ghost */
.ta-fly{ position:fixed; z-index:calc(var(--ta-z-modal) + 1); left:0; top:0; width:64px; height:64px; border-radius:12px; overflow:hidden; pointer-events:none; box-shadow:0 10px 24px rgba(0,0,0,.3);
  transform:translate(var(--x0),var(--y0)) scale(1); transition:transform .7s cubic-bezier(.5,-.3,.7,1), opacity .7s ease-in; }
.ta-fly.is-flying{ transform:translate(var(--x1),var(--y1)) scale(.2); opacity:.4; }

/* --------------------------------------------------------------------------
   23. TOASTS · RECENT-PURCHASE (real orders only)
   -------------------------------------------------------------------------- */
.ta-toasts{ position:fixed; z-index:var(--ta-z-toast); left:50%; top:16px; transform:translateX(-50%); display:grid; gap:8px; width:min(420px, calc(100% - 24px)); pointer-events:none; }
.ta-toast{ pointer-events:auto; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--ta-r-lg); background:#1F1517; color:#fff; font-size:13.5px; font-weight:600; box-shadow:0 14px 34px rgba(0,0,0,.25); animation:taToastIn .3s var(--ta-ease-out); }
.ta-toast--ok{ background:#14532D; } .ta-toast--err{ background:#7F1D1D; }
@keyframes taToastIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }

.ta-rp{ position:fixed; z-index:var(--ta-z-toast); left:max(12px, env(safe-area-inset-left)); bottom:calc(14px + env(safe-area-inset-bottom)); width:350px; max-width:calc(100% - 96px);
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(148,130,120,.28); border-radius:14px; box-shadow:0 14px 40px rgba(30,10,10,.18); overflow:hidden;
  transform:translate3d(0,14px,0); opacity:0; transition:transform .24s var(--ta-ease), opacity .24s; }
.ta-rp.is-open{ transform:none; opacity:1; }
.ta-rp__progress{ height:4px; background:rgba(148,130,120,.2); }
.ta-rp__progress span{ display:block; height:100%; background:linear-gradient(90deg,#22C55E,#16A34A 40%,var(--ta-ink)); transform-origin:left; animation:taDrain 9s linear forwards; } /* = RP_SHOW_MS in layout.js */
.ta-rp.is-held .ta-rp__progress span{ animation-play-state:paused; }
@keyframes taDrain{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
.ta-rp__close{ position:absolute; top:10px; right:8px; width:30px; height:30px; border-radius:9px; border:1px solid rgba(148,130,120,.28); background:rgba(255,255,255,.8); font-size:18px; line-height:1; display:grid; place-items:center; color:var(--ta-text); }
.ta-rp__top{ display:flex; align-items:center; gap:8px; padding:10px 44px 0 12px; }
.ta-rp__badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:12px; font-weight:800; color:#0B3B2A; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.28); }
.ta-rp__verified{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ta-muted); }
.ta-rp__verified::before{ content:""; width:15px; height:15px; border-radius:50%; background:#16A34A; -webkit-mask:var(--ta-ic-check) center/11px no-repeat, linear-gradient(#000,#000); -webkit-mask-composite:xor; mask:var(--ta-ic-check) center/11px no-repeat exclude, linear-gradient(#000,#000); }
.ta-rp__row{ display:flex; gap:12px; padding:10px 12px 12px; }
.ta-rp__avatar{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--ta-cream); border:1px solid var(--ta-line-2); font-weight:900; font-size:14px; color:var(--ta-maroon-600); }
.ta-rp__name{ font-size:14.5px; font-weight:800; line-height:1.2; }
.ta-rp__status{ font-size:12px; color:var(--ta-muted); margin-top:2px; }
.ta-rp__product{ display:flex; align-items:center; gap:8px; margin-top:8px; padding:6px 8px; border-radius:10px; border:1px solid var(--ta-line); background:#fff; min-width:0; }
.ta-rp__thumb{ position:relative; flex:0 0 auto; width:34px; height:34px; border-radius:7px; overflow:hidden; border:1px solid var(--ta-line); }
.ta-rp__pname{ font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ta-rp__sub{ font-size:11.5px; color:var(--ta-muted); }
.ta-rp__sub b{ color:var(--ta-green-700); }
@media (max-width:600px){
  .ta-rp{ width:auto; right:76px; border-radius:12px; }
  .ta-rp__verified,.ta-rp__status{ display:none; }
  .ta-rp__top{ padding:8px 40px 0 10px; }
  .ta-rp__badge{ padding:3px 8px; font-size:11px; }
  .ta-rp__close{ top:6px; right:6px; width:26px; height:26px; }
  .ta-rp__row{ padding:6px 10px 10px; gap:10px; }
  .ta-rp__avatar{ width:32px; height:32px; font-size:12px; }
  .ta-rp__name{ font-size:12.5px; }
  .ta-rp__product{ margin-top:6px; padding:4px 6px; }
  .ta-rp__thumb{ width:26px; height:26px; }
}

/* --------------------------------------------------------------------------
   24. MODAL · VOUCHER POPUP
   -------------------------------------------------------------------------- */
.ta-modal{ position:fixed; inset:0; z-index:var(--ta-z-modal); display:grid; place-items:center; padding:16px; background:rgba(25,6,8,.62); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .2s, visibility 0s linear .2s; }
/* app: visibility flips at once on open, so the dialog can take focus in the same frame */
.ta-modal.is-open{ opacity:1; visibility:visible; transition:opacity .2s, visibility 0s; }
.ta-modal__dialog{ position:relative; width:min(460px, 100%); max-height:calc(100dvh - 32px); overflow:auto; background:#fff; border-radius:var(--ta-r-2xl); box-shadow:0 30px 70px rgba(0,0,0,.4); transform:translateY(16px) scale(.97); transition:transform .28s var(--ta-ease-out); }
.ta-modal.is-open .ta-modal__dialog{ transform:none; }
.ta-modal__close{ position:absolute; z-index:3; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--ta-text); font-size:20px; line-height:1; display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.ta-modal--inline{ position:relative; inset:auto; z-index:auto; opacity:1; visibility:visible; background:transparent; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
.ta-modal--inline .ta-modal__dialog{ transform:none; }

.ta-voucher{ position:relative; overflow:hidden; padding:28px 22px 22px; text-align:center; color:#fff;
  background:radial-gradient(4px 4px at 12% 18%, #FFE27A 50%, transparent 52%), radial-gradient(3px 3px at 84% 12%, #fff 50%, transparent 52%), radial-gradient(5px 5px at 90% 46%, #FFE27A 50%, transparent 52%), radial-gradient(3px 3px at 8% 62%, #fff 50%, transparent 52%), radial-gradient(4px 4px at 72% 86%, #FFE27A 50%, transparent 52%),
    radial-gradient(120% 80% at 50% 0%, #FF6A3D 0%, #E0262D 42%, #8E1A1E 100%); }
.ta-voucher::before{ content:""; position:absolute; inset:-40% -20% auto; height:120%; background:repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,255,255,0) 0 8deg, rgba(255,255,255,.08) 8deg 12deg); pointer-events:none; animation:taSpin 30s linear infinite; }
.ta-voucher > *{ position:relative; }
.ta-voucher__kicker{ font-size:12px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:#FFE27A; }
.ta-voucher__title{ margin-top:6px; font-size:24px; font-weight:900; line-height:1.15; text-transform:uppercase; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.18); }
.ta-voucher__script{ font-family:var(--ta-font-script); font-size:30px; color:#FFE9B0; line-height:1.1; }
.ta-voucher__ticket{ position:relative; margin:16px auto 14px; max-width:300px; padding:16px 18px; border-radius:14px; background:linear-gradient(180deg,#FFFBF0,#FFEBC2); color:var(--ta-maroon-600); box-shadow:0 14px 26px rgba(70,8,10,.35);
  -webkit-mask:radial-gradient(10px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(10px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
          mask:radial-gradient(10px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(10px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat; }
.ta-voucher__lbl{ font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.ta-voucher__val{ font-family:var(--ta-font-display); font-weight:900; font-size:52px; line-height:1; color:var(--ta-buy); text-shadow:0 2px 0 #FFD47A; }
.ta-voucher__code{ display:inline-block; margin-top:6px; padding:4px 12px; border-radius:8px; border:1.5px dashed #D9A441; font-weight:900; letter-spacing:.12em; font-size:14px; }
.ta-voucher__note{ font-size:12.5px; color:rgba(255,255,255,.88); margin-top:10px; }

/* --------------------------------------------------------------------------
   25. MAP / ADDRESS · ARTICLE · POLICY CARDS · VIDEO CARD
   -------------------------------------------------------------------------- */
.ta-map{ display:grid; grid-template-columns:1fr; background:#fff; border-radius:var(--ta-r-xl); overflow:hidden; border:1px solid #EFEAE4; box-shadow:var(--ta-sh-card); }
.ta-map__info{ padding:18px; display:grid; gap:10px; align-content:start; }
.ta-map__row{ display:flex; gap:10px; font-size:14px; }
.ta-map__row .ta-ico{ color:var(--ta-red); margin-top:3px; }
.ta-map__frame{ min-height:280px; background:#EDE6DD; }
.ta-map__frame iframe{ width:100%; height:100%; min-height:280px; border:0; display:block; }
@media (min-width:960px){ .ta-map{ grid-template-columns:380px minmax(0,1fr); } .ta-map__frame,.ta-map__frame iframe{ min-height:360px; } }

.ta-post{ display:flex; flex-direction:column; height:100%; background:#fff; border-radius:var(--ta-r-xl); overflow:hidden; border:1px solid #EFEAE4; box-shadow:var(--ta-sh-card); transition:transform .2s, box-shadow .2s; }
.ta-post:hover{ transform:translateY(-3px); box-shadow:var(--ta-sh-card-h); }
.ta-post__media{ aspect-ratio:16/10; overflow:hidden; } .ta-post__media img{ width:100%; height:100%; object-fit:cover; }
.ta-post__body{ padding:14px 16px 16px; display:grid; gap:6px; }
.ta-post__cat{ font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--ta-red); }
.ta-post__title{ font-family:var(--ta-font-title); font-weight:700; font-size:18px; line-height:1.3; }
.ta-post__date{ font-size:12px; color:var(--ta-muted); }
.ta-prose{ max-width:72ch; font-size:16px; line-height:1.75; color:var(--ta-text-2); }
.ta-prose h2{ font-family:var(--ta-font-title); font-size:24px; color:var(--ta-maroon-500); margin:1.6em 0 .5em; }
.ta-prose h3{ font-size:18px; margin:1.4em 0 .4em; }
.ta-prose p{ margin:0 0 1em; } .ta-prose ul,.ta-prose ol{ margin:0 0 1em; padding-left:1.3em; } .ta-prose li{ margin:.3em 0; }
.ta-prose blockquote{ margin:1.2em 0; padding:12px 16px; border-left:4px solid var(--ta-gold-500); background:var(--ta-cream); border-radius:0 10px 10px 0; font-style:italic; }
.ta-prose img{ border-radius:var(--ta-r-lg); }

.ta-policy{ max-width:900px; margin-inline:auto; display:grid; gap:16px; }
.ta-policy__card{ background:#fff; border-radius:var(--ta-r-lg); border:1px solid #EFEAE4; box-shadow:0 4px 12px rgba(0,0,0,.04); padding:16px 18px; }
.ta-policy__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.ta-policy__icon{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--ta-rose-50); color:var(--ta-red); border:1px solid var(--ta-rose-200); }
.ta-policy__title{ font-size:16px; font-weight:900; }
.ta-policy__card ul{ padding-left:1.2em; display:grid; gap:6px; font-size:14.5px; color:var(--ta-text-2); }

.ta-videocard{ background:#fff; border-radius:var(--ta-r-2xl); padding:14px; box-shadow:0 14px 34px rgba(60,20,10,.10); }
.ta-videocard__title{ text-align:center; font-weight:900; font-size:15px; margin:4px 0 12px; }
.ta-videocard__frame{ aspect-ratio:16/9; border-radius:var(--ta-r-xl); overflow:hidden; background:#140B0C; }
.ta-videocard__frame iframe{ width:100%; height:100%; border:0; }

/* Resource card (free download) */
.ta-res{ display:flex; flex-direction:column; background:#fff; border-radius:var(--ta-r-lg); overflow:hidden; border:1px solid #EFEAE4; box-shadow:var(--ta-sh-card); }
.ta-res__media{ position:relative; aspect-ratio:16/9; }
.ta-res__body{ flex:1; display:flex; flex-direction:column; gap:10px; padding:10px; }
.ta-res__name{ font-size:13px; font-weight:600; line-height:1.35; min-height:2.7em; }
.ta-res .ta-btn{ margin-top:auto; }

/* --------------------------------------------------------------------------
   26. REVEAL · REDUCED MOTION
   -------------------------------------------------------------------------- */
.ta-reveal{ opacity:0; transform:translate3d(0,40px,0); transition:opacity .9s var(--ta-ease), transform .9s var(--ta-ease); transition-delay:var(--d,0ms); }
.ta-reveal.is-in{ opacity:1; transform:none; }
.no-js .ta-reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .ta-marquee__track,.ta-ticker__track{ animation:none !important; transform:none !important; }
  .ta-marquee__group[aria-hidden="true"],.ta-ticker__group[aria-hidden="true"]{ display:none; }
  .ta-marquee,.ta-ticker__viewport{ overflow-x:auto; scrollbar-width:none; }
  .ta-dock__btn,.ta-dock__ico,.ta-dock__ico > svg,.ta-dock__ico::after,.ta-fab,.ta-fab svg,.ta-hero__spark,.ta-band__burst,.ta-voucher::before{ animation:none !important; }
  .ta-reveal{ opacity:1 !important; transform:none !important; }
  .ta-sold__fill,.ta-progress > span{ animation:none !important; }
  .ta-card:hover,.ta-program:hover,.ta-course:hover,.ta-btn:hover{ transform:none; }
  .ta-fly{ display:none !important; }
}

/* Print */
@media print{
  .ta-topbar,.ta-welcome,.ta-nav,.ta-dock,.ta-fab,.ta-rp,.ta-modal,.ta-buybar{ display:none !important; }
  html,body{ background:#fff; }
}

/* ==========================================================================
   SHELL & LIVE-SITE ADDITIONS (sections 27+)
   ========================================================================== */

/* --------------------------------------------------------------------------
   27. BASE ADDITIONS · UTILITIES
   -------------------------------------------------------------------------- */
html{ scroll-padding-top:96px; }
html.ta-locked, html.ta-locked body{ overflow:hidden; }
main{ display:block; min-height:40vh; }
main:focus{ outline:0; }
.ta-rel{ position:relative; }
.ta-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
.ta-center{ text-align:center; }
.ta-mt-0{ margin-top:0 !important; } .ta-mt-1{ margin-top:8px; } .ta-mt-2{ margin-top:16px; } .ta-mt-3{ margin-top:24px; } .ta-mt-4{ margin-top:32px; }
.ta-stack{ display:grid; gap:var(--gap, 12px); align-content:start; }
.ta-cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap, 8px); }
.ta-row{ display:flex; align-items:center; gap:var(--gap, 10px); min-width:0; }
.ta-spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ta-panel{ background:#fff; border:1px solid #EFEAE4; border-radius:var(--ta-r-xl); box-shadow:0 8px 22px rgba(60,20,10,.06); padding:16px; }
@media (min-width:768px){ .ta-panel{ padding:20px 22px; } }
.ta-panel__title{ font-family:var(--ta-font-title); font-weight:700; font-size:19px; color:var(--ta-maroon-500); margin-bottom:10px; }
.ta-divider{ height:1px; background:var(--ta-line); border:0; margin:16px 0; }
@media (max-width:767px){ .ta-hide-mobile{ display:none !important; } }
@media (min-width:768px){ .ta-hide-desktop{ display:none !important; } }
.ta-fade{ opacity:0; transition:opacity .45s ease; }
.ta-fade.is-loaded{ opacity:1; }
.ta-sec__more .ta-ico{ width:14px; height:14px; }
.ta-btn.is-disabled{ pointer-events:none; }
a.ta-btn{ text-decoration:none; }
.ta-price__now--free{ color:var(--ta-green-700); }

/* Notes & alerts */
.ta-note{ display:inline-flex; align-items:flex-start; gap:7px; margin:10px 0 0; padding:6px 12px; border-radius:12px; border:1px dashed #C9B49A; background:rgba(255,255,255,.75); font-size:12px; line-height:1.45; color:var(--ta-muted); }
.ta-note .ta-ico{ width:14px; height:14px; margin-top:1px; color:var(--ta-gold-700); flex:0 0 auto; }
.ta-flash .ta-note{ background:rgba(0,0,0,.15); border-color:rgba(255,255,255,.4); color:#fff; }
.ta-flash .ta-note .ta-ico{ color:#FFE27A; }
.ta-alert{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--ta-r-lg); border:1px solid; font-size:13.5px; line-height:1.5; }
.ta-alert__ico{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
.ta-alert__body{ display:grid; gap:2px; min-width:0; }
.ta-alert__title{ font-weight:800; }
.ta-alert--info{ background:var(--ta-ink-50); border-color:var(--ta-ink-100); color:var(--ta-ink-700); }
.ta-alert--ok{ background:var(--ta-green-50); border-color:#BBF7D0; color:#166534; }
.ta-alert--warn{ background:var(--ta-amber-50); border-color:#FDE68A; color:#92400E; }
.ta-alert--err{ background:var(--ta-rose-50); border-color:var(--ta-rose-200); color:#991B1B; }

/* Accordion (FAQ) */
.ta-acc{ display:grid; gap:10px; }
.ta-acc details{ background:#fff; border:1px solid #EFEAE4; border-radius:var(--ta-r-lg); box-shadow:0 4px 12px rgba(0,0,0,.03); overflow:hidden; }
.ta-acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; font-weight:800; font-size:14.5px; }
.ta-acc summary::-webkit-details-marker{ display:none; }
.ta-acc summary::after{ content:""; flex:0 0 auto; width:18px; height:18px; background:var(--ta-maroon-500); -webkit-mask:var(--ta-ic-chev) center/18px no-repeat; mask:var(--ta-ic-chev) center/18px no-repeat; transition:transform .2s; }
.ta-acc details[open] summary::after{ transform:rotate(180deg); }
.ta-acc details[open] summary{ color:var(--ta-maroon-500); }
.ta-acc__body{ padding:0 16px 16px; font-size:14px; line-height:1.65; color:var(--ta-text-2); }

/* Key-value list, stars, avatar sizes */
.ta-kv{ display:grid; gap:6px; margin:0; font-size:13.5px; }
.ta-kv > div{ display:flex; justify-content:space-between; gap:12px; }
.ta-kv dt{ color:var(--ta-muted); } .ta-kv dd{ margin:0; font-weight:700; text-align:right; }
.ta-stars{ display:inline-flex; gap:1px; color:#F59E0B; } .ta-stars .ta-ico{ width:15px; height:15px; }
.ta-stars .is-off{ color:#E5DED6; }
.ta-avatar--sm{ width:36px; height:36px; font-size:14px; border-width:2px; }

/* --------------------------------------------------------------------------
   28. MASTHEAD (sticky) · ANNOUNCEMENTS · SEARCH · ACCOUNT MENU · SLIM BAR
   -------------------------------------------------------------------------- */
/* app: boot() replaces <div id="app-header"> with masthead + nav after the module chain has loaded. Until then the
   empty placeholder keeps their height, so the page does not jump down (CLS). Measured masthead + nav:
   198px < 600 (two-line welcome bar), 197px 600–959, 199px ≥ 960. Pages with another shell mark the placeholder:
   data-shell="minimal" (slim bar, hoc.html) / data-shell="none" (admin). Re-measure if the header bars change. */
:root{ --ta-shell-h:198px; }
@media (min-width:600px){ :root{ --ta-shell-h:197px; } }
@media (min-width:960px){ :root{ --ta-shell-h:199px; } }
div#app-header:empty{ display:block; min-height:var(--ta-shell-h); }
div#app-header[data-shell="minimal"]:empty{ min-height:56px; }
div#app-header[data-shell="none"]{ display:none; }
/* full-shell pages: the content area fills at least the first screen, so the footer is never in view while the
   page's data loads and then pushed down by it (CLS) */
#app-header:not([data-shell]) ~ #main{ min-height:calc(100vh - var(--ta-shell-h)); }
.ta-masthead{ position:sticky; top:calc(-1 * var(--ta-head-skip, 0px)); z-index:var(--ta-z-header); }
.ta-masthead.is-stuck .ta-header{ box-shadow:inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.18); }
.ta-marquee a{ color:inherit; }
.ta-marquee a:hover{ text-decoration:underline; text-underline-offset:2px; }
.ta-welcome__addr{ display:inline-flex; align-items:center; gap:5px; }
/* tablets: the full greeting needs the room; the address stays in the footer, contact dock and Liên hệ */
@media (max-width:1099px){ .ta-welcome__addr{ display:none; } }
.ta-welcome__right .ta-ico{ width:14px; height:14px; opacity:.7; }
.ta-welcome__right b{ font-weight:900; }
.ta-welcome__admin{ padding:1px 8px; border-radius:99px; background:rgba(95,15,19,.12); font-weight:800; }

.ta-searchwrap{ position:relative; display:none; min-width:0; }
@media (min-width:960px){ .ta-searchwrap{ display:block; } }
.ta-search button .ta-ico{ width:19px; height:19px; }
.ta-suggest{ left:0; right:0; top:calc(100% + 6px); max-height:min(70vh, 520px); overflow:auto; overscroll-behavior:contain; }
.ta-suggest__item{ color:var(--ta-text); }
.ta-suggest__thumb{ position:relative; background:#F8F5F1; }
.ta-suggest__thumb img{ width:100%; height:100%; object-fit:cover; }
.ta-suggest__txt{ display:grid; gap:2px; min-width:0; }
.ta-suggest__all{ display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 12px; font-size:12.5px; font-weight:800; color:var(--ta-maroon-500); background:#FFFCF7; }
.ta-suggest__all:hover{ background:var(--ta-cream); }
.ta-suggest__all .ta-ico{ width:14px; height:14px; }
.ta-suggest--sheet{ position:static; margin-top:10px; box-shadow:none; max-height:none; }
.ta-search--sheet{ display:flex; height:48px; border-color:var(--ta-line-2); }
.ta-searchsheet__hints{ margin-top:16px; display:grid; gap:8px; }

.ta-hbtn{ text-decoration:none; }
.ta-hbtn--user img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.ta-hbtn__initial{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ta-g-gold); color:#5A2E00; font-weight:900; font-size:14px; box-shadow:0 0 0 2px #fff; }
.ta-acctwrap{ position:relative; }
.ta-acct{ position:absolute; right:0; top:calc(100% + 10px); z-index:5; width:min(270px, calc(100vw - 24px)); padding:8px; background:#fff; color:var(--ta-text); border:1px solid var(--ta-line); border-radius:var(--ta-r-xl); box-shadow:var(--ta-sh-pop); }
.ta-acct::before{ content:""; position:absolute; top:-7px; right:16px; width:12px; height:12px; background:#fff; border-left:1px solid var(--ta-line); border-top:1px solid var(--ta-line); transform:rotate(45deg); }
.ta-acct__head{ display:flex; align-items:center; gap:10px; padding:8px 8px 12px; border-bottom:1px solid var(--ta-line); margin-bottom:6px; }
.ta-acct__head > span:last-child{ display:grid; min-width:0; line-height:1.3; }
.ta-acct__head b{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ta-acct__head small{ font-size:12px; color:var(--ta-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ta-acct__list{ list-style:none; display:grid; gap:2px; }
.ta-acct__list a,.ta-acct__list button{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:0; border-radius:var(--ta-r-md); background:transparent; font-size:13.5px; font-weight:700; color:var(--ta-text-2); text-align:left; }
.ta-acct__list a:hover,.ta-acct__list button:hover{ background:var(--ta-cream); color:var(--ta-maroon-500); }
.ta-acct__list .ta-ico{ width:17px; height:17px; color:var(--ta-red); }

/* Slim bar (lesson player shell) */
.ta-slimbar{ position:sticky; top:0; z-index:var(--ta-z-header); color:#fff; background:var(--ta-tx-seigaiha), var(--ta-g-header); background-size:36px 18px, auto; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.ta-slimbar__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; }
.ta-slimbar__back{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; color:#fff; padding:8px 12px 8px 8px; border-radius:var(--ta-r-md); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); }
.ta-slimbar__back:hover{ background:rgba(255,255,255,.18); }
.ta-slimbar__brand{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ta-font-display); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:15px; color:#fff; }
.ta-slimbar__brand img{ width:34px; height:34px; border-radius:50%; box-shadow:0 0 0 2px var(--ta-gold); }
@media (max-width:599px){ .ta-slimbar__back span,.ta-slimbar__brand span{ display:none; } }
.ta-slimfoot{ padding:18px 0 calc(18px + env(safe-area-inset-bottom)); text-align:center; font-size:12.5px; color:var(--ta-muted); }

/* --------------------------------------------------------------------------
   29. NAV · SUB-MENUS · MEGA MENU · NAV DRAWER
   -------------------------------------------------------------------------- */
.ta-nav{ z-index:20; }
.ta-nav__row{ position:relative; }
.ta-browsewrap{ display:flex; align-items:stretch; flex:0 0 auto; }
.ta-mega{ display:none; }
@media (min-width:960px){ .ta-mega{ display:grid; } }
.ta-nav__links > li{ position:relative; display:flex; align-items:stretch; }
.ta-nav__sub{ display:none; }
@media (max-width:959px){ .ta-nav__links .ta-caret{ display:none; } }
@media (min-width:960px){
  .ta-nav__sub{
    display:grid; position:absolute; top:calc(100% - 4px); left:0; z-index:var(--ta-z-mega); min-width:250px; padding:8px; list-style:none;
    background:#fff; border:1px solid var(--ta-line); border-radius:var(--ta-r-xl); box-shadow:var(--ta-sh-pop);
    opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s, transform .16s, visibility .16s;
  }
  .ta-nav__links > li:hover > .ta-nav__sub,.ta-nav__links > li:focus-within > .ta-nav__sub{ opacity:1; visibility:visible; transform:none; }
  .ta-nav__links .ta-nav__sub a{ display:grid; gap:1px; padding:9px 12px; border-radius:var(--ta-r-md); font-size:13px; letter-spacing:0; text-transform:none; font-weight:700; white-space:normal; }
  .ta-nav__links .ta-nav__sub a::after{ display:none; }
  .ta-nav__links .ta-nav__sub a:hover{ background:var(--ta-cream); color:var(--ta-maroon-500); }
  .ta-nav__sub small{ font-size:11.5px; font-weight:600; color:var(--ta-muted); }
  .ta-nav__links .ta-nav__sub a:has(.ta-ico){ display:flex; align-items:center; gap:8px; }
  .ta-nav__sub .ta-ico{ width:15px; height:15px; color:var(--ta-red); }
  .ta-nav__subsep{ margin-top:4px; padding-top:4px; border-top:1px solid var(--ta-line); }
}
@media (min-width:960px) and (max-width:1279px){
  .ta-nav__links > li > a{ padding:12px 7px; font-size:11px; letter-spacing:.05em; }
  .ta-nav__links > li > a.is-active::after{ left:7px; right:7px; }
  .ta-browse{ padding-right:12px; margin-right:6px; }
  .ta-nav__hotline{ padding-left:12px; }
}
@media (min-width:960px) and (max-width:1199px){ .ta-nav__hotline{ display:none; } }

.ta-mega{ top:calc(100% + 4px); }
.ta-mega__list a{ color:var(--ta-text); }
.ta-mega__all{ margin-top:4px; padding-top:6px; border-top:1px solid var(--ta-line); }
.ta-mega__aside .ta-kicker{ margin-bottom:10px; }
.ta-mega__picks{ display:grid; gap:10px; }
.ta-mega__pick{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:var(--ta-r-lg); background:#fff; border:1px solid var(--ta-line); transition:transform .15s, box-shadow .15s; }
.ta-mega__pick:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.ta-mega__pickthumb{ position:relative; flex:0 0 auto; width:78px; aspect-ratio:3/2; border-radius:8px; overflow:hidden; }
.ta-mega__pickthumb > img{ width:100%; height:100%; object-fit:cover; }
.ta-mega__pickname{ display:block; font-size:13px; font-weight:800; line-height:1.3; }
.ta-mega__pickprice{ display:block; font-size:13px; font-weight:800; color:var(--ta-ink); margin-top:2px; }
.ta-mega__picks .ta-btn{ margin-top:4px; }

/* Drawers: title reset, top sheet, nav tree */
.ta-drawer__title{ margin:0; }
.ta-drawer__foot[hidden]{ display:none !important; }
.ta-drawer--top{ top:0; left:0; right:0; bottom:auto; width:100%; max-height:92dvh; border-radius:0 0 20px 20px; transform:translateY(-105%); }
.ta-drawer--top .ta-drawer__head{ border-radius:0; }
.ta-drawer--top .ta-drawer__body{ padding-bottom:20px; }
.ta-iconbtn .ta-ico{ width:18px; height:18px; }
.ta-navtree{ display:grid; gap:14px; }
.ta-navtree__user{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--ta-r-lg); background:var(--ta-cream); font-size:14px; }
.ta-navtree__auth{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ta-navtree__main,.ta-navtree__links{ list-style:none; display:grid; gap:2px; }
.ta-navtree__main > li > a,.ta-navtree summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 10px; border-radius:var(--ta-r-md); font-size:13.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; list-style:none; }
.ta-navtree summary::-webkit-details-marker{ display:none; }
.ta-navtree summary .ta-ico{ width:16px; height:16px; transition:transform .2s; opacity:.6; }
.ta-navtree details[open] summary .ta-ico{ transform:rotate(180deg); }
.ta-navtree__main > li > a:hover,.ta-navtree summary:hover{ background:var(--ta-cream); }
.ta-navtree__main > li > a[aria-current]{ color:var(--ta-red); background:var(--ta-rose-50); }
.ta-navtree details ul{ list-style:none; display:grid; gap:1px; padding:0 0 8px 10px; margin-left:10px; border-left:2px solid var(--ta-rose-100); }
.ta-navtree details ul a{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:var(--ta-r-sm); font-size:13.5px; font-weight:700; color:var(--ta-text-2); }
.ta-navtree details ul a:hover{ background:var(--ta-cream); color:var(--ta-maroon-500); }
.ta-navtree details ul small{ font-size:11.5px; font-weight:600; color:var(--ta-muted-2); white-space:nowrap; }
.ta-navtree details ul a:has(.ta-ico){ justify-content:flex-start; align-items:center; gap:8px; }
.ta-navtree details ul .ta-ico{ width:15px; height:15px; color:var(--ta-red); }
.ta-navtree__links a,.ta-navtree__links button{ display:flex; align-items:center; gap:10px; width:100%; padding:10px; border:0; background:transparent; border-radius:var(--ta-r-md); font-size:14px; font-weight:700; color:var(--ta-text-2); text-align:left; }
.ta-navtree__links a:hover,.ta-navtree__links button:hover{ background:var(--ta-cream); }
.ta-navtree__links .ta-ico{ width:17px; height:17px; color:var(--ta-red); }
.ta-navtree__contact{ display:grid; gap:8px; padding:14px; border-radius:var(--ta-r-lg); background:var(--ta-tx-paper) var(--ta-paper); background-size:48px 24px; font-size:13px; color:var(--ta-text-2); }
.ta-navtree__contact a,.ta-navtree__contact span{ display:flex; align-items:flex-start; gap:8px; }
.ta-navtree__contact a{ font-weight:900; color:var(--ta-red); font-size:15px; }
.ta-navtree__contact .ta-ico{ width:16px; height:16px; margin-top:2px; color:var(--ta-red); flex:0 0 auto; }
.ta-drawer--nav .ta-drawer__foot .ta-btn .ta-ico{ width:18px; height:18px; }

/* --------------------------------------------------------------------------
   30. TOASTS · MODAL SIZES · CONFIRM · VOUCHER POPUP
   -------------------------------------------------------------------------- */
.ta-toasts{ z-index:1300; }
.ta-toast__ico{ width:19px; height:19px; flex:0 0 auto; }
.ta-toast--ok .ta-toast__ico{ color:#86EFAC; } .ta-toast--err .ta-toast__ico{ color:#FCA5A5; } .ta-toast--info .ta-toast__ico,.ta-toast--warn .ta-toast__ico{ color:#FDE68A; }
.ta-toast--warn{ background:#78350F; }
.ta-toast__msg{ flex:1; min-width:0; line-height:1.4; }
.ta-toast__act{ flex:0 0 auto; padding:5px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#FFE7A3; font-size:12.5px; font-weight:800; white-space:nowrap; }
.ta-toast__act:hover{ background:rgba(255,255,255,.22); }
.ta-toast__close{ flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; margin:-4px -6px -4px 0; border:0; border-radius:8px; background:transparent; color:rgba(255,255,255,.75); }
.ta-toast__close:hover{ background:rgba(255,255,255,.12); color:#fff; }
.ta-toast__close .ta-ico{ width:15px; height:15px; }
.ta-toast.is-leaving{ opacity:0; transform:translateY(-8px); transition:opacity .2s, transform .2s; }

.ta-modal--sm .ta-modal__dialog{ width:min(420px, 100%); }
.ta-modal--md .ta-modal__dialog{ width:min(540px, 100%); }
.ta-modal--lg .ta-modal__dialog{ width:min(760px, 100%); }
.ta-modal--xl .ta-modal__dialog{ width:min(1000px, 100%); }
.ta-modal__close .ta-ico{ width:18px; height:18px; }
.ta-modal__head{ padding:20px 58px 8px 20px; }
.ta-modal__title{ font-family:var(--ta-font-title); font-weight:700; font-size:21px; line-height:1.25; color:var(--ta-maroon-500); }
.ta-modal__body{ padding:8px 20px 20px; }
.ta-modal__foot{ padding:14px 20px 18px; border-top:1px solid var(--ta-line); background:#FFFCF8; }
.ta-modal__actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.ta-modal__actions .ta-btn{ min-width:110px; }
.ta-confirm__msg{ font-size:15px; line-height:1.6; color:var(--ta-text-2); }
.ta-modal--voucher .ta-modal__dialog{ overflow:hidden; background:transparent; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.ta-modal--voucher .ta-modal__close{ background:rgba(255,255,255,.18); color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.4); }
.ta-modal--voucher .ta-btn--gold{ width:100%; max-width:300px; }

/* --------------------------------------------------------------------------
   31. CART DRAWER · COUPON PREVIEW · FAB/BADGE STATES
   -------------------------------------------------------------------------- */
.ta-drawer--cart{ width:min(430px, 94vw); }
.ta-drawer--cart .ta-drawer__body{ padding-top:4px; }
.ta-drawer__all{ padding:10px 0; font-weight:700; border-bottom:1px solid var(--ta-line); }
.ta-line__info{ min-width:0; }
.ta-line__name{ display:block; color:var(--ta-text); }
.ta-line__name:hover{ color:var(--ta-maroon-500); }
.ta-line__check{ width:18px; height:18px; margin-top:12px; accent-color:var(--ta-buy); padding:0; }
.ta-line__thumb{ display:block; background:#F8F5F1; }
.ta-line__thumb > img{ width:100%; height:100%; object-fit:cover; }
.ta-line__remove .ta-ico{ width:17px; height:17px; }
.ta-line__warn{ margin-top:6px; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#B91C1C; }
.ta-line__warn .ta-ico,.ta-line__addon .ta-ico{ width:14px; height:14px; flex:0 0 auto; }
.ta-line__addon{ display:flex; align-items:center; gap:6px; }
.ta-line__row .ta-line__remove{ margin-left:auto; }
.ta-line__row .ta-qty + .ta-line__remove{ margin-left:0; }
.ta-coupon{ display:grid; gap:6px; margin-top:14px; padding:12px; border-radius:var(--ta-r-lg); background:var(--ta-cream); border:1px dashed #E2C99B; }
.ta-coupon .ta-inputgroup{ background:#fff; }
.ta-coupon .ta-input{ min-height:42px; font-size:15px; text-transform:uppercase; letter-spacing:.04em; }
.ta-coupon .ta-input::placeholder{ text-transform:none; letter-spacing:0; }
.ta-inputgroup__btn--txt{ padding:0 14px; font-size:13px; font-weight:900; color:var(--ta-ink-700); background:var(--ta-ink-50); }
.ta-inputgroup__btn--txt:hover{ background:var(--ta-ink-100); }
.ta-inputgroup__btn .ta-ico{ width:17px; height:17px; }
.ta-coupon__ok,.ta-coupon__err{ display:flex; align-items:flex-start; gap:6px; font-size:12.5px; line-height:1.45; }
.ta-coupon__ok{ color:#15803D; } .ta-coupon__err{ color:#B91C1C; }
.ta-coupon__err a{ text-decoration:underline; font-weight:800; }
.ta-coupon__ok .ta-ico,.ta-coupon__err .ta-ico{ width:15px; height:15px; margin-top:1px; flex:0 0 auto; }
.ta-drawer__ctas{ display:grid; grid-template-columns:1fr 1.3fr; gap:8px; }
.ta-drawer__hint{ font-size:13px; color:var(--ta-muted); text-align:center; }
.ta-drawer--cart .ta-summary__save{ justify-self:end; }
.ta-fab{ text-decoration:none; }
.ta-fab--top svg{ animation:none; width:20px; height:20px; }
.ta-fab__badge.is-bump{ animation:taBump .45s var(--ta-ease); }
.ta-dock__btn{ text-decoration:none; }

/* --------------------------------------------------------------------------
   32. ART ADDITIONS: cream tone · xs thumbs · course · resource
   -------------------------------------------------------------------------- */
.ta-art--cream{ --a-main:#A3151C; --a-alt:#0A6F8F; --a-band:rgba(236,180,58,.22); --a-script:#946417; --a-title:#8E1A1E; --a-grid:rgba(180,140,80,.45); background:#FFFDF7; }
.ta-art--resource::before{ border-color:#16A34A; }
.ta-art--xs{ display:grid; place-items:center; padding:0;
  background:
    linear-gradient(90deg, transparent 14%, rgba(230,70,90,.5) 14% calc(14% + 1px), transparent 0),
    repeating-linear-gradient(0deg, rgba(124,140,220,.35) 0 1px, transparent 1px 12%),
    repeating-linear-gradient(90deg, rgba(124,140,220,.35) 0 1px, transparent 1px 12%), #fff; }
.ta-art--xs::before,.ta-art--xs::after{ display:none; }
.ta-art--xs b{ font-family:var(--ta-font-hand); font-weight:700; font-size:56cqw; line-height:1; color:var(--ta-red); }
.ta-art--xs svg{ width:44%; height:44%; color:#fff; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.ta-art--xs-sky b{ color:#2563EB; } .ta-art--xs-mint b{ color:#0F766E; } .ta-art--xs-amber b{ color:#C2410C; } .ta-art--xs-violet b{ color:#7C3AED; } .ta-art--xs-cream b{ color:#A3151C; }
.ta-art--xs-combo{ background:var(--ta-g-combo-violet); }
.ta-art--course{ justify-content:center; gap:1.5cqw; text-align:center; color:#fff;
  background:
    radial-gradient(60cqw 40cqw at 80% 10%, rgba(255,255,255,.18), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7cqw),
    linear-gradient(140deg, #5F0F13 0%, #A3151C 55%, #E0262D 100%); }
.ta-art--course::before{ border-color:#F7DB94; }
.ta-art--course::after{ background:var(--ta-ic-blossom-gold) calc(100% + 3cqw) calc(100% + 3cqw) / 22cqw 22cqw no-repeat; opacity:.35; }
.ta-art--c-sky{ background:radial-gradient(60cqw 40cqw at 80% 10%, rgba(255,255,255,.18), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7cqw), linear-gradient(140deg, #0B3B5C 0%, #0A6F8F 55%, #22B8D6 100%); }
.ta-art--c-mint{ background:radial-gradient(60cqw 40cqw at 80% 10%, rgba(255,255,255,.18), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7cqw), linear-gradient(140deg, #064E3B 0%, #0F766E 55%, #34D399 100%); }
.ta-art--c-amber,.ta-art--c-cream{ background:radial-gradient(60cqw 40cqw at 80% 10%, rgba(255,255,255,.18), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7cqw), linear-gradient(140deg, #78350F 0%, #B45309 55%, #F59E0B 100%); }
.ta-art__chip{ position:relative; z-index:1; padding:.6cqw 3cqw; border-radius:99px; background:rgba(255,255,255,.18); border:.3cqw solid rgba(255,255,255,.4); font-size:3.6cqw; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ta-art__ctitle{ position:relative; z-index:1; font-family:var(--ta-font-display); font-weight:900; font-size:9cqw; line-height:1.05; text-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.3); padding:0 6cqw; }
.ta-art__csub{ position:relative; z-index:1; font-family:var(--ta-font-script); font-size:8cqw; line-height:1.1; color:#FFE7A3; }
.ta-art__brand--light{ position:absolute; left:4cqw; bottom:4cqw; margin:0; background:rgba(0,0,0,.25); }

/* --------------------------------------------------------------------------
   33. CARDS: course · post · event · category tile · resource · combo
   -------------------------------------------------------------------------- */
.ta-card--skel:hover{ transform:none; box-shadow:var(--ta-sh-card); }
.ta-card__actions .ta-btn .ta-ico{ width:15px; height:15px; }

.ta-course__media{ display:block; }
.ta-course__media > .ta-art{ position:absolute; inset:0; }
.ta-course__play svg{ width:24px; height:24px; margin-left:3px; }
.ta-course__tag{ position:absolute; z-index:2; top:10px; left:10px; }
.ta-course__kicker{ font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--ta-red); }
.ta-course__title a::before{ content:""; position:absolute; inset:0; z-index:1; }
.ta-course__title a:hover{ color:var(--ta-maroon-500); }
.ta-course__foot{ position:relative; z-index:2; }
.ta-course__foot .ta-price__now{ font-size:17px; }
.ta-course__progress{ display:grid; gap:6px; }
.ta-course__pct{ font-size:12px; font-weight:700; color:var(--ta-muted); }

.ta-post{ position:relative; }
.ta-post__media{ display:block; position:relative; background:#F3ECE3; }
.ta-post__media img{ transition:transform .35s var(--ta-ease); }
.ta-post:hover .ta-post__media img{ transform:scale(1.04); }
/* photo focal points in 16:10 post crops: keep the half-cut wall lettering at the top of this portrait out of frame */
.ta-post__media img[src*="thuong-hieu-ao-ren-duc-luyen-tai"]{ object-position:50% 58%; }
.ta-post__ph{ width:100%; height:100%; display:grid; place-items:center; color:#FFE7A3; font-family:var(--ta-font-script); font-size:30px; background:var(--ta-tx-seigaiha), radial-gradient(120% 140% at 100% 0%, #9B1D22 0%, #6A1015 55%, #4E0B0F 100%); background-size:36px 18px, auto; }
.ta-post__title a::before{ content:""; position:absolute; inset:0; z-index:1; }
.ta-post__title a:hover{ color:var(--ta-maroon-500); }
.ta-post__excerpt{ font-size:13.5px; line-height:1.6; color:var(--ta-text-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ta-post__date{ display:flex; align-items:center; gap:6px; }
.ta-post__date .ta-ico{ width:14px; height:14px; color:var(--ta-red); }
@media (min-width:768px){
  .ta-post--featured{ display:grid; grid-template-columns:1.15fr 1fr; }
  .ta-post--featured .ta-post__media{ aspect-ratio:auto; min-height:300px; }
  .ta-post--featured .ta-post__body{ align-content:center; padding:24px 28px; gap:10px; }
  .ta-post--featured .ta-post__title{ font-size:26px; }
}

.ta-event{ position:relative; display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid #EFEAE4; border-radius:var(--ta-r-xl); box-shadow:var(--ta-sh-card); overflow:hidden; transition:transform .2s var(--ta-ease), box-shadow .2s; }
.ta-event:hover{ transform:translateY(-3px); box-shadow:var(--ta-sh-card-h); }
.ta-event__media{ aspect-ratio:16/9; overflow:hidden; }
.ta-event__media img{ width:100%; height:100%; object-fit:cover; }
.ta-event__main{ flex:1; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:14px; }
.ta-event__date{ display:grid; justify-items:center; align-content:start; width:66px; padding:8px 4px 9px; border-radius:var(--ta-r-lg); text-align:center; color:#4A2A00; background:var(--ta-g-gold); box-shadow:var(--ta-sh-gold), inset 0 1px 0 rgba(255,255,255,.6); line-height:1.05; align-self:start; }
.ta-event__date b{ font-family:var(--ta-font-display); font-size:30px; font-weight:900; }
.ta-event__date span{ font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }
.ta-event__date small{ margin-top:5px; padding-top:5px; border-top:1px solid rgba(74,42,0,.25); font-size:10.5px; font-weight:800; width:80%; }
.ta-event--cover .ta-event__date{ margin-top:-38px; position:relative; z-index:1; border:3px solid #fff; }
.ta-event__body{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ta-event__top{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ta-event__title{ font-family:var(--ta-font-title); font-weight:700; font-size:17.5px; line-height:1.3; color:var(--ta-maroon-500); }
.ta-event__sum{ font-size:13.5px; line-height:1.55; color:var(--ta-text-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ta-event__meta{ list-style:none; display:grid; gap:4px; font-size:12.5px; color:var(--ta-muted); }
.ta-event__meta li{ display:flex; align-items:flex-start; gap:7px; }
.ta-event__meta .ta-ico{ width:14px; height:14px; margin-top:2px; color:var(--ta-red); flex:0 0 auto; }
.ta-event__foot{ margin-top:auto; padding-top:4px; display:flex; gap:8px; }

.ta-grid--cats{ display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:768px){ .ta-grid--cats{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; } }
@media (min-width:768px) and (max-width:1023px){ .ta-grid--cats{ grid-template-columns:repeat(3, minmax(0,1fr)); } .ta-cattile__go{ display:none !important; } }
.ta-cattile{
  --c1:#D22322; --c2:#2B4FC9;
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; min-width:0; padding:14px 10px;
  border-radius:var(--ta-r-xl); color:var(--ta-text); border:1px solid #EED8B2;
  background:radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #FFF9EE 55%, #FBEFD9 100%);
  box-shadow:0 6px 16px rgba(120,70,20,.08), inset 0 1px 0 #fff; transition:transform .18s var(--ta-ease), box-shadow .18s, border-color .18s;
}
.ta-cattile:hover{ transform:translateY(-3px); border-color:#E2BE82; box-shadow:0 14px 26px rgba(120,70,20,.15); }
.ta-cattile__art{ position:relative; flex:0 0 auto; width:66px; height:66px; border-radius:16px; padding:5px; background:#fff; box-shadow:0 0 0 2px #F0D49C, 0 8px 16px rgba(150,90,20,.16); }
.ta-cattile__grid{ display:grid; place-items:center; width:100%; height:100%; border-radius:11px; overflow:hidden;
  background:
    linear-gradient(90deg, transparent 18%, rgba(230,70,90,.55) 18% calc(18% + 1px), transparent 0),
    linear-gradient(rgba(124,140,220,.55),rgba(124,140,220,.55)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, rgba(124,140,220,.28) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(124,140,220,.28) 0 1px, transparent 1px 7px), #fff; }
.ta-cattile__grid b{ font-family:var(--ta-font-hand); font-weight:700; font-size:31px; line-height:1; color:var(--c1); text-shadow:0 1px 0 #fff; }
.ta-cattile__gift{ width:32px; height:32px; color:var(--c1); }
.ta-cattile__text{ display:grid; gap:2px; min-width:0; }
.ta-cattile__name{ font-size:13.5px; font-weight:800; line-height:1.3; }
.ta-cattile__count{ font-size:11.5px; font-weight:700; color:var(--ta-muted); }
.ta-cattile__go{ display:none; }
.ta-cattile--sky{ --c1:#2563EB; --c2:#DB2777; } .ta-cattile--amber{ --c1:#C2410C; --c2:#2563EB; } .ta-cattile--mint{ --c1:#0F766E; --c2:#DC2626; }
.ta-cattile--violet{ --c1:#7C3AED; --c2:#DB2777; } .ta-cattile--cream{ --c1:#A3151C; --c2:#0A6F8F; }
@media (min-width:600px){
  .ta-cattile{ flex-direction:row; text-align:left; gap:12px; padding:12px; }
  .ta-cattile__text{ flex:1; }
  .ta-cattile__go{ display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#fff; color:var(--ta-maroon-500); box-shadow:0 2px 6px rgba(0,0,0,.08); transition:transform .18s, background .18s, color .18s; }
  .ta-cattile__go .ta-ico{ width:15px; height:15px; }
  .ta-cattile:hover .ta-cattile__go{ transform:translateX(3px); background:var(--ta-maroon-600); color:#fff; }
  .ta-cattile__name{ font-size:14px; }
}

.ta-res{ position:relative; transition:transform .2s var(--ta-ease), box-shadow .2s; }
.ta-res:hover{ transform:translateY(-3px); box-shadow:var(--ta-sh-card-h); }
.ta-res__media{ overflow:hidden; background:#FCFAF7; }
.ta-res__media > img{ width:100%; height:100%; object-fit:cover; }
.ta-res__free{ position:absolute; z-index:3; top:8px; left:8px; }
.ta-res__body{ padding:12px; gap:8px; }
.ta-res__name{ font-size:13.5px; font-weight:800; line-height:1.35; min-height:2.7em; margin:0; }
.ta-res__meta{ font-size:12px; color:var(--ta-muted); }
.ta-res__hint{ display:flex; align-items:center; justify-content:center; gap:5px; font-size:11.5px; color:var(--ta-muted); }
.ta-res__hint .ta-ico{ width:13px; height:13px; }
.ta-res .ta-btn .ta-ico{ width:16px; height:16px; }

.ta-quote figcaption{ display:grid; gap:2px; }
.ta-quote__avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ta-quote__text{ margin:12px 0 0; }
.ta-teacher{ margin:0; }
.ta-teacher figcaption{ display:grid; gap:2px; }

.ta-program__title a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ta-program__ph{ width:100%; height:100%; background:var(--ta-tx-seigaiha), var(--ta-g-header); background-size:36px 18px, auto; }
.ta-program__foot .ta-ico{ width:14px; height:14px; }

/* --------------------------------------------------------------------------
   34. PAGE HEADER BAND (inner pages)
   -------------------------------------------------------------------------- */
.ta-pagehead{
  position:relative; overflow:hidden; isolation:isolate; color:#fff; padding:6px 0 26px;
  background:var(--ta-tx-gold-lattice), var(--ta-tx-seigaiha), radial-gradient(110% 160% at 15% 0%, #9B1D22 0%, #741318 45%, #4E0B0F 100%);
  background-size:44px 44px, 36px 18px, auto; border-bottom:3px solid var(--ta-gold-500);
}
.ta-pagehead::after{ content:""; position:absolute; z-index:-1; right:-40px; top:-26px; width:240px; height:144px; background:var(--ta-ic-flourish) center/contain no-repeat; transform:scaleX(-1); opacity:.5; }
.ta-pagehead__mai{ position:absolute; z-index:-1; width:42px; height:42px; background:var(--ta-ic-blossom-gold) center/contain no-repeat; opacity:.75; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); pointer-events:none; }
.ta-pagehead__mai--a{ right:5%; bottom:14px; }
.ta-pagehead__mai--b{ right:15%; top:22px; width:26px; height:26px; opacity:.5; }
.ta-pagehead__inner{ display:grid; gap:18px; align-items:center; }
.ta-pagehead__text{ display:grid; gap:8px; justify-items:start; min-width:0; }
.ta-pagehead .ta-crumbs{ padding:10px 0 2px; color:rgba(255,255,255,.75); }
.ta-pagehead .ta-crumbs a{ color:#fff; text-decoration-color:rgba(255,255,255,.4); }
.ta-pagehead .ta-crumbs a:hover{ color:#FFE7A3; }
.ta-pagehead .ta-crumbs [aria-current]{ color:#FFE7A3; }
.ta-pagehead .ta-crumbs__sep{ color:rgba(255,255,255,.5); }
.ta-pagehead__kicker{ font-size:11.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:#FDE68A; }
.ta-pagehead__title{ font-family:var(--ta-font-title); font-weight:700; font-size:clamp(26px, 1rem + 2.2vw, 42px); line-height:1.15; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.3); text-wrap:balance; }
.ta-pagehead__lead{ max-width:60ch; font-size:14.5px; line-height:1.6; color:rgba(255,246,225,.92); }
.ta-pagehead__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.ta-pagehead__media{ margin:0; position:relative; justify-self:center; width:min(100%, 420px); }
.ta-pagehead__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:22px; border:5px solid #fff; box-shadow:0 18px 36px rgba(0,0,0,.35); }
.ta-pagehead__media::before{ content:""; position:absolute; inset:-10px 14px 14px -10px; z-index:-1; border:3px solid var(--ta-sun); border-radius:28px; }
@media (max-width:599px){ .ta-pagehead__media{ width:calc(100% - 12px); } }
@media (min-width:960px){
  .ta-pagehead{ padding:8px 0 34px; }
  .ta-pagehead--media .ta-pagehead__inner{ grid-template-columns:minmax(0,1fr) 400px; gap:40px; }
  .ta-pagehead__lead{ font-size:15.5px; }
}

/* --------------------------------------------------------------------------
   35. FORMS ADDITIONS: email picker · password rules · misc
   -------------------------------------------------------------------------- */
.ta-pickwrap{ position:relative; min-width:0; }
.ta-emailpick{ position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px); list-style:none; margin:0; padding:4px; background:#fff; border:1px solid var(--ta-line); border-radius:var(--ta-r-md); box-shadow:var(--ta-sh-pop); }
.ta-emailpick li{ padding:9px 12px; border-radius:var(--ta-r-sm); font-size:14px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ta-emailpick li span{ color:var(--ta-muted); }
.ta-emailpick li b{ color:var(--ta-ink-700); font-weight:800; }
.ta-emailpick li:hover,.ta-emailpick li[aria-selected="true"]{ background:var(--ta-cream); }
.ta-pwrules{ list-style:none; display:grid; grid-template-columns:1fr; gap:4px 12px; margin-top:8px; font-size:12px; color:var(--ta-muted); }
@media (min-width:480px){ .ta-pwrules{ grid-template-columns:1fr 1fr; } }
.ta-pwrules li{ display:flex; align-items:center; gap:6px; }
.ta-pwrules .ta-ico{ width:15px; height:15px; padding:2px; border-radius:50%; background:#EDE7E1; color:transparent; flex:0 0 auto; }
.ta-pwrules li.is-ok{ color:#15803D; }
.ta-pwrules li.is-ok .ta-ico{ background:var(--ta-green); color:#fff; }
.ta-form__error{ font-size:13px; color:#B91C1C; font-weight:700; }
.ta-field__counter{ justify-self:end; font-size:11.5px; color:var(--ta-muted-2); }
.ta-input[readonly]{ background:#FBF8F5; }
.ta-input:disabled,.ta-select:disabled,.ta-textarea:disabled{ background:#F4F1EE; color:var(--ta-muted); cursor:not-allowed; }
.ta-check a{ color:var(--ta-ink); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.ta-field.is-error .ta-textarea{ border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.ta-field.is-error .ta-inputgroup{ border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.ta-field.is-error .ta-check input{ outline:2px solid #DC2626; outline-offset:1px; }
.ta-radio-cards{ display:grid; gap:8px; }
.ta-radio-card{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--ta-r-lg); border:1.5px solid #E5DCD2; background:#fff; cursor:pointer; transition:border-color .15s, background .15s; }
.ta-radio-card:has(input:checked){ border-color:var(--ta-buy); background:var(--ta-rose-50); }
.ta-radio-card input{ margin-top:3px; accent-color:var(--ta-buy); }

/* --------------------------------------------------------------------------
   36. SKELETON · EMPTY · PAGER · RECENT-PURCHASE · FOOTER ADDITIONS
   -------------------------------------------------------------------------- */
.ta-skel--btn{ height:36px; border-radius:10px; margin-top:4px; }
.ta-skel--169{ aspect-ratio:16/9; } .ta-skel--1610{ aspect-ratio:16/10; }
.ta-skel--date{ width:66px; height:78px; border-radius:12px; }
.ta-skel-lines{ display:grid; gap:10px; }
.ta-card--skel .ta-card__body{ gap:10px; }
.ta-empty__icon .ta-ico{ width:34px; height:34px; }
.ta-empty__title{ margin:4px 0 0; }
.ta-empty .ta-btn{ margin-top:8px; }
.ta-empty--compact{ padding:20px 12px; }
.ta-empty--compact .ta-empty__icon{ width:60px; height:60px; }
.ta-empty--compact .ta-empty__icon .ta-ico{ width:26px; height:26px; }
.ta-empty--compact .ta-empty__title{ font-size:15px; }
.ta-grid > .ta-empty{ grid-column:1 / -1; }
.ta-pager .ta-pager__gap{ border:0; background:transparent; min-width:24px; padding:0; }
.ta-rp__close .ta-ico{ width:14px; height:14px; }
.ta-rp__info{ min-width:0; flex:1; }
.ta-rp__product{ color:var(--ta-text); }
.ta-rp__product:hover{ border-color:var(--ta-line-2); background:#FFFCF8; }
.ta-rp__ptxt{ display:grid; min-width:0; }
.ta-footer__links li{ display:flex; align-items:flex-start; }
.ta-footer__links li > .ta-ico,.ta-footer__links a .ta-ico{ flex:0 0 auto; margin-top:2px; }
.ta-footer__links a{ display:inline-flex; align-items:flex-start; }
.ta-social .ta-ico{ width:17px; height:17px; }
.ta-footer__demo{ display:inline-flex; align-items:flex-start; gap:6px; margin-top:6px; padding:4px 10px; border-radius:10px; background:rgba(0,0,0,.18); color:#FDE68A; font-size:12px; }
.ta-footer__demo .ta-ico{ width:14px; height:14px; margin-top:2px; flex:0 0 auto; }
.ta-footer .ta-brand__mark{ width:56px; height:56px; }

/* --------------------------------------------------------------------------
   37. REDUCED MOTION · PRINT (additions)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ta-fade{ opacity:1 !important; transition:none !important; }
  .ta-cattile:hover,.ta-event:hover,.ta-res:hover,.ta-post:hover,.ta-mega__pick:hover{ transform:none; }
  .ta-toast.is-leaving{ transition:none; }
  .js .ta-sold .ta-sold__fill,.js .ta-progress > span{ transform:none !important; }
}
@media print{
  .ta-masthead,.ta-nav,.ta-footer,.ta-slimbar,.ta-toasts,.ta-drawer,.ta-scrim,.ta-skip{ display:none !important; }
  .ta-pagehead{ background:#fff !important; color:#000; border:0; }
  .ta-pagehead__title{ color:#000; text-shadow:none; }
}
@media (max-width:767px){ .ta-card .ta-art__brand{ display:none; } .ta-card .ta-art__kicker{ margin-top:7cqw; } }
/* card badge (Giờ vàng / Mới …) sits top-left: move the cover kicker to the right so it is never covered */
.ta-card__media:has(.ta-card__badges > *) .ta-art__kicker{ align-self:flex-end; margin-right:7cqw; }

/* --------------------------------------------------------------------------
   38. REFINEMENTS (kit review)
   -------------------------------------------------------------------------- */
.ta-countdown__label{ color:inherit; }
.ta-flash .ta-countdown__label{ color:#fff; }
.ta-summary__save{ justify-self:start; }
.ta-qr__row span{ white-space:nowrap; }
.ta-qr__row b{ flex:1; word-break:normal; overflow-wrap:anywhere; }
.ta-qr__row .ta-copy{ margin-left:2px; }
.ta-post--featured .ta-post__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ta-res__media:has(> .ta-art){ aspect-ratio:3/2; }
.ta-event__meta li span{ min-width:0; }
.ta-mega__promo{ min-height:0; margin-top:8px; padding:14px 16px; }
.ta-mega__promo .ta-guide__title{ font-size:16px; }
.ta-mega__pickprice s{ margin-left:4px; font-size:11px; font-weight:600; color:var(--ta-muted); }
/* top FAB sits left of the cart FAB (never under the contact dock); hidden while the "Vừa mua" toast is open */
.ta-fab--top{ right:calc(max(18px, env(safe-area-inset-right)) + 66px); bottom:calc(29px + env(safe-area-inset-bottom)); }
body.is-cart-page .ta-fab--top,body.is-checkout-page .ta-fab--top{ right:max(18px, env(safe-area-inset-right)); }
body.has-buybar .ta-fab--top{ bottom:calc(89px + env(safe-area-inset-bottom)); }
body.has-rp .ta-fab--top{ opacity:0; visibility:hidden; }
.ta-empty{ color:var(--ta-text); }
/* Selects use a fixed height + line-height: never give a .ta-select vertical padding (the text gets clipped). */
.ta-select{ height:46px; padding-top:0; padding-bottom:0; line-height:44px; }
.ta-filterbar .ta-select{ height:38px; line-height:36px; padding-block:0; }
@media (max-width:767px){ .ta-card__badges{ top:6px; left:6px; } .ta-card__badges .ta-badge{ height:18px; padding:0 7px; font-size:9.5px; } }

/* --------------------------------------------------------------------------
   39. EXTRAS: lightbox · confetti · share · buy bar icon
   -------------------------------------------------------------------------- */
.ta-modal--lightbox{ background:rgba(12,4,6,.9); }
.ta-modal--lightbox .ta-modal__dialog{ width:min(1100px, 100%); background:transparent; box-shadow:none; overflow:visible; }
.ta-modal--lightbox .ta-modal__close{ top:-6px; right:-2px; }
.ta-lightbox{ position:relative; margin:0; display:grid; gap:10px; justify-items:center; }
.ta-lightbox img{ max-width:100%; max-height:calc(100dvh - 120px); width:auto; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.5); background:#1a1012; }
.ta-lightbox figcaption{ color:#F7EDE0; font-size:14px; text-align:center; max-width:70ch; }
.ta-lightbox__nav{ position:absolute; top:calc(50% - 22px); width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--ta-text); box-shadow:0 6px 16px rgba(0,0,0,.35); }
.ta-lightbox__nav--prev{ left:8px; } .ta-lightbox__nav--next{ right:8px; }
.ta-lightbox__nav .ta-ico{ width:20px; height:20px; }
.ta-lightbox__count{ position:absolute; left:12px; top:10px; padding:3px 10px; border-radius:99px; background:rgba(0,0,0,.5); color:#fff; font-size:12px; font-weight:700; }
.ta-confetti{ position:fixed; inset:0; z-index:1400; pointer-events:none; overflow:hidden; }
.ta-confetti i{ position:absolute; border-radius:2px; opacity:0; animation:taConfetti 1.6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes taConfetti{ 0%{ opacity:1; transform:translate(0,0) rotate(0); } 70%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--dx), calc(var(--dy) + 260px)) rotate(var(--rot)); } }
.ta-share{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ta-share__lbl{ font-size:13px; font-weight:800; color:var(--ta-text-2); }
.ta-share__btn{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--ta-line-2); background:#fff; color:var(--ta-maroon-600); transition:transform .15s, background .15s, color .15s; }
.ta-share__btn:hover{ transform:translateY(-2px); background:var(--ta-maroon-600); color:#fff; }
.ta-share__btn--fb:hover{ background:#1877F2; border-color:#1877F2; } .ta-share__btn--zalo:hover{ background:#0068FF; border-color:#0068FF; }
.ta-share__btn .ta-ico{ width:17px; height:17px; }
.ta-share__btn.is-copied{ background:var(--ta-green); border-color:var(--ta-green); color:#fff; }
.ta-buybar .ta-btn .ta-ico{ width:16px; height:16px; }
@media (prefers-reduced-motion: reduce){ .ta-confetti{ display:none; } }

/* badges sit top-left on generated covers: hide the centred brand chip they would cover */
.ta-card__media:has(.ta-card__badges) .ta-art__brand{ opacity:0; }
/* narrow combo cards: the card badge (Giờ vàng / Giáo viên) would cover the centred COMBO pill */
@container (max-width:250px){ .ta-card__media:has(.ta-card__badges) .ta-art__pill{ opacity:0; } }

/* --------------------------------------------------------------------------
   40. REVIEW FIXES (shell a11y · floating stack · covers · tickets · type)
   -------------------------------------------------------------------------- */
/* Ticker pause/play (WCAG 2.2.2); the choice is remembered (layout.js → wireMarqueePause) */
.ta-topbar__pause{ flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.22); color:#FFE7A3; }
.ta-topbar__pause:hover{ background:rgba(0,0,0,.4); }
.ta-topbar__pauseico{ display:block; width:9px; height:10px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.ta-topbar__pause[aria-pressed="true"] .ta-topbar__pauseico{ width:0; height:0; margin-left:3px; border-right:0; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent; border-left:9px solid currentColor; }
@media (prefers-reduced-motion: reduce){ .ta-topbar__pause{ display:none; } }
.ta-marquee__sample{ font-weight:600; opacity:.85; }

/* Stuck header on phones/tablets: menu button (the nav with the burger has scrolled away) */
.ta-hbtn--menu{ display:none; }
@media (max-width:959px){ .ta-masthead.is-stuck .ta-hbtn--menu{ display:grid; } }
/* small phones: the account button makes room (the drawer has the account links) */
@media (max-width:599px){ .ta-masthead.is-stuck .ta-header__actions > [data-slot="account"]{ display:none; } }

/* Desktop nav sub-menus: hover or the disclosure button (aria-expanded) opens them; Esc closes (not :focus-within) */
.ta-nav__subbtn{ display:none; }
@media (min-width:960px){
  .ta-nav__links > li.has-sub > a{ padding-right:3px; }
  .ta-nav__subbtn{ display:grid; place-items:center; align-self:center; width:20px; height:28px; margin-right:4px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ta-text); }
  .ta-nav__subbtn:hover{ background:rgba(40,10,10,.06); }
  .ta-nav__subbtn .ta-caret{ border-top-width:4px; border-left-width:3px; border-right-width:3px; opacity:.5; transition:transform .16s; }
  .ta-nav__links > li.is-open > .ta-nav__subbtn .ta-caret{ transform:rotate(180deg); opacity:.9; }
  .ta-nav__links > li:focus-within > .ta-nav__sub{ opacity:0; visibility:hidden; transform:translateY(6px); }
  .ta-nav__links > li:hover > .ta-nav__sub,.ta-nav__links > li.is-open > .ta-nav__sub{ opacity:1; visibility:visible; transform:none; }
  .ta-nav__links > li.is-dismissed > .ta-nav__sub{ opacity:0; visibility:hidden; transform:translateY(6px); }
}
@media (min-width:960px) and (max-width:1279px){ .ta-nav__links > li.has-sub > a{ padding-right:2px; } .ta-nav__subbtn{ width:16px; margin-right:2px; } }

/* Phone drawer: the current section is marked on items with sub-menus too */
.ta-navtree summary.is-current{ color:var(--ta-red); background:var(--ta-rose-50); }

/* Zero counts: one neutral label ("Đang cập nhật"), muted */
.ta-mega__count.is-zero,.ta-nav__sub small.is-zero,.ta-navtree small.is-zero,.ta-cattile__count.is-zero{ font-weight:600; color:var(--ta-muted); white-space:nowrap; }

/* Flash quota bar: the label clears the flame circle on narrow cards (the "Vừa mở bán ·" prefix goes < 600px) */
@media (max-width:767px){ .ta-sold__text{ padding-left:26px; padding-right:4px; font-size:9.5px; letter-spacing:0; } }
@media (max-width:599px){ .ta-sold__pre{ display:none; } }

/* Coupon ticket: the copy button always stays inside the dashed code box */
.ta-ticket{ grid-template-columns:84px minmax(0,1fr); }
.ta-ticket::before,.ta-ticket::after{ left:76px; }
.ta-ticket__main{ padding:12px; }
.ta-ticket__code{ padding:5px 5px 5px 9px; gap:6px; flex-wrap:wrap; row-gap:6px; }
.ta-ticket__code b{ font-size:12.5px; letter-spacing:.05em; white-space:nowrap; }
.ta-ticket__code .ta-copy{ padding:5px 8px; }

/* Photo crops: per-course focus (Cover.focus "x% y%", style="--focus:…") */
.ta-course__media img{ object-position:var(--focus, 50% 50%); }

/* Vietnamese line breaks: no one-word orphans in titles */
.ta-res__name,.ta-program__title,.ta-course__title,.ta-post__title,.cx-anchor,.ta-prose h2,.ta-prose h3{ text-wrap:pretty; }
/* short two-line titles: balance ("Đếm và nhận / biết số 0–10", not "… / cùng") */
.ta-card__name,.ta-cattile__name,.pd-with__title,.ta-pilltitle span{ text-wrap:balance; }

/* Band quote: Be Vietnam Pro is loaded in italic 500 only; 600 would be a synthesized (smeared) bold italic */
.ta-band__quote{ font-weight:500; }

/* Phones: the end of the page clears the floating dock + cart FAB (address, email and the demo note stay readable) */
@media (max-width:767px){
  body:not(.is-cart-page):not(.is-checkout-page):not(.is-auth-page) .ta-footer{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  body:not(.is-cart-page):not(.is-checkout-page):not(.is-auth-page) .ta-footer__bottom{ padding-right:64px; }
}

/* Keyboard focus is never hidden under the fixed bottom bars (WCAG 2.4.11) */
html:has(body.has-buybar){ scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
@media (max-width:1023px){ html:has(body.co-has-mbar){ scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom)); } }

/* "Vừa mua" toast held open while hovered/focused (layout.js) */
.ta-rp.is-held{ box-shadow:0 18px 40px rgba(0,0,0,.24); }

/* Phones: bigger touch targets for non-card controls (cards keep the spec's 34–36px buttons) */
@media (max-width:767px){
  .ta-browse{ min-width:44px; justify-content:center; }
  .ta-footer__links{ gap:0; }
  .ta-footer__links li:has(> a){ padding:0; }
  .ta-footer__links li > a{ display:block; padding:9px 0; }
  .ta-share__btn,.ta-iconbtn{ width:44px; height:44px; }
  .ta-sec__more,.ta-welcome__phone{ padding-block:10px; margin-block:-10px; }
  .ta-copy{ min-height:40px; }
}

/* "Dữ liệu mẫu" chip (demo adapter only) on dated sample content: events, announcements */
.ta-sample{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:99px; border:1px dashed #C9A15B; background:#FFF8E6; color:#7A4B00; font-size:10.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.ta-post__body > .ta-sample{ justify-self:start; width:max-content; }