body {
    font-family: 'Segoe UI';
    background-color: black;
    display: flex;
    justify-content: center; 
    align-items: flex-start; 
    min-height: 100vh; 
    margin: 0;
    padding: 0px;
    overflow: hidden !important;
}

.gold-price-board {
    background-color: gold;
    border: 0px solid #ddd;
    display: flex;
    flex-direction: column; /* Xếp các phần tử con theo chiều dọc */
    width: 100%; /* Đảm bảo chiếm toàn bộ chiều ngang của phần tử cha */
    max-width: none; /* Loại bỏ giới hạn chiều rộng tối đa nếu có */
    margin-left: 0; /* Loại bỏ margin bên trái */
    margin-right: 0; /* Loại bỏ margin bên phải */
    padding-left: 0; /* Loại bỏ padding bên trái nếu có */
    padding-right: 0; /* Loại bỏ padding bên phải nếu có */
    box-sizing: border-box; /* Để padding không làm tăng kích thước */
    height: 100vh;
}
    .gold-price-board .above-table {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #3A6BA5; /* đỏ đậm hơn bảng giá để tạo khối riêng */
        padding: 5px 10px;
        gap: 1px;
        height: 25vh;
        color: white;
        margin-bottom: 0;
    }

.logo-href{
    width: 20vw;
    height: 20vw;
}
.gold-logo {
    margin-top: 2vh;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

        .gold-price-board .gold-title-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 0;
            width: 100%;
            flex-wrap: nowrap; /* Cho màn hình nhỏ, tránh vỡ layout */
            margin: auto;
        }

@media screen and (max-width: 480px) and (orientation: portrait) {
    .gold-price-board .gold-title-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        width: 100%;
        flex-wrap: wrap; /* Cho màn hình nhỏ, tránh vỡ layout */
        margin: auto;
    }

}

.gold-price-board .title-group {
    width: 80%; /* Chiếm 80% không gian bên phải logo */
    text-align: center; /* Căn giữa nội dung bên trong */
}

.gold-price-board h1 {
    color: #FFD700;
    font-size: clamp(0.7em, 4.3vw, 3.8em);
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0.1em; /* Tạo một chút khoảng cách với dòng chữ nhỏ bên dưới */
}

.gold-price-board .sub-title {
    color: #FFD700; /* Màu xám nhạt cho dòng chữ nhỏ */
    font-size: clamp(0.2em, 3.3vw, 3em);
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
}


.gold-info {
    display: flex; /* Sử dụng flexbox để căn chỉnh các phần tử con trên cùng một hàng */
    justify-content: space-between; /* Đẩy các phần tử con ra hai đầu */
    align-items: center; /* Căn chỉnh các phần tử con theo chiều dọc ở giữa */
    background-color: #202398; /* Nền màu xanh lam */
    color: #fff9da; /* Chữ màu trắng */
    padding-left: 10px;
    padding-right: 10px;
    font-size: clamp(1em, 4vw, 2em);
    font-weight: bold;
    flex-wrap: wrap;
    margin-top: auto;
}

    .gold-info .unit,
    .gold-info .datetime {
        margin: 0;
        margin-bottom: 5px;
    }

    .gold-info #live-clock {
        color: springgreen;
    }

.gold-price-table {
    width: 100%; /* Đảm bảo bảng chiếm toàn bộ chiều ngang */
    max-width: 100vw !important;
    border-collapse: collapse;
    height: 67.4vh;
}

    .gold-price-table th, .gold-price-table td {
        border: 1px solid #0094ff; /* Đường kẻ khung */
        padding: 0;
        text-align: center;
    }

    .gold-price-table thead {
        background-color: #ffd800; /*Tiêu đề bảng*/
        color: darkred;
        font-size: clamp(1.5em, 2.5vw, 4em);
        font-weight: bold;
    }


    .gold-price-table tbody tr:nth-child(odd),
    .gold-price-table tbody tr:nth-child(even) {
        background-color: #005B32;
        color: white;
        font-size: clamp(0.5em, 2.5vw, 4em);
        font-weight: bold;
    }
    /* Style cho các ô dữ liệu của cột đầu tiên (Loại Vàng) */
    .gold-price-table tbody td:first-child {
        background-color: #F5E3A1; /* Một màu xanh nhạt hơn, ví dụ */
        color: #B22222 !important; /* Màu chữ */
    }

@media (orientation: portrait) {
    .logo-href {
        width: 20vw;
        height: 20vw;
    }

    .gold-price-table tbody tr:nth-child(odd),
    .gold-price-table tbody tr:nth-child(even) {
        background-color: #005B32;
        color: white;
        font-size: 5px;
        font-weight: bold;
    }
    .gold-price-table thead {
        font-size: 5vw;
    }
}

@media (orientation: landscape) {
    .logo-href {
        width: 20vh;
        height: 20vh;
    }

    .gold-price-table tbody tr:nth-child(odd),
    .gold-price-table tbody tr:nth-child(even) {
        background-color: #F5E3A1;
        color: #202398;
        font-size: clamp(0.5em, 2.5vw, 4em);
        font-weight: bold;
    }
}


.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    width: 100%;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
}

body:-webkit-full-screen .gold-price-board,
body:-moz-full-screen .gold-price-board,
body:fullscreen .gold-price-board {
    overflow: hidden !important; /* ✅ Cắt phần tràn */
    margin: 0;
    padding: 0;
}

/* Container chữ chạy qua trái cố định ở dưới cùng */
.bottom-scrolling-banner {
    height: 5vh;
    font-size: clamp(1em, 3vh, 3em);
    flex-shrink: 0;
    position: fixed; /* Giữ cố định vị trí */
    bottom: 0; /* Nằm ở dưới cùng */
    left: 0; /* Nằm sát lề trái */
    width: 100%; /* Chiếm toàn bộ chiều rộng màn hình */
    background-color: gold; /* Màu nền của banner (có thể thay đổi) */
    color: #202398; /* Màu chữ (có thể thay đổi) */
    padding: 1px 0; /* Khoảng đệm trên dưới */
    overflow: hidden; /* Rất quan trọng: Ẩn phần chữ tràn ra ngoài container */
    white-space: nowrap; /* Ngăn chữ bị ngắt dòng */
    box-sizing: border-box; /* Đảm bảo padding không làm tăng chiều rộng */
    z-index: 1000; /* Đảm bảo banner hiển thị trên cùng các nội dung khác */
    text-align: center; /* Căn giữa chữ khi không chạy hoặc chờ chạy */
    font-weight: bold;
}
/* Nội dung chữ chạy */
.scrolling-text {
    display: inline-block; /* Hoặc block với width phù hợp */
    white-space: nowrap; /* Đảm bảo chữ không bị xuống dòng */
    padding-left: 100%; /* Ban đầu đưa chữ ra khỏi màn hình về phía phải */
    animation: scroll-left 50s linear infinite; /* Áp dụng animation */
}
@keyframes scroll-left {
    0% {
        transform: translateX(0); 
    }

    100% {
        transform: translateX(-100%); 
    }
}

@media screen and (min-width: 1920px) and (min-height: 1080px){
    .gold-price-board h1 {
        font-size: 4.5vw;
        margin:0;
    }
    .gold-price-board .sub-title {
        font-size: 3.8vw;
    }
    .gold-price-table thead {
        font-size: 3.5rem;
    }

    .gold-info {
        font-size: 2.5rem;
    }

    .bottom-scrolling-banner {
        font-size: 2.5rem;
    }
}
/* Tùy chỉnh cho màn hình tuỳ loại: Samsung QLED 4K 3820x2160 */
@media only screen and (min-width: 3840px) {
    .gold-price-board h1 {
        font-size: 180px;
    }

    .gold-price-board .sub-title {
        font-size: 130px;
    }

    .gold-price-table thead {
        font-size: 120px;
    }

    .gold-info {
        font-size: 90px;
    }

    .bottom-scrolling-banner {
        font-size: 80px;
    }
}
@media screen and (max-width: 768px) {
    .bottom-scrolling-banner{
        display: none;
    }
}