@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{
    position:relative;
    font-size:clamp(28px,3.4vw,72px);
    font-weight:900;
    line-height:1.05;
    letter-spacing:.025em;
    color:transparent;
    background:linear-gradient(
        180deg,
        #fffbd8 0%,
        #fff0a0 9%,
        #ffd700 22%,
        #e6ad19 38%,
        #a96800 50%,
        #d89500 58%,
        #ffd83d 70%,
        #fff1a0 84%,
        #b87500 100%
    );
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    background-size:100% 100%;
    text-shadow:
        0 1px 0 #fff8c4,
        0 2px 0 #d59a00,
        0 3px 0 #a66b00,
        0 4px 0 #754800,
        0 5px 0 #4d2d00,
        0 7px 9px rgba(0,0,0,.95),
        0 0 14px rgba(255,215,0,.28);
    filter:drop-shadow(0 0 5px rgba(255,215,0,.22));
}
.shop h1 a{
    position:relative;
    color:transparent;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    background:
        linear-gradient(
            105deg,
            #9a6200 0%,
            #d69d16 12%,
            #fff6b5 24%,
            #ffd700 36%,
            #fff9d2 49%,
            #e7ad1e 61%,
            #fff0a0 75%,
            #b87800 88%,
            #ffe66b 100%
        );
    background-size:240% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:
        0 1px 0 rgba(255,255,255,.95),
        0 2px 0 #d39a00,
        0 3px 0 #a86b00,
        0 4px 0 #774900,
        0 5px 0 #4e2e00,
        0 7px 10px rgba(0,0,0,.9),
        0 0 16px rgba(255,215,0,.35);
    animation:goldTextShine 4.5s ease-in-out infinite;
}
@keyframes goldTextShine{
    0%,15%{background-position:200% 0}
    50%,100%{background-position:-20% 0}
}
.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:#0e0e10;color:#eee;font-size:16px;min-height:100vh}
.adm-top{background:#000;border-bottom:2px solid #d40000;position:sticky;top:0;z-index:10;padding:10px 16px}
.adm-brand{color:#fff200;font-weight:800;font-size:17px;margin-bottom:8px;letter-spacing:.02em}
.adm-nav{display:flex;gap:6px;flex-wrap:wrap}
.adm-nav a{display:inline-flex;align-items:center;gap:6px;color:#ddd;text-decoration:none;padding:9px 14px;border-radius:999px;background:#1a1a1d;border:1px solid #2a2a2e;font-weight:600;font-size:14px;transition:.15s}
.adm-nav a:hover{background:#26262b;color:#fff}
.adm-nav a.on{background:#d40000;border-color:#ff3b3b;color:#fff;box-shadow:0 0 12px rgba(255,0,0,.35)}
.adm-nav a.ghost{margin-left:auto;color:#00e5ff;border-color:#0a4650}
.adm-nav a.out{color:#ff8080;border-color:#4a2020}
.adm-main{max-width:1000px;margin:0 auto;padding:22px 16px 60px}
.adm-main h1{margin-bottom:18px;color:#fff200;font-size:28px;font-weight:800}
.adm-main h2{margin:30px 0 12px;font-size:18px;color:#fff}
.adm-msg{background:#10321a;border:1px solid #2a8a40;color:#9dffb5;padding:12px 14px;margin-bottom:16px;border-radius:10px}
.adm-msg.err{background:#3a1010;border-color:#d40000;color:#ffb0b0}
/* thẻ thống kê */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.card{position:relative;background:linear-gradient(160deg,#1c1c20,#141417);border:1px solid #2a2a2e;border-radius:14px;padding:18px 18px 16px;overflow:hidden}
.card i{position:absolute;right:14px;top:12px;font-style:normal;font-size:26px;opacity:.85}
.card span{display:block;color:#9a9aa3;font-size:14px;margin-bottom:4px}
.card b{font-size:32px;color:#fff200;font-weight:800}
.card b.ok{color:#3dff7a}.card b.off{color:#ff6b6b}
.quick{display:flex;gap:10px;flex-wrap:wrap}
/* nút */
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(#ee1111,#c20000);color:#fff;border:0;padding:12px 22px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;box-shadow:0 3px 0 #800000;transition:transform .1s,box-shadow .1s,filter .15s}
.btn:hover,button:hover{filter:brightness(1.12)}
.btn:active,button:active{transform:translateY(2px);box-shadow:0 1px 0 #800000}
.btn.alt{background:linear-gradient(#2c2c32,#222226);box-shadow:0 3px 0 #111;border:1px solid #3a3a40}
button.danger{background:linear-gradient(#3a3a40,#2a2a2e);box-shadow:0 3px 0 #111;color:#ff9a9a;padding:9px 14px}
button.danger:hover{background:linear-gradient(#b00000,#800000);color:#fff}
/* form và bảng */
input,select,textarea{background:#17171a;color:#fff;border:1px solid #34343a;padding:11px 12px;border-radius:10px;width:100%;font-size:16px;font-family:inherit;transition:border .15s,box-shadow .15s}
input:focus,select:focus{outline:0;border-color:#ff3b3b;box-shadow:0 0 0 3px rgba(255,0,0,.2)}
input[type=checkbox]{width:22px;height:22px;accent-color:#d40000}
.adm-table{width:100%;border-collapse:separate;border-spacing:0;display:block;overflow-x:auto;background:#141417;border:1px solid #2a2a2e;border-radius:14px}
.adm-table th{background:#d40000;padding:12px;text-align:left;font-size:13px;white-space:nowrap}
.adm-table td{padding:10px;border-top:1px solid #222;min-width:130px}
.adm-table td:nth-child(4),.adm-table td:nth-child(5),.adm-table td:nth-child(6){min-width:0;text-align:center}
.adm-table tr:hover td{background:#19191d}
.adm-main p{margin-top:16px}
.inline{display:flex;gap:10px;flex-wrap:wrap}.inline input{flex:1;min-width:150px}
.stack{display:flex;flex-direction:column;gap:16px;max-width:440px}.stack label{display:flex;flex-direction:column;gap:6px;color:#bbb;font-size:14px}
.stack button{margin-top:6px}
/* đăng nhập */
.login{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at 50% 0,#2a0000,#0e0e10 60%)}
.login-box{background:#000;border:1px solid #d40000;box-shadow:0 0 40px rgba(255,0,0,.2);padding:32px;width:100%;max-width:380px;border-radius:16px;display:flex;flex-direction:column;gap:14px}
.login-box h1{color:#fff200;font-size:20px;text-align:center;margin-bottom:6px}.login-box label{display:flex;flex-direction:column;gap:6px;color:#bbb;font-size:14px}
#fsbtn{background:#d40000;color:#fff;border:0;font-weight:700}
/* ===== 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}
input,select,textarea{font-size:16px}
/* ===== NỀN ĐỘNG: ánh vàng + bụi vàng ===== */
body.board::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(ellipse at 15% 0%,rgba(255,200,0,.22),transparent 55%),
            radial-gradient(ellipse at 90% 15%,rgba(0,229,255,.12),transparent 50%),
            radial-gradient(ellipse at 50% 100%,rgba(255,60,0,.14),transparent 55%),#000;
 animation:glow 9s ease-in-out infinite alternate}
@keyframes glow{from{opacity:1;transform:scale(1)}to{opacity:.65;transform:scale(1.08)}}
body.board::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.75;
 background-image:radial-gradient(2px 2px at 10% 20%,#ffd54a,transparent),radial-gradient(1.5px 1.5px at 30% 70%,#fff3b0,transparent),
  radial-gradient(2px 2px at 55% 40%,#ffd54a,transparent),radial-gradient(1.5px 1.5px at 75% 85%,#fff3b0,transparent),
  radial-gradient(2px 2px at 90% 30%,#ffd54a,transparent),radial-gradient(1.5px 1.5px at 20% 95%,#ffd54a,transparent);
 background-size:420px 420px;animation:dust 45s linear infinite}
@keyframes dust{to{background-position:0 -420px}}
body.board .hd,body.board .main{background:transparent}
body.board .hd,body.board .bar,body.board .main{position:relative;z-index:1}

/* =========================================================
   GOLD LUXURY - VÀNG BẠC HÙNG PHÁT
   Chữ gold 3D + logo kim cương + vệt sáng
   ========================================================= */

/* Dòng phụ */
.shop p{
    color:transparent;
    background:linear-gradient(
        90deg,
        #9b6500 0%,
        #d9a31c 18%,
        #fff5ad 35%,
        #ffd700 50%,
        #fff8c9 65%,
        #c88b12 82%,
        #fff0a0 100%
    );
    -webkit-background-clip:text;
    background-clip:text;
    text-shadow:0 1px 4px rgba(255,215,0,.35);
    font-weight:700;
    letter-spacing:.08em;
}

/* Chữ nổi khối mạnh hơn trên màn hình lớn */
@media (min-width:901px){
    .shop h1{
        transform:perspective(700px) rotateX(2deg);
        transform-origin:center bottom;
    }
}

/* =========================================================
   LOGO KIM CƯƠNG
   ========================================================= */

.logo{
    position:relative;
    isolation:isolate;
    filter:
        drop-shadow(0 0 4px rgba(255,255,255,.9))
        drop-shadow(0 0 9px rgba(255,215,0,.65))
        drop-shadow(0 0 18px rgba(255,215,0,.25));
    animation:diamondFloat 4s ease-in-out infinite;
}

/* Quầng sáng vàng phía sau kim cương */
.logo::before{
    content:"";
    position:absolute;
    inset:-20%;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(255,236,150,.72) 9%,
            rgba(255,215,0,.32) 25%,
            rgba(255,215,0,.10) 46%,
            transparent 72%
        );
    filter:blur(6px);
    opacity:.78;
    z-index:-1;
    pointer-events:none;
}

/* Vệt sáng chéo chạy xuyên qua logo */
.logo::after{
    content:"";
    position:absolute;
    width:180%;
    height:28%;
    left:-45%;
    top:36%;
    background:linear-gradient(
        90deg,
        transparent 0%,
        transparent 35%,
        rgba(255,255,255,0) 42%,
        rgba(255,255,255,.98) 49%,
        rgba(255,248,205,.85) 53%,
        rgba(255,255,255,0) 61%,
        transparent 68%
    );
    transform:translateX(-100%) rotate(-25deg);
    filter:blur(1px);
    animation:diamondSweep 3.8s ease-in-out infinite;
    pointer-events:none;
    z-index:5;
    overflow:hidden;
}

@keyframes diamondFloat{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-3px) rotate(.5deg)}
}

@keyframes diamondSweep{
    0%,12%{
        transform:translateX(-100%) rotate(-25deg);
        opacity:0;
    }
    20%{opacity:1}
    48%{opacity:1}
    64%,100%{
        transform:translateX(180%) rotate(-25deg);
        opacity:0;
    }
}

/* SVG kim cương */
.logo svg{
    width:100%;
    height:100%;
    overflow:visible;
    filter:
        drop-shadow(0 0 3px rgba(255,255,255,.95))
        drop-shadow(0 0 8px rgba(255,215,0,.7))
        drop-shadow(0 0 18px rgba(255,215,0,.3));
}

/* Ảnh PNG/JPG kim cương */
.logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:
        contrast(1.1)
        brightness(1.08)
        saturate(1.15)
        drop-shadow(0 0 4px rgba(255,255,255,.85))
        drop-shadow(0 0 10px rgba(255,215,0,.65));
    animation:diamondLight 4s ease-in-out infinite;
}

@keyframes diamondLight{
    0%,100%{
        filter:
            contrast(1.08)
            brightness(1.05)
            saturate(1.1)
            drop-shadow(0 0 4px rgba(255,255,255,.7))
            drop-shadow(0 0 8px rgba(255,215,0,.5));
    }
    50%{
        filter:
            contrast(1.12)
            brightness(1.2)
            saturate(1.2)
            drop-shadow(0 0 7px rgba(255,255,255,1))
            drop-shadow(0 0 18px rgba(255,215,0,.85));
    }
}

/* Giữ hiệu ứng nhẹ trên điện thoại */
@media (max-width:900px){
    .shop h1{
        letter-spacing:.015em;
    }
    .logo{
        filter:
            drop-shadow(0 0 4px rgba(255,255,255,.85))
            drop-shadow(0 0 8px rgba(255,215,0,.6));
    }
}