/**
 * VangBac Gold Prices — TV Display (Red Luxury Theme)
 * Color-calibrated for Casper TV (blue-shift +15%)
 * Layout: 80% price table | 20% chart
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800;900&display=swap');

/* ═══════════════════════════════════════
   CSS Variables — Red Luxury + Casper Fix
   Casper TVs shift colors toward blue by ~15%.
   All warm tones are pushed +15% red to compensate.
   ═══════════════════════════════════════ */

:root {
    /* Background: Deep maroon-red (will appear dark red on Casper) */
    --bg-dark: #3C0000;
    --bg-header: #5C0000;
    --bg-title-bar: #4A0000;
    --bg-row-even: #520000;
    --bg-row-odd: #440000;
    --bg-footer: #2A0000;

    /* Gold accents — extra warm to counter blue shift */
    --gold: #FFD700;
    --gold-light: #FFE14D;
    --gold-dim: rgba(255, 215, 0, 0.4);

    /* Text */
    --text-white: #FFFFFF;
    --text-cream: #FFF8DC;

    /* Red accent for sell prices — pushed warmer */
    --price-sell: #FFD700;
    --price-buy: #FFFFFF;

    /* Border */
    --border-gold: rgba(255, 215, 0, 0.25);
    --border-row: rgba(255, 215, 0, 0.12);

    /* Shadows */
    --glow-gold: 0 0 20px rgba(255, 215, 0, 0.15);
}

/* ═══ MAIN CONTAINER ═══ */

.vb-tv-red {
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    background: var(--bg-dark);
    color: var(--text-white);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    min-height: 400px;
}

/* ═══ HEADER — Logo + Brand Centered ═══ */

.vb-rd-header {
    background: linear-gradient(135deg, var(--bg-header), #7A0010, var(--bg-header));
    padding: clamp(3px, 0.55vh, 8px) 20px;
    text-align: center;
    border-bottom: 3px solid var(--gold);
    position: relative;
}

.vb-rd-header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.vb-rd-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 0.9vw, 14px);
}

.vb-rd-logo {
    height: clamp(56px, 7vh, 84px);
    max-width: clamp(76px, 9vw, 128px);
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.3));
}

.vb-rd-brand-text {
    text-align: center;
}

.vb-rd-brand-text h1 {
    font-size: clamp(24px, 2.2vw, 42px);
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
    line-height: 1;
}

.vb-rd-slogan {
    display: block;
    margin-top: 2px;
    font-size: clamp(10px, 1vw, 17px);
    letter-spacing: 4px;
    color: var(--text-cream);
    opacity: 0.8;
    font-weight: 600;
    line-height: 1;
}

/* ═══ TITLE BAR — "GIÁ VÀNG HÔM NAY" + Date/Clock ═══ */

.vb-rd-title-bar {
    background: var(--bg-title-bar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(3px, 0.45vh, 6px) 20px;
    border-bottom: 1px solid var(--border-gold);
}

.vb-rd-title-left {
    font-size: 18px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.vb-rd-title-icon {
    color: var(--gold);
    font-size: 12px;
    margin: 0 6px;
    opacity: 0.7;
}

.vb-rd-title-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vb-rd-date {
    font-size: 13px;
    color: var(--text-cream);
    opacity: 0.8;
}

.vb-rd-time {
    font-size: clamp(20px, 3.5vh, 36px);
    font-weight: 900;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* ═══ UNIT BAR ═══ */

.vb-rd-unit-bar {
    background: var(--bg-dark);
    padding: 4px 24px;
    font-size: 12px;
    color: var(--gold);
    border-bottom: 1px solid var(--border-row);
    letter-spacing: 1px;
}

/* ═══ MAIN CONTENT — 80/20 split ═══ */

.vb-rd-content {
    display: flex;
    flex: 1;
    min-height: 0;
}

.vb-rd-table-side {
    flex: 0 0 75%;
    width: 75%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.vb-rd-chart-side {
    flex: 0 0 25%;
    width: 25%;
    display: flex;
    flex-direction: column;
    background: rgba(60, 0, 0, 0.8);
    border-left: 2px solid var(--border-gold);
}

/* ═══ PRICE TABLE ═══ */

.vb-rd-table {
    width: 100%;
    border-collapse: collapse;
    flex: 1;
    table-layout: fixed;
}

.vb-rd-table th {
    text-align: center;
    padding: clamp(4px, 0.7vh, 10px) 16px;
    font-size: clamp(10px, 1.6vh, 16px);
    font-weight: 800;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    background: var(--bg-title-bar);
    border-bottom: 2px solid var(--border-gold);
}

.vb-dk-th-type {
    width: 35%;
    text-align: left !important;
    padding-left: 24px !important;
}

.vb-dk-th-buy {
    width: 32.5%;
}

.vb-dk-th-sell {
    width: 32.5%;
}

/* ═══ TABLE ROWS ═══ */

.vb-dk-row {
    border-bottom: 1px solid var(--border-row);
    transition: background 0.3s ease;
}

.vb-dk-row:nth-child(odd) {
    background: var(--bg-row-odd);
}

.vb-dk-row:nth-child(even) {
    background: var(--bg-row-even);
}

.vb-dk-row td {
    padding: clamp(4px, 1.2vh, 14px) 16px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: visible;
}

/* Gold type label */
.vb-dk-type {
    text-align: left !important;
    font-size: clamp(14px, 2.8vh, 28px);
    font-weight: 700;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 24px !important;
}

/* Buy price */
.vb-dk-buy {
    font-size: clamp(24px, 5.5vh, 56px);
    font-weight: 800;
    color: var(--price-buy);
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
}

/* Sell price */
.vb-dk-sell {
    font-size: clamp(24px, 5.5vh, 56px);
    font-weight: 800;
    color: var(--price-sell);
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

/* ═══ CHART PANEL (20% right) ═══ */

.vb-rd-chart-header {
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--bg-title-bar);
    border-bottom: 1px solid var(--border-gold);
}

.vb-rd-chart-frame {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 200px;
}

.vb-rd-chart-frame iframe,
.vb-rd-chart-frame .tradingview-widget-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ═══ FOOTER ═══ */

.vb-rd-footer {
    background: var(--bg-footer);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 24px;
    font-size: 12px;
    color: var(--text-cream);
    opacity: 0.7;
    border-top: 1px solid var(--border-row);
}

.vb-rd-hotline {
    color: var(--gold);
    font-weight: 700;
    font-size: 14px;
}

/* ═══ ROW FLASH ANIMATION ═══ */

@keyframes vb-dk-flash {
    0% {
        background: rgba(255, 215, 0, 0.2);
    }

    100% {
        background: transparent;
    }
}

.vb-dk-row.flash {
    animation: vb-dk-flash 1.5s ease-out;
}

/* ═══ RESPONSIVE — for viewing in WP admin (not fullscreen) ═══ */

@media screen and (max-width: 768px) {
    .vb-rd-content {
        flex-direction: column;
    }

    .vb-rd-table-side,
    .vb-rd-chart-side {
        flex: none;
        width: 100%;
    }

    .vb-rd-chart-side {
        height: 200px;
        border-left: none;
        border-top: 2px solid var(--border-gold);
    }

    .vb-dk-buy,
    .vb-dk-sell {
        font-size: 24px;
    }

    .vb-dk-type {
        font-size: 16px;
    }
}

/* ═══ TV FULLSCREEN — Force 4 rows to fit any viewport/zoom ═══ */
/* Applied when vb-tv-red occupies full screen (TV display page) */
/* Uses vh units so layout scales with zoom level */

@media screen and (min-width: 900px) and (max-height: 1200px) {

    .vb-tv-red[style*="position"] {
        overflow: hidden;
    }

    /* When container is fixed fullscreen */
    .vb-tv-red[style*="fixed"] .vb-dk-row td,
    .vb-tv-red[style*="position"] .vb-dk-row td {
        padding: clamp(4px, 1vh, 12px) 16px;
    }

    .vb-tv-red[style*="fixed"] .vb-dk-type,
    .vb-tv-red[style*="position"] .vb-dk-type {
        font-size: clamp(14px, 2.5vh, 28px);
    }

    .vb-tv-red[style*="fixed"] .vb-dk-buy,
    .vb-tv-red[style*="fixed"] .vb-dk-sell,
    .vb-tv-red[style*="position"] .vb-dk-buy,
    .vb-tv-red[style*="position"] .vb-dk-sell {
        font-size: clamp(24px, 5.5vh, 56px);
    }
}

/* TV mode body class (tv-standalone.php) */
body.tv-mode .vb-tv-red {
    height: 100vh;
    overflow: hidden;
}

body.tv-mode .vb-rd-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

body.tv-mode .vb-rd-table-side {
    overflow: hidden;
}

body.tv-mode .vb-rd-table {
    height: 100%;
}

body.tv-mode .vb-dk-row td {
    padding: clamp(4px, 1vh, 12px) 16px;
}

body.tv-mode .vb-dk-type {
    font-size: clamp(14px, 2.5vh, 28px);
}

body.tv-mode .vb-dk-buy,
body.tv-mode .vb-dk-sell {
    font-size: clamp(24px, 5.5vh, 56px);
}

body.tv-mode .vb-rd-header {
    padding: clamp(3px, 0.55vh, 8px) 20px;
}

body.tv-mode .vb-rd-logo {
    height: clamp(56px, 7vh, 84px);
    max-width: clamp(76px, 9vw, 128px);
}

body.tv-mode .vb-rd-brand-text h1 {
    font-size: clamp(24px, 2.2vw, 42px);
    line-height: 1;
}

body.tv-mode .vb-rd-title-bar {
    padding: clamp(3px, 0.45vh, 6px) 20px;
}

body.tv-mode .vb-rd-time {
    font-size: clamp(20px, 3.5vh, 36px);
}

body.tv-mode .vb-rd-table th {
    padding: clamp(4px, 0.5vh, 10px) 16px;
    font-size: clamp(10px, 1.5vh, 16px);
}