@charset "UTF-8";
/* Token thiết kế: màu, chữ, khoảng cách, bo góc, đổ bóng. */
@font-face{font-family:VietSerif;src:url('../fonts/heading.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:OpenSans;src:url('../fonts/body.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:OpenSans;src:url('../fonts/body-semibold.woff') format('woff');font-weight:600 800;font-display:swap}

:root{
  --tv-ink:#24172e; --tv-heading:#2e1438; --tv-text-2:#3d3040; --tv-text-3:#5d5260;
  --tv-plum-950:#26162f; --tv-plum-900:#2b1838; --tv-plum-footer:#2d1342; --tv-plum-850:#321d40; --tv-plum-700:#5a2f66;
  --tv-primary-dark:#5e2c68; --tv-primary:#713b78; --tv-primary-light:#8d467e; --tv-plum-tint:#f3e2ee;
  --tv-gold-100:#ffe2a1; --tv-gold-300:#e9bb69; --tv-gold-500:#d9a252; --tv-gold-text:#8a5a24; --tv-focus:#c27a2c;
  --tv-bg:#fcf5ec; --tv-surface:#fffaf3; --tv-surface-2:#f6ebde;
  --tv-border:#ecdccb; --tv-border-strong:#dcc9bb; --tv-divider:#f0e2d3;
  --tv-on-dark:#e8dcea; --tv-on-dark-2:#d6c3d9; --tv-cream:#f4ead9;
  --tv-error:#b3261e; --tv-error-bg:#fff5f4; --tv-success:#2f5a2c;

  --tv-font-heading:VietSerif,Georgia,serif;
  --tv-font-body:OpenSans,'Segoe UI',Arial,sans-serif;
  --tv-fs-hero:clamp(44px,6.4vw,84px); --tv-fs-h1:clamp(32px,4.4vw,52px); --tv-fs-h1-post:clamp(30px,4.2vw,48px);
  --tv-fs-h2:clamp(28px,3.2vw,38px); --tv-fs-h2-post:clamp(24px,2.4vw,30px); --tv-fs-feature:clamp(22px,2.2vw,28px);
  --tv-fs-20:20px; --tv-fs-19:19px; --tv-fs-17:17px; --tv-fs-16:16px; --tv-fs-15:15px; --tv-fs-14:14px; --tv-fs-13:13px; --tv-fs-12:12px;

  --tv-container:1240px; --tv-gutter:clamp(16px,4vw,40px); --tv-section-y:clamp(44px,6vw,80px); --tv-grid-gap:clamp(14px,1.6vw,20px);
  --tv-radius-sm:8px; --tv-radius-md:12px; --tv-radius-lg:16px; --tv-radius-xl:20px; --tv-radius-pill:999px;

  --tv-shadow-card:0 8px 22px -16px rgba(50,29,64,.35);
  --tv-shadow-card-hover:0 18px 32px -18px rgba(50,29,64,.42);
  --tv-shadow-lg:0 22px 44px -26px rgba(50,29,64,.5);
  --tv-shadow-dark-card:0 14px 30px -20px rgba(50,29,64,.6);
  --tv-shadow-gold:0 8px 24px -10px rgba(233,187,105,.7);

  --tv-grad-gold:linear-gradient(180deg,#ffe2a1,#e9bb69);
  --tv-grad-plum:linear-gradient(180deg,#8d467e,#5e2c68);
  --tv-grad-page-header:radial-gradient(120% 140% at 85% 0%,#5a2f66 0%,#321d40 55%,#26162f 100%);
  --tv-grad-dark-card:radial-gradient(120% 140% at 100% 0%,#6a3572 0%,#3d2148 70%);
}