/* ======================================================================
   GIAO DIỆN MẪU A — "Tươi mát" (từ 1.33.0)
   Nạp SAU theme.css và SAU <style> riêng của từng trang, nên chỉ ghi đè
   phần nhìn: màu, chữ, bo góc, bóng. Không đổi bố cục chức năng.
   ====================================================================== */
:root{
  --bg:#F2FAF4; --card:#FFFFFF; --border:#E4EFE7; --text:#10281A; --ink:#10281A; --muted:#55705E;
  --green-l2:#E3F5DF; --blue:#00552B; --blue-d:#003D1F;
  --grad:#00552B; --grad-l:#5DC24C;
  --shadow:0 6px 18px rgba(0,85,43,.06);
  --shadow-lg:0 18px 48px rgba(6,53,29,.16);
  --r:22px;
  --o-nen:#F6FAF7; --o-vien:#E1EDE4;
}
*{font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;}
body{background:var(--bg);}
h2{font-weight:700; letter-spacing:-.2px;}
::selection{background:#CDEFC6;}

/* ----- ô nhập ----- */
input:where(:not([type=checkbox]):not([type=radio])),select,textarea{border:1.5px solid var(--o-vien); border-radius:14px; background:var(--o-nen); padding:11px 14px; color:var(--text);}
input:focus,select:focus,textarea:focus{border-color:#5DC24C; background:#fff; box-shadow:0 0 0 4px #E3F5DF;}
input[type=checkbox],input[type=radio]{accent-color:#00552B;}
label{color:#35503E;}

/* ----- nút: viên thuốc, màu phẳng ----- */
.btn{background:#00552B; border-radius:999px; box-shadow:none; padding:11px 22px; font-weight:700;}
.btn:hover{background:#00461F; box-shadow:0 6px 16px rgba(0,85,43,.22); transform:none; filter:none;}
.btn:active{transform:scale(.98); box-shadow:none;}
.btn.small{border-radius:999px; padding:7px 14px;}
.btn.gray,.btn.secondary{background:#fff; color:#00552B; border:1.5px solid var(--o-vien); box-shadow:none;}
.btn.gray:hover,.btn.secondary:hover{background:#F2FAF4; border-color:#C9E6CF; box-shadow:none;}
.btn.red{background:#DC2626; box-shadow:none;} .btn.red:hover{background:#B91C1C;}
.btn.green{background:#5DC24C; color:#0B3A1E; box-shadow:none;} .btn.green:hover{background:#4FB33F;}
.btn.amber{background:#D97706; box-shadow:none;} .btn.amber:hover{background:#B45309;}

/* ----- thẻ ----- */
.card{border:0; border-radius:22px; box-shadow:var(--shadow); padding:22px;}
.card:hover{box-shadow:var(--shadow);}
.modal{border-radius:24px; padding:24px;}
.modal-bg{background:rgba(6,40,22,.38);}
.msg{border-radius:14px;}

/* ----- bảng ----- */
table.tbl{border:1px solid var(--border); border-radius:16px; background:#fff;}
table.tbl th{background:#F2F8F3; color:#35503E; font-size:12.5px; font-weight:700;}
table.tbl th,table.tbl td{border-right:0; border-bottom:1px solid #EEF4F0; padding:10px 12px;}
table.tbl tr:nth-child(even) td{background:#fff;}
table.tbl tr:hover td{background:#F6FBF7;}
/* 1.36.0: canh thẳng các ô trên cùng 1 hàng */
table.tbl td{vertical-align:middle;}
table.tbl td .btn{margin-top:0;}
table.tbl td select,table.tbl td input:not([type=checkbox]):not([type=radio]){padding:7px 10px; margin:0;}
table.tbl td .ch-acts{align-items:center;}
.st{border-radius:999px; padding:4px 11px;}

/* ----- đăng nhập ----- */
#login-screen{background:var(--bg); position:relative; overflow:hidden;}
#login-screen::before,#login-screen::after{content:""; position:absolute; border-radius:50%; pointer-events:none;}
#login-screen::before{width:420px; height:420px; background:#DDF3E2; top:-160px; right:-140px;}
#login-screen::after{width:240px; height:240px; background:#E8F7EB; bottom:-60px; left:-90px;}
.login-card{position:relative; z-index:1; background:#fff; backdrop-filter:none; border-radius:28px; padding:34px 26px 28px;
  box-shadow:0 14px 40px rgba(0,85,43,.10); max-width:400px;}
.login-card .lg-logo{width:84px; height:84px;}
.login-card h1{font-size:13px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:#3E8E52;}
.login-card p.sub{font-size:26px; font-weight:800; color:#00552B; letter-spacing:-.4px; margin:2px 0 20px;}
.login-card input:not([type=checkbox]){height:50px;}
.login-card .btn{height:54px; font-size:16px;}

/* ----- trang chính: thanh trên sáng màu ----- */
header.top{background:#fff; color:var(--text); border-bottom:1px solid var(--border); box-shadow:0 2px 12px rgba(0,85,43,.05);}
header.top h1{color:#00552B; font-weight:800;}
header.top .who b{background:#E3F5DF; color:#00552B;}
.g-btn{border:0; box-shadow:0 2px 10px rgba(0,85,43,.06); font-weight:600; color:#35503E;}
.g-btn:hover{transform:none; box-shadow:0 4px 14px rgba(0,85,43,.12);}
.g-btn.cur,.g-btn.active,.g-menu button.active{background:#00552B; color:#fff; box-shadow:none;}
.g-menu{border:0; border-radius:18px; padding:8px;}
.g-menu button{border-radius:12px; font-weight:600;}
.g-menu button:hover{background:#F2FAF4; padding-left:13px;}

/* điện thoại: thanh đáy nổi, có biểu tượng */
@media(max-width:760px){
  header.top{padding:12px 16px;}
  main{padding:14px 12px calc(110px + env(safe-area-inset-bottom));}
  .card{padding:16px 14px; border-radius:20px;}
  .botnav{left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); border:0; border-radius:24px;
    padding:6px; box-shadow:0 10px 30px rgba(0,85,43,.16);}
  .botnav button{flex-direction:column; gap:3px; padding:6px 2px; font-size:11px; font-weight:600; color:#6B8473; border-radius:16px;}
  .botnav button .ic{display:flex; align-items:center; justify-content:center; width:44px; height:28px; border-radius:999px;}
  .botnav button .ic svg{width:20px; height:20px;}
  .botnav button.cur{background:none; color:#00552B; font-weight:700;}
  .botnav button.cur .ic{background:#E3F5DF;}
  .sheet{border-radius:26px 26px 0 0;}
  .sheet button.it{background:#F6FAF7; border-radius:16px;}
  .sheet button.it.active{background:#00552B;}
  table.rt tr{border:0; border-radius:16px; box-shadow:var(--shadow);}
}

/* ----- thẻ cứu hộ / giao hàng ----- */
.ch-card{border:0; border-left:5px solid var(--amber); border-radius:20px; box-shadow:var(--shadow); padding:14px 16px;}
.ch-info{background:#F2FAF4; border-radius:16px;}
.ch-tin{border-radius:16px;}

/* ======================= CHỨC NĂNG NỘI BỘ ======================= */
.nb-top{background:#fff; color:var(--text); border-bottom:1px solid var(--border); box-shadow:0 2px 12px rgba(0,85,43,.05); padding:10px 18px;}
.nb-top h1{color:#00552B; font-weight:800;}
.nb-top .btn{background:#fff; color:#00552B; border:1.5px solid var(--o-vien);}
.nb-top .btn:hover{background:#F2FAF4;}
.nb-burger{background:#F2F7F3; color:#00552B; border:0; border-radius:12px; padding:8px 13px; font-weight:700;}
.nb-menu{flex-basis:248px; background:#fff; border-right:1px solid var(--border); padding:16px 12px 30px;}
.nb-tim{height:40px; border:0; border-radius:12px; background:#F2F7F3;}
.nb-h{color:#6B8473; font-size:11px; letter-spacing:1px; padding:9px 10px 5px; border-radius:10px;}
.nb-h:hover{background:#F2FAF4;}
.nb-menu a{min-height:38px; padding:8px 12px; border-radius:12px; font-weight:600; color:#35503E;}
.nb-menu a:hover{background:#F2FAF4;}
.nb-menu a.on{background:#00552B; color:#fff; font-weight:700;}
.nb-menu a.on::before{display:none;}
.nb-menu a.on .nb-sc,.nb-menu a.on .nb-dem{background:#5DC24C; color:#0B3A1E;}
.nb-main{padding:22px 28px;}
@media(max-width:760px){ .nb-main{padding:14px 12px;} }
.nb-tab{background:#fff; padding:5px; border-radius:999px; box-shadow:0 2px 10px rgba(0,85,43,.06); display:inline-flex;}
.nb-tab button{border-radius:999px; padding:8px 16px; color:#35503E;}
.nb-tab button.on{background:#00552B; color:#fff; box-shadow:none;}
.nb-the>div{background:#fff; border-radius:18px; padding:12px 16px; box-shadow:var(--shadow);}
.nb-the b{font-size:22px; font-weight:800; color:var(--text);}
.nb-nhac{border-radius:16px;}
.pk-row,.hh-cap{border-radius:16px;}

/* chỉ số hoạt động */
.kpi .o{border:0; border-radius:20px; padding:16px 18px; box-shadow:var(--shadow);}
.kpi .o::before{display:none;}
.kpi .o .t{font-size:12.5px; text-transform:none; letter-spacing:0; font-weight:600; color:#55705E;}
.kpi .o .v{font-size:25px; color:var(--text); letter-spacing:-.5px;}
.cs-card{border:0; border-radius:22px; padding:18px 20px; box-shadow:var(--shadow);}
.cs-card h3{font-size:15px; color:var(--text);}
.bar{background:#EEF6F0;} .bar i{background:#5DC24C;}

/* điều phối: bảng 4 cột theo tiến trình */
.dp-cot{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start;}
@media(max-width:1100px){ .dp-cot{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:640px){ .dp-cot{grid-template-columns:1fr;} }
.dp-c{background:#E8F3EB; border-radius:22px; padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0;}
.dp-c-h{display:flex; align-items:center; gap:8px; padding:2px 4px; font-size:14px; font-weight:700;}
.dp-c-h .nb-cham{width:10px; height:10px; margin:0;}
.dp-c-h .so{margin-left:auto; background:#fff; border-radius:999px; padding:2px 10px; font-size:12px; color:#35503E;}
.dp-c-rong{font-size:12.5px; color:#6B8473; padding:6px 6px 8px;}
.dp-the{border:0; border-left:0; border-radius:16px; box-shadow:0 3px 10px rgba(0,85,43,.05); padding:12px 14px;}
.dp-nhan{border-radius:999px; padding:3px 9px;}
.dp-nhan.cuuho{background:#E3F5DF; color:#00552B;}
.dp-nhan.giao{background:#FFF1D6; color:#9A5B00;}
.dp-tt{border-radius:999px;}
.dp-link{border-radius:12px;}

/* ======== ĐẦU TRANG CÁ NHÂN (1.34.0) ======== */
.dt{display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:16px;}
@media(min-width:900px){ .dt{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:18px; align-items:stretch;} }
.dt-the{background:#00552B; color:#fff; border-radius:24px; padding:18px; display:flex; flex-direction:column; gap:14px;}
.dt-chao{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.dt-chao>div{display:flex; flex-direction:column;}
.dt-xin{font-size:13px; color:#BFE8C6;}
.dt-chao b{font-size:21px; font-weight:800; letter-spacing:-.3px;}
.dt-ngay{font-size:12px; font-weight:600; color:#BFE8C6; margin-top:3px; white-space:nowrap;}
.dt-luoi{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px;}
.dt-o{display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:2px; background:rgba(255,255,255,.1);
  border:0; border-radius:16px; padding:12px 13px; color:#fff; cursor:pointer; margin:0; box-shadow:none; font:inherit; min-width:0;}
button.dt-o:hover{background:rgba(255,255,255,.16);}
.dt-luong{cursor:default;}
.dt-n{display:flex; justify-content:space-between; align-items:center; width:100%; font-size:12px; color:#BFE8C6;}
.dt-v{font-size:24px; font-weight:800; line-height:1.2;}
.dt-luong .dt-v{font-size:19px; white-space:nowrap;}
.dt-luong .dt-v.an{letter-spacing:2px;}
.dt-p{font-size:11.5px; color:#BFE8C6;}
.dt-mat{width:30px; height:30px; margin:-7px -8px -7px 0; padding:0; border:0; background:transparent; color:#BFE8C6;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:none;}
.dt-mat svg{width:17px; height:17px;}
.dt-nut{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;}
.dt-tat{display:flex; flex-direction:column; align-items:center; gap:7px; border:0; background:transparent; padding:0; margin:0;
  font:inherit; font-size:12px; font-weight:600; color:#35503E; cursor:pointer; box-shadow:none;}
.dt-ic{position:relative; width:58px; height:58px; border-radius:20px; background:#fff; color:#00552B; display:flex; align-items:center;
  justify-content:center; box-shadow:0 4px 14px rgba(0,85,43,.07);}
.dt-ic svg{width:24px; height:24px;}
.dt-so{position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:#DC2626; color:#fff;
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); box-sizing:border-box;}
.dt-tat:hover .dt-ic{box-shadow:0 6px 18px rgba(0,85,43,.14);}
@media(min-width:900px){
  .dt-nut{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
  .dt-tat{flex-direction:row; justify-content:flex-start; gap:12px; background:#fff; border-radius:20px; padding:12px 14px;
    font-size:14.5px; font-weight:700; color:var(--text); box-shadow:var(--shadow);}
  .dt-ic{width:44px; height:44px; border-radius:14px; background:#E3F5DF; box-shadow:none; flex-shrink:0;}
  .dt-ic svg{width:22px; height:22px;}
  .dt-chao b{font-size:28px;}
}

/* 1.36.3: máy tính — bỏ giới hạn bề ngang, menu sát mép trái, nội dung dùng hết màn hình */
@media(min-width:861px){
  .nb-wrap{max-width:none; margin:0;}
  main.nb-main{max-width:none; margin:0; padding:16px 22px 40px;}
  .nb-main .card{margin-bottom:14px;}
}
/* thanh lọc trên mỗi màn: ô chọn không chiếm cả hàng */
.nb-sau select{width:auto; flex:0 0 auto; min-width:190px; max-width:280px;}
.nb-sau .chk{white-space:nowrap;}

/* 1.36.4: Điều phối — cột dài quá trang tự rộng gấp đôi, thẻ xếp 2 cột */
.dp-ds2{display:flex; flex-direction:column; gap:10px;}
@media(min-width:1101px){
  .dp-cot{display:flex;}
  .dp-cot>.dp-c{flex:1 1 0;}
  .dp-cot>.dp-c.doi{flex:2 1 0;}
  .dp-c.doi .dp-ds2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;}
}

/* 1.38.0: Bán hàng — thanh tiêu đề xanh lá đậm, ô chiết khấu đ / % */
.modal h2.bn-tieude{margin:-24px -24px 16px; padding:15px 56px 15px 24px; background:#00552B; color:#fff; border-radius:24px 24px 0 0; font-size:18px;}
.modal:has(h2.bn-tieude)>.ch-x{color:#fff; background:rgba(255,255,255,.14); z-index:2;}
.bn-ck{display:flex; gap:4px; align-items:center;}
.bn-ck>input,.bn-ck>.o-tien,.bn-ck>span{flex:1 1 auto; min-width:0;}
.bn-ck select{flex:0 0 52px; width:52px; min-width:0; padding:7px 4px; text-align:center;}
/* 1.42.0: giá theo nhóm mặt hàng */
.cn-ds{display:flex; flex-direction:column; gap:6px;}
.cn-d{display:flex; align-items:center; gap:10px; padding:6px 10px; background:#F2FAF4; border-radius:12px;}
.cn-d span{flex:1; font-weight:600;}
.cn-d select{width:auto; min-width:200px; margin:0;}
/* 1.44.0: biển số / SĐT bấm được */
button.ch-lk{background:none; border:0; padding:0; margin:0; font:inherit; font-weight:700; color:inherit; cursor:pointer;
  text-decoration:none; box-shadow:none; width:auto; min-height:0;}
button.ch-lk:hover{color:inherit; transform:none; filter:none; box-shadow:none;}
/* 1.45.1: chữ bấm được chỉ in đậm, giữ màu chữ thường (Cứu hộ, Điều phối) */
.dp-the .dp-lk{color:inherit; text-decoration:none;}
.dp-the .dp-lk:hover{color:inherit;}
.tt-bam{background:none; border:0; padding:0; margin:0; cursor:pointer; box-shadow:none; width:auto; min-height:0;}
.tt-bam:hover{transform:none; filter:brightness(.95); box-shadow:none;}
.dp-bs{font-size:13px; margin:2px 0;}
.ch-menu-sdt{display:flex; flex-direction:column; gap:10px;}
.ch-menu-sdt .btn{width:100%; margin:0; text-align:center; text-decoration:none; padding:13px; font-size:15px;}
/* 1.45.0: Lưu động */
.ld-giu{font-size:12.5px; min-width:180px;}
.ld-bar{height:6px; background:#E3EFE6; border-radius:99px; margin-top:4px; overflow:hidden;}
.ld-bar i{display:block; height:100%; background:#5DC24C; border-radius:99px;}
.ld-bar.vang i{background:#E3A008;} .ld-bar.do i{background:#DC2626;}
.ld-nop{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 0; border-top:1px dashed #DCEBDF;}
.ld-nop span{flex:1; min-width:200px;} .ld-nop .btn{margin:0;}
.ld-the{background:#F2FAF4; border:1px solid #DCEBDF; border-radius:18px; padding:14px 16px; max-width:560px;}
.ld-dau{display:flex; justify-content:space-between; gap:10px; margin-bottom:8px;}
.ld-so{text-align:right;} .ld-so b{display:block; font-size:18px; color:#00552B;} .ld-so span{font-size:12px; color:#6B8473;}
.ld-nut{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;} .ld-nut .btn{margin:0; flex:1 1 160px;}
.ld-luoi{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px;}
.ld-k{background:#fff; border:1px solid #DCEBDF; border-radius:18px; padding:12px 14px; box-shadow:0 3px 10px rgba(0,85,43,.05);}
.ld-kh{display:flex; flex-direction:column; margin-bottom:8px;} .ld-kh b{font-size:15px; color:#00552B;} .ld-kh span{font-size:12px;}
.ld-m{display:flex; gap:6px; margin-bottom:8px;} .ld-m div{flex:1; background:#F2FAF4; border-radius:10px; padding:6px 8px;}
.ld-m b{display:block; font-size:13.5px;} .ld-m span{font-size:11px; color:#6B8473;}
.ld-ton{font-size:12.5px; margin-top:8px; max-height:220px; overflow:auto;}
.ld-ton div{display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-bottom:1px dashed #E3EFE6;}
/* 1.46.0: Đối tác CH */
.dt-bac{display:flex; align-items:center; gap:6px; margin:4px 0;} .dt-bac input{margin:0;} .dt-bac .o-tien{max-width:180px;} .dt-bac .btn{margin:0;}
.dt-kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:4px 0 10px;}
.dt-kpi div{background:#F2FAF4; border-radius:12px; padding:8px 10px;} .dt-kpi b{display:block; font-size:15px; color:#00552B;} .dt-kpi span{font-size:11.5px; color:#6B8473;}
.dt-bacs div{display:flex; justify-content:space-between; padding:5px 10px; border-radius:8px; font-size:13px;}
.dt-bacs div.on{background:#E8F3EB; color:#00552B; font-weight:700;}
@media(max-width:640px){ .dt-kpi{grid-template-columns:repeat(2,1fr);} }
/* 1.47.0: nút tự tải lại trên đầu màn */
.card > h2:has(.tu-tai){display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.tu-tai{margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#35503E;}
.tu-tai select{width:auto; margin:0; padding:5px 8px; font-size:12.5px;}
.tu-tai .tt-dem{font-size:12px; color:#6B8473; min-width:52px;}
.tt-cong{display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin:0; font-weight:600;}
.tt-cong input{position:absolute; opacity:0; width:0; height:0;}
.tt-cong i{width:34px; height:20px; border-radius:99px; background:#C9D8CD; position:relative; transition:background .2s;}
.tt-cong i::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tt-cong input:checked + i{background:#00552B;}
.tt-cong input:checked + i::after{left:16px;}
/* 1.47.1: phân bổ tem cho đối tác */
.pb-o{display:flex; gap:6px; align-items:center;} .pb-o input{flex:1; margin:0;} .pb-o .btn{margin:0; white-space:nowrap;}
.pb-ds{display:flex; flex-direction:column; gap:4px; max-height:280px; overflow:auto;}
.pb-ds div{display:flex; align-items:center; gap:10px; padding:6px 10px; background:#F2FAF4; border-radius:10px;}
.pb-ds span{flex:1; font-size:12.5px;}
/* 1.47.3: tên nhóm chức năng nền xanh lá */
.nb-menu .nb-h{background:#5DC24C; color:#0B3A1E; font-weight:800; font-size:11.5px; padding:8px 12px; margin-top:6px;}
.nb-menu .nb-h:hover{background:#4FB33F; color:#06311A;}
.nb-menu .nb-h .nb-mui{opacity:1;}