/* ============================================================
   4bds.vn · NỀN GIAO DIỆN APP
   ------------------------------------------------------------
   ⛔ Trang chỉ được THÊM kiểu riêng, KHÔNG dựng lại nền.
      Bài học FnB (đo 24/08/2026): 23/23 trang có <style> riêng,
      chỉ 11 trang dùng hero.css → sửa nhận diện phải rà 23 chỗ.
   Màu lấy từ mau.css — nạp mau.css TRƯỚC file này.
   ============================================================ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
@media(max-width:640px){.wrap{padding:0 14px}}

h1,h2,h3{font-family:'Source Serif 4',Georgia,serif;letter-spacing:-.005em;margin:0;color:var(--ink)}
h1{font-size:clamp(22px,4vw,30px);font-weight:700;line-height:1.25}
h2{font-size:clamp(18px,3vw,23px);font-weight:700;line-height:1.3;margin:0 0 4px}
h3{font-size:17px;font-weight:600;margin:0 0 8px}
p{margin:0 0 12px}
a{color:var(--acc)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--panel);padding:1.5px 5px;border-radius:3px;color:var(--ink2)}

/* ---------- THẺ ----------
   Nét Đông Dương: giấy ngà, viền mảnh màu gỗ, bóng ấm rất nhẹ. */
.the{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin-bottom:14px;box-shadow:0 1px 3px rgba(90,64,40,.05)}
.the-dau{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.the-dau .so{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.the-dau{border-bottom:1px solid var(--line);padding-bottom:10px}

/* ---------- NÚT ---------- */
.nut{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);
  background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:500;
  padding:9px 16px;border-radius:var(--r);cursor:pointer;transition:.12s;text-decoration:none}
.nut:hover{background:var(--panel)}
.nut:disabled{opacity:.45;cursor:not-allowed}
.nut-chinh{background:var(--nav);border-color:var(--nav);color:#F6F0E6;letter-spacing:.01em}
.nut-chinh:hover{background:var(--nav2)}
.nut-phu{background:transparent;border-color:transparent;color:var(--muted)}
.nut-phu:hover{color:var(--ink);background:var(--panel)}
.nut-nho{padding:5px 10px;font-size:12.5px}
.nut-do{border-color:#E4B9B5;color:var(--red);background:var(--red-lt)}

/* ---------- Ô NHẬP ---------- */
.o{margin-bottom:14px}
.o > label{display:block;font-size:13px;font-weight:500;color:var(--ink2);margin-bottom:5px}
.o .goi-y{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
/* ⚠ Ô nhập nào KHÔNG có trong danh sách này là không được tạo kiểu, trình duyệt
   vẽ theo mặc định — ô số điện thoại (type=tel) từng cao đúng 21px vì bị bỏ sót
   (thấy 04/09 khi đo trên điện thoại, nhưng máy bàn cũng bị). Thêm loại ô mới
   thì thêm vào đây. */
input[type=text],input[type=number],input[type=date],input[type=tel],
input[type=email],input[type=url],input[type=search],select,textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--card);
  border:1px solid var(--line2);border-radius:var(--r);padding:10px 12px;transition:.14s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-lt)}
textarea{min-height:88px;resize:vertical;line-height:1.55}
.hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px}

/* ---------- CHIP ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line2);background:var(--card);border-radius:100px;
  padding:7px 15px;font-size:13.5px;cursor:pointer;transition:.14s;user-select:none;color:var(--ink2)}
.chip:hover{border-color:var(--acc);color:var(--acc)}
.chip.chon{background:var(--nav);border-color:var(--nav);color:#F6F0E6}
.chip.nhanh{border-style:dashed;color:var(--muted)}

/* ---------- NHÃN ---------- */
.nhan{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:2px;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.n-xanh{background:var(--acc-lt);color:var(--acc)}
.n-luc{background:var(--grn-lt);color:var(--grn)}
.n-vang{background:var(--amb-lt);color:var(--amb)}
.n-do{background:var(--red-lt);color:var(--red)}

/* ---------- KHỐI NHẮC ---------- */
.nhac{border-left:3px solid var(--line2);background:var(--panel);padding:12px 16px;
  margin:14px 0;font-size:14px;border-radius:0 var(--r) var(--r) 0}
.nhac b:first-child{display:block;margin-bottom:3px;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700}
.nhac.canh{border-left-color:var(--red);background:var(--red-lt)}
.nhac.canh b:first-child{color:var(--red)}
.nhac.tin{border-left-color:var(--acc);background:var(--acc-lt)}
.nhac.tin b:first-child{color:var(--acc)}
.nhac.duoc{border-left-color:var(--grn);background:var(--grn-lt)}
.nhac.duoc b:first-child{color:var(--grn)}

/* ---------- BẢNG ---------- */
.bang{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{background:var(--panel);text-align:left;font-weight:600;padding:9px 13px;font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--line2)}
td{padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}

/* ---------- ĐIỂM CHẤT LƯỢNG ---------- */
.diem{display:flex;align-items:center;gap:14px}
.diem .so{font-family:'Source Serif 4',Georgia,serif;font-size:36px;font-weight:700;line-height:1}
.diem .so small{font-size:16px;color:var(--muted);font-weight:400}
.diem.thap .so{color:var(--red)} .diem.vua .so{color:var(--amb)} .diem.cao .so{color:var(--grn)}
.thanh-diem{flex:1;height:8px;background:var(--panel);border-radius:100px;overflow:hidden;
  border:1px solid var(--line)}
.thanh-diem i{display:block;height:100%;background:var(--grn);transition:width .3s}
.diem.thap .thanh-diem i{background:var(--red)}
.diem.vua .thanh-diem i{background:var(--amb)}

/* ---------- KHUNG CHAT CỦA ÁI ---------- */
.chat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chat-than{padding:20px;min-height:120px}
.ai-hoi{display:flex;gap:12px;margin-bottom:16px}
.ai-mat{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--nav);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.ai-loi{flex:1}
.ai-loi .ten{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px}
.ai-loi .cau{font-family:'Source Serif 4',Georgia,serif;font-size:18px;line-height:1.4}
.chat-chan{border-top:1px solid var(--line);background:var(--panel);padding:14px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.buoc{font-size:12.5px;color:var(--muted)}

/* ---------- LƯỚI ẢNH ---------- */
.luoi-anh{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.o-anh{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel);aspect-ratio:4/3}
.o-anh img{width:100%;height:100%;object-fit:cover;display:block}
.o-anh .ten-anh{position:absolute;left:0;right:0;bottom:0;background:rgba(17,21,27,.78);color:#fff;
  font-size:11px;padding:4px 7px;letter-spacing:.02em}
.o-anh .bo{position:absolute;top:5px;right:5px;background:rgba(17,21,27,.7);color:#fff;border:0;
  width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1}
.o-anh.them{display:flex;align-items:center;justify-content:center;border-style:dashed;
  cursor:pointer;color:var(--muted);font-size:13px;text-align:center;padding:10px}
.o-anh.them:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- TRỐNG ---------- */
.trong{text-align:center;color:var(--muted);padding:34px 20px;font-size:14px}

/* ============================================================
   MÀN CHẠM (điện thoại / máy tính bảng) — chốt 04/09/2026
   ------------------------------------------------------------
   Đo trên iPhone 390 · Android 360 · iPhone SE 320 (04/09): bố cục không tràn
   ngang, khung ảnh vẫn đúng 4:5, không lỗi JS. Chỗ hỏng là CHỖ BẤM QUÁ NHỎ:
   ô nhập chỉ cao 21px, nút nhỏ 32px — dưới chuẩn chạm 44px của cả Apple lẫn Google.

   ⚠ `font-size` ô nhập phải ≥16px: dưới 16px thì Safari iOS TỰ PHÓNG TO trang
     khi bấm vào ô, người dùng phải chụm tay thu lại — lỗi khó chịu mà im lặng.
   Dùng `pointer: coarse` (ngón tay) chứ không dùng bề rộng màn hình: máy tính
   bảng rộng vẫn là ngón tay, cửa sổ hẹp trên máy bàn vẫn là chuột.
   ============================================================ */
@media (pointer: coarse) {
  input[type=text], input[type=number], input[type=date], input[type=tel],
  input[type=search], select, textarea {
    min-height: 44px; font-size: 16px;
  }
  .nut, .nut-nho { min-height: 40px; }
  .nut-nho { padding: 8px 14px; font-size: 13px; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
}

/* chip dẫn sang trang khác — khác hẳn chip chọn, để không ai bấm nhầm */
.chip.chip-di{border-style:dashed;font-weight:600}

/* Lời Ái NHẮC khi thiếu dữ liệu — khác bong bóng thường để nhìn ra ngay,
   nhưng vẫn là Ái nói chứ không phải hộp thoại của trình duyệt. */
.bong.nhac-ai{background:var(--amb-lt);border:1px solid var(--amb);color:var(--amb)}