@font-face {
  font-family: 'DNK Serif';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/dnk-serif-1.woff2) format('woff2');
  unicode-range: U+20, U+22, U+25-27, U+2b-3b, U+3d, U+3f-59, U+5b, U+5d, U+61-7b, U+7d, U+a9, U+b7, U+c0-c3, U+c8-ca, U+cc-ce, U+d1-d5, U+d7, U+d9-db, U+dd, U+e0-e3, U+e8-ea, U+ec-ee, U+f1-f5, U+f9-fb, U+fd, U+102-103, U+106-109, U+110-111, U+114-115, U+11c-11f, U+124-125, U+128-129, U+12c-12d, U+134-135, U+139-13a, U+143-144, U+14e-14f, U+154-155, U+15a-15d, U+168-169, U+16c-16d, U+174-177, U+17a, U+1a0-1a1, U+1af-1b0, U+1f4-1f5, U+1f8-1f9, U+300-303, U+306, U+309, U+31b, U+323, U+1e04-1e05, U+1e0c-1e0d, U+1e24-1e25, U+1e30-1e33, U+1e36-1e37, U+1e3e-1e3f, U+1e42-1e43, U+1e46-1e47, U+1e4c-1e4d, U+1e54-1e55, U+1e5a-1e5b, U+1e62-1e63, U+1e6c-1e6d, U+1e78-1e79, U+1e7c-1e83, U+1e88-1e89, U+1e91, U+1e93, U+1ea0-1ef9, U+2014, U+2019, U+201c-201d, U+2026;
unicode-range: U+0020,U+0022,U+0025,U+0026,U+0027,U+002B,U+002C,U+002D,U+002E,U+002F,U+0030,U+0031,U+0032,U+0033,U+0034,U+0035,U+0036,U+0037,U+0038,U+0039,U+003A,U+003B,U+003D,U+003F,U+0040,U+0041,U+0042,U+0043,U+0044,U+0045,U+0046,U+0047,U+0048,U+0049,U+004A,U+004B,U+004C,U+004D,U+004E,U+004F,U+0050,U+0051,U+0052,U+0053,U+0054,U+0055,U+0056,U+0057,U+0058,U+0059,U+005B,U+005D,U+0061,U+0062,U+0063,U+0064,U+0065,U+0066,U+0067,U+0068,U+0069,U+006A,U+006B,U+006C,U+006D,U+006E,U+006F,U+0070,U+0071,U+0072,U+0073,U+0074,U+0075,U+0076,U+0077,U+0078,U+0079,U+007A,U+007B,U+007D,U+00A9,U+00B7,U+00C0,U+00C1,U+00C2,U+00C3,U+00C8,U+00CA,U+00CC,U+00CD,U+00D2,U+00D3,U+00D4,U+00D7,U+00D9,U+00DA,U+00E0,U+00E1,U+00E2,U+00E3,U+00E8,U+00E9,U+00EA,U+00EC,U+00ED,U+00F2,U+00F3,U+00F4,U+00F5,U+00F9,U+00FA,U+00FD,U+0102,U+0103,U+0110,U+0111,U+0129,U+0169,U+01A0,U+01A1,U+01AF,U+01B0,U+1EA0,U+1EA1,U+1EA2,U+1EA3,U+1EA5,U+1EA6,U+1EA7,U+1EA9,U+1EAA,U+1EAB,U+1EAC,U+1EAD,U+1EAE,U+1EAF,U+1EB1,U+1EB7,U+1EB9,U+1EBA,U+1EBD,U+1EBE,U+1EBF,U+1EC0,U+1EC1,U+1EC2,U+1EC3,U+1EC5,U+1EC6,U+1EC7,U+1EC9,U+1ECA,U+1ECB,U+1ECC,U+1ECD,U+1ECE,U+1ECF,U+1ED0,U+1ED1,U+1ED2,U+1ED3,U+1ED4,U+1ED5,U+1ED7,U+1ED8,U+1ED9,U+1EDA,U+1EDB,U+1EDC,U+1EDD,U+1EDE,U+1EDF,U+1EE1,U+1EE2,U+1EE3,U+1EE4,U+1EE5,U+1EE6,U+1EE7,U+1EE8,U+1EE9,U+1EEA,U+1EEB,U+1EEC,U+1EED,U+1EEE,U+1EEF,U+1EF0,U+1EF1,U+1EF9,U+2014,U+2019,U+201C,U+201D,U+2026;
}
@font-face {
  font-family: 'DNK Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/dnk-serif-2.woff2) format('woff2');
  unicode-range: U+20, U+22, U+25-27, U+2b-3b, U+3d, U+3f-59, U+5b, U+5d, U+61-7b, U+7d, U+a9, U+b7, U+c0-c3, U+c8-ca, U+cc-ce, U+d1-d5, U+d7, U+d9-db, U+dd, U+e0-e3, U+e8-ea, U+ec-ee, U+f1-f5, U+f9-fb, U+fd, U+102-103, U+106-109, U+110-111, U+114-115, U+11c-11f, U+124-125, U+128-129, U+12c-12d, U+134-135, U+139-13a, U+143-144, U+14e-14f, U+154-155, U+15a-15d, U+168-169, U+16c-16d, U+174-177, U+17a, U+1a0-1a1, U+1af-1b0, U+1f4-1f5, U+1f8-1f9, U+300-303, U+306, U+309, U+31b, U+323, U+1e04-1e05, U+1e0c-1e0d, U+1e24-1e25, U+1e30-1e33, U+1e36-1e37, U+1e3e-1e3f, U+1e42-1e43, U+1e46-1e47, U+1e4c-1e4d, U+1e54-1e55, U+1e5a-1e5b, U+1e62-1e63, U+1e6c-1e6d, U+1e78-1e79, U+1e7c-1e83, U+1e88-1e89, U+1e91, U+1e93, U+1ea0-1ef9, U+2014, U+2019, U+201c-201d, U+2026;
unicode-range: U+0020,U+0022,U+0025,U+0026,U+0027,U+002B,U+002C,U+002D,U+002E,U+002F,U+0030,U+0031,U+0032,U+0033,U+0034,U+0035,U+0036,U+0037,U+0038,U+0039,U+003A,U+003B,U+003D,U+003F,U+0040,U+0041,U+0042,U+0043,U+0044,U+0045,U+0046,U+0047,U+0048,U+0049,U+004A,U+004B,U+004C,U+004D,U+004E,U+004F,U+0050,U+0051,U+0052,U+0053,U+0054,U+0055,U+0056,U+0057,U+0058,U+0059,U+005B,U+005D,U+0061,U+0062,U+0063,U+0064,U+0065,U+0066,U+0067,U+0068,U+0069,U+006A,U+006B,U+006C,U+006D,U+006E,U+006F,U+0070,U+0071,U+0072,U+0073,U+0074,U+0075,U+0076,U+0077,U+0078,U+0079,U+007A,U+007B,U+007D,U+00A9,U+00B7,U+00C0,U+00C1,U+00C2,U+00C3,U+00C8,U+00CA,U+00CC,U+00CD,U+00D2,U+00D3,U+00D4,U+00D7,U+00D9,U+00DA,U+00E0,U+00E1,U+00E2,U+00E3,U+00E8,U+00E9,U+00EA,U+00EC,U+00ED,U+00F2,U+00F3,U+00F4,U+00F5,U+00F9,U+00FA,U+00FD,U+0102,U+0103,U+0110,U+0111,U+0129,U+0169,U+01A0,U+01A1,U+01AF,U+01B0,U+1EA0,U+1EA1,U+1EA2,U+1EA3,U+1EA5,U+1EA6,U+1EA7,U+1EA9,U+1EAA,U+1EAB,U+1EAC,U+1EAD,U+1EAE,U+1EAF,U+1EB1,U+1EB7,U+1EB9,U+1EBA,U+1EBD,U+1EBE,U+1EBF,U+1EC0,U+1EC1,U+1EC2,U+1EC3,U+1EC5,U+1EC6,U+1EC7,U+1EC9,U+1ECA,U+1ECB,U+1ECC,U+1ECD,U+1ECE,U+1ECF,U+1ED0,U+1ED1,U+1ED2,U+1ED3,U+1ED4,U+1ED5,U+1ED7,U+1ED8,U+1ED9,U+1EDA,U+1EDB,U+1EDC,U+1EDD,U+1EDE,U+1EDF,U+1EE1,U+1EE2,U+1EE3,U+1EE4,U+1EE5,U+1EE6,U+1EE7,U+1EE8,U+1EE9,U+1EEA,U+1EEB,U+1EEC,U+1EED,U+1EEE,U+1EEF,U+1EF0,U+1EF1,U+1EF9,U+2014,U+2019,U+201C,U+201D,U+2026;
}

/* DNK Radio · Phòng phát đêm. Bố cục cơ sở không cần Grid/Flexbox. */
:root {
  color-scheme: dark;
  --bg: #0c0a11;
  --bg-soft: #13101b;
  --surface: #1a1622;
  --surface-raised: #211b2b;
  --ink: #f1ece4;
  --muted: #c2b9c9;
  --quiet: #aaa0b1;
  --amber: #edbd82;
  --amber-bright: #ffdaad;
  --purple: #ae9fc7;
  --line: #a99cb333;
  --line-strong: #b5a5c455;
  --paper: #ece0cc;
  --paper-ink: #352a24;
  --mood-glow: #88604b19;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "DNK Sans", "Segoe UI", Arial, sans-serif;
  --measure: 77.5rem;
  --gutter: clamp(1.2rem, 4vw, 4.5rem);
  --radius: .32rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: radial-gradient(ellipse at 75% 8%, var(--mood-glow), transparent 47rem), var(--bg);
  font: 1rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
button, input, textarea, select { font: inherit; }
button, a, summary, input, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--amber); }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }
svg { max-width: 100%; }
img { max-width: 100%; height: auto; }
button, input, select, textarea, summary { touch-action: manipulation; }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--amber-bright);
  outline-offset: 5px;
}
::selection { background: var(--amber); color: var(--bg); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  padding: .7rem 1rem; color: var(--bg); background: var(--amber);
  border-radius: var(--radius); transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }
.shell { width: min(calc(100% - var(--gutter) * 2), var(--measure)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(4.5rem, 8vw, 8rem); }
.section + .section { border-top: 1px solid var(--line); }
.section--quiet { background: var(--bg-soft); }
.section--glow { background: radial-gradient(ellipse at 80% 30%, var(--mood-glow), transparent 42rem); }
.section--compact { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.eyebrow {
  margin: 0 0 1.1rem; color: var(--amber); font-size: .75rem;
  font-weight: 600; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase;
}
.eyebrow .index { display: inline-block; min-width: 2.7rem; color: var(--quiet); font-variant-numeric: tabular-nums; }
.section-head { max-width: 50rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head h2, .section-title {
  max-width: 18ch; margin: 0; font: 400 clamp(2.4rem, 4.2vw, 4.5rem)/1.1 var(--serif);
  letter-spacing: -.045em; text-wrap: balance;
}
.section-head h2 em, .section-title em { color: var(--amber); font-weight: 400; }
.section-head p:not(.eyebrow) { max-width: 38rem; margin: 1.15rem 0 0; color: var(--muted); }
.lede { max-width: 36rem; margin: 1.4rem 0 0; color: var(--muted); font-size: 1.1rem; line-height: 1.85; }
.muted { color: var(--muted); }
.fine-print { color: var(--quiet); font-size: .8rem; line-height: 1.7; }
.text-link { display: inline-block; padding-block: .65rem; color: var(--amber); }
.text-link span { display: inline-block; margin-left: .5rem; transition: transform .2s var(--ease); }
.text-link:hover span { transform: translate(3px, -3px); }
.split { font-size: 0; }
.split > * { display: inline-block; width: 100%; vertical-align: top; font-size: 1rem; }
.split > * + * { margin-top: 2.5rem; }
.split--middle > * { vertical-align: middle; }
.split::after, .site-header::after { display: block; clear: both; content: ""; }
.site-header { padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-block; min-height: 2.75rem; vertical-align: middle; text-decoration: none; }
.brand-mark { display: inline-block; width: 2.7rem; height: 2.7rem; vertical-align: middle; color: var(--amber); }
.brand-copy { display: inline-block; margin-left: .75rem; vertical-align: middle; }
.brand-copy strong { display: block; font-size: 1rem; font-weight: 650; letter-spacing: -.035em; line-height: 1.4; }
.brand-copy small { display: block; color: var(--quiet); font-size: .73rem; letter-spacing: .035em; }
.header-right { float: right; padding-top: .12rem; }
.site-nav { display: inline-block; vertical-align: middle; }
.site-nav a { display: inline-block; margin-left: 1.4rem; padding-block: .65rem; color: var(--muted); font-size: .85rem; text-decoration: none; }
.site-nav a:hover { color: var(--amber); }
.language-switch { display: inline-block; margin-left: 1.5rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 2rem; font-size: .8rem; text-decoration: none; }
.language-switch:hover { border-color: var(--amber); }
.hero { position: relative; isolation: isolate; padding-block: clamp(3rem, 7vw, 6rem) 2.5rem; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 {
  max-width: 10ch; margin: 0; font: 400 clamp(3.4rem, 7vw, 7.2rem)/1.03 var(--serif);
  letter-spacing: -.055em; text-wrap: balance;
}
.hero h1 em { color: var(--amber); font-weight: 400; }
.hero .lede { max-width: 34rem; margin-top: 1.65rem; }
.hero-actions { margin-top: 2rem; }
.hero-actions > * { margin-right: .6rem; margin-bottom: .6rem; }
.button {
  display: inline-block; min-height: 3.15rem; padding: .75rem 1.2rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink); background: transparent; font-size: .9rem; font-weight: 600;
  line-height: 1.5; text-align: center; text-decoration: none;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.button:hover { border-color: var(--amber); background: #edbd820c; transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.99); }
.button--primary { color: #21170f; border-color: var(--amber); background: var(--amber); }
.button--primary:hover { color: #21170f; background: var(--amber-bright); }
.hero-studio { position: relative; margin-top: 2rem; padding-top: 1.5rem; }
.studio-window { display: block; width: 100%; max-width: 39rem; height: auto; margin-inline: auto; }
.studio-caption { margin: .9rem 0 0; color: var(--quiet); font-size: .75rem; letter-spacing: .055em; text-align: right; }
.on-air { display: inline-block; padding: .35rem .65rem; border: 1px solid #edbd824d; border-radius: 2rem; color: var(--amber); font-size: .72rem; font-weight: 650; letter-spacing: .11em; }
.on-air::before { display: inline-block; width: .42rem; height: .42rem; margin-right: .5rem; border-radius: 50%; background: currentColor; content: ""; box-shadow: 0 0 0 4px #edbd8214; }
.status-strip { border-block: 1px solid var(--line); background: #16111e; }
.status-strip .shell { padding-block: 1rem; }
.status-item { display: inline-block; margin-right: 2rem; color: var(--quiet); font-size: .8rem; }
.status-item strong { margin-left: .5rem; color: var(--ink); font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.signal-icon { display: inline-block; margin-right: .5rem; color: var(--amber); font-size: 1rem; }
.panel, .audio-player { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.panel h3, .audio-player h3 { margin: .7rem 0; font: 400 1.55rem/1.2 var(--serif); letter-spacing: -.025em; }
.panel p, .audio-player p { color: var(--muted); margin: .7rem 0 0; }
.panel-row { margin-top: 2rem; font-size: 0; }
.panel-row > .panel { display: inline-block; width: 100%; margin-bottom: 1rem; font-size: 1rem; vertical-align: top; }
input[type="range"] { height: 2.3rem; accent-color: var(--amber); cursor: pointer; }
.mood-picker { margin: -.35rem; }
.mood-chip { display: inline-block; min-height: 2.9rem; margin: .35rem; padding: .6rem 1rem; border: 1px solid var(--line-strong); border-radius: 2rem; color: var(--muted); background: #ffffff03; font-size: .88rem; transition: border-color .2s, background-color .2s, transform .2s; }
.mood-chip:hover { color: var(--ink); border-color: var(--amber); transform: translateY(-2px); }
.mood-chip[aria-pressed="true"] { color: var(--amber-bright); border-color: var(--amber); background: #edbd8210; }
.mood-chip[aria-pressed="true"]::after { padding-left: .5rem; content: "✓"; }
.mood-response { min-height: 3.5rem; margin: 1.5rem 0 0; color: var(--muted); font: italic 1.3rem/1.65 var(--serif); }
.boundary-note { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; min-height: 4rem; padding: 1.15rem 2.5rem 1.15rem 0; color: var(--ink); font-size: 1rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; right: .5rem; top: 1.2rem; color: var(--amber); content: "+"; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--amber); }
.faq details p { max-width: 48rem; margin: 0 0 1.3rem; color: var(--muted); }
.closing { padding-block: 6rem; border-top: 1px solid var(--line); background: radial-gradient(ellipse at 15% 90%, #76574524, transparent 45rem); }
.closing h2 { max-width: 16ch; margin: 0; font: 400 clamp(2.6rem, 5.5vw, 5.5rem)/1.1 var(--serif); letter-spacing: -.045em; }
.closing h2 em { color: var(--amber); font-weight: 400; }
.closing .button { margin-top: 1.75rem; }
.site-footer { padding-block: 2rem; border-top: 1px solid var(--line); color: var(--quiet); font-size: .8rem; }
.footer-links { margin-block: 1.25rem; }
.footer-links a { display: inline-block; min-height: 2.75rem; margin: 0 1.3rem 0 0; padding-block: .65rem; }
.footer-bottom { padding-top: 1rem; border-top: 1px solid var(--line); }
.footer-bottom p { display: inline-block; margin: 0; }
.back-top { float: right; color: var(--amber); }
.noscript-note { width: min(calc(100% - 2.4rem), var(--measure)); margin: 1rem auto; }
.scroll-progress { position: fixed; z-index: 60; inset: 0 0 auto; height: 2px; pointer-events: none; }
.scroll-progress::before { display: block; width: var(--scroll-progress, 0%); height: 100%; background: var(--amber); content: ""; }
.shader-canvas { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .18; pointer-events: none; }

/* Điều khiển phụ; chữ viết ở lại trên thiết bị. */
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; }
.audio-player { container-type: inline-size; }
.player-controls { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-block: 1.5rem; }
.icon-button, .play-button { width: 3rem; height: 3rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--amber); background: transparent; }
.play-button { width: 4rem; height: 4rem; color: var(--bg); background: var(--amber); }
.player-controls svg { width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.player-timeline input, .field input, .field textarea { width: 100%; }
.field { display: block; margin-block: 1rem; }
.field input, .field textarea { min-height: 3rem; padding: .7rem; color: inherit; border: 1px solid var(--line-strong); background: var(--bg); }
.letter { padding: 1.7rem; color: var(--paper-ink); background: var(--paper); }
.letter textarea { width: 100%; min-height: 13rem; padding: .7rem; color: inherit; border: 1px solid #6e5e5044; background: transparent; font: 1.2rem/1.8 var(--serif); }
.letter .fine-print { color: #695d51; }
.letter :focus-visible { outline-color: #744e27; }
.timeline, .episode-list, .issue-list { margin: 0; padding: 0; list-style: none; }
.timeline li, .episode-list li, .issue-list li { padding-block: 1.2rem; border-block-start: 1px solid var(--line); }
.episode-choice, .sound-point { min-height: 3rem; padding: .65rem; border: 1px solid var(--line); color: var(--ink); background: transparent; }
.episode-choice[aria-pressed="true"], .sound-point[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); }
/* Nâng cấp CSS có dự phòng bằng bố cục cơ sở. */
@supports (color: oklch(70% .1 70)) {
  :root { --bg: oklch(15% .014 295); --bg-soft: oklch(18% .022 295); --surface: oklch(21% .025 295); --amber: oklch(82% .09 72); --ink: oklch(95% .014 80); --purple: oklch(75% .055 305); }
}
@supports (color: oklch(from red l c h)) {
  body[data-mood="hopeful"] { --mood-glow: oklch(from var(--amber) l c 90 / .12); }
  body[data-mood="quiet"], body[data-mood="nostalgic"] { --mood-glow: oklch(from var(--purple) l c h / .12); }
  body[data-mood="tender"] { --mood-glow: oklch(from var(--amber) l c 40 / .12); }
}
@container (min-width: 30rem) { .audio-player h3 { font-size: 2rem; } }
@scope (.panel) { p { text-wrap: pretty; } a { text-decoration-color: var(--line-strong); } }
@supports (animation-timeline: view()) {
  .section-head { animation: section-arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  @keyframes section-arrive { from { transform: translateY(1rem); } to { transform: translateY(0); } }
}
@media (min-width: 760px) {
  .split > :first-child { width: 41%; }
  .split > :last-child { width: 51%; margin: 0 0 0 8%; }
  .hero .split > :first-child { width: 53%; }
  .hero .split > :last-child { width: 45%; margin: 0 0 0 2%; }
  .hero-studio { transform: translateY(2rem); }
  .panel-row > .panel { width: 31.7%; margin-right: 2.45%; margin-bottom: 0; min-height: 22rem; }
  .panel-row > .panel:last-child { margin-right: 0; }
  .footer-links { display: inline-block; float: right; margin-top: .5rem; }
}
@media (min-width: 1180px) {
  .hero { padding-top: 5rem; }
  .hero .split { min-height: 35rem; }
  .hero h1 { font-size: clamp(5.5rem, 6.7vw, 7.2rem); }
  .section-head--aside { float: left; width: 31%; padding-right: 2rem; }
  .section-content--aside { width: 62%; margin-left: 38%; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 760px) {
    .panel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
    .panel-row > .panel { display: grid; grid-row: span 5; grid-template-rows: subgrid; width: auto; min-height: 0; margin: 0; }
    .panel-row .tag { align-self: end; justify-self: start; }
  }
}
@media (max-width: 759px) {
  .header-right { float: none; }
  .site-nav { display: block; }
  .site-nav a { margin-left: 0; margin-right: 1rem; }
  .language-switch { margin-left: .5rem; }
  .hero .split > * { width: 100%; }
  .hero h1 { max-width: 11ch; }
  .status-item { display: block; margin: .25rem 0; }
  .section-head--aside { margin-bottom: 2rem; }
  .footer-links { margin-bottom: .75rem; }
  .back-top { float: none; display: block; margin-top: 1rem; }
}
@media (max-width: 420px) {
  .brand-copy small { max-width: 10rem; font-size: .7rem; }
  .brand-mark { width: 2.25rem; height: 2.25rem; }
  .brand-copy { margin-left: .5rem; }
  .language-switch { padding-inline: .6rem; }
  .hero h1 { font-size: 3.45rem; }
  .hero-actions > .button { display: block; width: 100%; margin-right: 0; }
  .hero .lede { font-size: 1rem; }
  .letter-actions .button { display: block; width: 100%; margin-right: 0; }
  .letter-meta output { float: none; display: block; margin-top: .2rem; }
  .player-bottom .fine-print { display: block; margin-left: 0; }
  .quote { padding: 1.4rem; }
  .quote p { font-size: 1.45rem; }
}
@media (hover: none), (pointer: coarse) {
  .button:hover, .mood-chip:hover, .play-button:hover { transform: none; }
  .icon-button { min-width: 3rem; min-height: 3rem; }
  input[type="range"] { min-height: 2.75rem; }
  .poem button { padding-block: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .section-head, .hero-studio { transform: none; }
  .shader-canvas { display: none; }
}
@media (forced-colors: active) {
  body, .panel, .audio-player, .letter, .status-strip { color: CanvasText; background: Canvas; }
  .button, .mood-chip, .sound-point, .field input, .field textarea { color: ButtonText; background: Canvas; border-color: ButtonText; }
  .button--primary, .play-button { color: HighlightText; background: Highlight; }
  .hero::before, .shader-canvas { display: none; }
  .on-air::before, .timeline .is-current::before { background: Highlight; }
  .episode-choice[aria-pressed="true"] { border-left: 3px solid Highlight; }
  .mood-chip[aria-pressed="true"] { border: 2px solid Highlight; }
  .brand-mark, .studio-window, .data-chart { color: CanvasText; }
}
@media print {
  :root { --ink: #111; --muted: #333; --quiet: #444; --amber: #634421; --line: #bbb; }
  body, .section, .panel, .status-strip, .audio-player, .letter { color: #111; background: #fff; }
  .section { padding-block: 2rem; break-inside: avoid; }
  .site-header, .hero-studio, .player-controls, .player-timeline, .shader-canvas, .scroll-progress, .hero-actions, .letter-actions, .back-top { display: none; }
  .hero { padding-block: 1rem 2rem; }
  .hero h1 { font-size: 3rem; }
  .section-head h2 { font-size: 2rem; }
  .split > *, .hero .split > * { display: block; width: 100%; margin: 1rem 0; }
  .letter { box-shadow: none; transform: none; border: 1px solid #aaa; }
  .faq details p { display: block; }
  a[href^="https"]::after { content: " (" attr(href) ")"; font-size: .7rem; }
}

/* Nhịp quay chỉ bắt đầu khi người nghe bật âm; không autoplay hình đĩa. */
.is-playing .vinyl { transform-origin:287px 349px; animation:studio-vinyl 32s linear infinite; }
@keyframes studio-vinyl { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .is-playing .vinyl { animation:none; } }

/* Feature detection thay cho suy đoán phiên bản trình duyệt. */
@supports (text-box-trim:trim-both) { .hero-copy .eyebrow { text-box-trim:trim-both; } }
@supports (anchor-name:--privacy-control) {
  #privacy-open { anchor-name:--privacy-control; }
  .site-footer #pwa-status { position-anchor:--privacy-control; }
}

/* DNK Radio v4 */
.site-header{position:relative;z-index:20;padding-block:14px}
.site-header .shell{position:relative;display:flex;align-items:center;gap:20px;min-height:44px}
.site-header .site-nav{margin:0 0 0 auto;white-space:nowrap}
.site-nav a{margin:0 0 0 20px;min-height:44px}
.site-header .language-link{position:static;float:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:8px 12px}
.brand{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}
.brand>svg{width:44px;height:36px}
.brand>span{margin-left:10px;font-size:20px;letter-spacing:.01em}
.header-menu{display:none}
.hero{padding-block:42px 28px}
.hero .split{min-height:0}
.hero h1{font-size:clamp(4rem,5.7vw,6.2rem);line-height:1.06;letter-spacing:-.045em}
.hero-copy .eyebrow{font-size:12px;letter-spacing:.07em;margin-bottom:16px}
.hero-intro{font-size:17px;line-height:1.7;margin:22px 0;max-width:32rem;color:var(--muted)}
.hero-actions{margin-top:20px}
.hero-footnote{margin-top:12px;font-size:13px;color:var(--muted)}
#hero-playing{margin:10px 0 0;font-size:13px;color:var(--muted)}
#hero-play{min-height:52px;border-radius:8px;font-size:15px}
#hero-play[aria-pressed=true]{background:var(--amber-bright)}
.hero-studio{max-width:29rem;transform:none;filter:drop-shadow(0 18px 32px #0005)}
.studio-window{max-width:100%;height:auto}
.studio-caption{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.02em;line-height:1.6}
.studio-badge{right:5%;bottom:18%;padding:9px 14px;transform:none;border-radius:4px;font-size:12px;letter-spacing:.05em;background:#18141ee8;color:var(--amber);border:1px solid var(--line-strong)}
.scroll-cue{margin-top:16px;min-height:44px;font-size:12px}
.status-strip .shell{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-block:14px}
.status-strip .shell>span{width:auto;font-size:12px;letter-spacing:.02em}
.status-strip .shell>span:last-child{margin-left:auto}
.section{padding-block:clamp(48px,5vw,80px)}
.section-head{margin-bottom:28px}
.section-head h2{font-size:clamp(2.1rem,3.5vw,3.6rem);line-height:1.16}
.section-number{display:none}
.label,.tag,.eyebrow,.small,.cover-label,.field-meta,.player-time,.timeline-state,.chart-hours,.sound-point small,.episode small,.panel .tag,.player-info .eyebrow,.volume-control label,.metrics p,.letter-signature span{font-size:12px;letter-spacing:.04em}
:is(#poetry,#data,#voices,#technology,#changelog,#features,#principles,#journey,#milestones,#press){padding-block:36px}
:is(#data,#voices,#technology,#changelog,#faq) .section-head h2{max-width:38ch;font:500 clamp(1.6rem,2.5vw,2.1rem)/1.25 var(--sans);letter-spacing:-.025em}
:is(#data,#voices,#technology,#changelog,#faq) .section-head h2 br{display:none}
:is(#data,#voices,#technology,#changelog,#faq) .section-head h2 em{font-style:normal}
.audio-player{min-height:0}
.player-cover{height:9rem}
.technology-list summary{min-height:44px;padding-block:8px}
.technology-list details{padding:8px 16px}
.poetry-line{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.65}
@media(min-width:760px){.hero .split>.hero-studio{margin-top:0}}
@media(max-width:759px){
 .site-header .shell{gap:10px}.site-header .site-nav{display:none}.header-menu{display:block;margin-left:auto}.header-menu summary{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;font-size:14px;cursor:pointer}.menu-links{position:absolute;top:calc(100% + 14px);left:0;right:0;padding:10px;background:var(--bg-soft);border:1px solid var(--line-strong);box-shadow:0 12px 24px #0006}.menu-links a{display:block;min-height:44px;padding:10px 12px;font-size:15px;text-decoration:none}.menu-links a:hover{background:var(--surface);color:var(--amber)}
 .hero{padding-top:28px}.hero h1{max-width:none;font-size:clamp(2.45rem,11.3vw,3.8rem);line-height:1.09}.hero-copy .eyebrow{font-size:12px;margin-bottom:12px}.hero-intro{font-size:16px;line-height:1.65;margin:16px 0}.hero-actions{margin-top:16px}.hero-actions>.button{display:block;width:100%;margin:0}.hero-actions>.text-link{min-height:44px;margin:4px 0 0;padding-block:10px}.hero-footnote{margin-top:4px}.hero-studio,.hero .split>.hero-studio{width:100%;max-width:26rem;margin:20px auto 0}.hero-studio .studio-window{max-height:none}.status-strip .shell>span{width:auto;padding:0;font-size:12px}.status-strip .shell>span:last-child{margin-left:0;text-align:left}.section{padding-block:48px}.section-head{margin-bottom:24px}.split>*+*{margin-top:24px}.sound-point small{letter-spacing:0}.player-info h3{font-size:1.65rem}.volume-control{max-width:62%}.volume-control input{width:100%;min-height:44px}.technology-list details{margin-bottom:10px}
}
@media(hover:none),(pointer:coarse){.button:hover,.poetry-word:hover{transform:none}.sound-point,.play-button{min-height:48px}.menu-links a{min-height:48px}}
@media(prefers-reduced-motion:reduce){.is-playing .vinyl{animation:none}.hero-actions>*{transition:none}}