/* ============================================================
   BỘ WORKBOOK DROPSHIP & SHOPIFY — hệ thiết kế dùng chung
   hoc.letandao.com/tai-lieu-dropship/
   ============================================================ */
:root{
  --giay:#FAF7F2; --muc:#14181F; --chi:#3D4650; --khoi:#606A75;
  --lua:#BF2A1C; --lua-dam:#8C1A10; --lua-nhat:#FFF6F4;
  --vien:#E6E0D8; --nen:#F2ECE4; --trang:#fff;
  --luc:#2F6B4F; --luc-nhat:#F1F7F3;
  --vang:#B7791F; --vang-nhat:#FFFBEB;
  --lam:#2C5282; --lam-nhat:#EBF4FF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--giay); color:var(--chi);
  font-family:'Be Vietnam Pro','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased; padding-bottom:80px;
}
.bao{max-width:1000px;margin:0 auto;padding:0 20px}
.bao-hep{max-width:820px;margin:0 auto;padding:0 20px}

/* ---------- Thanh điều hướng ---------- */
.thanh{
  position:sticky;top:0;z-index:50;background:rgba(250,247,242,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--vien);
}
.thanh-trong{max-width:1000px;margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ve{font-size:.85rem;font-weight:700;color:var(--khoi);text-decoration:none;white-space:nowrap}
.ve:hover{color:var(--lua)}
.thanh-tien{flex:1;min-width:120px;height:7px;background:var(--nen);
  border-radius:20px;overflow:hidden;border:1px solid var(--vien)}
.thanh-tien i{display:block;height:100%;width:0;background:var(--lua);
  transition:width .3s ease;border-radius:20px}
.phan-tram{font-size:.78rem;font-weight:800;color:var(--lua);
  min-width:72px;text-align:right;white-space:nowrap}

/* ---------- Đầu trang ---------- */
.dau{text-align:center;padding:44px 20px 30px;border-bottom:3px solid var(--muc);margin-bottom:30px}
.nhan{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lua);margin-bottom:10px}
h1{font-size:clamp(1.6rem,4.4vw,2.4rem);font-weight:800;color:var(--muc);
  margin:0 0 12px;line-height:1.18}
.phu{font-size:1.02rem;color:var(--khoi);max-width:640px;margin:0 auto}
h2{font-size:1.18rem;font-weight:800;color:var(--muc);margin:36px 0 6px;
  padding-left:12px;border-left:4px solid var(--lua)}
h3{font-size:1rem;font-weight:800;color:var(--muc);margin:24px 0 8px}
.khi-nao{font-size:.9rem;color:var(--khoi);margin:0 0 14px;padding-left:16px}

/* ---------- Khối nội dung ---------- */
.hop{background:var(--trang);border:1px solid var(--vien);border-radius:14px;
  padding:20px 22px;margin:16px 0;box-shadow:0 2px 8px rgba(20,24,31,.05)}
.canh{background:var(--lua-nhat);border-left:4px solid var(--lua);
  border-radius:0 12px 12px 0;padding:15px 20px;margin:20px 0;font-size:.95rem}
.canh b{color:var(--lua-dam)}
.tot{background:var(--luc-nhat);border-left:4px solid var(--luc);
  border-radius:0 12px 12px 0;padding:15px 20px;margin:20px 0;font-size:.95rem}
.tot b{color:var(--luc)}
.luu{background:var(--vang-nhat);border-left:4px solid var(--vang);
  border-radius:0 12px 12px 0;padding:15px 20px;margin:20px 0;font-size:.95rem}
.luu b{color:var(--vang)}
.nguon{background:var(--lam-nhat);border-left:4px solid var(--lam);
  border-radius:0 12px 12px 0;padding:13px 18px;margin:18px 0;font-size:.86rem;color:var(--chi)}
.nguon b{color:var(--lam)}
.nguon a{color:var(--lam);font-weight:600}

/* ---------- Trường nhập ---------- */
.truong{margin:16px 0}
.truong > label,.nhan-truong{display:block;font-weight:700;color:var(--muc);
  font-size:.95rem;margin-bottom:5px}
.goi-y{font-size:.85rem;color:var(--khoi);margin:0 0 7px;font-style:italic}
input[type=text],input[type=number],input[type=date],input[type=url],textarea,select{
  width:100%;padding:10px 13px;border:1px solid var(--vien);border-radius:9px;
  font-family:inherit;font-size:.95rem;color:var(--muc);background:var(--trang);
  line-height:1.55;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--lua);
  box-shadow:0 0 0 3px rgba(191,42,28,.1)}
textarea{resize:vertical;min-height:78px}
input[type=number]{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Bảng ---------- */
.cuon{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;
  border:1px solid var(--vien);border-radius:12px;background:var(--trang)}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:640px}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--vien);vertical-align:middle}
th{background:var(--nen);font-weight:800;color:var(--muc);font-size:.82rem;
  position:sticky;top:0;z-index:2}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FCFAF7}
td input,td select,td textarea{padding:6px 8px;font-size:.88rem;border-radius:6px}
td.so{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.cot-hep{width:64px}
.cot-vua{width:96px}

/* ---------- Nút ---------- */
.nut{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;
  border-radius:9px;border:1px solid var(--vien);background:var(--trang);
  color:var(--muc);font-family:inherit;font-size:.88rem;font-weight:700;
  cursor:pointer;text-decoration:none;transition:all .15s}
.nut:hover{border-color:var(--lua);color:var(--lua);transform:translateY(-1px)}
.nut-chinh{background:var(--lua);color:#fff;border-color:var(--lua)}
.nut-chinh:hover{background:var(--lua-dam);border-color:var(--lua-dam);color:#fff}
.nut-nho{padding:4px 10px;font-size:.78rem}
.nut-xoa{color:var(--lua);border-color:var(--vien);padding:4px 9px;font-size:.78rem;line-height:1}
.hang-nut{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}

/* ---------- Kết quả tính ---------- */
.ket-qua{background:var(--muc);color:#fff;border-radius:16px;padding:24px;margin:22px 0}
.ket-qua h3{color:#fff;margin:0 0 4px;font-size:1.05rem}
.ket-qua .ghi{color:#A8B2BD;font-size:.87rem;margin:0 0 18px}
.o-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.o{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:11px;padding:14px 16px}
.o .ten-so{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  color:#A8B2BD;font-weight:700;margin-bottom:5px}
.o .gia-tri{font-size:1.5rem;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.15}
.o .chu-thich{font-size:.78rem;color:#8E99A5;margin-top:3px}
.o.noi-bat{background:rgba(191,42,28,.22);border-color:var(--lua)}
.o.noi-bat .gia-tri{color:#FF8A75}
.o.xanh .gia-tri{color:#7BD1A5}
.o.do .gia-tri{color:#FF8A75}
/* Ô nổi bật mang tin tốt thì viền xanh luôn — đừng để viền đỏ cãi nhau với số xanh */
.o.noi-bat.xanh{background:rgba(47,107,79,.22);border-color:#7BD1A5}
.o.noi-bat.do{background:rgba(191,42,28,.22);border-color:var(--lua)}

/* ---------- Phán quyết ---------- */
.phan-quyet{margin-top:18px;padding:16px 20px;border-radius:12px;
  font-weight:700;font-size:1rem;line-height:1.55}
.pq-tot{background:rgba(47,107,79,.2);border:1px solid #7BD1A5;color:#B6E8CD}
.pq-vua{background:rgba(183,121,31,.2);border:1px solid #E9C46A;color:#F5DFA8}
.pq-xau{background:rgba(191,42,28,.2);border:1px solid #FF8A75;color:#FFC4B8}
.pq-cho{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#A8B2BD;font-weight:600}

/* ---------- Nhãn trạng thái ---------- */
.the-nhan{display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:.72rem;font-weight:800;letter-spacing:.03em;white-space:nowrap}
.tn-tot{background:#D9EDE2;color:#1D5238}
.tn-vua{background:#FCEFCD;color:#7A5410}
.tn-xau{background:#FBDDD8;color:#8C1A10}
.tn-cho{background:var(--nen);color:var(--khoi)}

/* ---------- Checklist ---------- */
.dsx{list-style:none;padding:0;margin:12px 0}
.dsx li{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;
  background:var(--trang);border:1px solid var(--vien);border-radius:10px;margin-bottom:8px;
  transition:background .15s,border-color .15s}
.dsx li:has(input:checked){background:var(--luc-nhat);border-color:#A8D5BE}
.dsx input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;
  accent-color:var(--lua);cursor:pointer}
.dsx label{flex:1;cursor:pointer;font-size:.94rem;color:var(--muc)}
.dsx li:has(input:checked) label{color:var(--khoi)}
.dsx .vi-sao{display:block;font-size:.85rem;color:var(--khoi);font-weight:400;margin-top:2px}

/* ---------- Lưới ---------- */
.luoi-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.luoi-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}

/* ---------- Thẻ workbook (trang chủ) ---------- */
.ds{display:grid;gap:13px}
.the{display:flex;gap:16px;align-items:flex-start;background:var(--trang);
  border:1px solid var(--vien);border-radius:14px;padding:17px 19px;
  text-decoration:none;color:inherit;box-shadow:0 2px 8px rgba(20,24,31,.05);
  transition:transform .15s,box-shadow .15s,border-color .15s}
.the:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,24,31,.09);border-color:var(--lua)}
.so{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--muc);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1rem}
.the.uu-tien .so{background:var(--lua)}
.than{flex:1;min-width:0}
.ten{font-weight:800;color:var(--muc);font-size:1.04rem;margin-bottom:3px}
.ten .moi{display:inline-block;background:var(--lua);color:#fff;font-size:.64rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:20px;
  padding:2px 9px;vertical-align:2px;margin-left:7px}
.mo{font-size:.92rem;color:var(--khoi)}
.meta{font-size:.79rem;color:var(--lua);font-weight:700;margin-top:6px}

/* ---------- Chân trang ---------- */
.chan{margin-top:44px;padding-top:20px;border-top:1px solid var(--vien);
  font-size:.86rem;color:var(--khoi);text-align:center}
.chan a{color:var(--lua);font-weight:600}

/* Chừa chỗ cho thanh dính ở trên khi cuộn tới một mục */
.dsx li,.truong,.hop,.cuon,.cap,h2,h3{scroll-margin-top:66px}

ul,ol{padding-left:21px;margin:8px 0}
li{margin:5px 0}
p{margin:9px 0}
code{background:var(--nen);padding:1px 6px;border-radius:5px;
  font-size:.87em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
hr{border:none;border-top:1px solid var(--vien);margin:28px 0}
a{color:var(--lua)}

/* ---------- Điện thoại ---------- */
@media(max-width:640px){
  .bao,.bao-hep{padding:0 15px}
  .dau{padding:32px 15px 24px}
  .hop{padding:16px 15px}
  .ket-qua{padding:18px 16px}
  .the{padding:14px 15px;gap:12px}
  .so{width:36px;height:36px;font-size:.9rem}
  .o .gia-tri{font-size:1.3rem}
  .thanh-trong{padding:8px 15px;gap:10px}
}

/* ---------- In ra giấy / PDF ---------- */
@media print{
  body{background:#fff;padding:0;font-size:11pt}
  .thanh,.hang-nut,.nut,.khong-in{display:none !important}
  .hop,.the,.cuon{box-shadow:none;break-inside:avoid}
  .ket-qua{background:#fff;color:#000;border:2px solid #000}
  .ket-qua h3,.o .gia-tri{color:#000}
  .ket-qua .ghi,.o .ten-so,.o .chu-thich{color:#444}
  .o{background:#f5f5f5;border:1px solid #999}
  .phan-quyet{color:#000;border:1px solid #000;background:#f5f5f5}
  h2{break-after:avoid}
  table{min-width:0;font-size:9pt}
  input,textarea,select{border:1px solid #999}
  a{color:#000;text-decoration:none}
  .dau{padding-top:0}
}