/* EdT365 Entertainment — Eric Tiệp Bùi
   Palette follows edtech365.vn (feng-shui mệnh Kim): Gold + Graphite + Ivory.
   No red/orange/pink/purple as UI colours — Fire khắc Kim. */

:root{
  --gold:#C8992F;
  --gold-l:#E7C877;
  --gold-d:#8A6A15;
  --gold-15:rgba(200,153,47,.15);
  --gold-30:rgba(200,153,47,.30);
  --ink:#2B2F35;          /* graphite */
  --ink-2:#212429;
  --ink-3:#16191C;
  --ink-4:#101215;        /* deepest — footer, page base */
  --ivory:#FBF6EC;
  --text:#EDE9E0;
  --muted:#9C9A94;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --grad-gold:linear-gradient(135deg,#8A6A15 0%,#C8992F 45%,#E7C877 100%);
  --radius:14px;
  --radius-lg:20px;
  --maxw:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Bilingual toggle. !important on purpose: it makes the rule immune to the
   source-order trap that bit edtech365.vn (a same-specificity .block rule
   sitting after .en{display:none} left both languages visible). */
html[data-lang="vi"] .en{display:none!important}
html[data-lang="en"] .vi{display:none!important}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:94px}

body{
  margin:0;
  background:var(--ink-4);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{font-family:"Be Vietnam Pro",Inter,sans-serif;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6.2vw,4.4rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.5rem,3.2vw,2.25rem);font-weight:700;letter-spacing:-.022em}
h3{font-size:1.04rem;font-weight:700;letter-spacing:-.012em}
p{margin:0 0 1em}
a{color:var(--gold-l);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:#fff}
img{max-width:100%;display:block}
::selection{background:var(--gold-30);color:#fff}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.gold-text{
  background-image:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Pulls the one clause that carries the point out of a muted paragraph.
   Colour + weight only — no background, no underline: this sits inside running
   prose and a box would read as a UI control. */
.hl{color:var(--gold-l);font-weight:500}
.band .hl,.lede .hl{font-weight:600}

/* Small uppercase kicker with a short gold rule in front of it. */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";width:26px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--gold));
}

/* ── header ─────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(16,18,21,.82);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:16px;height:78px}
.brand{display:flex;align-items:center;gap:13px;color:var(--text);font-weight:700;min-width:0}
.brand:hover{color:var(--text)}
/* Driven by height, not width: the crest is 501×320, and the mark should be a
   fixed share of the bar (~46%) rather than a width that happens to look right.
   flex:none stops it being squeezed when the bar runs out of room on mobile. */
.brand img{height:36px;width:auto;flex:none}
.brand span{
  font-family:"Be Vietnam Pro",sans-serif;
  font-size:1.08rem;letter-spacing:-.015em;white-space:nowrap;
}

.bar nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{
  position:relative;color:var(--muted);font-size:.88rem;font-weight:500;
  padding:8px 12px;border-radius:8px;white-space:nowrap;
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}

/* Hamburger — hidden until the links collapse. */
.menu-btn{
  display:none;
  width:40px;height:40px;flex:none;
  border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.05);
  cursor:pointer;place-items:center;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.menu-btn:hover{background:rgba(200,153,47,.12);border-color:var(--gold-30)}
.bars{display:block;width:18px;height:12px;position:relative}
.bars span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--text);
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.bars span:nth-child(1){top:0}
.bars span:nth-child(2){top:5px}
.bars span:nth-child(3){top:10px}
.menu-btn[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.lang{
  display:flex;gap:2px;margin-left:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:9px;padding:3px;
}
.lang button{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:600 .74rem/1 Inter,sans-serif;letter-spacing:.04em;
  padding:7px 10px;border-radius:6px;transition:all .18s var(--ease);
}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{background:var(--grad-gold);color:#231A03}

/* The links collapse into the hamburger at 880px, NOT 760px. Measured: with the
   enlarged brand, the four Vietnamese labels plus the toggle need ~733px and only
   ~712px is free at a 768px viewport — at 760 they wrapped onto two lines
   ("Nổi / bật"). They are never simply deleted: an earlier version hid them with
   no replacement, which left phones with no navigation at all. */
@media(max-width:880px){
  .menu-btn{display:grid}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 0 14px;
    /* Fully opaque, and deliberately no backdrop-filter: the header already has
       one, and a nested backdrop-filter lets the hero bleed through the panel
       (visible in Chrome, worse in iOS Safari). A drop-down needs to be solid. */
    background:#101215;
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -24px rgba(0,0,0,.9);
  }
  .nav-links.open{display:flex}
  .nav-links a{
    padding:14px 28px;border-radius:0;font-size:1rem;color:var(--text);
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .nav-links a:last-child{border-bottom:0}
  .nav-links a:hover{background:rgba(200,153,47,.10)}
}

@media(max-width:560px){
  .wrap{padding:0 18px}
  .bar{height:66px;gap:10px}
  .brand{gap:10px}
  .brand img{height:30px}
  .brand span{font-size:.97rem}
  .bar nav{gap:7px}
  .lang{margin-left:0}
  .lang button{padding:6px 8px}
  .menu-btn{width:38px;height:38px}
  .nav-links a{padding:13px 18px}
}
/* Smallest phones: the brand, the toggle and the hamburger are all on one row,
   so every one of them gives up a few pixels. Verified to fit at 360px. */
@media(max-width:400px){
  .brand img{height:27px}
  .brand span{font-size:.88rem;letter-spacing:-.02em}
  .bar nav{gap:6px}
  .lang button{padding:6px 7px;font-size:.7rem}
  .menu-btn{width:36px;height:36px}
}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(72px,11vw,136px) 0 clamp(60px,8vw,104px);
  background:
    radial-gradient(1100px 520px at 12% -18%,rgba(200,153,47,.22),transparent 60%),
    radial-gradient(820px 460px at 92% 4%,rgba(138,106,21,.17),transparent 58%),
    linear-gradient(180deg,var(--ink-3) 0%,var(--ink-4) 100%);
}
/* Very fine grain — stops the large gradients from banding on wide screens. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.hero h1{margin-bottom:.3em}
.hero .lede{font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:1.75;color:var(--muted);max-width:58ch}

/* Small credentials row under the intro. */
.facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  max-width:62ch;
  font-size:.8rem;letter-spacing:.03em;color:var(--muted);
}
/* Direct children only — the .vi/.en spans nested inside must not get a dot. */
.facts > span{display:flex;align-items:center;gap:9px}
.facts > span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 24px;border-radius:11px;
  font-weight:600;font-size:.92rem;letter-spacing:.005em;
  border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:var(--grad-gold);color:#231A03;
  box-shadow:0 10px 28px -12px rgba(200,153,47,.85);
}
.btn-primary:hover{color:#231A03;box-shadow:0 16px 36px -14px rgba(200,153,47,.95)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:rgba(255,255,255,.035)}
.btn-ghost:hover{color:var(--text);border-color:var(--gold-30);background:rgba(200,153,47,.08)}

/* ── sections ───────────────────────────────────────────── */
section{padding:clamp(64px,8vw,104px) 0}
.section-head{max-width:60ch;margin-bottom:40px}
.section-head h2{margin-bottom:.45em}
.section-head p{color:var(--muted);margin:0}

/* ── youtube facade ─────────────────────────────────────── */
/* Deliberately NOT a live <iframe>: six YouTube embeds on load would pull in
   megabytes of third-party script. The facade shows a thumbnail and only swaps
   in the real iframe on click. Also uses youtube-nocookie.com. */
.yt{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:#000 center/cover no-repeat;
}
.yt::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.5) 100%);
  transition:background .25s var(--ease);
}
.yt:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.14) 35%,rgba(0,0,0,.58) 100%)}
.yt .play{
  position:absolute;z-index:2;inset:0;margin:auto;
  width:62px;height:62px;border-radius:50%;
  background:var(--grad-gold);
  display:grid;place-items:center;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.9),0 0 0 0 rgba(200,153,47,.4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.yt:hover .play{transform:scale(1.09);box-shadow:0 12px 34px -10px rgba(0,0,0,.9),0 0 0 12px rgba(200,153,47,.12)}
.yt .play svg{width:23px;height:23px;fill:#231A03;margin-left:3px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.is-live::after,.yt.is-live .play{display:none}

/* ── featured ───────────────────────────────────────────── */
.featured{
  display:grid;gap:34px;grid-template-columns:1fr;align-items:center;
  padding:clamp(20px,2.6vw,30px);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(200,153,47,.09),rgba(255,255,255,.02) 42%,transparent);
  border:1px solid var(--line);
}
@media(min-width:940px){.featured{grid-template-columns:1.3fr .8fr;gap:44px}}
.featured .yt{box-shadow:0 28px 64px -28px rgba(0,0,0,.95)}
.featured .meta h3{margin-bottom:.4em;font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-.025em}
.featured .meta > p{color:var(--muted);margin:0}
.featured .link{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-weight:600;font-size:.9rem;
}
.featured .link svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.featured .link:hover svg{transform:translateX(4px)}

/* ── collection cards ───────────────────────────────────── */
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(296px,1fr))}
.card{
  position:relative;
  background:linear-gradient(180deg,var(--ink-2) 0%,#1A1D21 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.card:hover{
  border-color:var(--gold-30);
  transform:translateY(-4px);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.9);
}
/* Hairline of gold along the top edge, revealed on hover. */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;transition:opacity .25s var(--ease);
}
.card:hover::before{opacity:1}
.card .yt{border-radius:0}
.card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card .body h3{margin-bottom:.3em}
.card .body > p{color:var(--muted);font-size:.875rem;margin:0}
.tag{
  display:inline-block;margin-bottom:11px;
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);font-weight:700;
}
.card .foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.card:hover .foot{color:var(--gold-l)}
.card .foot svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.card:hover .foot svg{transform:translateX(4px)}

/* The 6th tile: no artwork, just a way out to the channel. Also keeps the
   3-column grid from ending on a ragged two-card row. */
.card-cta{
  align-items:center;justify-content:center;text-align:center;
  padding:40px 28px;min-height:230px;
  background:
    radial-gradient(420px 220px at 50% 0%,rgba(200,153,47,.12),transparent 70%),
    linear-gradient(180deg,var(--ink-2),#1A1D21);
  border-style:dashed;border-color:var(--line-2);
}
.card-cta:hover{border-style:solid}
.card-cta .ring{
  width:54px;height:54px;border-radius:50%;margin:0 auto 18px;
  border:1px solid var(--gold-30);display:grid;place-items:center;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.card-cta:hover .ring{background:var(--gold-15);border-color:var(--gold)}
.card-cta .ring svg{width:22px;height:22px;fill:var(--gold)}
.card-cta h3{margin-bottom:.35em}
.card-cta p{color:var(--muted);font-size:.85rem;margin:0;max-width:26ch}

/* ── lyrics ─────────────────────────────────────────────── */
.lyrics-band{
  background:
    radial-gradient(900px 420px at 80% 0%,rgba(200,153,47,.07),transparent 62%),
    var(--ink-3);
  border-top:1px solid var(--line);
}
/* The h2 here is a song title, not a section label — give it the gold treatment
   so it reads as the name of a work. */
.lyrics-band .section-head h2{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  background-image:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.06em;   /* descenders get clipped by background-clip without this */
}

.lyrics-grid{display:grid;gap:36px;grid-template-columns:1fr;align-items:start}
@media(min-width:940px){
  .lyrics-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:56px}
  /* The cover follows the reader down the stanzas on tall screens. */
  .lyrics-media{position:sticky;top:96px}
}
.lyrics-media .yt{box-shadow:0 24px 56px -28px rgba(0,0,0,.95)}
.lyrics-alt{margin:16px 0 0;font-size:.84rem;color:var(--muted)}
.lyrics-alt a{margin-left:6px;font-weight:600}

/* Verse, not prose: generous leading, no justification, a gold rule for the margin. */
.lyrics{
  margin:0;padding:0 0 0 26px;
  border-left:2px solid var(--gold-30);
  font-size:clamp(1rem,1.6vw,1.1rem);
  line-height:2;
  color:#DCD7CB;
  font-style:italic;
  letter-spacing:.004em;
}
.lyrics p{margin:0 0 1.65em}
.lyrics p:last-child{margin-bottom:0}
@media(max-width:520px){.lyrics{padding-left:18px;line-height:1.9}}

/* Second lyrics band, directly below the first: drop the top border and flip the
   glow to the other side so the two do not read as one long slab. */
.lyrics-band-2{
  background:
    radial-gradient(900px 420px at 15% 0%,rgba(200,153,47,.06),transparent 62%),
    var(--ink-2);
  border-top:0;
}
.lyrics-band-2 .section-head{padding-top:0}
/* This verse is only eight lines, and the portrait is 2:3. At the full column
   width the photo runs far past the last line; capping it keeps the two columns
   roughly level. */
@media(min-width:940px){#tinh-giac .lyrics-media{max-width:400px}}

/* Portrait instead of a 16/9 cover — same shadow language as the .yt facade. */
.portrait{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 24px 56px -28px rgba(0,0,0,.95)}
.portrait img{display:block;width:100%;height:auto}

/* Sing-along lyric on the photo, driven by site.js from assets/captions/*.vtt.
   Same recipe as the baked-in excerpts — champagne-ivory veil, deep-bronze Lora
   italic — never a dark wash (owner is mệnh Kim; see CLAUDE.md). The veil is a
   radial glow centred on the text that fades out well before the edges, so the
   rest of the photo stays untouched. It sits at the bottom, where none of the
   four photos has a face.

   Karaoke sweep: each word is a .w whose --p (set every frame) moves a soft
   colour edge from left to right — sung = #4A3810, still to come = the same
   bronze at 38%. background-clip:text paints the gradient into the glyphs. */
.portrait{position:relative}
.sub{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:52px 8% 22px;text-align:center;pointer-events:none;
  background:radial-gradient(64% 76% at 50% 76%,
    rgba(250,243,226,.9),rgba(247,236,210,.6) 50%,rgba(247,236,210,0) 100%);
  font-family:Lora,Georgia,serif;font-style:italic;font-weight:600;
  font-size:clamp(1.02rem,2.2vw,1.32rem);line-height:1.42;letter-spacing:.005em;
  color:#4A3810;text-wrap:balance;
  opacity:0;transform:translateY(10px);filter:blur(3px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),filter .32s var(--ease);
}
.sub.on{opacity:1;transform:none;filter:none}
.sub.leaving{opacity:0;transform:translateY(-8px);filter:blur(3px);
  transition-duration:.17s}
/* A short gold rule above the line, echoing the diamond rule on the photos. */
.sub::before{
  content:"";display:block;width:46px;height:1px;margin:0 auto 10px;
  background:linear-gradient(90deg,transparent,#A67C1E,transparent);
}
.sub .w{
  --p:-18%;
  background:linear-gradient(90deg,#4A3810 var(--p),rgba(74,56,16,.38) calc(var(--p) + 18%));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Instrumental rest: three gold dots that fill one by one (site.js withRests). */
.sub.rest{letter-spacing:.22em;padding-left:calc(8% + .22em)}
.sub.rest::before{margin-bottom:2px}
.sub.rest .w{
  font-style:normal;font-size:1.25em;line-height:1.1;
  background:linear-gradient(90deg,#A67C1E var(--p),rgba(166,124,30,.3) calc(var(--p) + 18%));
  -webkit-background-clip:text;background-clip:text;
}
@media(max-width:520px){.sub{padding:40px 5% 15px;font-size:1rem}.sub::before{margin-bottom:7px}}

/* The verse follows the song: while it plays, the other lines step back and the
   one being sung turns gold. Lines with a cue can be clicked to jump there. */
.lyrics .ln{transition:color .45s var(--ease),text-shadow .45s var(--ease)}
.lyrics.live .ln{color:rgba(220,215,203,.5)}
.lyrics .ln.now{color:var(--gold-l);text-shadow:0 0 18px rgba(231,200,119,.28)}
.lyrics .ln[data-cue]{cursor:pointer}
.lyrics .ln[data-cue]:hover{color:#F1DFA8}
@media(prefers-reduced-motion:reduce){
  .sub,.sub.leaving{transform:none;filter:none}
}

.audio{margin-top:18px}
.audio-label{
  margin:0 0 9px;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-l);
}
/* color-scheme is what actually darkens the native player — ::-webkit-media-controls
   styling is ignored in current Chrome and does nothing here. */
.audio audio{width:100%;height:38px;border-radius:9px;color-scheme:dark}

.lyrics-credit{
  margin:1.9em 0 0;padding-top:1.1em;border-top:1px solid var(--line);
  font-style:normal;font-size:.8rem;letter-spacing:.06em;color:var(--muted);
}
/* A dedication after the verse — not part of the sung lyric, so it reads as prose. */
.lyrics-note{font-style:normal;color:var(--gold-l);line-height:1.7}

/* ── about / back-link band ─────────────────────────────── */
.band{
  background:
    radial-gradient(760px 300px at 15% 0%,rgba(200,153,47,.08),transparent 65%),
    var(--ink-3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.band .inner{display:grid;gap:30px;align-items:center;padding:clamp(48px,7vw,76px) 0}
@media(min-width:900px){.band .inner{grid-template-columns:1fr auto}}
.band p{color:var(--muted);margin:0;max-width:64ch;font-size:1.04rem;line-height:1.85}
.band strong{color:var(--text);font-weight:600}
.band .btns{margin-top:0}

/* ── footer ─────────────────────────────────────────────── */
footer{padding:52px 0 56px;color:var(--muted);font-size:.86rem;background:var(--ink-4)}
footer .cols{
  display:flex;flex-wrap:wrap;gap:22px 36px;align-items:center;justify-content:space-between;
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line);
}
/* ── .pn — REMOVED 2026-09-18, do not bring it back ──
   `.pn` marked the digit groups up with no whitespace between the tags and let
   CSS margin draw the gaps, betting a crawler would read one compact token while
   a reader saw "0944 160 886". The bet lost.

   Every page on edtech365.vn carried `.pn`, yet Googling "0944160886" returned
   only /contact — the one page that also spells the number out as ordinary text
   in its FAQ. "0944 160 886" returned all of them. So Google tokenizes at the
   inline element boundary: the markup produced three tokens, not one, which is
   the exact bug `.pn` existed to fix.

   The number is plain contiguous text now. Do not re-split it across tags. */

footer .contact{margin-top:6px;font-size:.84rem}
footer .contact a{color:var(--muted)}
footer .contact a:hover{color:var(--gold-l)}
footer .contact .sep{margin:0 7px;color:#57544F}

footer a{color:var(--muted)}
footer a:hover{color:var(--gold-l)}
footer .copy{color:var(--text);font-weight:500}
footer .fine{color:#6E6C68;font-size:.8rem;margin-top:5px}

/* Licence. Deliberately NOT fine print — the owner wants the "no commercial use"
   line read, so it gets body size, a gold margin rule and a bold clause. */
.licence{
  margin:0;padding:18px 0 18px 22px;
  border-left:2px solid var(--gold-30);
  max-width:70ch;
  font-size:.94rem;line-height:1.8;color:#B8B5AE;
}
.licence strong{color:var(--gold-l);font-weight:600}

.socials{display:flex;gap:10px}
.socials a{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  display:grid;place-items:center;
  transition:all .2s var(--ease);
}
.socials a:hover{background:var(--gold-15);border-color:var(--gold-30);transform:translateY(-2px)}
.socials svg{width:17px;height:17px;fill:#C7C4BC;transition:fill .2s var(--ease)}
.socials a:hover svg{fill:var(--gold-l)}

/* ── scroll reveal ──────────────────────────────────────── */
/* site.js adds .in when the element enters the viewport. The .reveal class is
   only applied by JS too, so with JS off nothing is ever hidden. */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}