/* ============================================================================
   He thong giao dien chung cho kids.vkchuong.com
   ----------------------------------------------------------------------------
   CACH DUNG

   1. Nap truoc moi stylesheet rieng cua trang:
        <link rel="stylesheet" href="/assets/app.css?v=...">
        <link rel="stylesheet" href="assets/styles.css?v=...">   (neu co)

   2. Dat mot lop chu de len <body> de chon mau nhan:
        (khong dat gi)   -> mau hong cua trang chu
        app-video        -> tim
        app-truyen       -> mat ong
        app-sach         -> xanh la
        app-game         -> cam san ho
        app-tim          -> xanh troi
        app-admin        -> xam lam, tram hon

      Lop chu de CHI doi bien mau. Hinh khoi, khoang cach va chu luon giong nhau
      o moi app — do la diem chung cua ca site.

   3. Dung component co san (tat ca deu mang tien to `k-`):
        .k-wrap                      khung giua trang
        .k-head .k-title .k-lead     dau trang
        .k-back                      nut quay lai
        .k-section .k-section-head .k-section-title .k-section-note
        .k-grid .k-grid-solo .k-grid-wide
        .k-card .k-card-media .k-card-art .k-card-body .k-card-title .k-card-note
        .k-ratio .k-ratio-4x3 .k-ratio-16x9 .k-ratio-fill
        .k-btn .k-btn-primary .k-btn-quiet .k-btn-danger
        .k-tag .k-tag-quiet
        .k-note                      trang thai rong
        .k-foot
        .k-ico                       o icon svg vuong

   TIEN TO `k-` LA BAT BUOC. Cac trang tro choi treo JavaScript vao nhung ten
   lop tran nhu `.card`, `.target`, `.piece`, `.active`, `.correct`. Mot rule
   `.card` trong file dung chung nay se lam hong tro choi ma khong test nao bat
   duoc. Khong bao gio them selector khong co tien to vao day.

   IPAD CU (iOS 12 Safari) LA YEU CAU BAT BUOC
   Trong file nay va moi file ke thua no, khong dung: `gap` trong flexbox
   (dung margin), `aspect-ratio` (dung .k-ratio padding-top), `:has()`, CSS
   nesting, container query, don vi `dvh`, `place-items`, `min()`/`max()`.
   `clamp()` luon di kem mot dong font-size thuong dat truoc no.
   `:focus` va `:focus-visible` phai nam o hai rule rieng — gop chung thi Safari
   cu bo ca rule va mat vong focus.
   ========================================================================== */

:root {
  --paper:#FFF6F9;
  --surface:#FFFFFF;
  --surface-2:#F7EDF3;
  --ink:#321A38;
  --ink-soft:#6B5470;
  --edge:rgba(139,92,246,.14);
  --edge-strong:rgba(139,92,246,.30);

  --accent:#FF5E97;
  --accent-deep:#D81B63;
  --accent-soft:#FFEBF3;
  --accent-ink:#FFFFFF;

  --danger:#E83D54;
  --danger-deep:#B3172C;

  --font-head:"Baloo 2","Be Vietnam Pro",system-ui,sans-serif;
  --font-body:"Be Vietnam Pro",system-ui,sans-serif;
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-md:17px;
  --fs-lg:19px;
  --fs-xl:26px;
  --lh:1.6;
  --lh-tight:1.25;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:24px;
  --r-pill:999px;

  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;

  --shadow:0 12px 28px -16px rgba(139,92,246,.2);
  --shadow-lift:0 16px 34px -14px rgba(139,92,246,.3);

  --tap:48px;
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.16s;
}

body.app-video  { --accent:#8B5CF6; --accent-deep:#6D28D9; --accent-soft:#F3ECFF; --accent-ink:#FFFFFF; }
body.app-truyen { --accent:#F0871F; --accent-deep:#B45309; --accent-soft:#FFF2E0; --accent-ink:#FFFFFF; }
body.app-sach   { --accent:#22A06B; --accent-deep:#15803D; --accent-soft:#E6F7EF; --accent-ink:#FFFFFF; }
body.app-game   { --accent:#FB7141; --accent-deep:#C2410C; --accent-soft:#FFEDE4; --accent-ink:#FFFFFF; }
body.app-tim    { --accent:#3B9BF0; --accent-deep:#0369A1; --accent-soft:#E6F3FD; --accent-ink:#FFFFFF; }
body.app-admin  {
  --accent:#64748B; --accent-deep:#334155; --accent-soft:#EEF2F6; --accent-ink:#FFFFFF;
  --paper:#F4F6F9; --surface-2:#E9EDF3;
  --ink:#1E293B; --ink-soft:#5A6B80;
  --edge:rgba(51,65,85,.16); --edge-strong:rgba(51,65,85,.32);
  --shadow:0 12px 28px -18px rgba(15,23,42,.35);
  --shadow-lift:0 16px 34px -16px rgba(15,23,42,.45);
}

/* Che do toi la phan thuong them cho may moi (iOS 13+). Ban sang phai dung
   day du mot minh no. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#171022;
    --surface:#231832;
    --surface-2:#2E2040;
    --ink:#FBF2FA;
    --ink-soft:#C0B0CD;
    --edge:rgba(251,242,250,.13);
    --edge-strong:rgba(251,242,250,.28);
    --accent:#FF86B4;
    --accent-deep:#FF5E97;
    --accent-soft:#3C1425;
    --accent-ink:#2A0A17;
    --danger:#FF6B7F;
    --danger-deep:#E83D54;
    --shadow:0 14px 36px -18px rgba(0,0,0,.7);
    --shadow-lift:0 18px 44px -18px rgba(0,0,0,.85);
  }

  body.app-video  { --accent:#B79CFF; --accent-deep:#8B5CF6; --accent-soft:#2A1B44; --accent-ink:#160B2B; }
  body.app-truyen { --accent:#FFAE5C; --accent-deep:#F0871F; --accent-soft:#3A2410; --accent-ink:#2A1705; }
  body.app-sach   { --accent:#5BD3A0; --accent-deep:#22A06B; --accent-soft:#11301F; --accent-ink:#06190F; }
  body.app-game   { --accent:#FF9A73; --accent-deep:#FB7141; --accent-soft:#3A1E11; --accent-ink:#2A1004; }
  body.app-tim    { --accent:#7FC0FA; --accent-deep:#3B9BF0; --accent-soft:#102942; --accent-ink:#04182C; }
  body.app-admin  {
    --accent:#A7B6C9; --accent-deep:#7C8EA6; --accent-soft:#232C38; --accent-ink:#0F1620;
    --paper:#10151C; --surface:#1A212B; --surface-2:#232C38;
    --ink:#EEF2F7; --ink-soft:#A8B6C6;
    --edge:rgba(238,242,247,.13); --edge-strong:rgba(238,242,247,.28);
  }
}

/* ---------- Nen ---------- */

* { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-md);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}

img { max-width:100%; }

button, input, select, textarea { font:inherit; color:inherit; }

/* Safari cu khong hieu :focus-visible va se bo ca rule neu gop chung. Rule
   :focus dung truoc lam nen; may moi ghi de bang rule sau. */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline:3px solid var(--accent-deep);
  outline-offset:3px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline:none; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline:3px solid var(--accent-deep);
  outline-offset:3px;
}

/* ---------- Khung trang ---------- */

.k-wrap { max-width:960px; margin:0 auto; }
.k-wrap-wide { max-width:1240px; margin:0 auto; }

.k-head { padding:var(--s-7) 0 var(--s-3); text-align:center; }
.k-title {
  font-family:var(--font-head); font-weight:700; margin:0;
  font-size:36px;
  font-size:clamp(36px,8vw,56px);
  line-height:1.05;
}
.k-title em { font-style:normal; color:var(--accent); }
.k-lead { margin:var(--s-2) auto 0; max-width:44ch; color:var(--ink-soft); }

.k-back {
  display:inline-flex; align-items:center; min-height:var(--tap);
  padding:0 var(--s-5); border-radius:var(--r-pill);
  background:var(--surface); border:2px solid var(--accent);
  text-decoration:none; color:var(--accent-deep);
  font-family:var(--font-head); font-weight:700; font-size:16px;
  transition:background var(--dur) ease, color var(--dur) ease;
}
.k-back:hover { background:var(--accent); color:var(--accent-ink); }
/* Flexbox `gap` chi co tu Safari 14.1 — dung margin cho iPad cu. */
.k-back svg { width:20px; height:20px; margin-right:var(--s-2); }

/* ---------- Muc ---------- */

.k-section { margin-top:44px; }

.k-section-head { display:flex; align-items:baseline; margin-bottom:var(--s-4); }
.k-section-title {
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-xl);
  margin:0 var(--s-3) 0 0; line-height:var(--lh-tight);
}
.k-section-note { color:var(--ink-soft); font-size:var(--fs-sm); }
.k-section-head::after {
  content:""; flex:1; height:2px; border-radius:2px; margin-left:var(--s-3);
  background:linear-gradient(90deg,var(--edge),transparent);
}

/* ---------- Luoi ---------- */
/* Grid `gap` an toan tren iOS 12, nhung Safari 12 doc `grid-gap` truoc. */

.k-grid {
  display:grid;
  grid-gap:var(--s-3); gap:var(--s-3);
  grid-template-columns:repeat(2,1fr);
}
/* Mot the don doc tren dien thoai: chiem tron hang cho khoi ho nua ben phai.
   Tu 640px tro len KHONG ep nua — de no theo luoi thuong, neu khong the se
   gian het be ngang va hop ty le 4:3 no thanh mot khoi rong khong lo. */
.k-grid-solo { grid-template-columns:1fr; }

@media (min-width:640px) {
  .k-grid {
    grid-gap:var(--s-4); gap:var(--s-4);
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  }
  .k-grid-wide { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}

/* ---------- Hop ty le anh (thay cho aspect-ratio) ---------- */

.k-ratio { position:relative; height:0; overflow:hidden; }
.k-ratio-4x3 { padding-top:75%; }
.k-ratio-16x9 { padding-top:56.25%; }
.k-ratio-fill {
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ---------- The ---------- */

.k-card {
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.k-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-lift); }
.k-card:focus-visible { transform:translateY(-3px); border-color:var(--accent); }
.k-card:active { transform:translateY(0); }

.k-card-media {
  display:block; width:100%; background:var(--surface-2);
  border-bottom:1px solid var(--edge);
}
.k-card-art {
  background:var(--surface-2); border-bottom:1px solid var(--edge);
}
.k-card-art > div {
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.k-card-body { padding:var(--s-3) var(--s-4) var(--s-4); display:flex; flex-direction:column; }
.k-card-body > * { margin-bottom:var(--s-1); }
.k-card-body > *:last-child { margin-bottom:0; }
.k-card-title {
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-lg);
  line-height:var(--lh-tight);
}
.k-card-note { color:var(--ink-soft); font-size:var(--fs-sm); }

.k-ico { width:52px; height:52px; color:var(--accent); display:block; margin:0 auto var(--s-1); }
.k-card-art i {
  font-style:normal; font-size:var(--fs-sm); color:var(--ink-soft);
  display:block; text-align:center;
}

/* ---------- Nut ---------- */

.k-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s-5);
  border:2px solid var(--edge-strong); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink);
  font-family:var(--font-head); font-weight:700; font-size:16px;
  text-decoration:none; cursor:pointer; touch-action:manipulation;
  transition:background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, transform .1s var(--ease);
}
.k-btn:active { transform:translateY(2px); }
.k-btn svg { width:20px; height:20px; }
.k-btn svg:first-child { margin-right:var(--s-2); }

.k-btn-primary {
  background:var(--accent-deep); border-color:var(--accent-deep); color:var(--accent-ink);
}
.k-btn-primary:hover { background:var(--accent); border-color:var(--accent); }

.k-btn-quiet {
  background:var(--surface); border-color:var(--accent); color:var(--accent-deep);
}
.k-btn-quiet:hover { background:var(--accent-soft); }

.k-btn-danger {
  background:var(--danger-deep); border-color:var(--danger-deep); color:#FFFFFF;
}
.k-btn-danger:hover { background:var(--danger); border-color:var(--danger); }

.k-btn[disabled] { opacity:.45; cursor:default; transform:none; }

/* ---------- Nhan ---------- */
/* Nen dung --accent-deep chu khong phai --accent: chu trang tren mau tuoi
   khong dat 4.5:1 theo WCAG AA. */

.k-tag {
  align-self:flex-start; margin-top:var(--s-1);
  padding:3px var(--s-3); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700;
  background:var(--accent-deep); color:var(--accent-ink);
}
.k-tag-quiet {
  background:var(--accent-soft); color:var(--accent-deep);
  border:1px solid var(--edge);
}

/* ---------- Trang thai rong ---------- */

.k-note {
  padding:var(--s-7) var(--s-5); text-align:center; color:var(--ink-soft);
  background:var(--surface); border:2px dashed var(--edge-strong);
  border-radius:var(--r-xl); box-shadow:var(--shadow); margin-top:var(--s-6);
}
.k-note strong {
  display:block; margin-bottom:var(--s-2);
  font-family:var(--font-head); font-size:25px; color:var(--ink);
}
.k-note a { color:var(--accent-deep); font-weight:700; }

/* ---------- Chan trang ---------- */

.k-foot {
  margin-top:var(--s-8); padding-top:var(--s-5);
  border-top:1px solid var(--edge); text-align:center;
  color:var(--ink-soft); font-size:var(--fs-sm);
}
.k-foot a { color:var(--accent-deep); text-decoration:none; font-weight:700; }
.k-foot a:hover { text-decoration:underline; }

@media (prefers-reduced-motion: reduce) {
  .k-card, .k-btn, .k-back { transition:none; }
  .k-card:hover, .k-card:focus-visible { transform:none; }
}