/* ============================================================
   MODULE MKT — TAB "ẢNH TRUYỀN THÔNG ĐẸP" (kho tư liệu 3 ngăn)
   CSS port 100% từ thiet-ke/10-marketing/mockup-mkt-kho-anh-dep.html
   SCOPE dưới .kad-root → KHÔNG đụng CSS app, KHÔNG đụng .mktg-root.

   ⚠ VÌ SAO KHÔNG DÙNG .mktg-root: marketing.css chứa navy #132443 và
     vàng cam #D99A3E — hai màu Anh Đỉnh CẤM ở tab này. Scope riêng .kad-root
     tự khai biến màu BRAND MIMOSA lấy đúng từ mockup.

   ⚠ BIẾN MÀU khai LẠI cho cả .kad-ov (lớp phủ) — dù overlay nằm TRONG
     .kad-root, khai lại là lưới an toàn (bài học: phần tử gắn body mất var()
     → nút gold nền trắng thành vô hình).
   ============================================================ */
.kad-root{
  /* BRAND MIMOSA — trích thật từ mockup, KHÔNG đổi 1 ký tự */
  --navy:#0C192F;        /* navy đậm */
  --navy2:#16294A;       /* navy rê chuột */
  --navy3:#1E3560;       /* navy sáng — chuyển sắc ảnh bìa album */
  --gold:#E1A147;        /* vàng gold brand */
  --gold-d:#C8862F;      /* vàng đậm rê chuột */
  --gold-bg:#FBF1DE;     /* nền vàng nhạt */
  --gold-line:#EBD4A8;   /* viền vàng nhạt */
  --plum:#5E192F;        /* đỏ mận điểm nhấn */
  --plum2:#6E2038;       /* mận nhạt hơn */
  --plum3:#7A2942;       /* mận sáng — chuyển sắc ảnh bìa váy */
  --paper:#F7F3EC;       /* nền kem brand */
  --card:#FFF; --line:#E6DECF; --line2:#EFE9DD; --soft:#F5F0E7;
  --ink:#201A12; --ink2:#6A5F4E; --ink3:#A99C86;
  --ok:#3E7A4E; --ok-bg:#EAF3EC; --ok-line:#CADFCF;
  --warn:#B67C2A; --warn-bg:#FBF1DE; --warn-line:#EBD4A8;
  --bad:#B23A2A; --bad-bg:#FAEBE7;
  --fb:#1877F2;
  --f:'Roboto',Arial,sans-serif;
  font-family:var(--f); color:var(--ink); font-size:13px; line-height:1.6;
}
.kad-root *{box-sizing:border-box;}
.kad-root button{font-family:var(--f);cursor:pointer;}
.kad-root input,.kad-root select{font-family:var(--f);}

.kad-root h1{font-size:21px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;color:var(--navy);margin:0;}
.kad-root .sub{font-size:12.5px;color:var(--ink3);margin:4px 0 16px;}
.kad-root .ki{width:16px;height:16px;display:inline-flex;flex-shrink:0;}
.kad-root .ki svg{width:100%;height:100%;display:block;}
.kad-root .ki.sm{width:14px;height:14px;} .kad-root .ki.xs{width:13px;height:13px;}

/* ═══ 3 THẺ ĐẾM ═══
   ⚠ app có .kpi TOÀN CỤC (nền trắng + viền + padding) → phải dập tường minh,
     vì ở mockup .kpi là LƯỚI, .kp mới là thẻ. */
.kad-root .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px;
  background:transparent;border:none;padding:0;border-radius:0;overflow:visible;position:static;}
.kad-root .kp{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;}
.kad-root .kp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);}
.kad-root .kp.g::before{background:var(--ok);} .kad-root .kp.y::before{background:var(--plum);}
.kad-root .kp-l{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin-bottom:6px;}
.kad-root .kp-v{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:lining-nums tabular-nums;}
.kad-root .kp.g .kp-v{color:var(--ok);} .kad-root .kp.y .kp-v{color:var(--plum);}
.kad-root .kp-s{font-size:10.5px;color:var(--ink3);margin-top:5px;}

/* ═══ NHÓM (PS đề cử / MKT tự thêm) ═══ */
.kad-root .grp{margin-bottom:22px;}
.kad-root .grp-h{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap;}
.kad-root .grp-i{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.kad-root .grp.ps .grp-i{background:var(--gold);color:#fff;}
.kad-root .grp.mk .grp-i{background:var(--navy);color:var(--gold);}
.kad-root .grp-t{font-size:15px;font-weight:800;}
.kad-root .grp-n{font-size:9.5px;font-weight:900;padding:3px 8px;border-radius:20px;background:var(--soft);color:var(--ink2);border:1px solid var(--line);}
.kad-root .grp-tag{font-size:9.5px;font-weight:800;padding:4px 9px;border-radius:6px;}
.kad-root .grp.ps .grp-tag{background:var(--gold-bg);color:var(--gold-d);border:1px solid var(--gold-line);}
.kad-root .grp.mk .grp-tag{background:var(--navy);color:var(--gold);}
.kad-root .grp-note{font-size:11px;color:var(--ink3);margin-left:auto;}

/* ═══ THANH THÊM ═══ */
.kad-root .addbar{border:2px dashed var(--gold);background:var(--gold-bg);border-radius:11px;padding:12px 15px;margin-bottom:10px;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.kad-root .addbar .ai{width:22px;height:22px;border-radius:6px;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}
.kad-root .addbar input{flex:1;min-width:180px;border:1px solid var(--gold-line);background:#fff;border-radius:8px;padding:9px 11px;font-size:12px;font-weight:600;color:var(--ink);height:38px;}
.kad-root .addbar input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(225,161,71,.18);}
.kad-root .addbar input::placeholder{color:#C7B48C;font-weight:400;}
.kad-root .addbar .go{border:none;background:var(--navy);color:#fff;border-radius:8px;padding:9px 16px;font-size:12px;font-weight:800;height:38px;}
.kad-root .addbar .go:hover{background:var(--navy2);}

/* ═══ THẺ ĐÔI (ngăn 1) ═══
   ⚠ app có .card TOÀN CỤC (overflow:hidden + box-shadow) → dập tường minh. */
.kad-root .card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:8px;
  display:grid;grid-template-columns:1.5fr 150px 150px 160px;gap:14px;align-items:center;
  overflow:visible;box-shadow:none;}
.kad-root .card:last-child{margin-bottom:0;}
.kad-root .card.nl{border-color:var(--gold-line);background:#FEFBF4;}
.kad-root .card.mk{border-left:3px solid var(--navy);}
.kad-root .c-top{display:flex;align-items:center;gap:7px;margin-bottom:4px;flex-wrap:wrap;}
.kad-root .star{color:var(--gold);font-size:13px;filter:none;}
.kad-root .c-ten{font-size:13.5px;font-weight:800;}
.kad-root .c-ma{font-size:9.5px;font-weight:800;padding:3px 7px;border-radius:5px;background:var(--soft);color:var(--ink2);border:1px solid var(--line);}
.kad-root .c-sub{font-size:11px;color:var(--ink3);} .kad-root .c-sub b{color:var(--ink2);font-weight:700;}
.kad-root .drv{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:11.5px;font-weight:800;
  color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 11px;}
.kad-root .drv:hover{border-color:var(--gold);background:var(--gold-bg);}
.kad-root .c-dang{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.kad-root .dl{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--ink3);letter-spacing:.04em;}
.kad-root .dp{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.kad-root .dp.off{opacity:.3;filter:grayscale(1);}
.kad-root .nodang{font-size:10.5px;color:var(--ink3);font-style:italic;}
.kad-root .c-r{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.kad-root .ready{font-size:10px;font-weight:800;padding:5px 10px;border-radius:6px;background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line);white-space:nowrap;}
.kad-root .wait{font-size:10px;font-weight:800;padding:5px 10px;border-radius:6px;background:var(--gold-bg);color:var(--plum);border:1px solid var(--gold-line);white-space:nowrap;}
.kad-root .nhac{border:1px solid var(--plum);background:#fff;color:var(--plum);border-radius:7px;padding:6px 11px;font-size:10.5px;font-weight:800;white-space:nowrap;}
.kad-root .nhac:hover{background:var(--plum);color:#fff;}
.kad-root .edb{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:7px;padding:6px 13px;font-size:11px;font-weight:800;}
.kad-root .edb:hover{border-color:var(--gold);background:var(--gold-bg);color:var(--navy);}

/* ═══ TAB CON ═══ */
.kad-root .subtabs{display:flex;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:5px;margin-bottom:18px;}
.kad-root .subtab{flex:1;border:none;background:transparent;border-radius:8px;padding:11px 10px;font-size:12.5px;font-weight:800;
  color:var(--ink2);display:flex;align-items:center;justify-content:center;gap:7px;}
.kad-root .subtab .st-ic{font-size:15px;}
.kad-root .subtab .st-n{font-size:10px;font-weight:900;padding:2px 7px;border-radius:20px;background:var(--card);color:var(--ink3);border:1px solid var(--line);}
.kad-root .subtab.on{background:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(12,25,47,.25);}
.kad-root .subtab.on .st-n{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.kad-root .subtab:not(.on):hover{background:var(--card);color:var(--navy);}
.kad-root .pane{display:none;} .kad-root .pane.on{display:block;}

/* ═══ THANH LỌC (ngăn Album + Váy) ═══ */
.kad-root .fbar2{display:flex;gap:7px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.kad-root .fbar2 .fl{font-size:10px;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;}
.kad-root .fbar2 select{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 11px;font-size:12px;font-weight:700;color:var(--ink);height:auto;}
.kad-root .fbar2 .add2{margin-left:auto;border:none;background:var(--navy);color:#fff;border-radius:8px;padding:9px 15px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:6px;}
.kad-root .fbar2 .add2:hover{background:var(--navy2);}
.kad-root .fbar2 .add2 b{color:var(--gold);font-size:14px;}

/* ═══ FEED DỌC KIỂU TIKTOK / REDNOTE ═══ */
.kad-root .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kad-root .gcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;}
.kad-root .gcard:hover{border-color:var(--gold);box-shadow:0 8px 22px rgba(12,25,47,.12);transform:translateY(-2px);transition:.16s;}
/* ẢNH BÌA DỌC TO — chiếm cả phần trên thẻ, tỷ lệ 3:4 */
.kad-root .cover{width:100%;aspect-ratio:3/4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;}
.kad-root .cover.al{background:linear-gradient(160deg,#1E3560,#16294A 55%,#0C192F);}
.kad-root .cover.va{background:linear-gradient(160deg,#7A2942,#6E2038 55%,#5E192F);}
.kad-root .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.kad-root .cv-ic{font-size:38px;opacity:.42;filter:grayscale(1) brightness(3);}
.kad-root .cv-tx{font-size:10px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.05em;text-align:center;padding:0 10px;}
/* nhãn góc trên ảnh + nút đã đăng đè trên ảnh */
.kad-root .cv-tag{position:absolute;top:10px;left:10px;font-size:9.5px;font-weight:800;padding:5px 9px;border-radius:20px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);white-space:nowrap;z-index:2;}
.kad-root .cv-tag.cc{color:var(--gold-d);} .kad-root .cv-tag.dv{color:var(--navy);}
.kad-root .cv-dang{position:absolute;top:10px;right:10px;display:flex;gap:4px;z-index:2;}
.kad-root .cv-dang .dp{width:26px;height:26px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:none;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.kad-root .cv-thue{position:absolute;bottom:10px;left:10px;font-size:9.5px;font-weight:800;padding:5px 10px;border-radius:20px;white-space:nowrap;z-index:2;}
.kad-root .cv-thue.yes{background:var(--ok);color:#fff;} .kad-root .cv-thue.no{background:var(--bad);color:#fff;}
/* body gọn dưới ảnh */
.kad-root .gc-body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:8px;}
.kad-root .gc-ten{font-size:12.5px;font-weight:800;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px;}
.kad-root .gc-meta{display:flex;flex-wrap:wrap;gap:5px;}
/* ⚠ app có .chip TOÀN CỤC (display:flex + padding 8px 11px) → dập tường minh */
.kad-root .chip{display:inline-block;font-size:9px;font-weight:800;padding:3px 7px;border-radius:5px;white-space:nowrap;}
.kad-root .chip.loc{background:var(--soft);color:var(--ink2);border:1px solid var(--line);}
.kad-root .chip.mau{background:var(--soft);color:var(--ink2);border:1px solid var(--line);}
.kad-root .gc-foot{display:flex;align-items:center;gap:7px;margin-top:2px;}
.kad-root .drv.sm{padding:7px 10px;font-size:10.5px;flex:1;justify-content:center;}
.kad-root .edb.sm2{padding:7px 11px;font-size:10.5px;}

/* ═══ TRỐNG ═══ */
.kad-root .kad-empty{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:26px 18px;text-align:center;color:var(--ink3);font-size:12.5px;}

/* ═══ LỚP PHỦ (form Thêm/Sửa) — ĐẶT TRONG .kad-root để kế thừa biến màu ═══ */
.kad-root .kad-ov{position:fixed;inset:0;background:rgba(12,25,47,.55);z-index:10050;display:none;align-items:center;justify-content:center;padding:18px;}
.kad-root .kad-ov.on{display:flex;}
.kad-root .kad-md{background:var(--card);border-radius:15px;width:100%;max-width:470px;max-height:90vh;overflow:auto;border:1px solid var(--line);}
.kad-root .kad-mh{background:var(--navy);color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:between;gap:10px;border-radius:15px 15px 0 0;}
.kad-root .kad-mh .t{font-size:14px;font-weight:800;flex:1;}
.kad-root .kad-mh .x{background:transparent;border:none;color:rgba(255,255,255,.7);font-size:19px;line-height:1;padding:0 2px;}
.kad-root .kad-mh .x:hover{color:var(--gold);}
.kad-root .kad-mb{padding:16px 18px;display:flex;flex-direction:column;gap:12px;}
.kad-root .kad-fl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin-bottom:5px;display:block;}
.kad-root .kad-mb input[type=text],.kad-root .kad-mb select{width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 11px;font-size:12.5px;font-weight:600;color:var(--ink);height:auto;}
.kad-root .kad-mb input[type=text]:focus,.kad-root .kad-mb select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(225,161,71,.18);}
.kad-root .kad-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.kad-root .kad-pic{border:2px dashed var(--gold-line);background:var(--gold-bg);border-radius:11px;padding:14px;text-align:center;cursor:pointer;}
.kad-root .kad-pic:hover{border-color:var(--gold);}
.kad-root .kad-pic .pt{font-size:11.5px;font-weight:700;color:var(--gold-d);}
.kad-root .kad-pic .ps2{font-size:10.5px;color:var(--ink3);margin-top:3px;}
.kad-root .kad-prev{width:88px;aspect-ratio:3/4;border-radius:9px;object-fit:cover;display:block;margin:0 auto 8px;border:1px solid var(--line);}
.kad-root .kad-mf{padding:13px 18px;border-top:1px solid var(--line2);display:flex;gap:9px;justify-content:flex-end;background:var(--soft);border-radius:0 0 15px 15px;}
.kad-root .kad-b1{border:none;background:var(--navy);color:#fff;border-radius:8px;padding:9px 18px;font-size:12.5px;font-weight:800;}
.kad-root .kad-b1:hover{background:var(--navy2);}
.kad-root .kad-b2{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:8px;padding:9px 16px;font-size:12.5px;font-weight:700;}
.kad-root .kad-bdel{border:1px solid var(--bad);background:#fff;color:var(--bad);border-radius:8px;padding:9px 14px;font-size:12.5px;font-weight:800;margin-right:auto;}
.kad-root .kad-bdel:hover{background:var(--bad);color:#fff;}
/* dải chọn "đã đăng" trong form */
.kad-root .kad-dang{display:flex;gap:7px;flex-wrap:wrap;}
.kad-root .kad-dbtn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;gap:5px;}
.kad-root .kad-dbtn.on{border-color:var(--navy);background:var(--navy);color:#fff;}

/* ═══ ĐIỆN THOẠI ═══ */
@media(max-width:1150px){ .kad-root .grid{grid-template-columns:1fr 1fr 1fr;} }
@media(max-width:900px){
  .kad-root .kpi{grid-template-columns:1fr;}
  .kad-root .card{grid-template-columns:1fr;gap:10px;}
  .kad-root .c-r{flex-direction:row;align-items:center;}
  .kad-root .grp-note{margin-left:0;width:100%;}
  .kad-root .addbar input{min-width:0;}
}
@media(max-width:820px){ .kad-root .grid{grid-template-columns:1fr 1fr;gap:10px;} }
@media(max-width:520px){ .kad-root .kad-two{grid-template-columns:1fr;} .kad-root .fbar2 .add2{margin-left:0;width:100%;justify-content:center;} }