@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap&subset=vietnamese');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Montserrat',Arial,sans-serif;background:#000;color:#fff}
input,select,button{font-family:inherit}
/* ===== BẢNG GIÁ ===== */
body.board{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.hd{flex:0 0 15vh;display:grid;grid-template-columns:1fr 3fr 1fr;align-items:center;background:#000;padding:0 1vw}
.logo{width:4.2vw;height:4.2vw;min-width:44px}
.shop{text-align:center}.shop h1{color:#fff200;font-size:clamp(28px,3.4vw,72px);font-weight:800;line-height:1.1;letter-spacing:.02em}
.shop p{color:#00e5ff;font-size:clamp(14px,1.4vw,30px);margin-top:.3vh}
.tel{color:#fff200;font-weight:800;font-size:clamp(14px,1.45vw,30px);text-align:right;align-self:start;padding-top:2vh;white-space:nowrap}
.tel svg{vertical-align:-.15em}
.bar{flex:0 0 7vh;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;background:#f00;padding:0 .6vw;font-weight:700}
.bar span:first-child{font-size:clamp(11px,1vw,22px)}.bar span:last-child{text-align:right;font-size:clamp(11px,1.05vw,22px)}
.bar b{text-align:center;color:#fff200;font-size:clamp(20px,2.3vw,50px);font-weight:800}
.main{flex:1;min-height:0;display:flex;gap:.6vw;padding:.6vw;background:#000}
.tbl-wrap{flex:0 0 65%;min-width:0}
.tbl{width:100%;height:100%;border-collapse:collapse;table-layout:fixed;border:1px solid #222}
.tbl th,.tbl td{border:1px solid #6b0000;text-align:center;vertical-align:middle;font-weight:800}
.tbl th{background:linear-gradient(#e00000,#b80000);color:#fff;font-size:clamp(30px,2.8vw,70px)}
.tbl th:first-child{width:40%}
.tbl td{color:#fff200;font-size:clamp(22px,2.8vw,64px);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td:first-child{font-size:clamp(20px,2.8vw,64px)}
.tbl tbody tr:nth-child(odd) td{background:#b30000}.tbl tbody tr:nth-child(even) td{background:#d40000}
.tbl thead tr{height:21%}
.p.flash{animation:fl .4s ease-out}
@keyframes fl{0%{color:#fffbb0}100%{color:#fff200}}
.chart{flex:1;min-width:0;background:#0b0b0b;border:1px solid #222;display:flex;flex-direction:column;position:relative;color:#ddd}
.tb{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid #222}
.tb button{background:none;border:0;color:#ddd;font-weight:700;font-size:15px;padding:4px 8px;border-radius:4px;cursor:pointer}
.tb button.on{background:#2a2e39;color:#fff}
.ttl{padding:8px 12px 0;font-weight:700;font-size:17px}
.ohlc{padding:2px 12px;font-size:12px;color:#aaa;min-height:18px}.ohlc b{color:#ef5350;font-weight:400;margin-right:6px}
.ohlc .up{color:#26a69a;font-style:normal}.ohlc .dn{color:#ef5350;font-style:normal}
.cv{flex:1;position:relative;min-height:0}.cv canvas{position:absolute;inset:0;width:100%;height:100%}
.nodata{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#999;font-size:18px;text-align:center;padding:20px}
/* ===== ADMIN ===== */
body.admin{background:#111;color:#eee;font-size:15px}
.adm-nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:#000;padding:12px 20px;border-bottom:2px solid #d40000}
.adm-nav b{color:#fff200;margin-right:auto}.adm-nav a{color:#00e5ff;text-decoration:none}
.adm-main{max-width:1000px;margin:24px auto;padding:0 16px}.adm-main h1{margin-bottom:16px;color:#fff200}.adm-main h2{margin:24px 0 10px}
.adm-msg{background:#143d1c;border:1px solid #2a8a40;padding:10px;margin-bottom:14px;border-radius:4px}.adm-msg.err{background:#4a1111;border-color:#d40000}
.adm-table{width:100%;border-collapse:collapse}.adm-table th,.adm-table td{border:1px solid #222;padding:8px;text-align:left}.adm-table th{background:#d40000}
input,select{background:#1b1b1b;color:#fff;border:1px solid #333;padding:8px;border-radius:4px;width:100%}
button{background:#d40000;color:#fff;border:0;padding:9px 18px;border-radius:4px;font-weight:700;cursor:pointer}button.danger{background:#555}
.inline{display:flex;gap:8px}.stack{display:flex;flex-direction:column;gap:14px;max-width:420px}.stack label{display:flex;flex-direction:column;gap:4px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.card{background:#1b1b1b;border:1px solid #222;padding:18px;border-radius:6px}
.card span{display:block;color:#aaa}.card b{font-size:30px;color:#fff200}
.login{display:flex;min-height:100vh;align-items:center;justify-content:center}
.login-box{background:#000;border:2px solid #d40000;padding:32px;width:360px;display:flex;flex-direction:column;gap:14px}
.login-box h1{color:#fff200;font-size:22px;text-align:center}.login-box label{display:flex;flex-direction:column;gap:4px}
/* ===== MOBILE ===== */
@media (max-width:900px){
 body.board{height:auto;overflow:auto}.hd{grid-template-columns:1fr;gap:6px;padding:10px;text-align:center;flex:none}
 .logo{margin:auto}.tel{text-align:center;padding:0}.bar{grid-template-columns:1fr;gap:4px;padding:8px;text-align:center;flex:none}.bar span:last-child{text-align:center}
 .main{flex-direction:column}.tbl-wrap{flex:none}.tbl{height:auto}.tbl th,.tbl td{padding:14px 2px}.chart{min-height:380px}
}
/* ===== iPhone / điện thoại dọc: số vừa ô, biểu đồ dài hơn ===== */
@media (max-width:900px) and (orientation:portrait){
 body.board:not(.rot) .tbl th{font-size:3.8vw;padding:12px 0}
 body.board:not(.rot) .tbl td{font-size:3.7vw;padding:18px 0;overflow:hidden}
 body.board:not(.rot) .tbl td:first-child{font-size:3.4vw}
 body.board:not(.rot) .tbl th:first-child{width:38%}
 body.board:not(.rot) .tel{font-size:15px}
 body.board:not(.rot) .tel a{color:inherit;text-decoration:none}
 body.board:not(.rot) .chart{height:68vh;min-height:420px}
}
.shop h1 a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}