/* ==========================================================================
   HỆ THIẾT KẾ DEALVERSE - FILE SINH TỪ docs/DESIGN.md §8 CỦA dealverse-platform.
   ĐỪNG SỬA TAY. Sửa ở DESIGN.md §8 rồi sinh lại, nếu không hai nơi sẽ lệch nhau
   và trang công cụ sẽ trông khác trang deal mà không ai biết vì sao.

   VÌ SAO TÁCH RA FILE RIÊNG THAY VÌ DÁN VÀO TỪNG TRANG:
   DESIGN.md §8 viết cho luồng Gemini, nơi mỗi công cụ là MỘT file HTML tự chứa nên buộc
   phải dán lặp. Ở đây các trang do chính repo dựng, nên một file dùng chung vừa được
   trình duyệt cache lại giữa các trang, vừa bảo đảm 6 công cụ không bao giờ lệch phong cách.
   ========================================================================== */

/* DealVerse · hệ thiết kế · nguồn chuẩn: docs/DESIGN.md - chép NGUYÊN khối, đừng sửa lẻ */
:root{
  color-scheme:light dark;
  --dv-nen:#F3F7F5;            /* Mist - nền trang */
  --dv-be-mat:#FFFFFF;         /* thẻ, ô nhập */
  --dv-nen-nhan:#EAF2FE;       /* nền nhạt ăn theo Deal Blue */
  --dv-duong-ke:#DCE6E4;       /* đường kẻ trang trí, KHÔNG làm viền ô nhập */
  --dv-vien-o:#7A8E94;         /* viền ô nhập, vùng thả file */
  --dv-vien-the:transparent;
  --dv-chu:#0F1A1E;            /* Ink - chữ thân */
  --dv-tieu-de:#0B3A46;        /* Deep Water - tiêu đề, số chính */
  --dv-chu-phu:#5E7076;        /* Slate - nhãn phụ, gợi ý */
  --dv-diem-nhan:#1E6FD9;      /* Deal Blue - màu nhấn DUY NHẤT */
  --dv-chu-tren-nhan:#FFFFFF;
  --dv-lien-ket:#1A63C4;       /* Deal Blue đậm cho CHỮ: link, mã giảm giá */
  --dv-tot-nen:#E7F5EE;--dv-tot-vien:#2F9E68;--dv-tot-chu:#1F7A4E;
  --dv-xau-nen:#FCEDEF;--dv-xau-vien:#D6455E;--dv-xau-chu:#B42F48;
  --dv-nen-dam:#0B3A46;--dv-chu-tren-dam:#FFFFFF;--dv-chu-phu-tren-dam:#BFD3D8;
  --dv-bong:0 4px 24px rgba(11,58,70,.06);
  --dv-bong-noi:0 12px 48px rgba(11,58,70,.10);
  --dv-bo-vien:999px;--dv-bo-the:20px;--dv-bo-o:12px;
  --dv-font:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --dv-nen:#081F26;--dv-be-mat:#0E2C35;--dv-nen-nhan:#12354A;
    --dv-duong-ke:#1E4450;--dv-vien-o:#6A8790;--dv-vien-the:#1E4450;
    --dv-chu:#E6EFF1;--dv-tieu-de:#F3F7F5;--dv-chu-phu:#9DB2B8;
    --dv-diem-nhan:#6FA8F2;--dv-chu-tren-nhan:#081F26;--dv-lien-ket:#7DB1F4;
    --dv-tot-nen:#0F3324;--dv-tot-vien:#4FC08A;--dv-tot-chu:#6FD39E;
    --dv-xau-nen:#3A1820;--dv-xau-vien:#E06A7F;--dv-xau-chu:#F29AAA;
    --dv-nen-dam:#0E2C35;--dv-chu-tren-dam:#F3F7F5;--dv-chu-phu-tren-dam:#9DB2B8;
    --dv-bong:none;--dv-bong-noi:none;
  }
}

/* nền tảng */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--dv-nen);color:var(--dv-chu);font:400 16px/1.6 var(--dv-font);-webkit-text-size-adjust:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{color:var(--dv-tieu-de)}
h1{font-size:clamp(28px,7vw,40px);font-weight:800;line-height:1.25;letter-spacing:-.01em}
h2{font-size:clamp(20px,5vw,24px);font-weight:700;line-height:1.3}
h3{font-size:18px;font-weight:700;line-height:1.35}
a{color:var(--dv-lien-ket);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--dv-diem-nhan);outline-offset:2px}

/* bố cục */
.dv-trang{max-width:640px;margin:0 auto;padding:24px 16px 48px}
.dv-trang-rong{max-width:1200px}
.dv-xep>*+*{margin-top:16px}
.dv-mo-ta{color:var(--dv-chu-phu)}
.dv-dau-trang{background:var(--dv-nen);border-bottom:1px solid var(--dv-duong-ke)}
.dv-dau-trang>.dv-trang{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.dv-chan-trang{background:var(--dv-nen-dam);color:var(--dv-chu-phu-tren-dam);font-size:14px;line-height:1.7}
.dv-chan-trang strong{color:var(--dv-chu-tren-dam)}
#dv-nguon{padding-top:16px;border-top:1px solid var(--dv-duong-ke);font-size:13px;color:var(--dv-chu-phu)}
#dv-nguon:empty,#dv-loi:empty{display:none}

/* thẻ */
.dv-the{background:var(--dv-be-mat);border:1px solid var(--dv-vien-the);border-radius:var(--dv-bo-the);box-shadow:var(--dv-bong);padding:20px}
.dv-the-noi{box-shadow:var(--dv-bong-noi)}
@media (max-width:400px){.dv-the{padding:16px}}

/* ô nhập */
.dv-form{display:grid;gap:16px}
.dv-hai-cot{display:grid;gap:16px}
@media (min-width:560px){.dv-hai-cot{grid-template-columns:1fr 1fr}}
.dv-truong{display:grid;gap:6px;align-content:start}
.dv-ten-truong{font-size:14px;font-weight:600;line-height:1.4;color:var(--dv-chu)}
.dv-goi-y{font-size:13px;line-height:1.5;color:var(--dv-chu-phu)}
.dv-o{width:100%;min-height:48px;padding:12px 14px;font:400 16px/1.4 var(--dv-font);color:var(--dv-chu);background:var(--dv-be-mat);border:1.5px solid var(--dv-vien-o);border-radius:var(--dv-bo-o)}
.dv-o-don-vi{position:relative}
.dv-o-don-vi>.dv-o{padding-right:64px}
.dv-o-don-vi>span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--dv-chu-phu);pointer-events:none}
select.dv-o{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A8E94' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.dv-cong-tac{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.dv-cong-tac>input{appearance:none;flex:none;width:52px;height:32px;margin:0;border-radius:var(--dv-bo-vien);background:var(--dv-vien-o);position:relative;cursor:pointer;transition:background .15s}
.dv-cong-tac>input::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#FFFFFF;transition:transform .15s}
.dv-cong-tac>input:checked{background:var(--dv-diem-nhan)}
.dv-cong-tac>input:checked::after{transform:translateX(20px)}

/* nút - mỗi màn hình tối đa MỘT .dv-nut */
.dv-nut,.dv-nut-phu{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border:0;border-radius:var(--dv-bo-vien);font:600 16px/1.2 var(--dv-font);text-decoration:none;cursor:pointer}
.dv-nut{background:var(--dv-diem-nhan);color:var(--dv-chu-tren-nhan)}
.dv-nut-phu{background:transparent;color:var(--dv-tieu-de);box-shadow:inset 0 0 0 1.5px var(--dv-vien-o)}
.dv-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:0;border-radius:var(--dv-bo-vien);background:var(--dv-be-mat);color:var(--dv-tieu-de);box-shadow:inset 0 0 0 1px var(--dv-duong-ke);font:600 14px/1.2 var(--dv-font);cursor:pointer}
.dv-chip[aria-pressed="true"]{background:var(--dv-tieu-de);color:var(--dv-nen);box-shadow:none}

/* kết quả */
.dv-nhan-nho{font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--dv-chu-phu)}
.dv-so-chinh{display:block;margin-top:4px;font-size:clamp(34px,9vw,52px);font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--dv-tieu-de);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dv-so-chinh:empty::before{content:"–";color:var(--dv-chu-phu)}
.dv-dong{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--dv-duong-ke)}
.dv-so-chinh+.dv-dong{margin-top:16px}
.dv-gia-tri{font-weight:700;color:var(--dv-tieu-de);font-variant-numeric:tabular-nums;text-align:right}
.dv-gia-tri-tot{color:var(--dv-tot-chu)}
details.dv-mo-dong{border-top:1px solid var(--dv-duong-ke)}
details.dv-mo-dong>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:12px 0;font-weight:600;color:var(--dv-tieu-de);cursor:pointer}
details.dv-mo-dong>summary::-webkit-details-marker{display:none}
details.dv-mo-dong>summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .15s}
details.dv-mo-dong[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.dv-cuon-ngang{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dv-bang{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
table.dv-bang th,table.dv-bang td{padding:10px 0 10px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--dv-duong-ke)}
table.dv-bang th{font-weight:600;color:var(--dv-chu-phu)}
table.dv-bang th:first-child,table.dv-bang td:first-child{position:sticky;left:0;padding-left:0;padding-right:8px;text-align:left;background:var(--dv-be-mat)}

/* trạng thái - lớp do mã nối dây tự gắn, đừng viết sẵn chữ */
.dv-tot,.dv-canh-bao{padding:14px 16px;border:1px solid;border-radius:var(--dv-bo-o);font-weight:600;line-height:1.5}
.dv-tot{background:var(--dv-tot-nen);border-color:var(--dv-tot-vien);color:var(--dv-tot-chu)}
.dv-canh-bao{background:var(--dv-xau-nen);border-color:var(--dv-xau-vien);color:var(--dv-xau-chu)}

/* nhập file - lời cam kết là điểm bán, không phải chữ nhỏ */
.dv-cam-ket{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--dv-bo-o);background:var(--dv-nen-nhan);color:var(--dv-tieu-de);font-weight:600;line-height:1.5}
.dv-cam-ket>svg{flex:none;width:24px;height:24px;color:var(--dv-lien-ket)}
.dv-vung-tha{display:grid;place-items:center;gap:8px;min-height:140px;padding:24px 16px;text-align:center;border:2px dashed var(--dv-vien-o);border-radius:var(--dv-bo-the);background:var(--dv-be-mat);color:var(--dv-chu-phu);transition:background .15s,border-color .15s}
.dv-vung-tha:hover,.dv-vung-tha.dv-dang-keo{border-color:var(--dv-diem-nhan);background:var(--dv-nen-nhan);color:var(--dv-tieu-de)}

/* kho mã (nhóm A) */
.dv-ma{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;border:1.5px dashed var(--dv-diem-nhan);border-radius:var(--dv-bo-o);background:var(--dv-nen-nhan);color:var(--dv-lien-ket);font:700 15px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}
.dv-huy-hieu{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:var(--dv-bo-vien);background:var(--dv-nen-nhan);color:var(--dv-tieu-de);font-size:13px;font-weight:600;line-height:1.3}