/* จอคอมฯ ≥1024px — โหลดผ่าน <link media="(min-width: 1024px)"> จึงไม่ต้องห่อ @media
   ที่มาของดีไซน์: review/desktop_mock (home / brief / history) · แถบเมนูซ้าย + ตรากองบิน 2 + หัวเรื่อง Kanit
   จอแคบ (มือถือ) ใช้ styles.css อย่างเดียว ไม่โดนไฟล์นี้ */

/* ── Kanit (SIL OFL, fonts/OFL-Kanit.txt) ─────────────────── */
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/kanit-500-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/kanit-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/kanit-600-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/kanit-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/kanit-700-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/kanit-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Tokens: primitive (HSL triplet) → semantic ───────────── */
:root {
  --head-h: 0px; --side-w: 256px;
  --f-k: 'Kanit', var(--f-d);
  --d-navy-1000: 222 52% 5%; --d-navy-950: 222 49% 8%; --d-navy-900: 220 45% 11%; --d-navy-850: 220 42% 13%; --d-navy-800: 219 40% 16%; --d-navy-700: 218 36% 22%;
  --d-slate-50: 216 40% 96%; --d-slate-300: 218 29% 79%; --d-slate-500: 219 18% 63%; --d-slate-700: 219 15% 44%;
  --d-sky-200: 200 100% 84%; --d-sky-400: 201 100% 71%; --d-sky-600: 206 68% 51%; --d-sky-900: 208 70% 20%;
  --d-gold-200: 41 100% 82%; --d-gold-400: 40 84% 69%; --d-gold-600: 37 58% 51%; --d-gold-950: 40 100% 5%;
  --d-red-400: 354 100% 74%; --d-orange-400: 28 88% 65%; --d-green-400: 151 57% 60%; --d-violet-400: 264 100% 77%;
  --d-flag: linear-gradient(90deg, hsl(355 74% 53%) 0 16.6%, hsl(220 33% 97%) 0 33.3%, hsl(231 51% 36%) 0 66.6%, hsl(220 33% 97%) 0 83.3%, hsl(355 74% 53%) 0);
  --d-ease: cubic-bezier(.16, 1, .3, 1);

  --d-card-bg: linear-gradient(180deg, hsl(var(--d-navy-850)), hsl(var(--d-navy-900)));
  --d-card-solid: hsl(var(--d-navy-850));
  --d-card-sh: 0 1px 0 hsl(var(--d-slate-50) / .04) inset, 0 10px 30px -18px hsl(var(--d-navy-1000) / .9);
  --d-card-sh-h: 0 1px 0 hsl(var(--d-slate-50) / .06) inset, 0 22px 44px -20px hsl(var(--d-navy-1000)), 0 0 0 1px hsl(var(--d-sky-400) / .18);
  --d-band-bg: radial-gradient(60% 120% at 92% -10%, hsl(var(--d-sky-600) / .38), transparent 60%),
               radial-gradient(40% 90% at 0% 120%, hsl(var(--d-gold-400) / .13), transparent 70%),
               linear-gradient(135deg, hsl(var(--d-navy-800)), hsl(var(--d-navy-900)) 55%, hsl(var(--d-navy-950)));
  --d-grid: hsl(var(--d-slate-300) / .05);
  --d-sunk: hsl(var(--d-navy-950) / .55);
  --d-track: hsl(var(--d-slate-300) / .06);
  --d-sel-bg: linear-gradient(160deg, hsl(var(--d-slate-50)), hsl(var(--d-sky-200)) 160%);
  --d-sel-fg: hsl(var(--d-navy-950));
  --d-pri-bg: linear-gradient(180deg, hsl(var(--d-gold-200)), hsl(var(--d-gold-400)) 55%, hsl(var(--d-gold-600)) 140%);
  --d-pri-sh: 0 8px 22px -10px hsl(var(--d-gold-400) / .7), inset 0 1px 0 hsl(0 0% 100% / .45);
  --d-on-pri: hsl(var(--d-gold-950));
  --d-tile-bg: linear-gradient(180deg, hsl(var(--d-navy-850) / .9), hsl(var(--d-navy-950) / .9));
  --d-tile-on: radial-gradient(90% 70% at 50% 0%, hsl(var(--d-gold-400) / .22), transparent 70%), linear-gradient(180deg, hsl(var(--d-navy-800)), hsl(var(--d-navy-950)));
  --d-glow: var(--d-gold-400);
  --d-accent-t: var(--d-sky-400);
  --d-gt: linear-gradient(90deg, hsl(var(--d-slate-50)), hsl(var(--d-sky-200)));
  --d-hero-img: url(img/hero-night.webp);
  --d-hero-halo: hsl(var(--d-navy-1000) / .9);
  --d-hero-ov: linear-gradient(90deg, hsl(var(--d-navy-1000) / .97) 0%, hsl(var(--d-navy-1000) / .8) 42%, hsl(var(--d-navy-1000) / .1) 100%),
               linear-gradient(0deg, hsl(var(--d-navy-1000) / .7), transparent 50%);
}
:root[data-theme="day"] {
  --d-card-bg: linear-gradient(180deg, #fdfaf3, #f6f0e3);
  --d-card-solid: #fbf7ee;
  --d-card-sh: 0 1px 0 #fff inset, 0 10px 26px -18px rgb(60 45 20 / .35);
  --d-card-sh-h: 0 1px 0 #fff inset, 0 22px 40px -22px rgb(60 45 20 / .45), 0 0 0 1px rgb(13 100 166 / .22);
  --d-band-bg: radial-gradient(60% 120% at 92% -10%, rgb(13 100 166 / .16), transparent 60%),
               radial-gradient(40% 90% at 0% 120%, rgb(186 130 20 / .16), transparent 70%),
               linear-gradient(135deg, #fbf7ee, #f1e9d8 55%, #ebe2cf);
  --d-grid: rgb(40 35 25 / .05);
  --d-sunk: rgb(255 255 255 / .55);
  --d-track: rgb(40 35 25 / .08);
  --d-sel-bg: linear-gradient(160deg, hsl(var(--d-navy-700)), hsl(var(--d-navy-950)));
  --d-sel-fg: #fff;
  --d-pri-sh: 0 8px 22px -12px rgb(150 100 10 / .7), inset 0 1px 0 hsl(0 0% 100% / .55);
  --d-tile-bg: linear-gradient(180deg, #fdfaf3, #f3ecdd);
  --d-tile-on: radial-gradient(90% 70% at 50% 0%, rgb(214 160 40 / .28), transparent 70%), linear-gradient(180deg, #fffaf0, #f5ecd8);
  --d-glow: 37 70% 45%;
  --d-accent-t: 206 85% 35%;
  --d-gt: linear-gradient(90deg, hsl(var(--d-navy-800)), hsl(206 85% 35%));
  --d-hero-img: url(img/hero-day.webp);
  --d-hero-halo: rgb(244 239 228 / .95);
  --d-hero-ov: linear-gradient(90deg, rgb(244 239 228 / .97) 0%, rgb(244 239 228 / .88) 45%, rgb(244 239 228 / .45) 66%, rgb(244 239 228 / .08) 100%),
               linear-gradient(0deg, rgb(244 239 228 / .7), transparent 50%);
}
:root:not([data-theme="day"]) body { background: radial-gradient(900px 500px at 70% -200px, hsl(var(--d-sky-900) / .55), transparent 70%) fixed, var(--bg); }

/* ── แถบเมนูซ้าย (ใช้ .annun + .tabbar เดิม) — มืดทั้งสองธีม ─── */
.annun {
  --text: #eef2f8; --text2: #b9c4d8; --muted: #8d9ab3; --sky: #6cc9ff; --gold: #f2c66d;
  --ok: #5fd39a; --warn: #f4a259; --bad: #ff7a85; --bg: #0b1120; --surface: #121b2e; --surface2: #172238;
  --line: rgb(160 185 230 / .14); --line2: rgb(160 185 230 / .3);
  position: fixed; inset: 0 auto 0 0; width: var(--side-w); height: 100vh;
  flex-direction: column; align-items: stretch; gap: 2px; padding: 0 14px 18px;
  color: var(--text);
  background: linear-gradient(180deg, hsl(var(--d-navy-850)) 0%, hsl(var(--d-navy-950)) 60%);
  border-right: 1px solid var(--line); border-bottom: 0; overflow-y: auto; scrollbar-width: thin;
}
.annun::before { content: ''; display: block; flex: none; height: 4px; margin: 0 -14px; background: var(--d-flag); }
.annun .logo { display: none; }
body.sub .annun .brand { display: flex; }
.annun .m-sub, body.sub .annun .m-sub { display: none; }
body.sub .annun .tabbar { display: flex; }
.annun .brand { flex: none; gap: 12px; padding: 18px 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); min-height: 0; color: var(--text); }
.annun .emblem { display: block; flex: none; width: 54px; height: 57px; filter: drop-shadow(0 6px 12px hsl(var(--d-navy-1000) / .8)); animation: d-pop .7s var(--d-ease) both; }
.annun .b-t { display: block; min-width: 0; }
.annun .brand b { display: block; font: 600 19px/1.15 var(--f-k); }
.annun .brand b em { color: var(--gold); }
.annun .brand small { display: block; margin-top: 3px; font: 400 12.5px/1.3 var(--f-k); color: var(--muted); }

.annun .tabbar { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
.annun .tabbar span.d-only { display: inline; }
.annun .tabbar span.d-navsec { display: block; padding: 16px 12px 6px; font: 500 11.5px/1 var(--f-k); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.annun .tabbar .m-only, .annun .tabbar .m-ic { display: none; }
.annun .tabbar a {
  display: flex; flex: none; max-width: none; flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 46px; gap: 12px; padding: 7px 10px; border-radius: 11px;
  font: 500 14.5px/1.3 var(--f-b); color: var(--text2); transition: background var(--t-med), color var(--t-med);
}
.annun .tabbar a:hover { background: hsl(var(--d-slate-300) / .05); color: var(--text); }
.annun .tabbar .pill {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: hsl(var(--d-slate-300) / .06); border: 1px solid var(--line); color: var(--text2);
  transition: transform var(--t-slow) var(--d-ease), background var(--t-med), box-shadow var(--t-med);
}
.annun .tabbar svg.d-ic { display: block; width: 19px; height: 19px; }
.annun .tabbar a:hover .pill { transform: translateY(-1px) scale(1.06); }
:root .annun .tabbar a[aria-current="page"] { background: linear-gradient(90deg, hsl(var(--d-sky-400) / .16), hsl(var(--d-sky-400) / .02)); color: var(--text); box-shadow: none; font-weight: 600; }
:root .annun .tabbar a[aria-current="page"] .pill { background: var(--d-pri-bg); border-color: transparent; color: var(--d-on-pri); box-shadow: var(--d-pri-sh); }
/* หน้าที่มีลิงก์เฉพาะจอคอมฯ (ประวัติเหตุ ทฤษฎี) ไม่ต้องเน้น "หน้าหลัก" ซ้ำ */
:root .annun .tabbar:has(a.d-only[aria-current]) a:not(.d-only)[aria-current] { background: none; color: var(--text2); font-weight: 500; }
:root .annun .tabbar:has(a.d-only[aria-current]) a:not(.d-only)[aria-current] .pill { background: hsl(var(--d-slate-300) / .06); border-color: var(--line); color: var(--text2); box-shadow: none; }
.annun .tabbar b.d-badge { display: inline-block; margin-left: auto; padding: 1px 7px; border-radius: var(--r-pill); font: 500 11.5px/1.5 var(--f-m); color: var(--muted); background: hsl(var(--d-slate-300) / .07); font-variant-numeric: tabular-nums; }
.annun .tabbar b.d-badge:empty { display: none; }

.annun .net { flex: none; flex-wrap: wrap; margin: auto 0 0; padding: 14px 10px 0; border-top: 1px solid var(--line); font-size: 13px; white-space: normal; }
.annun .net .lamp { height: auto; padding: 0; border: 0; }
.annun .net .ver { width: 100%; font-size: 12px; }
.annun .d-foot { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px 0; font-size: 13px; color: var(--muted); }
.d-toggle { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; }
.d-toggle button { padding: 4px 10px; border: 0; background: none; font: 500 12px/1.4 var(--f-b); color: var(--muted); cursor: pointer; }
.d-toggle button:hover { color: var(--text); }
.d-tools { display: inline-flex; align-items: center; gap: 6px; }
.d-fs { display: inline-grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 1px solid var(--line2); border-radius: var(--r); background: none; color: var(--muted); cursor: pointer; }
.d-fs .ic { width: 16px; height: 16px; }
.d-fs:hover { color: var(--text); }
.d-fs[aria-pressed="true"] { background: hsl(var(--d-navy-700)); color: var(--text); }
.d-toggle button[aria-pressed="true"] { background: hsl(var(--d-navy-700)); color: var(--text); }

/* ── พื้นที่เนื้อหา ───────────────────────────────────────── */
main { margin-left: max(var(--side-w), calc(var(--side-w) + (100% - var(--side-w) - 1340px) / 2)); margin-right: 0; max-width: 1340px; padding: 28px 36px 64px; }
body.briefing main, body.lesson main { margin-left: 0; }
body.ov main { margin-left: var(--side-w); max-width: none; }
/* แถบนโยบาย K·S·D อยู่บนสุดของคอลัมน์เนื้อหา */
.policy { margin-left: var(--side-w); min-height: 42px; padding: 8px 36px; }
.policy small, .policy b, .policy .pol-th { font-family: var(--f-k); }
.policy b { font-size: 13.5px; letter-spacing: .22em; }
.policy small { font-size: 12.5px; }

/* หน้าหลัก: การ์ด Wing 2 Airmanship */
.dh-air { display: grid; grid-template-columns: minmax(260px, .8fr) 1.6fr; gap: 24px; align-items: center; margin-top: 20px; padding: 24px; color: var(--text); text-decoration: none; position: relative; }
.dh-air h2 { margin: 12px 0 6px; font: 700 30px/1.15 var(--f-k); letter-spacing: .03em; }
.dh-air h2 em { font-style: normal; color: var(--gold); }
.dh-air .sub { color: var(--text2); line-height: 1.55; }
.dh-air .motto { margin-top: 14px; font: 600 15px/1.3 var(--f-k); letter-spacing: .12em; color: var(--gold); }
.dh-air-p { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 28px; }
.dh-air-p li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-l); }
.dh-air-p li .d-itile { grid-row: 1 / 3; }
.dh-air-p b { font: 600 13.5px/1.2 var(--f-k); letter-spacing: .06em; }
.dh-air-p span:not(.d-itile) { font-size: 13px; line-height: 1.35; color: var(--text2); }
.dh-air .more { position: absolute; top: 20px; right: 24px; width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--f-k); color: var(--sky); }
.dh-air .more .ic { width: 16px; height: 16px; transition: transform var(--t-slow) var(--d-ease); }
.dh-air:hover .more .ic { transform: translateX(4px); }
.air-hero h1, .air-h, .air-ksd h2, .air-motto .big, .air-card > b, .air-card div > b { font-family: var(--f-k); }

/* ── Wing 2 Airmanship (#/airmanship) จอคอมฯ · DECISIONS หัวข้อ Airmanship ข้อ 9 ── */
main > .view.air:not(#_) { max-width: 1240px; }
/* ฮีโร่: ข้อความชิดซ้ายบน scrim แนวนอน ฮ. สองลำอยู่ด้านขวาของภาพ */
.air-hero { display: flex; align-items: center; min-height: 420px; padding: 48px 56px; text-align: left; border-color: transparent; box-shadow: var(--d-card-sh);
  background: var(--air-scrim-x), var(--air-img) 50% 55% / cover no-repeat, var(--bg2); }
.air-hero-in { max-width: 580px; }
.air-emb { margin: 0 0 16px; width: 54px; }
.air-eye { font-size: var(--fs-md); }
.air-hero h1 { font-size: 60px; }
.air-sub { font-size: 24px; }
.air-vals { justify-content: flex-start; margin-top: 22px; }
.air-vals li { padding: 6px 14px; font-size: var(--fs-md); }

.air-ksd { margin-top: 24px; padding: 24px; border-color: transparent; background: var(--d-card-bg); box-shadow: var(--d-card-sh); }
.air-ksd h2 { font-size: var(--fs-ui); }
.air-ksd ul { gap: 16px; margin-top: 16px; }
.air-ksd li { padding: 20px; }
.air-ksd li::after { top: -22px; font-size: 136px; }
.air-ksd li > b { font-size: var(--fs-lg); }

.air-sec { margin-top: 52px; }
.air-h { gap: 18px; margin-bottom: 18px; font-size: 24px; }
.air-h .air-n b { font-size: var(--fs-kpi-xl); }
.air-n { padding-right: 18px; }
.air-n small { font-size: var(--fs-md); }
.air-grid { gap: 14px; }
.air-card { padding: 18px; border-color: transparent; background: var(--d-card-bg); box-shadow: var(--d-card-sh); }
.air-card.wide { padding: 22px 24px; }

/* เสาหลัก 6 ข้อ: ซ้าย 3 ขวา 3 ต่อเส้นเข้าวงกลางรูปทางแยก (ตกแต่งเท่านั้น ไม่มีข้อความใหม่) */
.air-grid.g6 { --hub: 176px; grid-template-columns: minmax(0, 1fr) var(--hub) minmax(0, 1fr); grid-template-rows: repeat(3, 1fr); column-gap: 0; row-gap: 14px; }
.air-grid.g6 > .air-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; }
.air-grid.g6 > .air-card .air-ic { grid-row: 1 / 3; }
.air-grid.g6 > .air-card > b, .air-grid.g6 > .air-card > span:not(.air-ic) { grid-column: 2; }
.air-grid.g6 > .air-card .air-go { grid-column: 3; grid-row: 1 / 3; margin: 0; }
.air-grid.g6 > :nth-child(-n+3) { grid-column: 1; }
.air-grid.g6 > :is(:nth-child(4), :nth-child(5), :nth-child(6)) { grid-column: 3; }
.air-grid.g6 > :is(:nth-child(1), :nth-child(4)) { grid-row: 1; }
.air-grid.g6 > :is(:nth-child(2), :nth-child(5)) { grid-row: 2; }
.air-grid.g6 > :is(:nth-child(3), :nth-child(6)) { grid-row: 3; }
.air-grid.g6 > .air-card::after { content: ''; position: absolute; top: calc(50% - 1px); width: calc(var(--hub) / 2); height: 2px; background: color-mix(in srgb, var(--gold) 40%, transparent); pointer-events: none; }
.air-grid.g6 > :nth-child(-n+3)::after { left: 100%; }
.air-grid.g6 > :nth-child(n+4)::after { right: 100%; }
.air-hub { position: relative; display: grid; place-items: center; grid-column: 2; grid-row: 1 / 4; }
.air-hub::before { content: ''; position: absolute; left: calc(50% - 1px); width: 2px; top: calc(100% / 6 - 14px / 3); bottom: calc(100% / 6 - 14px / 3); background: color-mix(in srgb, var(--gold) 40%, transparent); }
.air-hub span { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); background: var(--d-card-solid);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--gold) 10%, transparent), 0 0 32px hsl(var(--d-glow) / .35); }
.air-hub .ic { width: 40px; height: 40px; }

/* นำไปใช้: เส้นทางบิน 5 จุดแนวนอน · เส้นเข้าขั้น 5 เป็นเส้นประสีเตือน */
/* ขั้น 5 กว้าง 1.5 เท่า → เส้นจากขั้น 4 ยาว 125% − 52px (ครึ่งขั้น 4 + ช่องไฟ + ครึ่งขั้น 5 − ขอบวงกลมสองฝั่ง) */
.air-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr); column-gap: 24px; padding: 32px 28px 28px; border-radius: var(--r-xl); background: var(--d-card-bg); box-shadow: var(--d-card-sh); }
.air-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; text-align: center; }
.air-steps .air-ic { width: 60px; height: 60px; }
.air-steps .air-ic .ic { width: 26px; height: 26px; }
.air-steps .n { padding: 0; font-size: var(--fs-md); }
.air-steps li:not(:last-child)::before { display: none; }
.air-steps li:not(:last-child)::after { content: ''; position: absolute; top: 29px; left: calc(50% + 38px); width: calc(100% - 52px); height: 2px; background: color-mix(in srgb, var(--gold) 40%, transparent); }
.air-steps li:nth-last-child(2)::after { width: calc(125% - 52px); height: 0; border-top: 2px dashed var(--warn); background: none; }
.air-steps li.hot .air-ic { box-shadow: 0 0 0 8px color-mix(in srgb, var(--warn) 14%, transparent); }
.air-steps .t { text-wrap: balance; }
.air-steps li.hot .t { margin-top: 0; }

.air-motto { margin-top: 52px; padding: 48px 32px 28px; border-color: transparent; box-shadow: var(--d-card-sh); }
.air-motto .big { margin: 20px 0 22px; font-size: clamp(30px, 3vw, 44px); }
/* จอคอมฯ แคบ (1024–1279): วงกลางเล็กลง ลิงก์ของเสาหลักลงไปอยู่ใต้ข้อความ */
@media (max-width: 1279px) {
  .air-grid.g6 { --hub: 120px; }
  .air-hub span { width: 76px; height: 76px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--gold) 10%, transparent), 0 0 24px hsl(var(--d-glow) / .35); }
  .air-hub .ic { width: 32px; height: 32px; }
  .air-grid.g6 > .air-card { grid-template-columns: auto minmax(0, 1fr); }
  .air-grid.g6 > .air-card .air-ic { grid-row: 1 / 4; }
  .air-grid.g6 > .air-card .air-go { grid-column: 2; grid-row: 3; justify-self: start; margin-block: -8px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .air-card:hover, .air-ksd li:hover { box-shadow: var(--d-card-sh-h); }
}
/* Airmanship จอคอมฯ · ชั้นความสวยงาม (DECISIONS หัวข้อ Airmanship ข้อ 10) */
.air-hero::after, .air-motto::after { inset: 18px; --l: 30px; }
.air-steps { background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px, var(--d-card-bg); }
.air-steps li:nth-last-child(2)::after { height: 2px; border-top: 0; background: repeating-linear-gradient(90deg, var(--warn) 0 6px, transparent 6px 12px); }
.air-steps li.hot .air-ic { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warn) 30%, var(--d-card-solid)), color-mix(in srgb, var(--warn) 10%, var(--d-card-solid))); }
/* วงกลางเสาหลัก: วงประหมุนช้า + ลำแสงเรดาร์กวาดในวง */
.air-hub span::before { content: ''; position: absolute; inset: -16px; border: 1.5px dashed color-mix(in srgb, var(--gold) 50%, transparent); border-radius: 50%; }
.air-hub span::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 42%, transparent), transparent 28%); }
.air-hub .ic { position: relative; z-index: 1; }
@media (max-width: 1279px) { .air-hub span::before { inset: -12px; } .air-ksd li::after { top: -10px; font-size: 96px; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .air-card { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--gold) calc(var(--spot) * 10%), transparent), transparent 70%), var(--d-card-bg); }
}
@media (prefers-reduced-motion: no-preference) {
  .air-hub span { animation: air-halo 3.4s ease-in-out infinite; }
  .air-hub span::before { animation: air-spin 50s linear infinite; }
  .air-hub span::after { animation: air-spin 5s linear infinite; }
  /* ไฟวิ่งจากการ์ดเข้าหาวงกลาง และตามแกนตั้ง */
  .air-grid.g6 > .air-card::after { background: linear-gradient(90deg, transparent, var(--gold-hi), transparent) -70% 0 / 40% 100% no-repeat, color-mix(in srgb, var(--gold) 40%, transparent);
    animation: air-flow 3s linear infinite; animation-delay: calc(var(--i) * .5s); }
  .air-grid.g6 > :nth-child(n+4)::after { animation-direction: reverse; }
  .air-hub::before { background: linear-gradient(180deg, transparent, var(--gold-hi), transparent) 0 -70% / 100% 26% no-repeat, color-mix(in srgb, var(--gold) 40%, transparent); animation: air-flow-y 3.6s linear infinite; }
  /* เส้นทางบิน: ลากเส้นเมื่อเลื่อนถึง แล้วมีไฟวิ่งทีละช่วง · ช่วงเข้าขั้น 5 เป็นเส้นประเดิน */
  .air-steps li:not(:last-child)::after { background: linear-gradient(90deg, transparent, var(--gold-hi), transparent) -70% 0 / 35% 100% no-repeat, color-mix(in srgb, var(--gold) 40%, transparent);
    animation: air-flow 4s ease-in-out infinite; animation-delay: calc(var(--i) * .6s); }
  .air-steps li:nth-last-child(2)::after { background: repeating-linear-gradient(90deg, var(--warn) 0 6px, transparent 6px 12px); animation: air-march .9s linear infinite; }
  .air.rv .air-sec.in .air-steps li:not(:last-child)::after { transform-origin: left; animation: air-draw .7s var(--ease) backwards, air-flow 4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 160ms + .3s), calc(var(--i) * .6s + 1.4s); }
  .air.rv .air-sec.in .air-steps li:nth-last-child(2)::after { animation: air-draw .7s var(--ease) backwards, air-march .9s linear infinite; animation-delay: .78s, 0s; }
  .air-motto { background-attachment: scroll, fixed; }
}
@keyframes air-halo {
  0%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--gold) 10%, transparent), 0 0 32px hsl(var(--d-glow) / .35); }
  50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--gold) 5%, transparent), 0 0 56px hsl(var(--d-glow) / .55); }
}
.side, .hd-side { top: 24px; }
.side { max-height: calc(100vh - 48px); }

/* ตัวอักษรหัวเรื่อง */
.page-h { font: 600 38px/1.3 var(--f-k); }
.page-h em { color: var(--gold); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1.4 var(--f-k); color: var(--sky); }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; flex: none; }
.step-h h2, .sec-h, .side-h { font-family: var(--f-k); font-weight: 500; }
.d-grad { background: var(--d-gt); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ส่วนประกอบร่วม */
.d-card { background: var(--d-card-bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--d-card-sh); }
.d-lift { transition: transform .3s var(--d-ease), box-shadow .3s, border-color .3s; }
.d-lift:hover { transform: translateY(-3px); box-shadow: var(--d-card-sh-h); border-color: var(--line2); }
.d-itile { --tone: var(--d-accent-t); display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: hsl(var(--tone));
  background: linear-gradient(145deg, hsl(var(--tone) / .26), hsl(var(--tone) / .06)); border: 1px solid hsl(var(--tone) / .32); }
.d-itile .ic { width: 19px; height: 19px; }
.d-itile.t-gold { --tone: var(--d-glow); }
.d-itile.t-green { --tone: var(--d-green-400); }
.d-itile.t-violet { --tone: var(--d-violet-400); }
:root[data-theme="day"] .d-itile.t-green { --tone: 153 67% 27%; }
:root[data-theme="day"] .d-itile.t-violet { --tone: 264 50% 45%; }
.d-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: var(--r-l);
  border: 1px solid var(--line2); background: hsl(var(--d-slate-300) / .05); color: var(--text); font: 500 15.5px/1 var(--f-k); text-decoration: none;
  transition: transform var(--t-slow) var(--d-ease), box-shadow var(--t-slow), background var(--t-med); }
.d-btn:hover { transform: translateY(-2px); background: hsl(var(--d-slate-300) / .1); }
.d-btn .ic { width: 18px; height: 18px; }
.d-btn.pri { background: var(--d-pri-bg); border-color: transparent; color: var(--d-on-pri); font-weight: 600; box-shadow: var(--d-pri-sh); }
.d-btn.pri:hover { box-shadow: 0 14px 30px -12px hsl(var(--d-gold-400) / .85), inset 0 1px 0 hsl(0 0% 100% / .45); }
.d-btn.pri::after, .btn-primary:not(.pending):not(:disabled)::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .45), transparent);
  transform: translateX(-120%) skewX(-20deg); animation: d-sweep 3.6s 1.4s ease-in-out infinite;
}

/* ── หน้าหลัก ─────────────────────────────────────────────── */
main > .view.dh:not(#_) { max-width: none; }
.dh-row1 { display: grid; grid-template-columns: 1.75fr 1fr; gap: 20px; }
.dh-hero { position: relative; overflow: hidden; min-height: 340px; padding: 40px 44px; display: flex; flex-direction: column; justify-content: flex-end; border-color: var(--line2); }
.dh-hero .bg { position: absolute; inset: 0; background: var(--d-hero-img) center / cover; animation: d-zoom 2.4s var(--d-ease) both; }
/* วิดีโอปก (app.js heroVideo) วางทับภาพนิ่งใน .bg แล้วค่อยจางเข้าเมื่อเริ่มเล่น — ไม่มีเมื่อลดการเคลื่อนไหว/ประหยัดข้อมูล */
.dh-hero .bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--d-ease); }
.dh-hero .bg video.on { opacity: 1; }
.dh-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--d-hero-ov); }
.dh-hero::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: var(--d-flag); opacity: .9; }
.dh-hero > :not(.bg) { position: relative; z-index: 2; }
.dh-hero h1 { font: 700 50px/1.2 var(--f-k); margin: 12px 0 10px; letter-spacing: -.01em; }
.dh-hero .sub { max-width: 460px; font-size: 16.5px; line-height: 1.6; color: var(--text2); }
/* ลำ ฮ. ในภาพ/วิดีโออยู่ครึ่งขวา คำบรรยายยาวไปทับลำตัว — เงาสีพื้นรอบตัวอักษรช่วยให้อ่านออก */
.dh-hero .sub, .dh-hero .eyebrow { text-shadow: 0 0 3px var(--d-hero-halo), 0 0 14px var(--d-hero-halo); }
.dh-hero .acts { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.dh-tip { padding: 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; color: var(--text); text-decoration: none;
  background: radial-gradient(80% 60% at 100% 0%, hsl(var(--d-glow) / .14), transparent 70%), var(--d-card-bg); }
.dh-tip .eyebrow { color: var(--gold); }
.dh-tip h2 { font: 600 26px/1.3 var(--f-k); margin: 14px 0 8px; }
.dh-tip p { color: var(--text2); margin: 0 0 16px; line-height: 1.6; }
.dh-tip .go { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.dh-tip .go b { display: inline-flex; gap: 8px; align-items: center; color: var(--sky); font: 500 15px var(--f-k); }
.dh-tip .go .ic { width: 16px; height: 16px; transition: transform var(--t-slow) var(--d-ease); }
.dh-tip:hover .go .ic { transform: translateX(4px); }
.dh-prog { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--d-track); overflow: hidden; width: 140px; }
.dh-prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, hsl(var(--d-green-400) / .6), var(--ok)); }

.dh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.dh-kpi { --tone: var(--d-accent-t); position: relative; overflow: hidden; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 12px; color: var(--text); text-decoration: none; }
.dh-kpi::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: hsl(var(--tone)); opacity: .85; }
.dh-kpi.t-gold { --tone: var(--d-glow); }
.dh-kpi.t-green { --tone: var(--d-green-400); }
.dh-kpi.t-violet { --tone: var(--d-violet-400); }
:root[data-theme="day"] .dh-kpi.t-green { --tone: 153 67% 27%; }
:root[data-theme="day"] .dh-kpi.t-violet { --tone: 264 50% 45%; }
.dh-kpi .lab { grid-column: 1 / -1; color: var(--text2); font-size: var(--fs-md); line-height: var(--kpi-lab-lh); display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dh-kpi .v { font: var(--kpi-w) var(--fs-kpi-l)/var(--kpi-lh) var(--f-k); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dh-kpi .d { grid-column: 1; color: var(--muted); font-size: var(--fs-xs); line-height: var(--kpi-lab-lh); }
.dh-kpi .spark { grid-row: 2 / 4; grid-column: 2; overflow: visible; }
.dh-kpi .spark rect { fill: hsl(var(--tone) / .45); }
.dh-kpi .spark rect:last-child { fill: hsl(var(--d-glow)); }

/* การ์ดสถานะติดล็อก (Locked KPI) */
.dh-kpi.is-unlock {
  cursor: pointer; border-style: dashed; border-color: hsl(var(--tone) / .4);
  background: linear-gradient(135deg, hsl(var(--tone) / .06), hsl(var(--d-card-bg-t)));
  transition: transform var(--t-med) var(--d-ease), border-color var(--t-med), box-shadow var(--t-med);
  text-align: left; font: inherit; color: inherit;
}
.dh-kpi.is-unlock:hover {
  transform: translateY(-2px); border-color: hsl(var(--tone) / .85);
  box-shadow: 0 8px 22px -6px hsl(var(--tone) / .28);
}
.dh-lock-tag {
  font: 700 13.5px/1.2 var(--f-k); letter-spacing: .06em; color: hsl(var(--tone));
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px;
  background: hsl(var(--tone) / .12); border: 1px solid hsl(var(--tone) / .28);
}
.dh-lock-tag .ic { width: 14px; height: 14px; }
.dh-lock-d { color: hsl(var(--tone)); opacity: .85; font-size: 11.5px; }
.dh-ghost-kpi-bar {
  grid-row: 2 / 4; grid-column: 2; width: 74px; height: 28px; border-radius: var(--r-s);
  background: repeating-linear-gradient(90deg, hsl(var(--tone) / .2) 0 6px, transparent 6px 12px);
  opacity: .6;
}

.dh-row3 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; margin-top: 20px; }
.dh-ch { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; }
.dh-ch h2 { font: 500 19px/1.35 var(--f-k); }
.dh-ch .more { width: auto; flex: none; margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--f-k); color: var(--sky); text-decoration: none; }
.dh-ch .more .ic { width: 15px; height: 15px; }
.dh-ch .more:hover { text-decoration: underline; }

/* ── 11 โมดูลทฤษฎีนิรภัย (Phase 1 Wow Upgrade) ──────────────── */
.dh-les { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 20px; }
.dh-le {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-l);
  border: 1px solid var(--line); background: var(--d-sunk); color: var(--text); text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform var(--t-slow) var(--d-ease), border-color var(--t-med), background var(--t-med), box-shadow var(--t-med);
}
.dh-le:hover {
  transform: translateY(-2px); border-color: hsl(var(--d-accent-t) / .4);
  background: hsl(var(--d-accent-t) / .08); box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .3);
}
.dh-le-icbox {
  display: grid; place-items: center; position: relative; flex: none;
  width: 36px; height: 36px; border-radius: 9px;
  background: hsl(var(--d-accent-t) / .12); border: 1px solid hsl(var(--d-accent-t) / .25); color: var(--sky);
}
.dh-le-icbox .dh-le-ic { display: grid; place-items: center; width: 20px; height: 20px; }
.dh-le-icbox .dh-le-ic .ic { width: 20px; height: 20px; }
.dh-le-icbox .dh-le-num {
  position: absolute; right: -4px; bottom: -4px; font: 700 9px/1 var(--f-m);
  padding: 1.5px 3.5px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.dh-le-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dh-le-title { display: block; font: 600 13.5px/1.3 var(--f-k); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-le-sub { color: var(--muted); font-size: 11px; }

/* โทนสีประจำโมดูล */
.dh-le.c-gold .dh-le-icbox { background: hsl(var(--d-glow) / .14); border-color: hsl(var(--d-glow) / .35); color: var(--gold); }
.dh-le.c-violet .dh-le-icbox { background: hsl(var(--d-violet-400) / .14); border-color: hsl(var(--d-violet-400) / .35); color: hsl(var(--d-violet-400)); }
.dh-le.c-teal .dh-le-icbox { background: hsl(175 75% 42% / .14); border-color: hsl(175 75% 42% / .35); color: #14b8a6; }
.dh-le.c-rose .dh-le-icbox { background: hsl(345 80% 55% / .14); border-color: hsl(345 80% 55% / .35); color: #f43f5e; }
.dh-le.c-blue .dh-le-icbox { background: hsl(var(--d-accent-t) / .14); border-color: hsl(var(--d-accent-t) / .35); color: var(--sky); }
.dh-le.c-green .dh-le-icbox { background: hsl(var(--d-green-400) / .14); border-color: hsl(var(--d-green-400) / .35); color: var(--ok); }
.dh-le.c-orange .dh-le-icbox { background: hsl(25 90% 55% / .14); border-color: hsl(25 90% 55% / .35); color: #fb923c; }
.dh-le.c-grey .dh-le-icbox { background: hsl(215 15% 55% / .14); border-color: hsl(215 15% 55% / .35); color: #94a3b8; }

.dh-le.done .dh-le-icbox { background: color-mix(in srgb, var(--ok) 16%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.dh-le.done .dh-le-num { color: var(--ok); background: color-mix(in srgb, var(--ok) 20%, transparent); }
.dh-le.done .dh-le-sub { color: var(--ok); }

.dh-le.next {
  border-color: hsl(var(--d-glow) / .55); background: linear-gradient(135deg, hsl(var(--d-glow) / .14), transparent 75%);
  box-shadow: 0 0 16px -3px hsl(var(--d-glow) / .25);
}
.dh-le.next .dh-le-icbox { background: var(--d-pri-bg); border-color: hsl(var(--d-glow) / .6); color: var(--d-on-pri); }
.dh-le.next .dh-le-num { color: var(--d-on-pri); background: var(--d-pri-bg); }
.dh-le.next .dh-le-sub { color: var(--gold); font-weight: 500; }

.dh-topics { padding: 12px 20px 20px; }
.dh-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.dh-bar > span:first-child { color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-bar .tk { height: 10px; border-radius: 0 5px 5px 0; background: var(--d-track); }
.dh-bar .tr { display: block; height: 100%; border-radius: 0 5px 5px 0; background: linear-gradient(90deg, hsl(var(--d-sky-600) / .55), var(--sky)); box-shadow: 0 0 12px -2px hsl(var(--d-accent-t) / .5); }
.dh-bar:first-child .tr { background: linear-gradient(90deg, hsl(var(--d-gold-600) / .7), var(--gold)); }
.dh-bar .num { text-align: right; font: 500 13px var(--f-m); color: var(--text); font-variant-numeric: tabular-nums; }
.dh-note { padding: 0 20px 18px; font-size: 12.5px; color: var(--muted); }
.dh-empty { padding: 18px 20px 22px; color: var(--muted); font-size: 14px; }

/* แฟ้มสถิติเฉพาะหน่วย บน.2 ที่ติดล็อก (Classified Dossier View) */
.dh-locked-dossier {
  position: relative; overflow: hidden; margin: 12px 20px 20px; padding: 22px 18px; border-radius: 14px;
  border: 1px dashed hsl(var(--d-glow) / .45); background: hsl(var(--d-sunk)); cursor: pointer;
  display: block; width: calc(100% - 40px); text-align: left; font: inherit; color: inherit;
  transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med);
}
.dh-locked-dossier:hover {
  border-color: hsl(var(--d-glow) / .85); box-shadow: 0 8px 24px -4px hsl(var(--d-glow) / .25);
  transform: translateY(-2px);
}
.dh-ghost-stream { display: flex; flex-direction: column; gap: 11px; filter: blur(2.5px); opacity: .32; user-select: none; pointer-events: none; }
.dh-ghost-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 24px; align-items: center; gap: 12px; }
.dh-ghost-label { font-size: 12.5px; color: var(--text2); white-space: nowrap; overflow: hidden; }
.dh-ghost-bar { height: 8px; border-radius: var(--r-s); background: linear-gradient(90deg, hsl(var(--d-gold-600) / .8), var(--gold)); }
.dh-ghost-num { font: 600 12px var(--f-m); color: var(--muted); text-align: right; letter-spacing: 2px; }
.dh-locked-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 18px;
  background: radial-gradient(circle at center, hsl(var(--d-card-bg-t) / .88) 40%, hsl(var(--d-card-bg-t) / .98) 100%);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.dh-locked-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r);
  background: hsl(var(--d-glow) / .14); border: 1px solid hsl(var(--d-glow) / .4); color: var(--gold);
  font-size: 13.5px; font-weight: 600; margin-bottom: 6px;
}
.dh-locked-badge .dh-badge-ic { display: inline-flex; width: 16px; height: 16px; }
.dh-locked-badge .dh-badge-ic .ic { width: 16px; height: 16px; }
.dh-locked-desc { font-size: 12.5px; color: var(--text2); max-width: 340px; margin: 0 0 12px; line-height: 1.45; }
.d-btn-sm { padding: 7px 16px; font-size: 13px; height: 36px; min-height: 36px; }

/* ── หน้าบรีฟ (เลือกเที่ยวบิน) ──────────────────────────────── */
.filter .step { padding: 20px 22px 22px; margin-bottom: 18px; background: var(--d-card-bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--d-card-sh); }
.filter .step-h { align-items: center; gap: 12px; margin-bottom: 16px; }
.filter .step-h .num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; font: 600 12.5px/1 var(--f-m);
  color: var(--sky); background: hsl(var(--d-accent-t) / .1); border: 1px solid hsl(var(--d-accent-t) / .3); }
.filter .step-h h2 { font: 500 18px/1.35 var(--f-k); }
.filter .tile, .filter .chip { transition: transform var(--t-slow) var(--d-ease), border-color var(--t-med), box-shadow var(--t-slow), background var(--t-med); }
.filter .tile { border-radius: 14px; background: var(--d-tile-bg); }
.filter .tile:hover { transform: translateY(-3px); border-color: hsl(var(--d-accent-t) / .45); }
.filter .tile .code { font: 600 17px/1.2 var(--f-k); }
.filter .tile[aria-pressed="true"] { background: var(--d-tile-on); color: var(--text); border-color: hsl(var(--d-glow) / .75);
  box-shadow: 0 0 0 1px hsl(var(--d-glow) / .35), 0 16px 30px -16px hsl(var(--d-glow) / .6); }
.filter .tile[aria-pressed="true"] .code { color: var(--gold); }
.filter .tile[aria-pressed="true"] .lab { color: var(--text2); }
.filter .tile .ck { top: 10px; right: 10px; transform: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--d-pri-bg); color: var(--d-on-pri); stroke-width: 3; }
.filter .tile[aria-pressed="true"] .ck { animation: d-pop .45s var(--d-ease) both; }

/* การ์ดเลือก ฮ. ในหน้าบรีฟจอคอมฯ */
.filter .tile.tile-ac {
  min-height: 84px; padding: 12px 14px 12px 16px; border-radius: 14px;
  grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
}
.filter .tile.tile-ac .ac-info .code { font: 600 18.5px/1.2 var(--f-k); }
.filter .tile.tile-ac .ac-info .lab {
  font-size: 12px; line-height: 1.3; color: var(--muted);
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.filter .tile.tile-ac .ac-photo {
  width: 92px; height: 54px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.filter .tile.tile-ac .ac-blueprint { width: 86px; height: 30px; }
.filter .tile.tile-ac[aria-pressed="true"] {
  background: var(--d-tile-on); border-color: var(--gold);
  box-shadow: 0 0 18px -2px hsl(var(--d-glow) / .45);
}
.filter .tile.tile-ac[aria-pressed="true"] .ac-photo {
  border-color: var(--gold); box-shadow: 0 0 14px rgba(234, 179, 8, 0.45);
}
.filter .tile.tile-ac[aria-pressed="true"] .ac-bp { stroke: var(--gold); fill: var(--gold); }
.filter .sqn-badge { background: hsl(var(--d-accent-t) / .08); border-color: hsl(var(--d-accent-t) / .22); }
.filter .sqn-badge b { color: var(--sky); }

.filter .chip { border-radius: var(--r-l); background: var(--d-tile-bg); }
.filter .chip:hover { border-color: hsl(var(--d-accent-t) / .45); }
.filter .chip[aria-pressed="true"] { background: var(--d-sel-bg); color: var(--d-sel-fg); border-color: transparent; font-weight: 600; box-shadow: 0 6px 16px -10px hsl(var(--d-accent-t) / .9); }
.filter .sel-all { border-radius: var(--r-l); margin-bottom: 14px; }
.filter .sel-all:hover { border-color: hsl(var(--d-accent-t) / .45); }
.filter .sel-all[aria-pressed="true"] .box { background: var(--d-sel-bg); border-color: transparent; color: var(--d-sel-fg); }
.side-sum { position: relative; overflow: hidden; padding: 22px; border-color: var(--line2); border-radius: 16px; box-shadow: var(--d-card-sh);
  background: radial-gradient(100% 50% at 100% 0%, hsl(var(--d-accent-t) / .14), transparent 70%), var(--d-card-bg); }
.side-sum::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--d-flag); }
.side-h { font: 500 17px/1.35 var(--f-k); }
.side-n b { font: 700 64px/1 var(--f-k); background: var(--d-gt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side .btn-primary { min-height: 52px; }
.btn-primary:not(.pending):not(:disabled) { position: relative; overflow: hidden; background: var(--d-pri-bg); border-color: transparent; color: var(--d-on-pri); font-family: var(--f-k); font-weight: 600; box-shadow: var(--d-pri-sh); transition: transform var(--t-slow) var(--d-ease), box-shadow var(--t-slow); }
.btn-primary:not(.pending):not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px hsl(var(--d-gold-400) / .85), inset 0 1px 0 hsl(0 0% 100% / .45); }

/* ── ประวัติเหตุ บน.2 ──────────────────────────────────────── */
.hv-top { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end;
  margin-bottom: 26px; padding: 26px 30px; border: 1px solid var(--line2); border-radius: 20px; background: var(--d-band-bg); }
.hv-top::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--d-grid) 1px, transparent 1px), linear-gradient(90deg, var(--d-grid) 1px, transparent 1px); background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.hv-top > * { position: relative; grid-column: 1; }
.hv-top .page-h { margin-bottom: 6px; }
.hv-top .lede { margin-bottom: 0; max-width: 680px; }
.hv-top > .h-tabs { grid-column: 2; grid-row: 1 / span 9; align-self: end; display: inline-flex; gap: 3px; margin: 0; padding: 3px; border: 1px solid var(--line2); border-radius: 11px; background: var(--d-sunk); }
.hv-top > .h-tabs a { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r); font: 500 14px var(--f-k); color: var(--text2); transition: background var(--t-med), color var(--t-med); }
.hv-top > .h-tabs a:hover { color: var(--text); background: hsl(var(--d-slate-300) / .06); }
.hv-top > .h-tabs a[aria-current="page"] { background: var(--d-sel-bg); color: var(--d-sel-fg); font-weight: 600; box-shadow: 0 6px 16px -10px hsl(var(--d-accent-t) / .9); }
/* ชิปย่อยกลางคืน/หมายเหตุ อยู่แถวใหม่ใต้ทั้งสองคอลัมน์ ชิดขวาใต้แถบมุมมอง ไม่ทับคำโปรย */
.hv-top > .h-ntsub, .hv-top > .h-imgnote { grid-column: 1 / -1; justify-self: end; margin: 12px 0 0; text-align: right; }
.hv-top > .h-ntsub + .h-imgnote { margin-top: 6px; max-width: 760px; }
.hv-top > .h-q { grid-column: 1 / -1; justify-self: stretch; margin: 16px 0 0; }
.hv-top > .h-q input { background: var(--d-sunk); }
.hv > .hv-s { padding: 20px 22px 22px; background: var(--d-card-bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--d-card-sh); }
/* จอคอมฯ แคบ: แถบมุมมองกว้าง ~650px จะบีบคำโปรยจนเหลือไม่กี่ตัวอักษร จึงย้ายลงแถวใหม่ชิดซ้าย */
@media (max-width: 1399px) {
  .hv-top > .h-tabs { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 18px; }
  .hv-top > .h-ntsub, .hv-top > .h-imgnote { justify-self: start; text-align: left; }
  /* การ์ด Airmanship: จอไม่กว้างพอให้ 6 เสาหลักอยู่ข้างข้อความ — เรียงเสาหลักไว้ใต้ข้อความ */
  .dh-air { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dh-air-p { padding-top: 0; }
}
.hv-grid > .hv-l, .hv-grid > .hv-r { padding: 20px 22px 22px; background: var(--d-card-bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--d-card-sh); }
.hv .sec-h { font: 500 19px/1.35 var(--f-k); }
.h-tl { border-radius: var(--r); transition: background var(--t-med), box-shadow var(--t-med); }
.h-tl:hover { background: hsl(var(--d-accent-t) / .05); }
.h-tl .seg-k + .seg-k { border-left-color: var(--d-card-solid); }
.h-tl[aria-pressed="true"] { background: linear-gradient(90deg, hsl(var(--d-glow) / .14), transparent 80%); box-shadow: inset 3px 0 0 var(--gold); }
.h-tl[aria-pressed="true"] .seg-k + .seg-k { border-left-color: var(--d-card-solid); }
.h-ystat button { border-radius: var(--r-l); background: var(--d-sunk); transition: transform var(--t-slow) var(--d-ease), border-color var(--t-med); }
.h-ystat button:hover { transform: translateY(-2px); border-color: hsl(var(--d-accent-t) / .45); }
.h-ystat b { font: 600 26px/1 var(--f-k); }
.h-ystat button[aria-pressed="true"] { background: var(--d-sel-bg); color: var(--d-sel-fg); border-color: transparent; }
.h-ystat button[aria-pressed="true"] span { color: inherit; }
.yh { background: var(--d-card-solid); font-family: var(--f-k); font-weight: 500; }
.ev li, .hv-r li { transition: background var(--t-med); }
.hv-r .ev:hover { background: hsl(var(--d-accent-t) / .05); }
.hm-wrap { border-radius: var(--r-l); background: var(--d-sunk); }
.hm td button { transition: transform var(--t-med) var(--d-ease), box-shadow var(--t-med); }
.hm td button:hover { position: relative; z-index: 1; transform: scale(1.12); box-shadow: 0 0 0 1px hsl(var(--d-accent-t) / .8), 0 6px 14px -6px hsl(var(--d-accent-t) / .8); }
.hm td button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold), 0 0 14px hsl(var(--d-glow) / .6); }
.hd-side { position: sticky; overflow: hidden; border-radius: 16px; background: var(--d-card-bg); box-shadow: var(--d-card-sh); }
.hd-side::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--d-flag); }

/* ── การเคลื่อนไหว ────────────────────────────────────────── */
.d-rise { animation: d-rise .7s var(--d-ease) both; animation-delay: calc(var(--i, 0) * 65ms); }
.d-grow { transform-origin: left; animation: d-growx .9s var(--d-ease) both; animation-delay: calc(300ms + var(--i, 0) * 60ms); }
.d-growy { transform-origin: bottom; transform-box: fill-box; animation: d-growy .8s var(--d-ease) both; animation-delay: calc(300ms + var(--i, 0) * 40ms); }
@keyframes d-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes d-growx { from { transform: scaleX(0); } }
@keyframes d-growy { from { transform: scaleY(0); } }
@keyframes d-pop { from { opacity: 0; transform: scale(.55); } }
@keyframes d-zoom { from { transform: scale(1.12); } }
@keyframes d-sweep { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }
@media (prefers-reduced-motion: reduce) {
  .d-rise, .d-grow, .d-growy, .annun .emblem, .dh-hero .bg, .filter .tile .ck { animation: none !important; }
  .d-btn.pri::after, .btn-primary::after { display: none; }
}
a.dh-bar { color: inherit; text-decoration: none; border-radius: 6px; }
a.dh-bar:hover > span:first-child { color: var(--text); }

/* ── ทฤษฎีนิรภัย: ยกระดับการนำเสนอระดับผู้บังคับบัญชา (Command Presentation) ── */
@media (min-width: 1200px) {
  .rt {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 36px;
  }
}
.th-command-hero {
  border-radius: 20px;
}
.th-hero-content {
  padding: 38px 42px 32px;
}
/* หัวทฤษฎีใช้ Kanit เหมือน .page-h/.dh-hero h1 ของจอคอมฯ (ตัวเล็กยังเป็น Plex) */
.th-hero-title {
  font-size: 34px;
  font-family: var(--f-k);
}
.th-hero-hl {
  font-size: 22px;
  font-family: var(--f-k);
  font-weight: 500;
}
.ls-title-grid {
  min-height: 480px;
}