/* ═══════════════════════════════════════════════════════════════════════
   LỚP ÁO BẮC CẦU — kéo trang Marketing và trang MXH về đúng kiểu Lễ tân

   Anh Sơn 30/08/2026: *"tab yana marketing này chưa đổi giao diện giống chữ
   và định dạng trang như dashboard cho đồng bộ chuyên nghiệp"* và
   *"thay đổi giao diện cho nhìn chuyên nghiệp như trang lễ tân"*.
   Chốt: BỎ CỘT DỌC, ba trang nhìn như một phần mềm.

   🔴 VÌ SAO KHÔNG ĐỔI TÊN LỚP TRONG APP:
      Marketing dùng bộ tên lớp riêng (lon · hang · the · nhan · so…) rải khắp
      1.258 dòng HTML và 7 file tab JS. Đổi tên lớp là sờ vào chỗ chạy được,
      đổi 1 chỗ sót là vỡ bố cục mà không ai biết. File này chỉ ĐÈ HÌNH THỨC,
      nạp SAU css gốc, không đụng một dòng logic nào.

   Nạp kèm letan-skin.css (bảng màu + thanh đầu chung). File này chỉ lo phần
   riêng của hai app: giấu thanh đầu cũ, dựng cột dọc nằm xuống, sơn lại màu.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Nền và phông chung ────────────────────────────────────────────── */
body{
  background:var(--l-nen) !important;
  color:var(--l-chu) !important;
  font:14px/1.5 var(--l-font) !important;
  -webkit-font-smoothing:antialiased;
}
/* phông serif vàng kiểu tạp chí — bỏ, cho khớp chữ hệ thống của Lễ tân */
.serif, h1, h2, h3, .ten, .hieu, .dau{
  font-family:var(--l-font) !important;
  letter-spacing:0 !important;
}

/* ═══════════ 1. TRANG MARKETING ═══════════════════════════════════════ */

/* Thanh đầu riêng "YANA MARKETING" — bỏ, đã có thanh đầu chung 8 mục */
#nha > header{display:none !important}

/* Cột dọc nằm xuống thành hàng tab ngang, y như .sidebar của Lễ tân */
#nha .than{display:block !important}
#nha nav#menu{
  position:sticky; top:57px; z-index:29;
  width:auto !important; height:auto !important; min-height:0 !important;
  display:flex !important; flex-direction:row !important; align-items:stretch;
  gap:0 !important; padding:0 8px !important; overflow-x:auto; overflow-y:hidden;
  background:var(--l-the) !important;
  border-bottom:1px solid var(--l-vien) !important;
  box-shadow:none !important;
}
/* nhãn nhóm "CÔNG VIỆC" / "QUẢN TRỊ" — nằm ngang thì thành vách ngăn dọc */
#nha nav#menu > .nhom, #nha nav#menu > .nhan-nho, #nha nav#menu > small{
  display:flex !important; align-items:center;
  padding:0 10px 0 4px !important; margin:0 !important;
  font-size:10px !important; letter-spacing:1.2px; font-weight:700;
  color:var(--l-mo-nhat) !important; white-space:nowrap;
  border-right:1px solid var(--l-vien-nhat);
}
#nha nav#menu > .nhom:first-child,
#nha nav#menu > .nhan-nho:first-child{border-left:0}
/* từng mục: cao 38px, góc vuông, đang-ở thì gạch chân xanh đậm */
#nha nav#menu a, #nha nav#menu button, #nha nav#menu > div[onclick]{
  min-height:38px !important; height:38px !important;
  display:flex !important; align-items:center; gap:6px;
  padding:0 12px !important; margin:0 !important;
  border-radius:0 !important; border:0 !important;
  background:transparent !important; color:var(--l-chu) !important;
  font-size:13px !important; font-weight:500 !important;
  white-space:nowrap; box-shadow:none !important;
  border-bottom:2px solid transparent !important;
}
#nha nav#menu a:hover, #nha nav#menu button:hover{
  background:var(--l-nen2) !important;
}
#nha nav#menu .dang-o, #nha nav#menu .active, #nha nav#menu .chon,
#nha nav#menu a.on, #nha nav#menu button.on{
  background:var(--l-chinh-nhat) !important;
  color:var(--l-chinh-dam) !important; font-weight:700 !important;
  border-bottom:2px solid var(--l-chinh) !important;
}
#nha main#noi-dung{
  padding:14px 16px !important; max-width:1250px;
}

/* ═══════════ 2. TRANG MXH (Hồ sơ các trang) ═══════════════════════════ */

/* Trang này vốn đã là thanh ngang — chỉ sơn lại, không dựng lại */
body > .thanh{
  position:sticky; top:57px; z-index:29;
  background:var(--l-the) !important;
  border-bottom:1px solid var(--l-vien) !important;
  color:var(--l-chu) !important;
  padding:8px 16px !important; gap:10px;
  box-shadow:none !important;
}
/* chữ "YANA BEAUTY" trùng với thanh đầu chung → bỏ cho đỡ hai lần thương hiệu */
body > .thanh > .hieu{display:none !important}
body > .thanh .n{
  height:28px; display:inline-flex; align-items:center; padding:0 10px;
  border:1px solid var(--l-vien) !important; border-radius:var(--l-r) !important;
  background:var(--l-the) !important; color:var(--l-chu) !important;
  font-size:12px !important; text-decoration:none;
}
body > .thanh .n:hover{background:var(--l-nen2) !important}
body > .thanh input.tim{
  height:28px; padding:0 10px; font-size:13px;
  border:1px solid var(--l-vien) !important; border-radius:var(--l-r) !important;
  background:var(--l-the) !important; color:var(--l-chu) !important;
}

/* ═══════════ 3. Thẻ, bảng, nút — dùng chung cho cả hai trang ══════════ */
.the, .lon, .card, .o, .khoi, .luoi > div{
  background:var(--l-the) !important;
  border:1px solid var(--l-vien) !important;
  border-radius:var(--l-r) !important;
  box-shadow:none !important;
}
table{border-collapse:collapse; font-size:13px}
th{
  background:var(--l-nen2) !important; color:var(--l-mo) !important;
  font-size:11px !important; letter-spacing:.4px; text-transform:uppercase;
  font-weight:700; border-bottom:1px solid var(--l-vien) !important;
}
td{border-bottom:1px solid var(--l-vien-nhat) !important}
td.so, th.so, .so-phai{text-align:right; font-variant-numeric:tabular-nums}

button, .nut, .nut-chinh, .nutto, .primary-button{
  border-radius:var(--l-r) !important; font-family:var(--l-font) !important;
  font-size:13px !important;
}
.nut-chinh, .nutto, button.chinh{
  background:var(--l-chinh) !important; color:#fff !important;
  border:1px solid var(--l-chinh-dam) !important;
}
.nut-phu, .nutphu, .secondary-button{
  background:var(--l-the) !important; color:var(--l-chu) !important;
  border:1px solid var(--l-vien) !important;
}

input, select, textarea{
  font-family:var(--l-font) !important; font-size:13px !important;
  border-radius:var(--l-r) !important;
  border:1px solid var(--l-vien) !important;
  background:var(--l-the) !important; color:var(--l-chu) !important;
}

/* ── 4. Màn hình hẹp: hàng tab vẫn cuộn ngang được ────────────────────── */
@media (max-width:900px){
  #nha nav#menu{padding:0 4px !important}
  #nha main#noi-dung{padding:12px 10px !important}
  body > .thanh{flex-wrap:wrap; padding:8px 10px !important}
}

/* ── 5. Màn ĐĂNG NHẬP không được có thanh đầu chung ───────────────────── */
/* 🔴 Bẫy: #cua (màn đăng nhập của Marketing) KHÔNG bị xoá khỏi trang sau khi
   đăng nhập, nó chỉ bị ẩn đi. Nên luật "body:has(#cua)" khớp MÃI MÃI — viết
   kiểu đó là nội dung chui hẳn xuống dưới thanh đầu, mà lỗi chỉ hiện sau khi
   đăng nhập nên rất dễ ship nhầm.
   Mốc đúng: đăng nhập xong JS mới gán #nha style="display:block". Bám mốc đó. */
body:has(.login-shell){padding-top:0 !important}
body:has(#cua){padding-top:0 !important}
body:has(#cua) .dash-bar{display:none !important}
body:has(#cua):has(#nha[style*="block"]){padding-top:57px !important}
body:has(#cua):has(#nha[style*="block"]) .dash-bar{display:flex !important}

/* ═══════════ 6. ĐỔI TẬN GỐC BẢNG MÀU CỦA APP MARKETING ════════════════
   Anh Sơn 30/08/2026 nhìn màn trong: *"bấm vào chưa đồng bộ này"*.
   Bố cục đã đúng nhưng MÀU vẫn là bộ cũ — vàng kim #C6A23D ở số liệu và
   link, nâu #8a7a66 ở chữ phụ. Dashboard thì xanh #12457c.

   App khai màu bằng biến (--gold · --nau · --kem · --den), dùng 55 chỗ.
   Nạp đè biến là đổi được cả 55 chỗ một lượt, không phải sửa từng dòng.

   🔴 CHỈ đè trong #nha (màn đã đăng nhập). Màn cửa vào #cua giữ nguyên nền
      tối — ở đó chữ là chữ TRẮNG, đổi nền sang sáng là chữ tàng hình. */
#nha{
  --gold:#12457c; --gold-nhat:#e8eef6; --gold-dam:#0d3560;
  --nau:#1a2733;  --den:#eef1f5;
  --kem:#ffffff;  --kem-dam:#f3f6f9;
  --xanh:#146c43; --do:#a4231b;
}

/* Chữ phụ nâu #8a7a66 cắm cứng 37 chỗ — không đổi bằng biến được,
   phải gọi đích danh mấy lớp đang dùng nó. */
#nha .nho, #nha .phu, #nha .o .nhan, #nha .o .duoi,
#nha .bai .meta, #nha .trong, #nha .so-bai span{
  color:var(--l-mo) !important;
}
#nha .den-bai.tat{background:var(--l-nen2) !important; color:var(--l-mo) !important}

/* Số to trong thẻ: bỏ vàng kim, về xanh công sở, canh số đều nhau */
#nha .o .so, #nha .so.to, #nha .lon .so{
  color:var(--l-chinh) !important;
  font-variant-numeric:tabular-nums;
  font-family:var(--l-font) !important;
}
/* Dòng gợi ý "☞ …" đang vàng → xanh cho đọc được trên nền sáng */
#nha .goi-y, #nha .huong-dan, #nha a{color:var(--l-chinh) !important}

/* ═══════════ 7. GIẢI CỨU THANH ĐẦU CHUNG KHỎI LUẬT nav{} CỦA APP ══════
   🔴 LỖI ANH SƠN CHỈ 30/08/2026: *"bấm vào chưa đồng bộ này"* — giữa thanh
   đầu có một MẢNG NÂU 230px chắn ngang.

   Gốc bệnh: app marketing viết `nav{width:230px; background:var(--nau)}` —
   selector THEO THẺ, không khoanh vùng. Thanh đầu chung do thanh-dau.js dựng
   cũng dùng thẻ <nav>, nên ăn trọn luật đó: rộng 230px, nền nâu, chữ be.

   📏 Bài học đo được: app nào có selector theo thẻ trần (nav · header · main)
   thì nạp thanh đầu chung vào là đụng. Phải trả .dash-bar về nguyên trạng
   TRƯỚC, đừng chỉ sơn phần thân.
   Trả đúng theo letan-skin.css dòng 47–51, không tự chế số mới. */
.dash-bar nav{
  width:auto !important; flex:1 !important; flex-shrink:1 !important;
  background:transparent !important; padding:0 !important;
  min-height:0 !important; height:auto !important;
  display:flex !important; flex-direction:row !important;
  align-items:center !important; gap:2px !important;
  border:0 !important; box-shadow:none !important;
  overflow-x:auto !important; overflow-y:visible !important;
  position:static !important; margin:0 !important;
}
.dash-bar nav a{
  color:rgba(255,255,255,.86) !important; background:transparent !important;
  font-size:13px !important; font-weight:600 !important;
  padding:7px 12px !important; margin:0 !important;
  border-radius:var(--l-r) !important; border:0 !important;
  line-height:1.2 !important; height:auto !important; min-height:0 !important;
  display:inline-flex !important; align-items:center; gap:0 !important;
  opacity:1 !important; cursor:pointer !important;
}
.dash-bar nav a:hover{background:rgba(255,255,255,.12) !important; color:#fff !important}
.dash-bar nav a.dang-o{background:#fff !important; color:var(--l-chinh-dam) !important}

/* header{} của app cũng là selector theo thẻ — chặn nốt kẻo nó đè chỗ khác */
.dash-bar, .dash-bar *{font-family:var(--l-font) !important}

/* ═══════════ 4. Ba banner nhắc việc + thẻ báo thiếu số (13/09/2026) ═══════
   🔴 Anh Sơn: "lỗi màu. nhìn ko chuyên nghiệp" · "ko đồng bộ với nền xanh trắng vốn có".
   Gốc bệnh: trang page-web vốn thiết kế tông TỐI; file áo này đã khoác tông sáng cho
   .the .o .card ... nhưng SÓT .nxi (3 banner đầu trang) và .chuathay — hai chỗ đó giữ
   nền tối cố định nên nằm chỏng chơ giữa nền trắng, chữ lại ăn màu navy tối của bộ áo
   chung nên gần như không đọc được.
   🔑 Chữa bằng ĐÚNG bảng màu letan có sẵn, không tự chế màu mới. */
.nxi{
  border-radius:var(--l-r) !important;
  border-left-width:3px !important;
  color:var(--l-chu) !important;
  font-size:13px !important;
}
.nx-gap{  /* thiếu/nghẽn — đỏ */
  background:var(--l-do-nhat) !important;
  border-color:var(--l-do) !important;
}
.nx-canh{ /* nhắc việc — vàng */
  background:var(--l-vang-nhat) !important;
  border-color:var(--l-vang) !important;
}
.nx-tin{  /* tin tốt — xanh */
  background:var(--l-xanh-nhat) !important;
  border-color:var(--l-xanh) !important;
}
.chuathay{ /* thẻ "Facebook chưa cho đọc số này" nằm trong từng thẻ trang */
  background:var(--l-do-nhat) !important;
  color:var(--l-do) !important;
  border:1px solid var(--l-vien-nhat) !important;
  border-radius:var(--l-r) !important;
}