/* ============================================================
   Skin: Aero Glass — v3.24.50, tích hợp theo « Hướng dẫn kỹ thuật
   Aero Glass cho Fable 5 » (Astral 6.0): vật liệu 4 lớp (nền tấm →
   tint xanh → sheen 30% → vệt chéo 112°), mép kính kép (viền sáng +
   rim), phân cấp độ đục thay vì blur máy móc, nền cực quang radial,
   topbar/nút đậm bảo vệ chữ trắng, fallback + reduced-transparency
   + forced-colors. Selector giữ chỗ đã thay bằng selector THẬT.
   ============================================================ */

/* Aero Glass reference for Fable 5. Integrate after auditing actual DOM/cascade. */
:root[data-skin="noi-khoi-3d"] {
  color-scheme: light;
  --c-bg: #319bd1; --c-surface: #e1f3fc;
  --c-text: #102f49; --c-muted: #294b62;
  --c-primary: #0067a8; --c-primary-ink: #fff;
  --c-accent: #f0bd3a; --c-accent-ink: #342500;
  --c-border: #63879e;
  --c-danger: #962a25; --c-danger-bg: #ffe6e0;
  --c-ok: #185733; --c-ok-bg: #def4e4;
  --c-chip-bg: rgba(242,252,255,.86);
  --c-code-bg: #e7f3fa; --c-input-bg: rgba(255,255,255,.92);
  --radius: 16px;
  --shadow: 0 6px 18px rgba(5,53,87,.18);
  /* Single knob for tint ALPHA, not for semantic/foreground colors. */
  --aero-tint: .20;
  --aero-tint-rgb: 32,156,218;
  --aero-pane-rgb: 223,245,255;
  --aero-pane-top: .58; --aero-pane-bottom: .44;
  --aero-sheen: .18; --aero-streak: .10;
  --aero-edge: rgba(255,255,255,.80);
  --aero-inner: rgba(255,255,255,.68);
  --aero-rim: rgba(9,66,108,.28);
  --aero-control-border: #557a93;
  --aero-focus: #073e72;
  --aero-blur: 10px;
  --aero-fallback: #d7edf8;
  --aero-sidebar: rgba(225,246,255,.76);
  --aero-bottomnav: rgba(233,248,255,.95);
  --aero-modal: rgba(232,247,255,.96);
  --aero-well: rgba(240,250,255,.84);
  --aero-row: rgba(235,249,255,.46);
  --aero-sky-1: #a4e4f7;
  --aero-sky-2: #4eb5df;
  --aero-sky-3: #2494cc;
  --aero-sky-4: #318abf;
  --aero-aurora: rgba(127,255,211,.34);
  --aero-sky-light: rgba(240,255,255,.58);
  --aero-bar-top: rgba(24,91,132,.94);
  --aero-bar-bottom: rgba(6,54,91,.96);
  --aero-btn-top: #086caa;
  --aero-btn-mid: #0063a5;
  --aero-btn-low: #004e89;
  --aero-btn-foot: #08649b;
}

:root[data-skin="noi-khoi-3d"][data-mode="dark"] {
  color-scheme: dark;
  --c-bg: #071e36; --c-surface: #142f49;
  --c-text: #edf8ff; --c-muted: #b9d4e6;
  --c-primary: #83d5ff; --c-primary-ink: #06263d;
  --c-accent: #f0bd3a; --c-accent-ink: #342500;
  --c-border: #7899b1;
  --c-danger: #ffc0b5; --c-danger-bg: #532526;
  --c-ok: #b0edc4; --c-ok-bg: #173d30;
  --c-chip-bg: rgba(18,51,76,.96);
  --c-code-bg: #0c2238; --c-input-bg: rgba(9,27,46,.96);
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,8,22,.40);
  --aero-tint: .16;
  --aero-tint-rgb: 16,90,146;
  --aero-pane-rgb: 9,30,52;
  --aero-pane-top: .86; --aero-pane-bottom: .90;
  --aero-sheen: .025; --aero-streak: .02;
  --aero-edge: rgba(167,226,255,.43);
  --aero-inner: rgba(220,247,255,.22);
  --aero-rim: rgba(0,8,24,.72);
  --aero-control-border: #7899b1;
  --aero-focus: #a6e5ff;
  --aero-fallback: #142f49;
  --aero-sidebar: rgba(10,32,54,.95);
  --aero-bottomnav: rgba(10,29,49,.98);
  --aero-modal: rgba(12,31,51,.98);
  --aero-well: rgba(7,23,40,.93);
  --aero-row: rgba(12,39,62,.65);
  --aero-sky-1: #194e71;
  --aero-sky-2: #103a5c;
  --aero-sky-3: #082a48;
  --aero-sky-4: #06182d;
  --aero-aurora: rgba(38,164,186,.17);
  --aero-sky-light: rgba(125,213,251,.09);
  --aero-bar-top: rgba(13,48,77,.96);
  --aero-bar-bottom: rgba(4,22,43,.98);
}

/* 1. Wallpaper: broad highlights + curved aurora, no external resources. */
:root[data-skin="noi-khoi-3d"] body {
  color: var(--c-text);
  background-color: var(--c-bg);
  background-image:
    radial-gradient(ellipse 90% 65% at 112% 8%,
      transparent 51%, var(--aero-sky-light) 51.6%, transparent 53.2%),
    radial-gradient(ellipse 105% 85% at -26% 26%,
      transparent 58%, var(--aero-aurora) 58.8%, transparent 61.5%),
    linear-gradient(118deg, transparent 18%, var(--aero-sky-light) 21%,
      transparent 25%, transparent 63%, var(--aero-aurora) 67%, transparent 73%),
    radial-gradient(ellipse at 15% 0%, var(--aero-sky-light), transparent 60%),
    linear-gradient(155deg, var(--aero-sky-1) 0%, var(--aero-sky-2) 35%,
      var(--aero-sky-3) 72%, var(--aero-sky-4) 100%);
  background-size: 100% 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 2. Panel paint: every reflection is behind text. No pseudo-element overlay. */
:root[data-skin="noi-khoi-3d"] :where(
  .card,.login-card,.game-card,.lesson-block,.phieu,.cert-inner,.modal,#toast
) {
  color: var(--c-text);
  background-color: transparent;
  background-image:
    linear-gradient(112deg, transparent 14%,
      rgba(255,255,255,var(--aero-streak)) 22%, transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,var(--aero-sheen)) 0%,
      rgba(255,255,255,0) 30%),
    linear-gradient(rgba(var(--aero-tint-rgb),var(--aero-tint)),
      rgba(var(--aero-tint-rgb),var(--aero-tint))),
    linear-gradient(180deg,
      rgba(var(--aero-pane-rgb),var(--aero-pane-top)),
      rgba(var(--aero-pane-rgb),var(--aero-pane-bottom)));
  border: 1px solid var(--aero-edge);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--aero-inner),
    inset 0 -1px 0 rgba(28,98,143,.13),
    0 0 0 1px var(--aero-rim), var(--shadow);
  -webkit-backdrop-filter: blur(var(--aero-blur)) saturate(115%);
  backdrop-filter: blur(var(--aero-blur)) saturate(115%);
}

/* Avoid recursive blur on cards inside panels; keep their own shallow paint. */
:root[data-skin="noi-khoi-3d"] :where(
  .card,.login-card,.game-card,.lesson-block,.phieu,.cert-inner,.modal
) :where(.card,.login-card,.game-card,.lesson-block,.phieu,.cert-inner) {
  background: var(--aero-row);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 var(--aero-inner), 0 1px 3px rgba(3,48,79,.09);
}

:root[data-skin="noi-khoi-3d"] :where(
  .lesson-block.serif,.apply-intro,blockquote
) {
  color: var(--c-text);
  background: var(--aero-well);
  border-color: var(--c-border);
  box-shadow: inset 0 1px 4px rgba(3,35,60,.14), 0 1px 0 var(--aero-inner);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* v3.24.90 — SỬA MẤT HÌNH Ở GIẢI TRÍ: .g-scene tách khỏi nhóm vùng đọc ở trên
   vì « background: » dạng GỘP xóa background-image — khững cảnh trò chơi mang
   ảnh/gradient ngay trên nền (bể cá bg-landscape/bg-portrait, con đường
   bg-ngang/bg-doc, các gradient g-aqua/g-box/g-eden/g-sky) nên bị trơ kính.
   :where cộng 0 độ ưu tiên nên (0,2,0) nạp-sau vẫn thắng .g-trail lẫn
   .g-scene.aq-real. Chỉ đặt màu NỀN LÓT (longhand) + viền, theo đúng
   mẫu an toàn của ngoc-pha-le — ảnh và gradient gốc giữ nguyên. */
:root[data-skin="noi-khoi-3d"] .g-scene {
  background-color: var(--aero-well);
  border-color: var(--c-border);
}

/* Raised overlays trade transparency for readability over arbitrary content. */
:root[data-skin="noi-khoi-3d"] :where(.modal,#toast,.sheet) {
  color: var(--c-text);
  background: var(--aero-modal);
  border: 1px solid var(--aero-edge);
  box-shadow: inset 0 1px 0 var(--aero-inner),
    0 0 0 1px var(--aero-rim), 0 12px 32px rgba(0,25,48,.30);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  backdrop-filter: blur(12px) saturate(110%);
}

/* 3. Bars: preserve base sticky/fixed positioning and all z-index values. */
:root[data-skin="noi-khoi-3d"] .topbar {
  color: #fff;
  background:
    linear-gradient(108deg, transparent 13%, rgba(255,255,255,.05) 22%,
      transparent 32%, transparent 76%, rgba(255,255,255,.035) 83%, transparent 90%),
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 42%),
    linear-gradient(180deg, var(--aero-bar-top), var(--aero-bar-bottom));
  border-color: var(--aero-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(190,239,255,.45), 0 4px 14px rgba(5,40,71,.25);
  text-shadow: 0 1px 1px rgba(0,22,48,.45);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
:root[data-skin="noi-khoi-3d"] .topbar :where(a,button) {
  color: #fff;
}
:root[data-skin="noi-khoi-3d"] :where(.sidebar,.bottomnav) {
  color: var(--c-text);
  background: var(--aero-sidebar);
  border-color: var(--aero-edge);
  box-shadow: inset -1px 0 0 var(--aero-inner), 3px 0 12px rgba(9,58,91,.12);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  backdrop-filter: blur(12px) saturate(110%);
}
:root[data-skin="noi-khoi-3d"] .bottomnav {
  background: var(--aero-bottomnav);
  box-shadow: inset 0 1px 0 var(--aero-inner), 0 -3px 12px rgba(9,58,91,.14);
}

/* 4. Controls: neutral glass first, then blue active/primary, then status. */
:root[data-skin="noi-khoi-3d"] :where(
  .btn,.btn-ghost,.qe-up,.qe-del,.pres-arr,.qz-opt,
  .seg button,.segbtn,.tabbar a,.pres-chip,.att-btn,.pair-card
) {
  color: var(--c-text);
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 55%),
    var(--aero-well);
  border: 1px solid var(--aero-control-border);
  box-shadow: inset 0 1px 0 var(--aero-inner), 0 2px 5px rgba(7,51,82,.12);
  text-shadow: none;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}
:root[data-skin="noi-khoi-3d"] :where(
  .btn-primary,.qz-opt.sel,.seg button.on,.segbtn.on,.tabbar a.on,
  .pres-chip.on,.att-btn.on,.chip.cur,.ex-chip.cur,.pair-card.open
) {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.035) 35%, transparent 49%),
    linear-gradient(180deg, var(--aero-btn-top) 0%, var(--aero-btn-mid) 43%,
      var(--aero-btn-low) 53%, var(--aero-btn-foot) 100%);
  border-color: #064d80;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(88,198,249,.50),
    0 0 0 1px rgba(225,250,255,.55), 0 3px 8px rgba(0,65,111,.28);
  text-shadow: 0 1px 1px rgba(0,25,57,.40);
}
/* Small specular cap at top edge; no broad white band beneath white letters. */
:root[data-skin="noi-khoi-3d"] :where(.chip,.ex-chip) {
  border: 1px solid var(--aero-edge);
  box-shadow: inset 0 1px 0 var(--aero-inner);
}
:root[data-skin="noi-khoi-3d"] :where(.chip,.ex-chip):not(.cur) {
  color: var(--c-text);
  background: var(--c-chip-bg);
}
:root[data-skin="noi-khoi-3d"] :where(.qz-opt.right,.pair-card.done) {
  color: var(--c-ok); background: var(--c-ok-bg);
  border-color: var(--c-ok); text-shadow: none;
  box-shadow: inset 0 0 0 1px var(--c-ok);
}
:root[data-skin="noi-khoi-3d"] :where(.qz-opt.wrong,.qe-del) {
  color: var(--c-danger); background: var(--c-danger-bg);
  border-color: var(--c-danger); text-shadow: none;
  box-shadow: inset 0 0 0 1px var(--c-danger);
}
@media (hover:hover) {
  :root[data-skin="noi-khoi-3d"] :where(
    .btn,.btn-ghost,.btn-primary,.qe-up,.qe-del,.pres-arr,.qz-opt,
    .seg button,.segbtn,.tabbar a,.pres-chip,.att-btn,.pair-card
  ):not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow: inset 0 1px 0 var(--aero-inner),
      0 0 0 1px var(--aero-focus), 0 3px 10px rgba(0,92,151,.24);
  }
}
:root[data-skin="noi-khoi-3d"] :where(
  .btn,.btn-ghost,.btn-primary,.qe-up,.qe-del,.pres-arr,.qz-opt,
  .seg button,.segbtn,.tabbar a,.pres-chip,.att-btn,.pair-card
):not(:disabled):not([aria-disabled="true"]):active {
  box-shadow: inset 0 2px 5px rgba(0,20,44,.32), 0 1px 0 var(--aero-inner);
}

/* Exclude checkbox/radio/range/file/button/hidden inputs: retain native geometry. */
:root[data-skin="noi-khoi-3d"] :where(
  input:not([type]),input[type="text"],input[type="email"],input[type="password"],
  input[type="search"],input[type="url"],input[type="tel"],input[type="number"],
  input[type="date"],input[type="datetime-local"],input[type="time"],
  input[type="month"],input[type="week"],select,textarea
) {
  color: var(--c-text); background: var(--c-input-bg);
  border: 1px solid var(--aero-control-border);
  box-shadow: inset 0 1px 3px rgba(4,40,67,.13), 0 1px 0 var(--aero-inner);
}
:root[data-skin="noi-khoi-3d"] :where(input,textarea)::placeholder {
  color: var(--c-muted); opacity: 1;
}
:root[data-skin="noi-khoi-3d"] select option {
  color: var(--c-text); background: var(--c-surface);
}
:root[data-skin="noi-khoi-3d"] :where(input,select,textarea):focus {
  border-color: var(--aero-focus);
  outline: 2px solid var(--aero-focus); outline-offset: 2px;
}
:root[data-skin="noi-khoi-3d"] :where(
  a,button,input,select,textarea,.btn,.qz-opt,.pair-card,[tabindex]
):focus-visible {
  outline: 2px solid var(--aero-focus); outline-offset: 3px;
}
:root[data-skin="noi-khoi-3d"] .topbar :where(a,button):focus-visible {
  outline-color: #fff;
}
:root[data-skin="noi-khoi-3d"] :where(input[type="checkbox"],input[type="radio"],input[type="range"]) {
  accent-color: var(--c-primary);
}
:root[data-skin="noi-khoi-3d"] :where(.lesson-row,.rec-photo) {
  background-color: var(--aero-row);
  border-color: var(--aero-edge);
  box-shadow: inset 0 1px 0 var(--aero-inner), 0 1px 4px rgba(4,46,76,.12);
}
:root[data-skin="noi-khoi-3d"] .pbar > i {
  background: linear-gradient(180deg,#6fd9ff 0%,#1188c6 48%,#0569ae 55%,#39b3e2 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* 5. No filter support: opaque surfaces, reflections retained on topbar/buttons. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-skin="noi-khoi-3d"] :where(
    .card,.login-card,.game-card,.lesson-block,.phieu,.cert-inner,
    .modal,#toast,.sidebar,.sheet,.bottomnav
  ) {
    background: var(--aero-fallback);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* Conservative small-screen preset; use actual app breakpoint if different. */
@media (max-width:680px) {
  :root[data-skin="noi-khoi-3d"] { --aero-blur: 6px; }
  :root[data-skin="noi-khoi-3d"] body { background-attachment: scroll; }
  :root[data-skin="noi-khoi-3d"] :where(.topbar,.sidebar,.bottomnav) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root[data-skin="noi-khoi-3d"] :where(.sidebar,.bottomnav) {
    background: var(--aero-fallback);
  }
}
@media (prefers-reduced-motion:reduce) {
  :root[data-skin="noi-khoi-3d"] :where(
    .btn,.btn-ghost,.btn-primary,.qe-up,.qe-del,.pres-arr,.qz-opt,
    .seg button,.segbtn,.tabbar a,.pres-chip,.att-btn,.pair-card
  ) { transition: none; }
}
@media (prefers-reduced-transparency:reduce) {
  :root[data-skin="noi-khoi-3d"] :where(
    .card,.login-card,.game-card,.lesson-block,.phieu,.cert-inner,
    .modal,#toast,.sidebar,.sheet,.bottomnav
  ) {
    background: var(--aero-fallback);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root[data-skin="noi-khoi-3d"] .topbar {
    background: #0a385a;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
/* Respect OS high contrast: no forced-color-adjust:none. */
@media (forced-colors:active) {
  :root[data-skin="noi-khoi-3d"] { --aero-focus: Highlight; }
  :root[data-skin="noi-khoi-3d"] body { background: Canvas; color: CanvasText; }
  :root[data-skin="noi-khoi-3d"] :where(
    .card,.login-card,.game-card,.lesson-block,.phieu,.cert-inner,.modal,#toast,
    .topbar,.sidebar,.sheet,.bottomnav,.btn,.btn-primary,.btn-ghost,.qz-opt,
    .seg button,.segbtn,.tabbar a,.pres-chip,.att-btn,.pair-card,.qe-up,.qe-del,.pres-arr
  ) {
    background: Canvas; color: CanvasText; border-color: CanvasText;
    box-shadow: none; text-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root[data-skin="noi-khoi-3d"] :where(
    .qz-opt.sel,.seg button.on,.segbtn.on,.tabbar a.on,.pres-chip.on,.att-btn.on
  ) { outline: 2px solid Highlight; outline-offset: -2px; }
}


/* ============================================================
   Ánh xạ selector THẬT của app (xác minh theo §4 hướng dẫn):
   .qrow = hàng kỳ thi/luyện « Đang mở cho bạn » (trang chủ);
   .xb   = khối Bảng vàng (trang chủ + trang Kỳ thi);
   .sidebar a.active = mục menu đang chọn (base thắng nhóm :where
   nên nền lấy --c-primary token mới; rule dưới thêm gloss + vạch vàng).
   ============================================================ */
:root[data-skin="noi-khoi-3d"] .qrow {
  background: var(--aero-row);
  border-color: var(--aero-edge);
  box-shadow: inset 0 1px 0 var(--aero-inner), 0 1px 3px rgba(3,48,79,.09);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-skin="noi-khoi-3d"] .xb {
  background: var(--aero-well);
  color: var(--c-text);
  border-color: var(--aero-edge);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-skin="noi-khoi-3d"] .sidebar a.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 35%, transparent 49%),
    linear-gradient(180deg, var(--aero-btn-top) 0%, var(--aero-btn-mid) 43%,
      var(--aero-btn-low) 53%, var(--aero-btn-foot) 100%);
  box-shadow: inset 3px 0 0 var(--c-accent),
    inset 0 1px 0 rgba(255,255,255,.55),
    0 0 0 1px rgba(225,250,255,.45), 0 2px 6px rgba(0,65,111,.25);
}
:root[data-skin="noi-khoi-3d"] .lesson-row:hover {
  box-shadow: inset 0 1px 0 var(--aero-inner), 0 0 0 1px var(--aero-focus), 0 2px 8px rgba(0,92,151,.18);
}