/* =========================================================
   VN Market Price Widget – CSS v2.0
   ========================================================= */

.gpwm-widget { --r:12px; --r-sm:6px; --tr:0.22s ease;
    --bg:#0f1117; --bg2:#181b25; --bg3:#1e2130; --bg3h:#252a3a;
    --border:rgba(255,255,255,0.08);
    --text:#e8eaf0; --muted:#7b82a0;
    --gold:#f5c842; --green:#3ecf8e; --red:#f56565; --blue:#60a5fa;
    --header:linear-gradient(135deg,#1a1d2e,#232740);
    --shadow:0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2);
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    background:var(--bg); border-radius:var(--r);
    box-shadow:var(--shadow); overflow:hidden; position:relative;
    max-width:780px; width:100%; margin:0 auto 24px;
    border:1px solid var(--border); }

.gpwm-theme-light { --bg:#f8f9fc; --bg2:#fff; --bg3:#f4f6fb; --bg3h:#eef0f8;
    --border:rgba(0,0,0,.08); --text:#1a1d2e; --muted:#7b82a0;
    --gold:#b8730a; --green:#1a8c60; --red:#d63031; --blue:#2563eb;
    --header:linear-gradient(135deg,#fff,#f0f2fa);
    --shadow:0 4px 24px rgba(0,0,0,.08); }

.gpwm-widget * { box-sizing:border-box; margin:0; padding:0; }

/* ── Header ── */
.gpwm-header { display:flex; align-items:center; justify-content:space-between;
    padding:13px 20px; background:var(--header); border-bottom:1px solid var(--border); }
.gpwm-header-left { display:flex; align-items:center; gap:9px; }
.gpwm-logo { font-size:20px; }
.gpwm-title { font-size:16px; font-weight:700; color:var(--gold); letter-spacing:.3px; }
.gpwm-header-right { display:flex; align-items:center; gap:10px; }
.gpwm-live-dot { width:9px; height:9px; border-radius:50%; background:var(--green);
    animation:gpwm-pulse 2s infinite; }
@keyframes gpwm-pulse { 0%{box-shadow:0 0 0 0 rgba(62,207,142,.5)}
    60%{box-shadow:0 0 0 7px rgba(62,207,142,0)} 100%{box-shadow:0 0 0 0 rgba(62,207,142,0)} }
.gpwm-refresh { background:transparent; border:1px solid var(--border); color:var(--muted);
    font-size:17px; width:30px; height:30px; border-radius:50%; cursor:pointer;
    transition:var(--tr); display:flex; align-items:center; justify-content:center; line-height:1; }
.gpwm-refresh:hover { color:var(--gold); border-color:var(--gold); transform:rotate(45deg); }
.gpwm-refresh.spinning { animation:gpwm-spin .7s linear; }
@keyframes gpwm-spin { to{transform:rotate(360deg)} }

/* ── Tabs ── */
.gpwm-tabs { display:flex; overflow-x:auto; background:var(--bg2);
    border-bottom:1px solid var(--border); scrollbar-width:none; }
.gpwm-tabs::-webkit-scrollbar { display:none; }
.gpwm-tab { flex:0 0 auto; display:flex; align-items:center; gap:5px;
    padding:10px 16px; border:none; background:transparent; color:var(--muted);
    font-size:13px; font-weight:600; cursor:pointer; transition:var(--tr);
    border-bottom:2px solid transparent; white-space:nowrap; }
.gpwm-tab:hover { color:var(--text); }
.gpwm-tab-active { color:var(--gold) !important; border-bottom-color:var(--gold) !important; }
.gpwm-tab-icon { font-size:15px; }

/* ── Panels ── */
.gpwm-panels { }
.gpwm-panel { display:none; padding:0 0 4px; }
.gpwm-panel-active { display:block; }

/* ── World bar (gold) ── */
.gpwm-world-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    padding:10px 20px; background:var(--bg2); border-bottom:1px solid var(--border); }
.gpwm-world-label { font-size:11px; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:.8px; white-space:nowrap; }
.gpwm-world-vals { display:flex; align-items:center; flex-wrap:wrap; gap:6px; flex:1; }
.gpwm-wval { font-size:15px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; }
.gpwm-wunit { font-size:11px; color:var(--muted); }
.gpwm-wsep { color:var(--muted); padding:0 4px; }

/* ── Section head ── */
.gpwm-section-head { padding:10px 20px 6px; font-size:12px; font-weight:700;
    color:var(--muted); text-transform:uppercase; letter-spacing:.7px; }
.gpwm-section-head small { font-size:11px; font-weight:400; text-transform:none; }

/* ── Table ── */
.gpwm-table { width:100%; border-collapse:separate; border-spacing:0 3px;
    padding:0 10px 8px; display:table; }
.gpwm-table thead th { font-size:10px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.6px; padding:3px 10px; text-align:left; }
.gpwm-table thead th.r { text-align:right; }
.gpwm-table tbody tr { background:var(--bg3); border-radius:var(--r-sm);
    transition:background var(--tr), transform var(--tr); }
.gpwm-table tbody tr:hover { background:var(--bg3h); transform:translateX(2px); }
.gpwm-table tbody td { padding:9px 10px; color:var(--text); font-size:13px;
    vertical-align:middle; }
.gpwm-table tbody td.r { text-align:right; }
.gpwm-table tbody tr td:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.gpwm-table tbody tr td:last-child  { border-radius:0 var(--r-sm) var(--r-sm) 0; }

/* ── Price highlights ── */
.gpwm-buy  { color:var(--green) !important; font-weight:700; }
.gpwm-sell { color:var(--red)   !important; font-weight:700; }
.gpwm-up   { color:var(--green) !important; }
.gpwm-down { color:var(--red)   !important; }
.gpwm-muted { color:var(--muted); font-size:11px; }

/* Gold badges */
.gpwm-badge { display:inline-block; padding:2px 9px; border-radius:20px;
    font-size:12px; font-weight:700; letter-spacing:.4px; }
.gpwm-badge-sjc  { background:rgba(245,200,66,.15); color:#f5c842; border:1px solid rgba(245,200,66,.3); }
.gpwm-badge-doji { background:rgba(108,99,255,.15);  color:#8b82ff; border:1px solid rgba(108,99,255,.3); }
.gpwm-badge-pnj  { background:rgba(62,207,142,.12);  color:#3ecf8e; border:1px solid rgba(62,207,142,.25); }
.gpwm-theme-light .gpwm-badge-doji { color:#5046e4; }
.gpwm-theme-light .gpwm-badge-pnj  { color:#1a8c60; }

/* Forex */
.gpwm-flag { font-size:16px; margin-right:4px; vertical-align:middle; }

/* Crypto coin icon */
.gpwm-coin-icon { display:inline-block; width:22px; height:22px; line-height:22px;
    text-align:center; background:var(--border); border-radius:50%;
    font-size:12px; margin-right:4px; vertical-align:middle; }

/* Fuel */
.gpwm-fuel-meta { display:flex; gap:16px; flex-wrap:wrap; padding:8px 20px;
    background:var(--bg2); border-bottom:1px solid var(--border);
    font-size:12px; color:var(--muted); }
.gpwm-fuel-price { font-variant-numeric:tabular-nums; }
.gpwm-fuel-note { padding:8px 20px; font-size:11px; color:var(--muted); }
.gpwm-fuel-note a { color:var(--blue); text-decoration:none; }
.gpwm-fuel-note a:hover { text-decoration:underline; }

/* Flash on update */
.gpwm-flash-up   { animation:gpwm-flash-up   .8s ease; }
.gpwm-flash-down { animation:gpwm-flash-down .8s ease; }
@keyframes gpwm-flash-up   { 0%{background:rgba(62,207,142,.3)} 100%{background:transparent} }
@keyframes gpwm-flash-down { 0%{background:rgba(245,101,101,.3)} 100%{background:transparent} }

/* ── Footer ── */
.gpwm-footer { display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:6px; padding:9px 20px; border-top:1px solid var(--border);
    background:var(--bg2); }
.gpwm-update-time,.gpwm-source { font-size:11px; color:var(--muted); }

/* ── Loading overlay ── */
.gpwm-overlay { position:absolute; inset:0; background:rgba(15,17,23,.7);
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--r); z-index:10; backdrop-filter:blur(2px); }
.gpwm-theme-light .gpwm-overlay { background:rgba(248,249,252,.8); }
.gpwm-spinner { width:34px; height:34px; border:3px solid var(--border);
    border-top-color:var(--gold); border-radius:50%; animation:gpwm-spin .6s linear infinite; }

/* ── Responsive ── */
@media(max-width:500px){
    .gpwm-header { padding:11px 13px; }
    .gpwm-title  { font-size:14px; }
    .gpwm-tab    { padding:9px 10px; font-size:12px; }
    .gpwm-tab-label { display:none; }
    .gpwm-tab-icon  { font-size:18px; }
    .gpwm-table tbody td { padding:8px 7px; font-size:12px; }
    .gpwm-table thead th { padding:3px 7px; }
    .gpwm-world-bar { padding:9px 13px; }
}


/* -- Cảnh báo dữ liệu cũ + trạng thái trống (thống nhất với [gold_price]) -- */
.gpwm-stale-note { padding:8px 20px; font-size:12px; color:var(--red); border-top:1px solid var(--border); background:var(--bg2); }
.gpwm-empty, .gpwm-note { padding:10px 20px; font-size:12px; color:var(--muted); }
.gpwm-badge-btmc { background: rgba(255,138,101,0.14); color: #ff8a65; border: 1px solid rgba(255,138,101,0.3); }
.gpwm-theme-light .gpwm-badge-btmc { color: #d84315; }