/* bambi.css — bang mau + thanh phan dung chung cho CA trang gioi thieu lan trang docs.
   [v2] Hop nhat theo He Thiet Ke X: 1 thang chu, luoi 4px, ban kinh 10/14/20,
        bong nhieu lop (shadow-1/2/3), nhan-noi-len 160ms, kinh mo chi cho lop noi.
   TEN bien va TEN class giu nguyen y ban cu (chat.js + script tim kiem docs dua vao chung),
   chi doi GIA TRI + cach trinh bay.

   Mau lay dung tu app that (app/lib/ui/app_theme.dart) de web va app khong lech nhau:
     tim chu dao #6D4AA7 - muc tim #2A1A47 - cam meo #DB8B00
     den 3 muc: xanh #2E9E5B - vang #B78A00 - cam #D9601A
*/

:root {
  --tim: #F59E0B;
  --tim-dam: #B26F05;
  --tim-nhat: #F2ECE1;
  --muc-tim: #3D362F;

  --den-xanh: #15803D;
  --den-vang: #F59E0B;
  --den-cam: #DC2626;
  --cam-meo: #F59E0B;

  --chu: #241F1A;
  --chu-nhat: #756B60;
  --chu-mo: #756B60;

  --nen: #E8E2D8;
  --nen-2: #FFFCF6;
  --nen-3: #E0D8CB;
  --vien: #DDD4C6;

  /* Ban kinh theo he thong: 10 nut/chip/o nhap - 14 the - 20 khoi lon/khung noi */
  --bk-sm: 10px;
  --bk: 14px;
  --bk-lg: 20px;

  --rong: 1080px;
  --rong-hep: 760px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ma: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Phu tro cho v2: lop tim 10%/6% + 3 bac bong + nhip chuyen dong */
  --tim-lop: rgba(245, 158, 11, .10);
  --tim-lop-2: rgba(245, 158, 11, .06);
  --bong-1: 0 1px 2px rgba(36, 31, 26, .06), 0 2px 6px rgba(36, 31, 26, .05);
  --bong-2: 0 2px 4px rgba(36, 31, 26, .07), 0 8px 18px rgba(36, 31, 26, .08);
  --bong-3: 0 6px 12px rgba(36, 31, 26, .10), 0 18px 40px rgba(36, 31, 26, .14);
  --nhip: 160ms;
  --duong: cubic-bezier(.2, .8, .2, 1);
}

/* Che do toi */
:root[data-theme="toi"] {
  --tim: #F59E0B;
  --tim-dam: #F59E0B;
  --tim-nhat: #3A3532;
  --muc-tim: #FAFAF9;

  --den-xanh: #4CC47B;
  --den-vang: #D9AE2E;
  --den-cam: #F0813E;

  --chu: #FAFAF9;
  --chu-nhat: #A8A29E;
  --chu-mo: #78716C;

  --nen: #1C1917;
  --nen-2: #292524;
  --nen-3: #1C1917;
  --vien: #44403C;

  --tim-lop: rgba(245, 158, 11, .14);
  --tim-lop-2: rgba(245, 158, 11, .08);
  --bong-1: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
  --bong-2: 0 2px 4px rgba(0, 0, 0, .34), 0 8px 18px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
  --bong-3: 0 6px 12px rgba(0, 0, 0, .40), 0 18px 40px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--chu);
  background: var(--nen-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; color: var(--chu); margin: 0 0 12px; text-wrap: pretty; }
h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -1.2px; line-height: 1.1; }
h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.6px; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
h4 { font-size: 18px; font-weight: 600; }

p { margin: 0 0 16px; text-wrap: pretty; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; text-wrap: pretty; }
strong { color: var(--chu); }
em { color: var(--chu-nhat); }

a { color: var(--tim); text-decoration: none; }
a:hover { color: var(--tim-dam); text-decoration: underline; }

code {
  font-family: var(--font-ma);
  font-size: 0.9em;
  background: var(--nen-3);
  padding: 2px 6px;
  border-radius: var(--bk-sm);
}

img { max-width: 100%; height: auto; display: block; }

/* Bieu tuong: 1 bo net duy nhat, mau theo chu xung quanh */
.ic { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 26px; height: 26px; }

/* Nhan noi len khi cham — chuyen dong dac trung, chi truc doc */
.nhac { transition: transform var(--nhip) var(--duong), box-shadow var(--nhip) var(--duong); }
.nhac:hover { transform: translateY(-2px); box-shadow: var(--bong-2); }
.nhac:active { transform: translateY(-4px) scale(1.01); box-shadow: var(--bong-3); }
.nhac:focus-visible { outline: 2px solid var(--tim); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .nhac, .nhac:hover, .nhac:active { transform: none; }
}

/* --- Bo cuc --- */
.bao { max-width: var(--rong); margin: 0 auto; padding: 0 24px; }
.bao-hep { max-width: var(--rong-hep); margin: 0 auto; padding: 0 24px; }
.khoang { padding: 88px 0; }
.khoang-nho { padding: 56px 0; }
.nen-phu { background: var(--nen); border-top: 1px solid var(--vien); border-bottom: 1px solid var(--vien); }

/* Dau moi khoi: nhan nho + tieu de, luon can giua */
.dinh-khoi { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.nhan {
  font-size: 13px; font-weight: 600; letter-spacing: .10em;
  text-transform: uppercase; color: var(--tim); margin-bottom: 12px;
}
.dinh-khoi h2 { margin: 0; }

/* --- Header (lop noi: kinh mo + hairline) --- */
.dau-trang {
  position: sticky; top: 0; z-index: 50;
  background: var(--nen);
  background: color-mix(in srgb, var(--nen) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--vien);
  transition: transform .28s ease;
}
/* [30/8] An khi cuon xuong, hien lai khi cuon len — dat class o nav.js */
.dau-trang.an-cuon { transform: translateY(-100%); }
.dau-trang .bao { display: flex; align-items: center; gap: 24px; height: 68px; }
.hieu {
  display: flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: 18px; letter-spacing: -.2px; color: var(--chu);
}
.hieu:hover { text-decoration: none; color: var(--chu); }
.hieu-dau {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(160deg, var(--tim), var(--tim-dam)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px var(--tim-lop);
}
.hieu-dau svg { width: 62%; height: 62%; display: block; }
.nhan-trang {
  font-size: 15px; color: var(--chu-mo); white-space: nowrap;
  border-left: 1px solid var(--vien); padding: 2px 0 2px 16px;
}
.dieu-huong { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dieu-huong .nut { margin-left: 8px; }
.dieu-huong a:not(.nut) {
  color: var(--chu-nhat); font-size: 15px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--bk-sm);
}
.dieu-huong a:not(.nut):hover { color: var(--tim); background: var(--nen-2); text-decoration: none; }

/* Nut doi sang/toi — nam trong .dieu-huong nhu 1 muc menu, doi nhan+icon
   qua js/giao-dien.js. */
.doi-giao-dien {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--chu-nhat); font-size: 15px; font-weight: 500; font-family: inherit;
  padding: 8px 12px; border-radius: var(--bk-sm);
  background: transparent; border: none; cursor: pointer;
}
.doi-giao-dien:hover { color: var(--tim); background: var(--nen-2); }
.doi-giao-dien svg { width: 18px; height: 18px; flex-shrink: 0; }
.doi-giao-dien .ic-mat-troi { display: none; }
:root[data-theme="toi"] .doi-giao-dien .ic-mat-trang { display: none; }
:root[data-theme="toi"] .doi-giao-dien .ic-mat-troi { display: block; }

/* Nut hamburger — chi hien tren mobile, mo/dong .dieu-huong dang bang xo */
.menu-nut {
  display: none;
  width: 40px; height: 40px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: var(--bk-sm);
  background: transparent; border: 1px solid var(--vien);
  color: var(--chu); cursor: pointer;
}
.menu-nut:hover { background: var(--nen-2); }
.menu-nut svg { width: 22px; height: 22px; }

/* Nut icon "Tai app" — thay cho nut chu, luon hien canh hamburger tren
   mobile thay vi bi giau trong bang xo (bug Brian bat 28/8: nut chu nam
   trong .dieu-huong nen bi che khi menu gap lai). An tren desktop vi
   desktop da co nut chu day du trong .dieu-huong roi. */
.tai-icon {
  display: none;
  width: 40px; height: 40px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: var(--bk-sm);
  background: var(--tim); color: #fff;
  box-shadow: 0 2px 4px var(--tim-lop-2), 0 8px 20px var(--tim-lop);
  transition: transform var(--nhip) var(--duong);
}
.tai-icon:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }
.tai-icon svg { width: 20px; height: 20px; }

/* --- Nut --- */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; min-height: 44px;
  border-radius: 12px;
  font-size: 16px; font-weight: 600; font-family: var(--font);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--nhip) var(--duong), box-shadow var(--nhip) var(--duong);
}
.nut:hover { text-decoration: none; transform: translateY(-2px); }
.nut:active { transform: translateY(-4px) scale(1.01); }
.nut:focus-visible { outline: 2px solid var(--tim); outline-offset: 2px; }
.nut-chinh {
  background: var(--tim); color: #fff;
  box-shadow: 0 2px 4px var(--tim-lop-2), 0 8px 20px var(--tim-lop);
}
.nut-chinh:hover { color: #fff; }
.nut-phu { background: var(--nen); color: var(--chu); border-color: var(--vien); box-shadow: var(--bong-1); }
.nut-phu:hover { color: var(--chu); }
.nut-nho { padding: 10px 18px; font-size: 15px; }
.nut[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; }

/* --- The --- */
.the {
  background: var(--nen);
  border-radius: var(--bk);
  padding: 28px;
  box-shadow: var(--bong-1);
}
.the p { color: var(--chu-nhat); font-size: 16px; line-height: 1.65; margin: 0; }
/* [29/8] Brian: icon noi tiep tieu de tren CUNG 1 hang, noi dung xuong hang
   duoi — dung chung cho .the (Vi sao khac), .the-den (Den 3 mau) va .dong-ic
   (4 muc chinh trong tai lieu). Thay the hoan toan .the-ngang cu (icon dung
   canh CA KHOI h3+p) — gio icon chi canh h3 thoi. */
.the-dau { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.the-dau h3, .the-dau h4 { margin: 0; }
.the-dau .vong, .the-dau .o-den { flex-shrink: 0; }
.luoi { display: grid; gap: 20px; }
.luoi-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.luoi-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Vong tron bieu tuong (lop tim 10%) */
.vong {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  background: var(--tim-lop); color: var(--tim);
  display: flex; align-items: center; justify-content: center;
}
.vong-nho { width: 40px; height: 40px; }

/* Chip nho o hero */
.chip-hero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--tim-lop); color: var(--tim);
  font-size: 13px; font-weight: 600; margin-bottom: 24px;
}

/* --- Hero --- */
.hero { position: relative; overflow: hidden; background: var(--nen); border-bottom: 1px solid var(--vien); }
.hero-sang {
  position: absolute; top: -260px; right: -120px; width: 760px; height: 660px;
  background: radial-gradient(50% 50% at 50% 50%, var(--tim-lop), rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}
.hero .bao {
  position: relative;
  padding: 96px 24px;
  display: grid; grid-template-columns: minmax(300px, 1fr) auto; gap: 64px; align-items: center;
}
.hero p.lede { font-size: 18px; color: var(--chu-nhat); max-width: 540px; line-height: 1.65; margin: 0 0 32px; }
.hero-nut { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Den 3 mau (dung o ca 2 trang) --- */
.den { display: inline-block; width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.den-xanh { background: var(--den-xanh); }
.den-vang { background: var(--den-vang); }
.den-cam  { background: var(--den-cam); }

/* The den: vong nhat cung ho mau */
.the-den { border-radius: var(--bk); padding: 26px; background: var(--nen-2); box-shadow: var(--bong-1); }
.nen-phu .the-den { background: var(--nen-2); }
.o-den {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
}
.o-den .den { width: 14px; height: 14px; }
.o-den-xanh { background: color-mix(in srgb, var(--den-xanh) 14%, transparent); }
.o-den-vang { background: color-mix(in srgb, var(--den-vang) 14%, transparent); }
.o-den-cam  { background: color-mix(in srgb, var(--den-cam) 14%, transparent); }

/* Dong den trong docs */
.dong-den { display: flex; gap: 14px; padding: 18px; border-radius: var(--bk); }
.dong-den .den { margin-top: 7px; width: 14px; height: 14px; }
.dong-den-xanh { background: color-mix(in srgb, var(--den-xanh) 8%, transparent); }
.dong-den-xanh .den { box-shadow: 0 0 0 4px color-mix(in srgb, var(--den-xanh) 18%, transparent); }
.dong-den-vang { background: color-mix(in srgb, var(--den-vang) 8%, transparent); }
.dong-den-vang .den { box-shadow: 0 0 0 4px color-mix(in srgb, var(--den-vang) 18%, transparent); }
.dong-den-cam { background: color-mix(in srgb, var(--den-cam) 8%, transparent); }
.dong-den-cam .den { box-shadow: 0 0 0 4px color-mix(in srgb, var(--den-cam) 18%, transparent); }

/* --- 25 bai hoc: luoi the chia 5 chang --- */
.cac-chang { display: flex; flex-direction: column; gap: 18px; }
.dau-chang { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dau-chang .ten {
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--chu-mo);
}
.dau-chang .vach { flex: 1; height: 1px; background: var(--vien); }
.dau-chang .pham { font-size: 13px; font-weight: 500; color: var(--chu-mo); }
.mo-ta-chang { font-size: 16px; color: var(--chu-nhat); line-height: 1.6; margin: 0; }
.luoi-bai { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.the-bai { background: var(--nen-2); border-radius: var(--bk); padding: 16px 18px; box-shadow: var(--bong-1); }
.nen-phu .the-bai { background: var(--nen-2); }
.the-bai .dinh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.the-bai .so {
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px;
  background: var(--tim-lop); color: var(--tim);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.the-bai .en { font-size: 15px; font-weight: 600; color: var(--chu); line-height: 1.35; }
.the-bai .vi { font-size: 14px; color: var(--chu-nhat); line-height: 1.5; margin: 0; }

/* --- Khoi tai app --- */
.khoi-tai {
  position: relative; overflow: hidden;
  border-radius: var(--bk-lg);
  background: linear-gradient(160deg, #2A1A47, #3D2765);
  padding: 64px 32px; text-align: center;
  box-shadow: var(--bong-3);
}
.khoi-tai .sang {
  position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 420px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.khoi-tai .trong { position: relative; }
.khoi-tai h2 { color: #fff; margin-bottom: 14px; }
.khoi-tai p { color: rgba(255, 255, 255, .78); max-width: 480px; margin: 0 auto 32px; font-size: 17px; line-height: 1.65; }
/* Hang 3 ma QR trong khoi Tai app: 1 that (trang web) + 2 lam san cho
   Google Play / App Store (chua co link that, hien anh mo tren cung dai) */
.qr-hang {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  width: 100%; max-width: 420px;
  margin: 32px auto 0;
}
.qr-o { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr-khung {
  width: 100%; aspect-ratio: 1; padding: 8px;
  background: #fff; border-radius: var(--bk);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--bong-2);
}
.qr-anh { width: 100%; height: 100%; display: block; }
.qr-nhan { margin: 0; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .76); }
.qr-sap-co .qr-khung { opacity: .5; }
.qr-sap-co .qr-nhan { color: rgba(255, 255, 255, .5); }

/* --- Vien thiet bi (khung dien thoai boc anh chup app) --- */
.dien-thoai { position: relative; justify-self: center; }
.dien-thoai .quang {
  position: absolute; inset: -28px -20px -34px; border-radius: 44px;
  background: linear-gradient(180deg, var(--tim-lop), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.dien-thoai .khung {
  position: relative;
  border: 9px solid var(--muc-tim);
  border-radius: 34px;
  overflow: hidden;
  background: var(--muc-tim);
  width: 272px;
  box-shadow: 0 8px 20px rgba(42, 26, 71, .16), 0 28px 60px rgba(42, 26, 71, .22);
}
.dien-thoai img { border-radius: 25px; }

/* Khung tro thanh carousel: khung la vung bam duoc, 3 anh chong nhau va mo dan */
.dien-thoai .khung {
  cursor: pointer;
  transition: transform var(--nhip) var(--duong), box-shadow var(--nhip) var(--duong);
}
.dien-thoai .khung:hover { transform: translateY(-2px); }
.dien-thoai .khung:active { transform: translateY(-4px) scale(1.01); }
.dien-thoai .khung:focus-visible { outline: 2px solid var(--tim); outline-offset: 4px; }
.man-xep { position: relative; aspect-ratio: 1080 / 2400; }
.man {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 240ms var(--duong);
}
.man.dang-hien { opacity: 1; }

/* Mui ten trai/phai — noi tren anh, kinh mo, luon du 44px de cham */
.man-nut {
  position: absolute; bottom: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 17, 28, .42);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; cursor: pointer;
  transition: transform var(--nhip) var(--duong), background var(--nhip) var(--duong);
}
.man-nut:hover { background: rgba(20, 17, 28, .60); transform: translateY(-2px); }
.man-nut:active { transform: translateY(-4px) scale(1.01); }
.man-nut:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.man-nut svg { width: 20px; height: 20px; }
.man-truoc { left: 12px; }
.man-sau { right: 12px; }

/* Cham tron chi vi tri + ten man dang xem */
.man-cham { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.man-cham .cham {
  width: 44px; height: 44px; padding: 0;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.man-cham .cham::before {
  content: ""; display: block;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--vien);
  transition: width var(--nhip) var(--duong), background var(--nhip) var(--duong);
}
.man-cham .cham:hover::before { background: var(--chu-mo); }
.man-cham .cham.dang-hien::before { width: 26px; border-radius: 999px; background: var(--tim); }
.man-cham .cham:focus-visible { outline: 2px solid var(--tim); outline-offset: -8px; border-radius: 50%; }
.man-ten {
  margin: -10px 0 0; text-align: center;
  font-size: 14px; font-weight: 500; color: var(--chu-mo);
}
@media (prefers-reduced-motion: reduce) {
  .dien-thoai .khung, .dien-thoai .khung:hover, .dien-thoai .khung:active,
  .man-nut, .man-nut:hover, .man-nut:active { transform: none; }
  .man { transition: none; }
}

/* --- Footer --- */
.chan-trang {
  border-top: 1px solid var(--vien);
  background: var(--nen);
  padding: 44px 0;
  font-size: 15px;
  color: var(--chu-nhat);
}
.chan-trang .bao { display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: center; }
.chan-trang .hieu-chan {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--chu); font-size: 16px;
}
.chan-trang .hieu-chan span.dau {
  width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(160deg, var(--tim), var(--tim-dam)); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.chan-trang .hieu-chan span.dau svg { width: 62%; height: 62%; display: block; }
.chan-trang a { color: var(--chu-nhat); }
.chan-trang a:hover { color: var(--tim); }
.chan-trang .ghi-chu { margin-left: auto; font-size: 14px; color: var(--chu-mo); }
/* [29/8] Credit AlphaVN o footer (Brian yeu cau) — dong rieng cuoi footer */
.chan-trang .alpha-credit { flex-basis: 100%; font-size: 14px; color: var(--chu-mo); }
.chan-trang .alpha-credit a { color: var(--chu-nhat); font-weight: 600; }

/* --- Khung chat bot (nut noi goc phai duoi) — class do js/chat.js sinh ra --- */
.bot-nut {
  position: fixed; right: 24px; bottom: 24px; z-index: 100;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(160deg, var(--tim), var(--tim-dam)); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(109, 74, 167, .30), 0 16px 40px rgba(109, 74, 167, .34);
  transition: transform var(--nhip) var(--duong), box-shadow var(--nhip) var(--duong), opacity .28s ease, visibility .28s ease;
}
.bot-nut:hover { transform: translateY(-2px); }
.bot-nut:active { transform: translateY(-4px) scale(1.01); }
.bot-nut svg { width: 26px; height: 26px; }
/* [30/8] An khi cuon xuong, hien lai khi cuon len — dat class o nav.js */
.bot-nut.an-cuon { transform: translateY(96px); opacity: 0; visibility: hidden; pointer-events: none; }

.bot-khung {
  position: fixed; right: 24px; bottom: 96px; z-index: 100;
  width: 384px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 150px);
  background: var(--nen);
  border: 1px solid var(--vien);
  border-radius: var(--bk-lg);
  box-shadow: 0 8px 20px rgba(42, 26, 71, .14), 0 28px 64px rgba(42, 26, 71, .26);
  display: none; flex-direction: column; overflow: hidden;
}
.bot-khung.mo { display: flex; }
.bot-dau {
  padding: 16px 18px; border-bottom: 1px solid var(--vien);
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 16px; color: var(--chu);
  background: var(--nen);
  background: color-mix(in srgb, var(--nen) 82%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
/* O dau hieu truoc tieu de khung chat (chat.js chi sinh chu, dau hieu dat bang CSS) */
.bot-dau::before {
  content: "";
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px;
  background: url("../img/brand/logo-icon-trang.svg") center / 62% no-repeat,
              linear-gradient(160deg, var(--tim), var(--tim-dam));
  box-shadow: 0 4px 12px var(--tim-lop);
}
.bot-dong {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--bk-sm);
  background: var(--nen-3) !important;
  transition: transform var(--nhip) var(--duong);
}
.bot-dong:hover { transform: translateY(-2px); }
.bot-than {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--nen-2);
}
.bot-loi {
  max-width: 86%; padding: 12px 16px;
  font-size: 15px; line-height: 1.6;
  box-shadow: var(--bong-1);
}
.bot-loi-nguoi {
  align-self: flex-end; background: var(--tim); color: #fff;
  border-radius: 16px 16px 6px 16px;
}
.bot-loi-may {
  align-self: flex-start; background: var(--nen); color: var(--chu);
  border-radius: 16px 16px 16px 6px;
}
.bot-chan {
  padding: 14px; border-top: 1px solid var(--vien);
  display: flex; gap: 10px; align-items: center;
  background: var(--nen);
}
.bot-chan input {
  flex: 1; min-width: 0;
  padding: 13px 16px; height: 48px;
  font-size: 15px; font-family: var(--font);
  border: 1px solid var(--vien); border-radius: var(--bk);
  background: var(--nen-2); color: var(--chu);
}
.bot-chan input:focus {
  outline: none;
  border-color: var(--tim);
  box-shadow: 0 0 0 3px var(--tim-lop);
}
.bot-chan button {
  height: 48px; padding: 0 20px; flex-shrink: 0;
  border-radius: var(--bk);
  background: var(--tim); color: #fff; border: none;
  font-size: 15px; font-weight: 600; font-family: var(--font); cursor: pointer;
  box-shadow: 0 2px 6px var(--tim-lop-2), 0 6px 16px var(--tim-lop);
  transition: transform var(--nhip) var(--duong), box-shadow var(--nhip) var(--duong);
}
.bot-chan button:hover { transform: translateY(-2px); }
.bot-chan button:active { transform: translateY(-4px) scale(1.01); }
.bot-chan button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.bot-chan input:disabled { opacity: .6; }

/* --- Docs: bo cuc 2 cot --- */
.docs-khung { display: grid; grid-template-columns: 284px minmax(0, 1fr); gap: 48px; align-items: start; }

/* Cot trai: o tim + muc luc (giu id #o-tim-kiem, #muc-luc, #khong-thay) */
.docs-le {
  position: sticky; top: 92px;
  max-height: calc(100vh - 130px); overflow-y: auto;
  padding-bottom: 24px;
}
.docs-le h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--chu-mo); margin: 24px 4px 8px; font-weight: 600;
}
.docs-le h4:first-of-type { margin-top: 0; }
.docs-le a {
  display: block; padding: 9px 12px; margin-bottom: 2px;
  border-radius: var(--bk-sm);
  font-size: 15px; color: var(--chu-nhat); font-weight: 500; line-height: 1.4;
}
.docs-le a:hover { background: var(--nen); color: var(--tim); text-decoration: none; box-shadow: var(--bong-1); }
.docs-le a.dang-xem { background: var(--tim-lop); color: var(--tim); font-weight: 600; }

/* Cot phai: moi muc la 1 the giay */
.docs-bai { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.docs-bai section {
  scroll-margin-top: 96px;
  background: var(--nen); border-radius: 18px;
  padding: 36px; box-shadow: var(--bong-1);
}
.docs-bai section > h2 {
  font-size: 30px; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--vien);
}
.docs-bai section h3 { margin: 28px 0 10px; }
.docs-bai section h3:first-of-type { margin-top: 0; }
.docs-bai section h4 { margin: 24px 0 8px; }
.docs-bai p, .docs-bai li { color: var(--chu-nhat); }
.docs-bai p:last-child, .docs-bai ul:last-child, .docs-bai ol:last-child { margin-bottom: 0; }

/* Dong co bieu tuong trong docs (4 muc, su co...) */
/* [29/8] Doi tu hang ngang (icon canh CA khoi tieu-de+noi-dung) sang: hang
   icon+tieu de (.the-dau) tren, noi dung xuong dong duoi — khop mau chung
   voi .the/.the-den ben trang chu. */
.dong-ic { display: flex; flex-direction: column; padding: 16px; border-radius: var(--bk); background: var(--nen-2); }
.dong-ic .the-dau { margin-bottom: 6px; }
.dong-ic p { margin: 0; color: var(--chu-nhat); }
.xep-doc { display: flex; flex-direction: column; gap: 12px; }
.the-hoi { padding: 18px; border-radius: var(--bk); background: var(--nen-2); }
.the-hoi h4 { font-size: 17px; margin: 0 0 6px; }
.the-hoi p { font-size: 16px; margin: 0; }

/* Khoi luu y / canh bao — thay cho dong chu do co emoji */
.luu-y {
  display: flex; gap: 14px; padding: 18px;
  border-radius: var(--bk);
  background: var(--tim-lop);
  border: 1px solid color-mix(in srgb, var(--tim) 22%, transparent);
}
.luu-y .ic { color: var(--tim); margin-top: 2px; }
.luu-y > div:last-child { color: var(--chu-nhat); }
.canh-bao {
  border-radius: var(--bk); padding: 20px;
  background: color-mix(in srgb, var(--den-cam) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--den-cam) 28%, transparent);
}
.canh-bao .tieu {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  color: var(--den-cam); font-weight: 700;
}
.canh-bao ul, .canh-bao ol, .canh-bao p { margin-bottom: 0; }

/* Bang 25 bai trong docs */
.bang-bao { border: 1px solid var(--vien); border-radius: var(--bk); overflow: hidden; }
table.bang { width: 100%; border-collapse: collapse; font-size: 15px; }
table.bang th {
  background: var(--nen-2); text-align: left;
  padding: 12px 16px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--chu-mo); font-weight: 600;
}
table.bang td { padding: 11px 16px; border-top: 1px solid var(--vien); }
table.bang tbody tr:nth-child(even) { background: var(--nen-2); }
table.bang td.so { color: var(--tim); font-weight: 700; width: 56px; }
table.bang td.en { font-weight: 500; color: var(--chu); }
table.bang td.vi { color: var(--chu-nhat); }

/* O tim kiem (id #o-tim-kiem) */
.o-tim-bao { background: var(--nen); border-radius: var(--bk); padding: 14px; box-shadow: var(--bong-1); margin-bottom: 20px; }
.o-tim-dong {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; height: 48px;
  border: 1px solid var(--vien); border-radius: 12px;
  background: var(--nen-2); color: var(--chu-mo);
}
.o-tim-dong:focus-within { border-color: var(--tim); box-shadow: 0 0 0 3px var(--tim-lop); }
.o-tim {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 15px; font-family: var(--font); color: var(--chu);
}
.o-tim-goi { font-size: 13px; color: var(--chu-mo); margin: 10px 4px 2px; line-height: 1.5; }
.khong-thay { color: var(--chu-mo); font-size: 15px; padding: 8px 12px; display: none; }

/* Khoi VI DU trong docs — vi du that lay tu noi dung app (unit_01.json,
   lamp.dart...), nen tim nhat + vach tim de tach khoi van ban giai thich */
.vi-du {
  margin: 14px 0 18px;
  padding: 13px 16px;
  background: var(--tim-lop-2);
  border-left: 3px solid var(--tim);
  border-radius: 0 var(--bk) var(--bk) 0;
  font-size: 16px;
}
.vi-du .nhan-vi-du {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tim);
  margin-bottom: 6px;
}

/* Anh chup man hinh that trong tai lieu — mot anh dung giua section */
.anh-tai-lieu {
  display: block;
  width: 100%;
  max-width: 230px;
  margin: 14px auto;
  border-radius: 16px;
  border: 1px solid var(--vien);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
/* Dai nhieu anh canh nhau (vd 4 tab, 4 muc thanh duoi) */
.dai-anh {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin: 14px 0 18px;
}
.dai-anh figure { margin: 0; width: 130px; text-align: center; }
.dai-anh .anh-tai-lieu { max-width: 130px; margin: 0 0 6px; }
.dai-anh figcaption { font-size: 13px; color: var(--chu-mo); }
.vi-du p { margin: 0 0 8px; }
.vi-du p:last-child { margin-bottom: 0; }
.vi-du ul { margin: 0; padding-left: 18px; }
.vi-du li { margin-bottom: 6px; }
.vi-du li:last-child { margin-bottom: 0; }
.vi-du .ipa { font-family: var(--font-ma); font-size: 14px; color: var(--chu-nhat); }

/* Nen toi: mau tim sang hon nen chu tren nut phai doi sang muc tim
   (chu trang tren #A88BD9 chi dat ~2.85:1, khong du doc ngoai troi nang) */
:root[data-theme="toi"] .nut-chinh, :root[data-theme="toi"] .nut-chinh:hover { color: var(--muc-tim); }
:root[data-theme="toi"] .hieu-dau, :root[data-theme="toi"] .chan-trang .hieu-chan span.dau { color: #14111C; }
:root[data-theme="toi"] .bot-dau::before { background-image: url("../img/brand/logo-icon-toi.svg"); }
:root[data-theme="toi"] .bot-loi-nguoi { color: var(--muc-tim); }
:root[data-theme="toi"] .bot-chan button { color: var(--muc-tim); }
:root[data-theme="toi"] .bot-nut { color: var(--muc-tim); }

/* [29/8] Muc luc trang chu — nhay toi day khong bi header che mat dinh section. */
#vi-sao-khac, #den, #tinh-nang, #on-luyen, #bai-hoc, #tai-app { scroll-margin-top: 130px; }

/* [30/8] Nut Muc luc noi — thay HAN cho thanh-o-dau-trang + co che ghim-khi-
   cuon cu (da bo, xem git log truoc commit nay neu can doi chieu). Ly do
   doi: co che cu (IntersectionObserver ghim + an/hien theo huong cuon) qua
   phuc tap, Brian van bat loi that tren may that du da va nhieu lan tren
   Browser pane. Doi sang pattern don gian, GIONG HET .bot-nut da on dinh:
   1 nut tron co dinh, bam moi hien popup — khong con trang thai ghim/cuon
   gi de sai nua. Dat CUNG HANG voi .bot-nut, ben trai no. */
.muc-luc-nut {
  position: fixed; right: 96px; bottom: 24px; z-index: 100;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--nen); color: var(--tim);
  border: 1px solid var(--vien); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(42,26,71,.10), 0 16px 40px rgba(42,26,71,.08);
  transition: transform var(--nhip) var(--duong), box-shadow var(--nhip) var(--duong), opacity .28s ease, visibility .28s ease;
}
.muc-luc-nut:hover { transform: translateY(-2px); }
.muc-luc-nut:active { transform: translateY(-4px) scale(1.01); }
.muc-luc-nut svg { width: 24px; height: 24px; }
.muc-luc-nut.an-cuon { transform: translateY(96px); opacity: 0; visibility: hidden; pointer-events: none; }

.muc-luc-popup {
  position: fixed; right: 96px; bottom: 96px; z-index: 100;
  width: 280px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 150px); overflow-y: auto;
  background: var(--nen); border: 1px solid var(--vien);
  border-radius: var(--bk-lg); padding: 10px;
  box-shadow: 0 8px 20px rgba(42,26,71,.14), 0 28px 64px rgba(42,26,71,.26);
  display: none;
}
.muc-luc-popup.mo { display: block; }
.muc-luc-popup h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--chu-mo); margin: 16px 10px 6px; font-weight: 600;
}
.muc-luc-popup h4:first-child { margin-top: 6px; }
.muc-luc-popup a {
  display: block; padding: 9px 10px; margin-bottom: 2px;
  border-radius: var(--bk-sm);
  font-size: 15px; color: var(--chu-nhat); font-weight: 500; line-height: 1.4;
}
.muc-luc-popup a:hover { background: var(--nen-2); color: var(--tim); text-decoration: none; }
/* Trang co sidebar rieng (tai lieu, desktop) khong can nut noi nay nua */
body.co-sidebar .muc-luc-nut, body.co-sidebar .muc-luc-popup { display: none; }
@media (max-width: 860px) {
  body.co-sidebar .muc-luc-nut { display: flex; }
  body.co-sidebar .muc-luc-popup.mo { display: block; }
  .muc-luc-nut, .muc-luc-popup { right: 84px; }
}
@media (max-width: 420px) {
  .muc-luc-popup { right: 12px; width: calc(100vw - 108px); }
  .muc-luc-nut { right: 84px; }
}

@media (max-width: 900px) {
  /* [29/8] Brian bao du khoang trong duoi header — giam top rieng (giu bottom
     rong de tach voi khung dien thoai ben duoi), khong dong bo voi desktop
     96px nua. */
  .hero .bao { grid-template-columns: 1fr; gap: 40px; padding: 36px 24px 64px; }
  .dien-thoai { justify-self: center; }
}

@media (max-width: 860px) {
  .khoang { padding: 56px 0; }
  /* [29/8] Header -> o tim kiem dang ho ~56px duoi header tren trang tai lieu
     (cung benh voi Muc luc -> noi dung o duoi, da can ve 20px). .khoang-nho
     la khung bao ngoai .docs-khung; grep xac nhan class nay CHI dung o 3 trang
     docs/docs-id/docs-es (khong dung o index/chinh-sach) nen override thang,
     khong anh huong trang khac. Chi doi padding-top, giu padding-bottom 56px
     vi khong lien quan bug nay. */
  .khoang-nho { padding-top: 20px; }
  /* [29/8] Can lai khoang trong Muc luc -> noi dung (Brian: "hoi xa"):
     gap 24->20 (khop gap 20 giua cac the noi dung) + trung hoa padding-bottom
     24px cua .docs-le desktop tran xuong mobile */
  .docs-khung { grid-template-columns: 1fr; gap: 20px; }
  /* [30/8] Sidebar desktop an han tren mobile — thay bang .muc-luc-nut noi
     (xem CSS + nav.js), khong con nam trong dong chay dau trang nua. */
  .docs-le { display: none; }
  .docs-bai section { padding: 24px; }
  .docs-bai section > h2 { font-size: 26px; }
  .nhan-trang { display: none; }
  .khoi-tai { padding: 48px 24px; }
  .bot-khung { right: 12px; left: 12px; width: auto; bottom: 92px; }

  /* Header: an nav ngang, doi thanh nut hamburger + bang xo.
     Nut "Tai app" chuyen thanh icon rieng, luon hien canh hamburger —
     nut chu ban goc trong .dieu-huong bi an di vi da du thua. */
  .tai-icon { display: flex; margin-left: auto; }
  .menu-nut { display: flex; margin-left: 8px; }
  .dieu-huong .nut { display: none; }
  .dieu-huong {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    justify-content: flex-start;
    /* [29/8] Luc DONG phai ve 0 that su: box-sizing border-box khien height
       khong co nho hon padding+border, nen ban cu (padding 10/18 + border giu
       nguyen khi dong) van loi ra dai trang ~29px + 1 duong ke duoi header
       (bug "khoang trang" Brian bat 3 lan). Padding doc + border chi ap khi .mo */
    padding: 0 20px;
    background: var(--nen);
    border-bottom: 0 solid var(--vien);
    max-height: 0; overflow: hidden;
    visibility: hidden;
    transition: max-height var(--nhip) var(--duong), padding var(--nhip) var(--duong), visibility 0s linear var(--nhip);
  }
  .dieu-huong.mo {
    max-height: 320px; padding: 10px 20px 18px;
    border-bottom-width: 1px; box-shadow: var(--bong-2);
    visibility: visible; transition-delay: 0s;
  }
  .dieu-huong a:not(.nut), .dieu-huong .doi-giao-dien { padding: 12px 10px; font-size: 16px; width: 100%; }
  .dieu-huong .nut { margin-left: 0; margin-top: 6px; }

}

/* [29/8→29/8] Dong ngon ngu DONG DAU TRANG — Brian doi tu dropdown-an-trong-menu
   (ban cu, xem git log neu can) sang LUON HIEN, khong can bam moi thay. Dung
   chung ca 6 trang (vi/id/es x index/docs), khong con JS toggle (khong con nut
   xoe — chi la hang link <a> thuong, tu nav.js da go handler cu). Mobile
   trot ngang (overflow-x) vi ten ngon ngu dai (Bahasa Indonesia) de tran hang
   hep — desktop du rong nen khong bao gio thay can cuon. */
/* [29/8] Sua lech trai tren desktop: truoc padding co dinh 24px tu mep man
   hinh, lech voi noi dung con lai (can giua qua .bao max-width). Nay bao qua
   .bao de tu can dung hang voi logo/header/hero. */
.ngon-ngu-hang-dau {
  overflow-x: auto;
  background: var(--nen-2); border-bottom: 1px solid var(--vien);
  scrollbar-width: none;
}
.ngon-ngu-hang-dau::-webkit-scrollbar { display: none; }
.ngon-ngu-hang-dau .bao {
  display: flex; gap: 4px; align-items: center;
  padding: 7px 24px;
}
.ngon-ngu-hang-dau .ngon-ngu-muc {
  flex-shrink: 0; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--chu-nhat);
}
.ngon-ngu-hang-dau .ngon-ngu-muc:hover { background: var(--nen); color: var(--tim); text-decoration: none; }
.ngon-ngu-hang-dau .ngon-ngu-muc.dang-dung { background: var(--tim-lop); color: var(--tim); font-weight: 600; }