/* =========================================================================
   mobile.css — SUA RIENG CHO DIEN THOAI

   Nap SAU tat ca cac file khoi (truoc animations.css) de ghi de duoc.
   Cac file khoi da co breakpoint rieng cua chung; file nay chi gom nhung
   viec CHI XAY RA TREN DIEN THOAI THAT — thu ma ngoi may ban khong thay:

     1. Ngon tay to hon con tro chuot  -> vung bam toi thieu 44px
     2. iOS tu phong to khi bam vao o nhap co chu < 16px
     3. Thanh dia chi cua trinh duyet an/hien lam 100vh nhay -> dung 100dvh
     4. May co "tai tho" (notch) -> chua le an toan cho thanh noi
     5. Chuot co hover, ngon tay khong -> bo hieu ung chi hop voi chuot
     6. Bang nhieu cot khong doc duoc tren man hinh hep -> xep thanh the

   Thu tu breakpoint trong file: rong -> hep.
   ========================================================================= */

/* ══ 1. VIEC AP CHO MOI KICH THUOC MAN CAM UNG ════════════════════════ */

/* Vet mau xam khi cham tren Android/iOS trong rat ban — tat di, ta da co
   hieu ung :active rieng roi. */
@media (hover: none) {
  * { -webkit-tap-highlight-color: transparent; }

  /* Hieu ung "nhac len khi tro chuot" khong bao gio xay ra tren cam ung,
     nhung no lam thanh phan dinh o trang thai hover sau khi cham — bo han. */
  .card--hover:hover,
  .way:hover,
  .chapter:hover,
  .dlbtn:hover,
  .btn:hover { transform: none; }

  /* Bu lai: cham xuong thi lun nhe, cho biet la da nhan trung. */
  .btn:active { transform: scale(.97); }
  .card--hover:active { transform: scale(.995); }

  /* Chu thich anh trong thu vien chi hien khi tro chuot -> tren dien thoai
     se khong bao gio doc duoc. Cho hien luon. */
  .gallery__cap { opacity: 1; transform: none; }
}

/* Thanh phan dinh o day man hinh phai tranh vung "tai tho" / thanh dieu
   huong cam ung cua iPhone. */
.toasts { padding-bottom: env(safe-area-inset-bottom, 0); }
/* Van nam TREN bong bong chat (chat o bottom:12 tren may nho, cao 54). */
.totop  { right: 18px; bottom: calc(78px + env(safe-area-inset-bottom, 0)); }

/* 100vh tren dien thoai tinh CA phan thanh dia chi -> khi thanh do an di,
   khoi bi cao hon man hinh. dvh la chieu cao THAT dang nhin thay. */
@supports (height: 100dvh) {
  .auth { min-height: 100dvh; }
  .nf   { min-height: 100dvh; }
}


/* ══ 2. MAY TINH BANG VA DIEN THOAI NGANG (≤ 900px) ═══════════════════ */

@media (max-width: 900px) {
  /* Le hai ben hep lai mot chut cho chu duoc rong hon. */
  .container { padding-inline: 18px; }

  /* Nut chinh o hero chiem tron be ngang: ngon tay cai bam de trung hon
     hai nut nho dat canh nhau. */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  /* Hai cot -> mot cot o khoi video va trang ca nhan. */
  .split { grid-template-columns: 1fr; }
}


/* ══ 3. DIEN THOAI (≤ 700px) ══════════════════════════════════════════ */

@media (max-width: 700px) {

  /* ── Vung bam toi thieu ───────────────────────────────────
     Ngon tay cham vao mot vung ~9mm; nut cao 30px la de bam truot sang nut
     ben canh. Nang moi nut nho len 44px — con so cac huong dan giao dien
     (Apple, Google) deu dung. */
  .btn--sm,
  .chip,
  .subtab,
  .car-nav button,
  .board__seg button {
    min-height: 44px;
    padding-inline: 16px;
  }
  .icon-btn { width: 44px; height: 44px; }

  /* Cac hang nut hanh dong (Ghim / Ẩn / Xoá…) tren dien thoai de bi tran
     ra ngoai the -> cho xuong dong va gian deu. */
  .topic__acts,
  .tbl .acts,
  .comment__foot { flex-wrap: wrap; gap: 8px; }

  /* ── O nhap: 16px de iOS KHONG tu phong to ───────────────
     Safari phong to trang khi tieu diem roi vao o nhap co chu duoi 16px,
     va sau do khong tu thu lai — trang xem nhu vo bo cuc. Day la ly do
     duy nhat co con so 16px cung o day. */
  input, select, textarea,
  .field input, .field select, .field textarea,
  .docs__find, .filters select, #search {
    font-size: 16px;
  }

  /* ── Thanh tren TRANG TRONG (.topbar): mot hang cho vua 375px ────────
     5 nut (logo · linh vuc · VI/EN · giao dien · Đăng xuất) tung phai
     xuong 2 hang tren iPhone. Do: logo 44 + linh vuc thu icon 40 + VI/EN
     70 + trang/toi 44 + Đăng xuất ~86 + khe 8×4 = ~316px — vua. */
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .topbar .brand__name { display: none; }     /* logo vang la du nhan dien */
  .topbar .dombtn b { display: none; }        /* con icon — bam van mo hop chon linh vuc */
  .topbar .dombtn { padding: 10px; }
  .topbar .langsw button { padding: 8px; }
  .topbar .btn--sm { padding-inline: 12px; white-space: nowrap; }

  /* ── Thanh dieu huong ───────────────────────────────────── */
  .nav__inner { gap: 10px; }
  /* Nut ngon ngu thu lai nhung VAN GIU — doi ngon ngu la viec nguoi dung
     can lam ngay o man hinh dau. */
  .langsw button { padding: 9px 9px; }

  /* ── Nut doi linh vuc: xuong ngan keo ─────────────────────
     Cung ly do voi o tai khoan ben duoi — thanh nav 375px khong con cho.
     Ban trong ngan keo van day du chu "Lĩnh vực: Cơ khí". */
  .nav__actions .dombtn { display: none; }
  .drawer__dom { display: block; margin-bottom: 10px; }
  .drawer__dom .dombtn { width: 100%; justify-content: center; min-height: 44px; }

  /* ── O tai khoan: xuong ngan keo ─────────────────────────
     Do o 375px: thuong hieu 142 + ngon ngu 66 + nut tai khoan 99 + doi giao
     dien 44 + ba gach 44 = 457px, tran 82px. Ma <body> dat overflow-x: clip
     nen phan tran KHONG cuon toi duoc — nut ba gach bi cat mat, khong mo
     noi menu. Bo nut tai khoan khoi nav thi con 348px, vua khit.

     Khong mat duong vao tai khoan: shared/js/gate.js do CUNG mot noi dung
     vao o [data-account-slot] trong ngan keo. */
  .nav__actions [data-account-slot] { display: none; }

  /* O tai khoan trong ngan keo: cho nut Đăng nhập chiem tron be ngang, con
     the nguoi dung thi dem le cho bang cac muc menu ben duoi. */
  .drawer__acct { display: block; margin-bottom: 6px; }
  .drawer__acct .btn { width: 100%; }
  .drawer__acct .topbar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }

  /* ── Hero ───────────────────────────────────────────────── */
  .hero { padding-top: calc(var(--nav-h) + 28px); }
  .hero__logo { width: 108px; }
  .stats { gap: 10px; }
  .stat__label { font-size: .62rem; }
  /* Duong ghi kich thuoc kieu ban ve: tren man hep no chen vao anh, bo di. */
  .hero__visual .dim { display: none; }

  /* ── Khoi & tieu de ─────────────────────────────────────── */
  .section { padding-block: 56px; }
  .sec-head { margin-bottom: 28px; }

  /* ── Bang chuyen nhan xet: mot the day man hinh ─────────── */
  .rail { grid-auto-columns: 86%; }

  /* ── Thu vien anh: mot cot, o thap hon ──────────────────── */
  .gallery { grid-auto-rows: 160px; }

  /* ── Hop thoai & o tim: dang "tam trang truot len" ────────
     Tren dien thoai, hop thoai noi giua man hinh nhin nho va lac long.
     Cho no bam day man hinh, chiem tron be ngang — giong cach cac ung dung
     dien thoai lam. */
  .modal { padding: 0; align-items: end; }
  .modal__box {
    width: 100%;
    max-height: 92dvh;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
  }
  .modal.is-open .modal__box { transform: none; }

  .pal { padding: 0; align-items: end; }
  .pal__box {
    width: 100%;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
  }
  .pal.is-open .pal__box { transform: none; }
  .pal__list { max-height: 55dvh; }
  /* Dong nhac phim tat vo nghia tren dien thoai (khong co ban phim). */
  .pal__foot { display: none; }

  /* ── Xem anh phong to: nut to hon, dat trong tam voi ngon tay ── */
  .lb-btn { width: 48px; height: 48px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }

  /* ── Dien dan ───────────────────────────────────────────── */
  /* Cot vote hep lai, nhuong cho tieu de. */
  .topic { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 16px 14px; }
  .vote__btn { width: 40px; height: 38px; }
  .vote__l { display: none; }

  /* ── Bang bien thanh THE ─────────────────────────────────
     Bang 5-6 cot tren man hinh 360px thi cuon ngang moi tay ma van khong
     hieu dang doc cot nao. Xep lai: moi HANG thanh mot the, moi O mot dong
     co nhan cot dat ben trai.

     Nhan lay tu thuoc tinh data-label — do js/mobiletable.js doc <th> roi
     gan vao tung <td>. Bang nao khong duoc gan thi van cuon ngang binh
     thuong, khong vo. */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  /* PHAI viet "table.tbl": admin.css dat min-width 640px bang selector do
     (manh hon .tbl tran) — viet yeu hon la thua cascade, bang van banh
     640px trong hop ~347px, gia tri chay khoi man hinh (da dinh that
     tren iPhone 31/08). */
  table.tbl, .tbl { min-width: 0; }

  .tbl tr {
    border-bottom: var(--hair) solid var(--border);
    padding: 6px 0;
  }
  .tbl tr:last-child { border-bottom: 0; }

  .tbl td {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px 14px;
    border: 0;
    text-align: left;
  }
  .tbl td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  /* O khong co nhan (cot nut bam) thi tra ve mot cot cho rong. */
  .tbl td:not([data-label])::before { content: none; }
  .tbl td:not([data-label]) { grid-template-columns: 1fr; }
  .tbl .num { text-align: left; }

  /* ── Ban quyen: ma dai, cho xuong dong rieng ────────────── */
  .lic__key { flex-wrap: wrap; }
  .lic__key code { flex: 1 0 100%; font-size: .92rem; }

  /* ── Chan trang ─────────────────────────────────────────── */
  .footer__grid { gap: 28px; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}


/* ══ 4. DIEN THOAI HEP (≤ 420px) ══════════════════════════════════════ */

@media (max-width: 420px) {
  .container { padding-inline: 14px; }

  /* Ba o so lieu o hero: 360px chia ba la chu chen nhau -> hai hang. */
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .stats .stat:last-child { grid-column: 1 / -1; }

  /* Bon o so lieu trang ca nhan -> hai hang hai o. */
  .prof__stats { grid-template-columns: repeat(2, 1fr); }

  /* Ten dai trong menu tai khoan lam tran thanh nav. */
  .acct__btn { padding: 4px; }

  .rail { grid-auto-columns: 92%; }
}


/* ══ 5. THANH TAI VE DINH DAY MAN HINH (chi tren dien thoai) ══════════
   Nguoi xem tren dien thoai cuon rat lau moi toi khoi Tai ve. Mot thanh
   nho dinh o day man hinh giu nut do luon trong tam tay.

   js/stickycta.js AN no di khi nguoi dung da cuon toi khoi Tai ve that —
   de khong co hai nut "Tai ve" chong nhau tren cung mot man hinh. */
.mobar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;                  /* mac dinh an; media query ben duoi bat */
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  border-top: var(--hair) solid var(--border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.mobar.is-on { transform: none; }

.mobar__txt { flex: 1; min-width: 0; }
.mobar__t { font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; }
.mobar__s { font-size: var(--fs-xs); color: var(--text-faint); }
.mobar .btn { flex: none; }

@media (max-width: 700px) {
  .mobar { display: flex; }
  /* Chua cho thanh do, khong thi no che mat dong cuoi cua chan trang. */
  body.has-mobar .footer { padding-bottom: 84px; }
}

/* ══ 6. THANH DAU TRANG CUA CAC TRANG TRONG (.topbar) ═════════════════
   Trang chu co nut ba gach + ngan keo; cac trang trong (tai khoan, quan tri,
   dien dan, tai lieu…) thi khong — chung dat thang cac nut len .topbar.
   Tren man hinh 360px hang nut do tran ra ngoai.

   Cach xu ly: cho hang nut XUONG DONG thay vi tran. Thanh dau trang cao hon
   mot chut tren dien thoai, doi lai khong mat nut nao. */
@media (max-width: 700px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 10px;
    padding-block: 10px 12px;
  }
  /* Ten thuong hieu chiem tron dong dau, nut xuong dong duoi. */
  .topbar .brand { flex: 1 0 100%; }
  .topbar .btn--sm { padding-inline: 12px; }
}

/* Man hinh rat hep: bo chu trong logo, chi giu bieu tuong — de con cho
   cho cac nut. */
@media (max-width: 380px) {
  .topbar .brand__name { display: none; }
  .topbar .brand { flex: none; }
}