/* ===== Hệ màu: sơn mài đỏ sẫm + vàng kim, nền giấy ngà (phong cách tiệm vàng Việt Nam) ===== */
:root{
  --nen:#F7F2E7;
  --the:#FFFDF7;
  --vien:#E3D7BE;
  --son-mai:#571522;
  --son-mai-dam:#3E0E18;
  --vang:#C9A227;
  --vang-nhat:#E8D48A;
  --vang-dam:#8F7413;
  --muc:#261B15;
  --muc-mo:#6E5F52;
  --xanh:#2F5D62;
  --do-giam:#A8322F;
  --xanh-tang:#2E6B3F;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  background:var(--nen);
  color:var(--muc);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.55;
}
.hien-thi{font-family:Georgia,"Times New Roman",serif}
.so-lieu{font-family:ui-monospace,"SF Mono",Consolas,Menlo,monospace;font-variant-numeric:tabular-nums}

/* ===== Bảng giá đầu trang — mô phỏng bảng điện tử tiệm vàng ===== */
header{
  background:linear-gradient(160deg,var(--son-mai) 0%,var(--son-mai-dam) 100%);
  color:var(--vang-nhat);
  padding:26px 20px 30px;
  border-bottom:3px solid var(--vang);
}
.khung{max-width:960px;margin:0 auto}
.nhan-tren{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--vang);margin-bottom:6px}
header h1{font-size:26px;font-weight:600;color:#FBF3DC;letter-spacing:.01em}
.bang-gia{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(201,162,39,.35);
  border:1px solid rgba(201,162,39,.55);
  margin-top:18px;
}
.o-gia{background:var(--son-mai-dam);padding:14px 16px}
.o-gia .ten{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,212,138,.75)}
.o-gia .gia{font-size:26px;color:var(--vang-nhat);margin-top:4px;line-height:1.1}
.o-gia .donvi{font-size:11px;color:rgba(232,212,138,.6);margin-top:3px}
.thoi-diem{font-size:12px;color:rgba(232,212,138,.6);margin-top:10px}

/* ===== Thân trang ===== */
main{max-width:960px;margin:0 auto;padding:26px 20px 60px}
section{margin-bottom:34px}
h2{font-size:19px;font-weight:600;margin-bottom:4px}
.mo-ta{font-size:13px;color:var(--muc-mo);margin-bottom:14px}
.the-trang{background:var(--the);border:1px solid var(--vien);border-radius:6px;padding:18px}

/* Nút */
.hang-nut{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 6px}
button{
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  padding:10px 18px;border-radius:5px;border:1px solid transparent;
  transition:background .15s,border-color .15s;
}
button:focus-visible{outline:3px solid var(--vang);outline-offset:2px}
button:disabled{opacity:.55;cursor:wait}
.nut-chinh{background:var(--son-mai);color:#FBF3DC}
.nut-chinh:hover:not(:disabled){background:var(--son-mai-dam)}
.nut-phu{background:transparent;color:var(--son-mai);border-color:var(--son-mai)}
.nut-phu:hover:not(:disabled){background:rgba(87,21,34,.07)}
.nut-vang{background:var(--vang);color:var(--son-mai-dam)}
.nut-vang:hover:not(:disabled){background:var(--vang-dam);color:#FBF3DC}

.trang-thai{font-size:13px;color:var(--muc-mo);min-height:20px;margin-top:6px}
.trang-thai.loi{color:var(--do-giam)}
.trang-thai.ok{color:var(--xanh-tang)}

/* Biểu đồ */
.chon-khoang{display:flex;gap:6px;margin-bottom:12px}
.chon-khoang button{padding:6px 14px;font-size:13px;background:transparent;border:1px solid var(--vien);color:var(--muc-mo)}
.chon-khoang button.dang-chon{background:var(--son-mai);border-color:var(--son-mai);color:#FBF3DC}
.vung-bieu-do{position:relative;height:340px}
.rong{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muc-mo);font-size:14px;text-align:center;padding:0 20px}

/* Nhập tay */
.form-nhap{display:none;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px;align-items:end}
.form-nhap.mo{display:grid}
.form-nhap label{font-size:12px;color:var(--muc-mo);display:block;margin-bottom:4px}
.form-nhap input{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--vien);border-radius:4px;background:#fff}
.form-nhap input:focus-visible{outline:3px solid var(--vang);outline-offset:1px}

/* Dự đoán */
.luoi-du-doan{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.the-du-doan{background:var(--the);border:1px solid var(--vien);border-radius:6px;padding:16px;border-top:3px solid var(--vang)}
.the-du-doan h3{font-size:14px;font-weight:600;margin-bottom:10px}
.dai-gia{display:flex;justify-content:space-between;font-size:13px;margin-top:6px}
.dai-gia .nhan{color:var(--muc-mo)}
.tb{font-size:22px}
.nguon-du-doan{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muc-mo);margin-top:10px;padding-top:8px;border-top:1px dashed var(--vien)}

/* Phân tích */
.ket-qua-phan-tich{white-space:pre-wrap;font-size:14.5px;line-height:1.7;display:none}
.ket-qua-phan-tich.mo{display:block}
.ket-qua-phan-tich strong{color:var(--son-mai)}

/* Lịch sử */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--vien)}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muc-mo);font-weight:600}
th:first-child,td:first-child{text-align:left}
.xoa-dong{background:none;border:none;color:var(--do-giam);font-size:12px;padding:2px 6px;font-weight:400}

/* Nhận định đầu tư */
.luoi-loi-khuyen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.the-loi-khuyen{background:var(--the);border:1px solid var(--vien);border-radius:6px;padding:16px;border-top:3px solid var(--son-mai)}
.the-loi-khuyen h3{font-size:14px;font-weight:600;margin-bottom:10px}
.nhan-thien-huong{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:3px;color:#fff;margin-bottom:10px}
.th-mua{background:var(--xanh-tang)}
.th-quan-sat{background:var(--vang-dam)}
.th-chot-loi{background:var(--do-giam)}
.ly-do-khuyen{font-size:13.5px;line-height:1.6;color:var(--muc)}
.canh-bao-khuyen{font-size:12px;color:var(--muc-mo);margin-top:14px;padding:10px 12px;background:rgba(201,162,39,.1);border-left:3px solid var(--vang);border-radius:0 4px 4px 0}

/* Xin tư vấn */
.o-cau-hoi{width:100%;min-height:96px;font:inherit;font-size:14.5px;line-height:1.6;padding:12px 14px;border:1px solid var(--vien);border-radius:6px;background:#fff;resize:vertical}
.o-cau-hoi:focus-visible{outline:3px solid var(--vang);outline-offset:1px}
.khung-tra-loi{white-space:pre-wrap;font-size:14.5px;line-height:1.7;display:none;margin-top:14px}
.khung-tra-loi.mo{display:block}
.khung-tra-loi strong{color:var(--son-mai)}
.cau-hoi-da-gui{font-size:13px;color:var(--muc-mo);border-bottom:1px dashed var(--vien);padding-bottom:10px;margin-bottom:12px}

/* Nhật ký tư vấn */
.nhat-ky{margin-top:22px;display:none}
.nhat-ky.mo{display:block}
.nhat-ky h3{font-size:14px;font-weight:600;margin-bottom:10px;color:var(--son-mai)}
.muc-nhat-ky{border:1px solid var(--vien);border-radius:6px;margin-bottom:10px;background:#fff}
.muc-nhat-ky summary{cursor:pointer;padding:10px 14px;font-size:13.5px;display:flex;justify-content:space-between;gap:10px;align-items:baseline;list-style:none}
.muc-nhat-ky summary::-webkit-details-marker{display:none}
.muc-nhat-ky summary:focus-visible{outline:3px solid var(--vang);outline-offset:-3px;border-radius:6px}
.muc-nhat-ky summary .ngay-nk{font-size:12px;color:var(--muc-mo);white-space:nowrap}
.muc-nhat-ky .noi-dung-nk{padding:0 14px 12px;font-size:13.5px;line-height:1.65;white-space:pre-wrap;border-top:1px dashed var(--vien);padding-top:10px}
.muc-nhat-ky .noi-dung-nk strong{color:var(--son-mai)}

/* Cảnh báo ngưỡng giá */
@keyframes nhay{0%,100%{opacity:1}50%{opacity:.35}}
.banner-canh-bao{display:none;position:sticky;top:0;z-index:50;padding:12px 20px;text-align:center;font-weight:700;font-size:15px;border-bottom:2px solid;letter-spacing:.01em}
.banner-canh-bao.mo{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.banner-canh-bao.mo .chu-nhay{animation:nhay 1s linear infinite}
.cb-tang{background:#DFF3E4;color:var(--xanh-tang);border-color:var(--xanh-tang)}
.cb-giam{background:#FBE3E2;color:var(--do-giam);border-color:var(--do-giam)}
.nut-tat-cb{font-size:12.5px;font-weight:600;padding:5px 12px;background:transparent;border:1.5px solid currentColor;color:inherit;border-radius:4px}
.gia-nhay{animation:nhay 1s linear infinite}

/* Đánh giá độ chính xác */
.tom-tat-danh-gia{font-size:13.5px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--vien)}
.tom-tat-danh-gia strong{color:var(--son-mai);font-size:15px}
.kq-dung{color:var(--xanh-tang);font-weight:700}
.kq-sai{color:var(--do-giam);font-weight:700}
.kq-cho{color:var(--muc-mo)}

/* Thống kê nhanh */
.luoi-thong-ke{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.o-thong-ke{background:var(--the);border:1px solid var(--vien);border-radius:6px;padding:14px}
.o-thong-ke .ten-tk{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muc-mo)}
.o-thong-ke .so-tk{font-size:21px;margin-top:5px;line-height:1.15}
.o-thong-ke .phu-tk{font-size:12px;color:var(--muc-mo);margin-top:3px}
.tang{color:var(--xanh-tang)}
.giam{color:var(--do-giam)}

/* Danh mục nắm giữ */
.tom-tat-dm{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.o-dm{background:linear-gradient(160deg,var(--son-mai) 0%,var(--son-mai-dam) 100%);color:var(--vang-nhat);border-radius:6px;padding:14px}
.o-dm .ten-dm{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,212,138,.75)}
.o-dm .so-dm{font-size:22px;margin-top:5px;line-height:1.15}
.o-dm .phu-dm{font-size:12px;color:rgba(232,212,138,.65);margin-top:3px}
.form-dm{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;margin-bottom:14px}
.form-dm label{font-size:12px;color:var(--muc-mo);display:block;margin-bottom:4px}
.form-dm input,.form-dm select{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--vien);border-radius:4px;background:#fff}
.form-dm input:focus-visible,.form-dm select:focus-visible{outline:3px solid var(--vang);outline-offset:1px}
.ghi-chu-dm{font-size:12px;color:var(--muc-mo);margin-top:10px;line-height:1.6}

/* So sánh nguồn */
.bang-nguon td.tot{color:var(--xanh-tang);font-weight:700}
.bang-nguon td.xau{color:var(--do-giam)}

/* Nhắc cập nhật */
.nhac-cap-nhat{display:none;font-size:13px;padding:9px 12px;border-radius:5px;background:#FDF3D8;border-left:3px solid var(--vang);color:var(--vang-dam);margin-bottom:12px;font-weight:600}
.nhac-cap-nhat.mo{display:block}

/* Báo cáo tháng */
.khung-bao-cao{white-space:pre-wrap;font-size:14.5px;line-height:1.7;display:none;margin-top:14px}
.khung-bao-cao.mo{display:block}
.khung-bao-cao strong{color:var(--son-mai)}
.hang-checkbox{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;margin-bottom:12px;color:var(--muc-mo)}
.hang-checkbox label{display:flex;align-items:center;gap:6px;cursor:pointer}
.hang-checkbox input{accent-color:var(--son-mai);width:15px;height:15px}
input[type=file]{font-size:13px}

/* Cấu hình API */
.the-cau-hinh{background:var(--the);border:1px solid var(--vien);border-left:4px solid var(--son-mai);border-radius:6px;padding:18px}
.form-api{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:end}
.form-api label{font-size:12px;color:var(--muc-mo);display:block;margin-bottom:4px}
.form-api input,.form-api select{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--vien);border-radius:4px;background:#fff}
.form-api input:focus-visible,.form-api select:focus-visible{outline:3px solid var(--vang);outline-offset:1px}
.form-api input[type=password]{font-family:ui-monospace,monospace;letter-spacing:.05em}
.den-api{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:7px 13px;border-radius:20px;margin-bottom:14px}
.den-api::before{content:'';width:9px;height:9px;border-radius:50%;background:currentColor}
.api-xanh{background:#DFF3E4;color:var(--xanh-tang)}
.api-vang{background:#FDF3D8;color:var(--vang-dam)}
.api-do{background:#FBE3E2;color:var(--do-giam)}
.canh-bao-khoa{font-size:12.5px;color:var(--muc-mo);line-height:1.65;margin-top:14px;padding:11px 13px;background:rgba(168,50,47,.07);border-left:3px solid var(--do-giam);border-radius:0 4px 4px 0}
.canh-bao-khoa strong{color:var(--do-giam)}

footer{background:var(--son-mai-dam);color:rgba(232,212,138,.65);font-size:12.5px;padding:18px 20px;text-align:center;line-height:1.7}

@media (max-width:720px){
  .bang-gia{grid-template-columns:repeat(2,1fr)}
  .o-gia .gia{font-size:21px}
  .luoi-du-doan{grid-template-columns:1fr}
  .luoi-loi-khuyen{grid-template-columns:1fr 1fr}
  .luoi-thong-ke{grid-template-columns:1fr 1fr}
  .tom-tat-dm{grid-template-columns:1fr 1fr}
  .form-dm{grid-template-columns:1fr 1fr}
  .form-api{grid-template-columns:1fr}
  .form-nhap{grid-template-columns:1fr 1fr}
  .vung-bieu-do{height:280px}
}