/* --- Palette (fallback kèm CSS variables) --- */
:root {
    --hx-gold-1: #A07847;
    --hx-gold-2: #B38954;
    --hx-gold-3: #DDAC6C;
    --hx-gold-4: #F9C682;
    --menu-bg: #0B0B0B; /* nếu đặt trên nền tối */
}

.bd-header-top {
    display: none;
    margin-bottom: 10px;
}

.header-one {
    background-color: #0B0B0B;
}

.main-menu li a {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
}

div#header-sticky {
    margin-top: 10px;
}

a.bd-btn.btn-primary {
    background-image: linear-gradient(135deg, var(--hx-gold-1, #A07847) 0%, var(--hx-gold-2, #B38954) 30%, var(--hx-gold-3, #DDAC6C) 65%, var(--hx-gold-4, #F9C682) 100%);
    background-size: 150% 150%;
    box-shadow: 0 6px 20px rgba(221, 172, 108, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    color: #fff;
}

.bd-btn i {
    transition: all 0.3s ease-in-out;
    transform: rotate(0deg);
}

.bd-sticky .main-menu li a {
    color: #fff;
    font-weight: bold;
}
/* Chữ vàng gradient */
.text-gold-gradient {
    background: linear-gradient(135deg, var(--hx-gold-1) 0%, var(--hx-gold-2) 25%, var(--hx-gold-3) 55%, var(--hx-gold-4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fallback cho trình duyệt cũ */
    color: var(--hx-gold-solid);
}
/* Slogan */
.hx-slogan {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: .2em .4em; /* chừa chỗ cho dấu ngoặc */
    font-weight: bold;
    /* letter-spacing: .08em; */
    text-transform: none;
    font-size: clamp(22px, 4vw, 54px);
    line-height: 1.15;
    /* gradient chữ + fallback */
    color: #CEA166;
    background: linear-gradient(135deg, var(--hx-gold-1), var(--hx-gold-2) 35%, var(--hx-gold-3) 65%, var(--hx-gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    /* -webkit-text-fill-color: transparent; */
}

.hx-slogan-l {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0; /* chừa chỗ cho dấu ngoặc */
    font-weight: bold;
    /* letter-spacing: .08em; */
    text-transform: uppercase;
    font-size: clamp(22px, 4vw, 40px);
    line-height: 1.15;
    /* gradient chữ + fallback */
    color: #CEA166;
    background: linear-gradient(135deg, var(--hx-gold-1), var(--hx-gold-2) 35%, var(--hx-gold-3) 65%, var(--hx-gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    /* -webkit-text-fill-color: transparent; */
}

/* Dấu ngoặc kép trái/phải */
.hx-slogan::before,
.hx-slogan::after {
    position: absolute;
    top: 50%;
    transform: translateY(-56%);
    font-size: 1.4em; /* to hơn chữ một chút */
    line-height: 1;
    color: var(--hx-gold-4);
    text-shadow: 0 2px 8px rgba(221,172,108,.25);
}

.hx-slogan::before {
    content: "“";
    left: 0;
    transform: translate(-70%, -56%); /* đẩy ra ngoài một chút */
}

.hx-slogan::after {
    content: "”";
    right: 0;
    transform: translate(70%, -56%);
    bottom: 90px;
}
/* Palette */
:root {
    --hx-gold-1: #A07847;
    --hx-gold-2: #B38954;
    --hx-gold-3: #DDAC6C;
    --hx-gold-4: #F9C682;
    --menu-bg: #0B0B0B;
    /*--core-world: url("/images/17.png");*/ /* <— thay bằng path ảnh của bạn */
}

#ecosystem {
    background: #0B0B0B center/cover no-repeat;
    overflow: hidden;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    background-image: url(/thanh-vien/3.webp);
}

/*.ecosystem-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 80% at 70% 50%, rgba(0,0,0,.35), rgba(0,0,0,.85)), linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.0) 55%);
    pointer-events: none;
}*/

/* Gradient text heading */
.text-gold-gradient {
    background: linear-gradient(135deg,var(--hx-gold-1), var(--hx-gold-3) 55%, var(--hx-gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ORBIT SCENE */
.orbit-scene {
    position: relative;
    width: min(90vw, 560px);
    aspect-ratio: 1/1;
    isolation: isolate;
}

/* central logo */
/* central logo */
.core {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%,-50%);
    width: 220px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    /* background: radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%, rgba(255,255,255,0) 61%) #0a0a0a; */
    background-image: url(traidat.png);
    /* border: 1.5px solid rgba(221,172,108,.45); */
    box-shadow: 0 10px 40px rgba(221,172,108,.20), inset 0 0 40px rgba(221,172,108,.07);
    display: grid;
    place-items: center;
    padding: 18px;
    z-index: 2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .core img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* rings */
.ring {
    --diameter: 380px; /* default for r1 override below */
    --dur: 60s; /* default animation speed */
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--diameter);
    height: var(--diameter);
    transform: translate(-50%,-50%);
    border-radius: 50%;
    /* border: 1px dashed rgba(255,255,255,.12); */
    animation: spin var(--dur) linear infinite;
}

.r1 {
    --diameter: 320px;
    --dur: 42s;
    z-index: 1;
}

.r2 {
    --diameter: 585px;
    --dur: 65s;
}

.r3 {
    --diameter: 560px;
    --dur: 95s;
    opacity: .55;
}

/* small dot highlight on each ring */
.ring .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%,-50%) translateX(calc(var(--diameter)/2));
    background: radial-gradient(circle at 30% 30%, var(--hx-gold-4), var(--hx-gold-2));
    box-shadow: 0 0 12px rgba(249,198,130,.75);
}

/* items placed by angle */
.orbit-item {
    --size: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    transform: rotate(var(--angle)) translateX(calc(var(--diameter)/2)) translate(-50%, -50%);
}

.orbit-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
    /* chống quay theo viền để logo trông đứng: */
    animation: spin-reverse var(--dur) linear infinite;
}
/* ---- 1) Logo đứng thẳng, không nghiêng theo đường cong ---- */
/* Đặt logo lên quỹ đạo: quay theo góc rồi tự quay ngược lại đúng góc đó */
.orbit-item {
    --size: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    /* Đặt theo góc nhưng luôn trả lại hướng thẳng */
    transform: rotate(var(--angle)) translateX(calc(var(--diameter)/2)) rotate(calc(-1 * var(--angle))) translate(-50%, -50%);
    transform-origin: center;
}

.ring.r1 {
    /*background: url(/images/17.png);*/
    background-size: contain;
    background-repeat: no-repeat;
}

.orbit-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
    /* Khi cả vòng tròn quay, logo tự quay ngược lại để luôn thẳng */
    animation: spin-reverse var(--dur) linear infinite;
    transform-origin: 50% 50%;
}

.r2 .orbit-logo {
}

.r2 .orbit-item {
    --size: 80px;
}
/* Giữ ring quay như cũ */
@keyframes spin {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

/* ---- 2) Chữ bên trái rõ nét, không bị “mờ” do overlay/opacity ---- */
/* Làm overlay nhẹ hơn ở nửa trái để chữ nổi hơn */
/*.ecosystem-overlay {
    position: absolute;
    inset: 0;
    background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.40) 30%, rgba(0,0,0,.12) 60%, rgba(0,0,0,0) 75%),
    radial-gradient(60% 80% at 75% 50%, rgba(0,0,0,.20), rgba(0,0,0,.75) 95%);
    pointer-events: none;
}*/

/* Bảo đảm text trái 100% opacity & độ tương phản cao */
#ecosystem .intro-text,
#ecosystem .intro-text p,
#ecosystem .intro-text .lead,
#ecosystem .intro-text h2 {
    color: rgba(255,255,255,.96);
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    z-index: 99;
}


/* animations */
@keyframes spin {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .core {
        width: 150px;
    }

    .r1 {
        --diameter: 280px;
    }

    .r2 {
        --diameter: 380px;
    }

    .r3 {
        --diameter: 460px;
    }
}

@media (max-width: 575.98px) {
    .core {
        width: 130px;
    }

    .r1 {
        --diameter: 240px;
    }

    .r2 {
        --diameter: 300px;
    }

    .r3 {
        display: none;
    }
}

/* Accessibility: tắt animation nếu người dùng yêu cầu */
@media (prefers-reduced-motion: reduce) {
    .ring, .orbit-logo {
        animation: none !important;
    }
}

.h2-heading {
    font-size: 30px;
    font-weight: bold !important;
}

.f-h2 {
    font-size: 17px;
}

.bd-header-meta .bd-header-offcanvas {
    border: 1px solid #A07847;
}

.bd-header-offcanvas .fa-grid-round-2:before {
    color: #A07847;
}

.bd-sticky .main-menu li a:hover {
    color: #A07847;
}

.bd-preloader-circle svg {
    padding: 10px;
    position: absolute;
    top: -3px;
}

.bd-preloader-logo {
    width: 100px;
    height: 100px;
}

.ecosystem-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 80% at 70% 50%, rgba(0,0,0,.35), rgba(0,0,0,.85)), linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.0) 55%);
    pointer-events: none;
}

:root {
    --hx-gold-1: #A07847;
    --hx-gold-2: #B38954;
    --hx-gold-3: #DDAC6C;
    --hx-gold-4: #F9C682;
}

/* Heading gradient */
.hx-heading {
    background: linear-gradient(135deg,var(--hx-gold-1),var(--hx-gold-3) 60%,var(--hx-gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Swiper sizing */
.hx-sectors-swiper {
    padding: 12px 12px 56px;
}

    .hx-sectors-swiper .swiper-slide {
        display: flex;
        justify-content: center;
    }

/* Card shape (đáy nhọn) */
.sector-card {
    position: relative;
    width: min(420px, 92vw);
    aspect-ratio: 3/4;
    clip-path: polygon(2% 2%, 98% 2%, 98% 84%, 50% 100%, 2% 84%);
    border-radius: 18px; /* giúp bo góc trên */
    isolation: isolate;
}

    .sector-card::before {
        content: "";
        position: absolute;
        inset: -6px;
        clip-path: inherit;
        border-radius: inherit;
        background: #000;
        border: 2px solid transparent;
        z-index: 1;
        pointer-events: none;
        opacity: 0.4;
    }

/* 3D flip background */
.card-3d {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

    .card-3d.is-flipped {
        transform: rotateY(180deg);
    }

.face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
    filter: brightness(.82) contrast(1.05);
}

    .face.back {
        transform: rotateY(180deg);
    }

/* Content overlay */
.sector-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 26px 22px 34px;
    text-shadow: 0 2px 10px rgba(0,0,0,.65);
    z-index: 2;
}

.sector-title {
    margin-top: 14px;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: clamp(16px, 1.4vw, 20px);
    color: #fff;
}

/* Icon tròn */
.sector-icon {
    width: 140px;
    height: 140px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    border: 3px solid rgba(255,255,255,.9);
    outline: 1px solid rgba(255,255,255,.25);
    transition: transform .25s ease, box-shadow .25s ease, background .25s;
}

    .sector-icon:hover, .sector-card.show-brands .sector-icon {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 26px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.6);
        background: rgba(0,0,0,.45);
    }

    .sector-icon img {
        width: 60%;
        height: 60%;
        object-fit: contain;
        /*filter: invert(1) opacity(.95);*/
    }

/* Brand strip (ẩn -> hiện) */
.brand-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 320px;
    padding-top: 8px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

    .brand-strip .brand {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border-radius: 10px;
        padding: 8px 10px;
        border: none;
        transition: transform .2s ease, box-shadow .2s;
    }

        .brand-strip .brand img {
            max-height: 50px;
            width: auto;
            object-fit: contain;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
        }

        .brand-strip .brand:hover {
            transform: translateY(-2px);
            /*box-shadow: 0 10px 20px rgba(0,0,0,.35);*/
        }

.sector-card.show-brands .brand-strip {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Swiper nav màu vàng */
.hx-sectors-swiper .swiper-button-prev,
.hx-sectors-swiper .swiper-button-next {
    color: var(--hx-gold-4);
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
}

.hx-sectors-swiper .swiper-pagination-bullet {
    background: rgba(255,255,255,.35);
}

.hx-sectors-swiper .swiper-pagination-bullet-active {
    background: var(--hx-gold-4);
}

/* Responsive nhỏ hơn */
@media (max-width: 575.98px) {
    .sector-icon {
        width: 120px;
        height: 120px;
    }

    .brand-strip {
        grid-template-columns: repeat(2,1fr);
    }
}

.bd-sticky {
    z-index: 100;
}
/* ===== HÌNH DẠNG + VIỀN TRẮNG NGOÀI ===== */
.sector-card {
    /* bỏ clip-path ở thẻ cha để viền có thể “lòi” ra ngoài */
    overflow: visible;
    perspective: 1200px;
    /* định nghĩa 2 đa giác: trong & ngoài */
    --shape-inner: polygon(2% 2%, 98% 2%, 98% 84%, 50% 100%, 2% 84%);
    --shape-outer: polygon(0% 0%, 100% 0%, 100% 87%, 50% 103%, 0% 87%);
}

    /* tất cả phần nền/overlay bên trong mới bị cắt theo shape */
    .sector-card .card-3d,
    .sector-card .sector-content,
    .sector-card .face {
        /* clip-path: var(--shape-inner); */
        border-radius: 18px;
    }

    /* viền trắng bao bên ngoài (không bị clip) */
    .sector-card::after {
        content: "";
        position: absolute;
        inset: -8px; /* đẩy to hơn để viền nằm ngoài */
        clip-path: var(--shape-outer);
        border: 10px solid #fff;
        border-radius: 22px;
        z-index: 9999999999; /* ở trên cùng nhưng không che nội dung */
        pointer-events: none;
    }

/* ===== ẢNH TRƯỚC / SAU ===== */
/* dùng CSS variables từ inline style để set ảnh */
.card-3d {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
    z-index: 0;
}

.face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    background-image: var(--front); /* front mặc định */
    background-size: cover;
    background-position: center;
    filter: brightness(.9) contrast(1.05);
}

    .face.back {
        transform: rotateY(180deg);
        background-image: var(--back);
    }
/* lật */
.card-3d.is-flipped {
    transform: rotateY(180deg);
}

/* nếu bạn còn để background màu vàng cho .sector-card, hãy bỏ: */
/* .sector-card{ background:none !important; } */

/* ===== LOGO THƯƠNG HIỆU NỔI TRÊN ICON ===== */
.sector-content {
    position: relative;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px 22px 34px;
    z-index: 2;
    vertical-align: middle;
    margin-top: 160px;
}

.sector-icon {
    position: relative;
    z-index: 2;
}
/* icon dưới */
.brand-strip {
    position: absolute;
    left: 50%;
    top: -52px;
    transform: translateX(-50%) translateY(8px);
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    width: min(320px, 90%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 888888; /* logo trên icon */
    text-align: center;
}

/* khi mở (hover/tap) -> logo hiện */
.sector-card.show-brands .brand-strip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* ===== NAV SWIPER VÀ RÀNG BUỘC KHÁC (tùy chọn, giữ nguyên bản cũ) ===== */
.f-1 {
    text-transform: uppercase;
    font-weight: bold !important;
    font-size: 35px;
    margin-bottom: 30px !important;
    line-height: 53px;
}

section#sectors {
    background: #000;
}

.main-menu > ul > li:hover > a {
    color: #DDAC6C;
}

.bd-sticky .main-menu > ul > li:hover > a {
    color: #DDAC6C;
}

.main-menu a:hover {
    color: #DDAC6C;
}

:root {
    --hx-gold-1: #A07847;
    --hx-gold-3: #DDAC6C;
    --hx-gold-4: #F9C682;
    --card-bg: #ffffff;
    --ink: #0B0B0B;
}

.hx-heading {
    background: linear-gradient(135deg,var(--hx-gold-1),var(--hx-gold-3) 60%,var(--hx-gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== Featured card (trái) ===== */
.news-card {
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
    overflow: hidden;
}

    .news-card .news-media {
        display: block;
        aspect-ratio: 16/9;
        overflow: hidden;
    }

        .news-card .news-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    .news-card .news-body {
        padding: 18px 18px 20px;
        color: var(--ink);
    }

    .news-card .news-title {
        font-size: clamp(18px, 1.35vw, 24px);
        line-height: 1.2;
        margin: 6px 0 8px;
    }

        .news-card .news-title a {
            color: var(--hx-gold-3);
            text-decoration: none;
        }

    .news-card .news-meta time {
        color: var(--hx-gold-4);
        font-weight: 600;
    }

    .news-card .news-excerpt {
        color: #333;
    }

/* ===== Right list items ===== */
.news-item {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    padding: 10px;
}

    .news-item .thumb {
        flex: 0 0 150px; /* chiều rộng khung ảnh */
        aspect-ratio: 1 / 1; /* Tỉ lệ 1:1 => hình vuông */
        border-radius: 8px;
        overflow: hidden;
        height: auto;
    }

        .news-item .thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain; /* cắt cho vừa khung, không méo hình */
            display: block;
        }

    .news-item .content {
        min-width: 0;
    }

    .news-item .title {
        font-size: 16px;
        line-height: 1.25;
        margin: 0 0 4px;
        /* display: -webkit-box; */
        /* -webkit-line-clamp: 2; */
        /* -webkit-box-orient: vertical; */
        /* overflow: hidden; */
    }

        .news-item .title a {
            color: var(--hx-gold-3);
            text-decoration: none;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 2;
        }

    .news-item .meta time {
        color: var(--hx-gold-4);
        font-weight: 600;
        font-size: 12px;
    }

/* mobile */
@media (max-width: 991.98px) {
    .news-item .thumb {
        flex-basis: 96px;
    }
}

@media (max-width: 575.98px) {
    .news-card .news-media {
        aspect-ratio: 4/3;
    }
}
/* đảm bảo 2 cột kéo cao bằng nhau */
#news-events .row {
    align-items: stretch;
}

/* card trái fill chiều cao cột */
.news-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .news-card .news-media {
        flex: 0 0 auto;
    }

    .news-card .news-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .news-card .news-excerpt {
        margin-top: auto;
    }
/* đẩy đoạn tóm tắt xuống đáy cho gọn */

/* cột phải: chia 3 ô cao bằng nhau và fill chiều cao cột */
.news-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
    min-height: 0;
}

    .news-list .news-item {
        flex: 1 1 0;
        display: flex;
    }
/* 3 item = chiều cao bằng nhau */
.news-item .thumb {
    flex: 0 0 120px;
    height: 100%;
}
    /* ảnh cao bằng ô */
    .news-item .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* mobile: bỏ equal-height để tự nhiên hơn */
@media (max-width: 991.98px) {
    .news-list .news-item {
        flex: 0 0 auto;
    }

    .news-item .thumb {
        height: auto;
    }
}
/* Cột phải: 3 ô cao đều, có mô tả 2 dòng */
.news-list {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 12px;
}

    .news-list .news-item {
        flex: 1 1 0;
        display: flex;
        align-items: stretch;
    }

.news-item .content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.news-item .title {
    margin: 0 0 6px;
    height: 20px;
    overflow: hidden;
}

.news-item .desc {
    margin: 0 0 6px;
    color: #333; /* chữ mô tả trong ô trắng */
    line-height: 1.35;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 2; */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.news-item .meta {
    /* margin-top: auto; */
}
/* đẩy ngày xuống đáy -> các ô bằng nhau */

/* ảnh bên phải vẫn cố định tỉ lệ */
.news-item .thumb {
    flex: 0 0 150px; /* chiều rộng khung ảnh */
    aspect-ratio: 1 / 1; /* Tỉ lệ 1:1 => hình vuông */
    border-radius: 8px;
    overflow: hidden;
    height: inherit; /* nhớ bỏ height: 100% nếu đang có */
}

    .news-item .thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* cắt cho vừa khung, không méo hình */
        display: block;
    }

/* Mobile: bỏ equal-height để tự nhiên */
@media (max-width: 991.98px) {
    .news-list .news-item {
        flex: 0 0 auto;
    }
}

#news-events {
    padding-bottom: 70px !important;
}

:root {
    --hx-gold-1: #A07847;
    --hx-gold-3: #DDAC6C;
    --hx-gold-4: #F9C682;
    --hx-border: rgba(221,172,108,.9);
}

#partners {
    --card-pad: 18px;
}

.hx-heading {
    background: linear-gradient(135deg,var(--hx-gold-1),var(--hx-gold-3) 60%,var(--hx-gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hộp đối tác */
.partner-box {
    margin-bottom: 30px;
    position: relative;
    background: #0b0b0b; /* khớp nền trong ảnh */
    border-radius: 14px;
    padding: calc(var(--card-pad) + 14px) var(--card-pad) var(--card-pad);
    box-shadow: 0 10px 32px rgba(0,0,0,.35);
    /* viền vàng mảnh */
    background-image: linear-gradient(#0b0b0b,#0b0b0b), linear-gradient(135deg,var(--hx-gold-1),var(--hx-gold-4));
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1.5px solid transparent;
}

    /* Tab tiêu đề vàng */
    .partner-box .box-tab {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-50%);
        background: var(--hx-gold-3);
        color: #1a1a1a;
        font-weight: 700;
        letter-spacing: .3px;
        padding: 8px 20px;
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(0,0,0,.4);
        white-space: nowrap;
    }

/* Lưới logo (tuỳ cột) */
.logo-grid {
    --logo-h: 56px; /* có thể override tại inline style */
    display: grid;
    gap: 22px;
    align-items: center;
    justify-items: center;
    min-height: 140px;
}

.logos-1 {
    grid-template-columns: 1fr;
}

.logos-2 {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.logos-3 {
    grid-template-columns: repeat(4, minmax(0,1fr));
}

.logos-4 {
    grid-template-columns: repeat(4, minmax(0,1fr));
}

.logo-grid img {
    max-height: var(--logo-h);
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    transition: transform .2s ease, filter .2s ease;
}

    .logo-grid img:hover {
        transform: translateY(-2px) scale(1.03);
    }

/* Responsive */
@media (max-width: 1199.98px) {
    .logos-3 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 575.98px) {
    .logo-grid {
        gap: 16px;
    }

    .logos-3, .logos-2 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

article.partner-box.mt-4 {
    margin-top: 45px !important;
}

#partners h2 {
    margin-bottom: 50px !important;
}

#partners {
    padding-bottom: 50px !important;
}

.bd-footer-area.primary-bg.section-space {
    background: #0B0B0B;
}

.footer-col-1 .bd-footer-widget-description {
    margin-bottom: 30px;
}

.bd-footer-bottom {
    padding-top: 0;
    padding-bottom: 30px;
    background: #000;
}

.bd-footer-copyright-content p {
    color: #fff;
}

.bd-footer-social h6 {
    color: #fff;
}

.bd-footer-widget-title {
    margin-bottom: 25px;
    color: #fff;
}

.bd-footer-widget-content p {
    color: #fff;
}

.bd-footer-widget-list a {
    color: #fff;
}

.footer-col-3 {
    margin-left: 0;
}

:root {
    --hx-gold-1: #A07847;
    --hx-gold-3: #DDAC6C;
    --hx-gold-4: #F9C682;
    --hx-ink: #0B0B0B;
    --hx-gray: #262b31; /* nền card form */
    --hx-field: #3a4048; /* nền ô input */
}

/* Logo + tên công ty */
#hx-contact .hx-logo {
    width: auto;
    height: 60px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.5));
    /* display: block; */
    margin-bottom: 20px;
}

.hx-logo-footer {
}

#hx-contact .hx-company {
    font-weight: 700;
    letter-spacing: .3px;
    background: linear-gradient(135deg,var(--hx-gold-1),var(--hx-gold-3),var(--hx-gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
}

/* Thẻ địa chỉ gọn gàng */
.hx-addr-grid .addr-card {
    background: #111;
    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--hx-gold-3);
    border-radius: 12px;
    padding: 14px 14px 12px;
    height: 100%;
}

.addr-title {
    font-weight: 700;
    color: var(--hx-gold-4);
    margin-bottom: 6px;
}

.addr-card .key {
    color: var(--hx-gold-3);
    font-weight: 600;
}

/* Panel links */
.links-panel .panel-title {
    color: #fff;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    font-size: 23px;
}

    .links-panel .panel-title::after {
        content: "";
        display: block;
        width: 56px;
        height: 4px;
        border-radius: 2px;
        background: var(--hx-gold-3);
        margin-top: 6px;
    }

.links-panel a {
    display: block;
    padding: 10px 0;
    color: #e7e7e7;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.08);
}

    .links-panel a:hover {
        color: var(--hx-gold-4);
    }

/* Card form phải */
.contact-card {
    background: var(--hx-gray);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

    .contact-card .panel-title {
        color: #fff;
        font-weight: bold;
        margin: 0 0 14px;
        position: relative;
        font-size: 23px;
    }

        .contact-card .panel-title::after {
            content: "";
            display: block;
            width: 56px;
            height: 4px;
            border-radius: 2px;
            background: var(--hx-gold-3);
            margin-top: 6px;
        }
/* inputs */
.hx-input {
    background: var(--hx-field);
    border: 0;
    color: #fff;
    height: 48px;
    border-radius: 8px;
}

    .hx-input::placeholder {
        color: #cbd0d8;
        opacity: .95;
    }
/* button */
.hx-btn {
    background: var(--hx-gold-3);
    color: #1b1b1b;
    font-weight: 800;
    letter-spacing: .5px;
    height: 52px;
    border-radius: 8px;
    font-size: 14px;
}

    .hx-btn:hover {
        filter: brightness(1.05);
    }

.center_f {
    text-align: center;
}

section#hx-contact {
    background: #0B0B0B;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.f-4 li {
    line-height: 27px;
}

.offcanvas-logo a img {
    width: 90%;
    height: auto;
}

.offcanvas-close-icon {
    line-height: 1;
    color: #A07847;
}
/* Responsive tinh gọn */
@media (max-width: 991.98px) {
    #hx-contact .hx-logo {
        /*width: 110px;*/
    }
}


:root {
    --gold-1: #A07847;
    --gold-3: #DDAC6C;
    --gold-4: #F9C682;
    --ink: #0B0B0B;
}

#timeline-hx .tl-title {
    background: linear-gradient(135deg,var(--gold-1),var(--gold-3) 60%,var(--gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Slider khung */
.tl-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tl-viewport {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto; /* Ẩn phần thừa, KHÔNG scrollbar */
    padding: 64px 0; /* tạo khoảng cách cho card so le */
}

    /* Đường timeline nằm trong viewport */
    .tl-viewport::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 3px;
        background: rgba(249,198,130,.9);
        box-shadow: 0 2px 8px rgba(249,198,130,.25);
    }

/* Track trượt được */
.tl-track {
    display: flex;
    gap: 36px;
    will-change: transform;
    transition: transform .35s ease;
}

/* Mỗi mốc */
.tl-item {
    position: relative;
    flex: 0 0 clamp(240px,22vw,320px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .tl-item .year {
        font-weight: 800;
        color: #fff;
        margin-bottom: 14px;
        position: absolute;
        top: 85px;
    }

    .tl-item .dot {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #0b0b0b;
        border: 3px solid var(--gold-4);
        box-shadow: 0 0 0 8px rgba(249,198,130,.12);
        z-index: 2;
    }

    /* Card */
    .tl-item .card {
        background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 14px;
        padding: 14px 16px;
        width: 100%;
        color: #eaeaea;
        text-align: center;
        box-shadow: 0 12px 28px rgba(0,0,0,.45);
        position: relative;
    }

        .tl-item .card::before {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 70px;
            background: rgba(249,198,130,.85);
            box-shadow: 0 0 8px rgba(249,198,130,.45);
        }

    /* So le trên/dưới – đẹp mắt */
    .tl-item:nth-child(odd) .card {
        margin-top: 240px;
    }

        .tl-item:nth-child(odd) .card::before {
            top: -124px;
        }

    .tl-item:nth-child(even) .year {
        order: 3;
        margin: 14px 0 0;
        top: 260px;
    }

    .tl-item:nth-child(even) .card {
        order: 2;
        margin-bottom: 60px;
    }

        .tl-item:nth-child(even) .card::before {
            bottom: -78px;
        }

    .tl-item .card h5 {
        margin: 0 0 6px;
        color: var(--gold-3);
        font-weight: 700;
        font-size: 20px;
    }

    .tl-item .card p {
        margin: 0;
        font-size: 15px;
        color: #d6d6d6;
        line-height: 25px;
    }

/* Nút điều hướng */
.tl-nav {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-3);
    background: #111;
    color: var(--gold-4);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.4);
}

    .tl-nav[disabled] {
        opacity: .45;
        cursor: not-allowed;
    }

    .tl-nav span {
        font-size: 28px;
        line-height: 1;
        margin-top: -2px;
    }

/* Mobile: xếp dọc, ẩn nút (không cần trượt) */
@media (max-width: 991.98px) {
    .tl-slider {
        gap: 0;
    }

    .tl-nav {
        display: none;
    }

    .tl-viewport {
        padding: 0;
    }

        .tl-viewport::before {
            display: none;
        }

    .tl-track {
        display: block;
    }

    .tl-item {
        flex: 0 0 auto;
        margin: 22px 0;
        align-items: flex-start;
    }

        .tl-item .dot {
            position: static;
            transform: none;
            margin: 8px 0;
        }

        .tl-item .card, .tl-item:nth-child(even) .card {
            margin: 10px 0 0;
        }

            .tl-item .card::before {
                display: none;
            }

        .tl-item .year {
            margin: 0 0 4px;
        }
}
/* === MOBILE FIX for timeline slider === */
@media (max-width: 991.98px) {
    /* Ẩn đường ngang & padding của viewport */
    #timeline-hx .tl-viewport {
        padding: 0 !important;
    }

        #timeline-hx .tl-viewport::before {
            display: none !important;
        }

    /* Bố cục mỗi mốc: 2 cột (dot | nội dung) */
    #timeline-hx .tl-item {
        display: grid !important;
        grid-template-columns: 28px 1fr;
        column-gap: 12px;
        align-items: start;
        margin: 18px 0 !important;
    }

        /* Dot chuyển về static, nằm ở cột 1 */
        #timeline-hx .tl-item .dot {
            position: static !important;
            transform: none !important;
            margin-top: 6px; /* cho đẹp */
            width: 18px;
            height: 18px; /* dễ bấm hơn */
        }

        /* Năm + card ở cột 2 */
        #timeline-hx .tl-item .year {
            grid-column: 2;
            margin: 0 0 6px !important;
            /* font-size: 1.1rem; */
            font-weight: 800;
        }

        #timeline-hx .tl-item .card {
            grid-column: 2;
            width: 100%;
            margin: 6px 0 0 !important; /* xóa khoảng cách 60px của desktop */
        }

            /* Tắt hẳn đường nối dot ↔ card của desktop */
            #timeline-hx .tl-item .card::before {
                display: none !important;
            }

        /* Xóa toàn bộ so-le (odd/even) trên mobile */
        #timeline-hx .tl-item:nth-child(odd) .card,
        #timeline-hx .tl-item:nth-child(even) .card {
            margin: 6px 0 0 !important;
        }

        #timeline-hx .tl-item:nth-child(odd) .year {
            order: unset !important;
        }
}

@media (max-width: 575.98px) {
    #timeline-hx .tl-item .card h5 {
        /* font-size: 1.05rem; */
    }

    #timeline-hx .tl-item .card p {
        /* font-size: .95rem; */
    }
}
/* ===== MOBILE FIX: bố cục 2 cột + có đường nối ===== */
@media (max-width: 991.98px) {
    /* bỏ padding đường timeline cũ */
    #timeline-hx .tl-viewport {
        padding: 0 !important;
    }

        #timeline-hx .tl-viewport::before {
            display: none !important;
        }

    /* mỗi mốc = grid 2 cột: [DOT | CARD] */
    #timeline-hx .tl-item {
        display: grid !important;
        grid-template-columns: 36px 1fr; /* cột dot | cột nội dung */
        column-gap: 12px;
        row-gap: 6px;
        align-items: start;
        margin: 28px 0 !important;
    }

        /* Năm: nằm trên cùng, căn theo cột nội dung */
        #timeline-hx .tl-item .year {
            grid-column: 1 / -1; /* chiếm cả 2 cột */
            margin: 0 0 4px calc(36px + 12px); /* đẩy sang ngang bằng mép thẻ */
            /* font-size: 1.05rem; */
            font-weight: 800;
        }

        /* Dot ở cột 1, canh theo giữa chiều cao tiêu đề thẻ */
        #timeline-hx .tl-item .dot {
            grid-column: 1;
            position: static !important;
            transform: none !important;
            width: 18px;
            height: 18px;
            margin-top: 26px; /* chỉnh cao/thấp tùy ý */
        }

        /* Thẻ ở cột 2, bỏ khoảng so-le desktop */
        #timeline-hx .tl-item .card {
            grid-column: 2;
            width: 100%;
            margin: 0 !important;
        }

            /* VẼ LẠI đường nối dot → thẻ (ngang) */
            #timeline-hx .tl-item .card::before {
                display: block !important;
                position: absolute;
                left: -18px; /* chiều dài đoạn nối */
                top: 28px; /* cùng cao với dot (tinh chỉnh nếu cần) */
                width: 18px;
                height: 2px;
                background: rgba(249,198,130,.9);
                box-shadow: 0 0 8px rgba(249,198,130,.45);
                border-radius: 2px;
                transform: none;
            }

        /* tắt mọi so-le của desktop */
        #timeline-hx .tl-item:nth-child(odd) .card,
        #timeline-hx .tl-item:nth-child(even) .card {
            margin: 0 !important;
        }

        #timeline-hx .tl-item .card h5 {
            /* font-size: 1.06rem; */
            text-align: left;
        }

        #timeline-hx .tl-item .card p {
            /* font-size: .95rem; */
            text-align: left;
        }
}

/* màn rất nhỏ: tinh chỉnh tí cho cân */
@media (max-width: 575.98px) {
    #timeline-hx .tl-item {
        grid-template-columns: 34px 1fr;
    }

        #timeline-hx .tl-item .year {
            margin-left: calc(34px + 12px);
        }

        #timeline-hx .tl-item .dot {
            margin-top: 24px;
        }

        #timeline-hx .tl-item .card::before {
            left: -16px;
            top: 26px;
            width: 16px;
        }
}
/* ===== MOBILE: ép layout 2 hàng (year trên, dot|card dưới) ===== */
@media (max-width: 991.98px) {
    #timeline-hx .tl-viewport {
        padding: 0 !important;
    }

        #timeline-hx .tl-viewport::before {
            display: none !important;
        }

    #timeline-hx .tl-item {
        display: grid !important;
        grid-template-columns: 36px 1fr; /* cột dot | cột nội dung */
        grid-template-rows: auto auto;
        grid-template-areas: "year year" "dot  card";
        column-gap: 12px;
        row-gap: 6px;
        align-items: start;
        margin: 28px 0 !important;
    }

        /* reset mọi order của desktop */
        #timeline-hx .tl-item * {
            order: 0 !important;
        }

        /* Năm: hàng 1, căn thẳng mép thẻ */
        #timeline-hx .tl-item .year {
            grid-area: year;
            margin: 0 0 6px 0;
            padding-left: calc(36px + 12px); /* đẩy vào bằng mép card */
            /* font-size: 1.05rem; */
            font-weight: 800;
        }

        /* Dot & Card: hàng 2 */
        #timeline-hx .tl-item .dot {
            grid-area: dot;
            position: static !important;
            transform: none !important;
            width: 18px;
            height: 18px;
            margin-top: 26px; /* chỉnh cao/thấp nếu cần */
        }

        #timeline-hx .tl-item .card {
            grid-area: card;
            width: 100%;
            margin: 0 !important;
        }

            /* Vẽ đường nối dot → card */
            #timeline-hx .tl-item .card::before {
                display: block !important;
                position: absolute;
                left: -18px; /* độ dài đoạn nối */
                top: 28px; /* cao bằng dot (tinh chỉnh nếu cần) */
                width: 18px;
                height: 2px;
                background: rgba(249,198,130,.9);
                border-radius: 2px;
                box-shadow: 0 0 8px rgba(249,198,130,.45);
                transform: none;
            }
}

/* Màn rất nhỏ: tinh chỉnh nhẹ */
@media (max-width: 575.98px) {
    #timeline-hx .tl-item {
        grid-template-columns: 34px 1fr;
    }

        #timeline-hx .tl-item .year {
            padding-left: calc(34px + 12px);
        }

        #timeline-hx .tl-item .dot {
            margin-top: 24px;
        }

        #timeline-hx .tl-item .card::before {
            left: -16px;
            top: 26px;
            width: 16px;
        }
}

.bd-breadcrumb-bg::before {
    /*background-color: rgba(172, 131, 80, 0.6);*/
    background-color: rgba(0, 0, 0, 0.6);
}

.bd-contact-form {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bd-section-title-cus {
    line-height: 1.2;
    text-transform: none;
    position: relative;
    font-size: 30px;
    font-weight: bold;
}

.language_top {
    text-align: right;
    /* width: 100%; */
    position: inherit;
    right: 28px;
    top: -47px;
}

/* Ẩn logo/text credit của widget */
#google_translate_element .goog-logo-link,
#google_translate_element .goog-te-gadget span {
    display: none !important;
}

#google_translate_element .goog-te-gadget {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Ẩn dropdown mặc định nhưng giữ lại trong DOM (để JS điều khiển) */
#google_translate_element select.goog-te-combo {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Tắt banner vàng nếu có */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Cụm lá cờ canh hàng với menu */
.lang-flags {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Nút lá cờ */
.lang-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 20px; /* kích thước emoji lá cờ */
    line-height: 1;
    cursor: pointer;
    transition: box-shadow .2s, border-color .2s, transform .05s;
}

    .lang-flag:hover {
        border-color: #cbd5e1;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

    .lang-flag:active {
        transform: translateY(1px);
    }

    /* Trạng thái đang chọn */
    .lang-flag.is-active {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96,165,250,.25);
    }

/* Nếu header nền tối */
.header--dark .lang-flag {
    background: #111;
    color: #fff;
    border-color: #374151;
}

    .header--dark .lang-flag.is-active {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(147,197,253,.25);
    }

.flag_1 {
    width: 32px;
}

.bd-section-title {
    line-height: 1.2;
    text-transform: none;
    position: relative;
    font-size: 26px;
}

.pagination {
}

    .pagination .page-item {
    }

        .pagination .page-item a {
            font-size: 16px;
            color: #a9804e;
        }

    .pagination .active a {
        color: #fff;
        background: #a9804e;
        border: 1px solid #a9804e;
    }

.sector-icon {
    cursor: pointer;
}

.bd-blog-author .thumb {
    height: auto;
}

    .bd-blog-author .thumb img {
        border-radius: 0;
    }

.bd-sticky .main-menu .submenu a {
    color: var(--color-heading);
    font-weight: bold;
}

.blog_detail_custom img {
    width: inherit;
    max-width: 100%;
    height: auto;
}

.bd-breadcrumb-title {
    font-size: 40px;
}

h2.bd-blog-main-title.underline.mb-20 {
    font-size: 30px;
    line-height: 35px;
    font-weight: 700;
}

.blog_detail_custom h1, .blog_detail_custom h2, .blog_detail_custom h3,
.blog_detail_custom h4, .blog_detail_custom h5, .blog_detail_custom h6 {
    margin-top: 0;
    margin-bottom: .5rem;
}

.blog_detail_custom h1 {
    font-size: 2.4rem;
}

.blog_detail_custom h2 {
    font-size: 2.2rem;
}

.blog_detail_custom h3 {
    font-size: 2rem;
}

.blog_detail_custom h4 {
    font-size: 1.8rem;
}

.blog_detail_custom h5 {
    font-size: 1.6rem;
}

.blog_detail_custom h6 {
    font-size: 1.4rem;
}

.blog_detail_custom dl, .blog_detail_custom ol, .blog_detail_custom ul {
    margin-top: 0;
    margin-bottom: 1rem;
}

.blog_detail_custom ul, .blog_detail_custom ol {
    padding-left: 2rem;
}

    .blog_detail_custom ul li {
        list-style: inherit;
    }

.blog_detail_custom p {
    margin-bottom: 15px;
}

.blog_detail_custom p {
}

.blog_detail_custom table {
    border: 1px solid rgba(183, 183, 183, 0.2);
    width: 100%;
}

    .blog_detail_custom table td {
        border: 1px solid rgba(183, 183, 183, 0.2);
        padding: 4px;
    }

#toc {
    background-color: #fdfdfd;
    border-left: 4px solid #b88e59;
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: 6px;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

    #toc > h3 {
        font-size: 18px;
        margin-bottom: 12px;
        color: #333;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #toc ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    #toc li {
        margin-bottom: 0px;
    }

        #toc li a {
            text-decoration: none;
            color: #a67d4b;
            font-size: 15px;
            transition: all 0.2s ease-in-out;
            display: block;
            padding: 3px 8px;
            border-radius: 4px;
        }

    /* Cấp con lùi vào */
    #toc ul.toc-sub {
        margin-top: 2px;
        margin-left: 16px;
        border-left: 2px solid #e0e0e0;
        padding-left: 12px;
    }

    #toc a:hover {
        background-color: #e8f0fe;
        color: #0056b3;
    }

/* Responsive */
@media (max-width: 768px) {
    #toc {
        padding: 12px 16px;
    }

        #toc > h3 {
            font-size: 16px;
        }

        #toc a {
            font-size: 14px;
        }
}

.bd-post-details-wrapper {
    margin-inline-end: 0;
}

.bd-post-details-content {
    padding: 0;
    border: none;
    border-radius: 0;
    margin-bottom: 50px;
}

.section-space {
    padding-top: 50px;
}

#Partners_content {
    margin-top: 0;
    padding-top: 100px;
    background: #000;
}

/* ====== HERO ====== */
#hx-hero {
    /* thay ảnh tại đây */
    --hero-bg: url('/upload/trang-web/2025/10/large-gioi-thieu-ve-hoa-xinh-group-638953248094630465.webp');
    min-height: 100vh; /* full màn hình */
    background-image: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.75) 100%), var(--hero-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

    /* Tiêu đề lớn, mượt trên mọi kích thước */
    #hx-hero .hero-title {
        font-weight: 700;
        line-height: 50px;
        font-size: clamp(2rem, 4.2vw, 3.1rem);
        letter-spacing: .5px;
        background: linear-gradient(135deg, var(--gold-1), var(--gold-3) 60%, var(--gold-4));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-transform: uppercase;
    }

    /* Gạch chân bên trái */
    #hx-hero .hero-underline {
        width: clamp(140px, 22vw, 280px);
        height: 3px;
        background: rgba(255,255,255,.85);
        border-radius: 2px;
        opacity: .9;
    }

    /* Subcopy */
    #hx-hero .hero-subcopy {
        max-width: 70%;
        color: rgba(255,255,255,.95);
        font-size: 16px;
    }

    /* Stats panel (phải dưới) */
    #hx-hero .hero-stats {
        background: rgba(0,0,0,.35);
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 16px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    #hx-hero .stat {
        text-align: center;
        flex: 1 1 0;
    }

    #hx-hero .stat-num {
        font-weight: 800;
        font-size: clamp(2rem, 5.5vw, 4rem);
        line-height: 1;
        color: #F9C682; /* vàng */
    }

    #hx-hero .stat-label {
        text-transform: uppercase;
        letter-spacing: .12em;
        margin-top: .5rem;
        font-size: 16px;
        color: rgba(255,255,255,.9);
    }

/* ====== Responsive tweaks ====== */
@media (max-width: 991.98px) {
    #hx-hero {
        align-items: flex-end; /* nội dung xuống thấp cho dễ đọc */
    }

        #hx-hero .hero-stats {
            margin-top: .5rem;
        }
}

@media (max-width: 575.98px) {
    #hx-hero {
        min-height: 80vh; /* bớt cao trên điện thoại nhỏ */
    }

        #hx-hero .hero-stats {
            flex-direction: row;
            gap: 2rem;
        }
}

:root {
    --hx-gold-1: #A07847;
    --hx-gold-3: #DDAC6C;
    --hx-gold-4: #F9C682;
    --hx-ink: #0B0B0B;
}

/* ===== Section nền full page ===== */
#hx-mission {
    /* thay ảnh của bạn ở đây */
    --hx-hero-bg: url('banner_1.webp');
    min-height: 100vh;
    background-image: linear-gradient(180deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.55) 40%, rgba(0,0,0,.85) 100%), var(--hx-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    /* Eyebrow nhỏ */
    #hx-mission .eyebrow {
        display: inline-block;
        letter-spacing: .25em;
        text-transform: uppercase;
        font-weight: 700;
        opacity: .85;
        font-size: .9rem;
    }

/* ===== Mission/Vision (PC chia đôi + vạch dọc) ===== */
.mission-vision {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 28px;
    background: linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.15));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 24px 28px;
}

.mv-divider {
    background: rgba(255,255,255,.25);
    width: 1px;
}

.mv-title {
    color: var(--hx-gold-4);
    text-transform: uppercase;
    letter-spacing: .3em;
    font-weight: 800;
    margin: 0 0 10px;
}

.mv-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

    .mv-list li {
        position: relative;
        padding-left: 32px;
        line-height: 1.45;
        font-size: 15px;
    }

        .mv-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .4rem;
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 2px solid var(--hx-gold-4);
            transform: rotate(45deg);
        }

        .mv-list li::after {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            border: 2px solid var(--hx-gold-4);
            transform: rotate(45deg);
            left: 5px;
            top: 9px;
        }

/* ===== Core values cards ===== */
.core-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.12);
    color: #ececec;
    border-radius: 14px;
    padding: 28px 28px 36px;
    min-height: 260px;
    transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease, border-color .25s ease;
}

.core-title {
    text-align: center;
    font-weight: 800;
    margin: 8px 0 12px;
    color: #ffffff;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
}

.core-text {
    margin: 0;
    text-align: center;
    opacity: .95;
}

.core-icon {
    width: 22px;
    height: 22px;
    margin: 0 auto 6px;
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,.7);
    transform: rotate(45deg);
    position: relative;
}

    .core-icon::after {
        content: "";
        position: absolute;
        inset: 5px;
        border-radius: 2px;
        border: 2px solid rgba(255,255,255,.75);
    }

/* Mũi tên */
.core-arrow {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    opacity: .75;
    transition: opacity .2s ease, transform .2s ease;
}

/* Hover: đổi sang vàng + xuất hiện wave */
.core-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .25s ease;
    background: radial-gradient(1200px 300px at 95% 90%, rgba(255,255,255,.35), transparent 60%), linear-gradient(135deg, #EEC15D 0%, #F6D279 45%, #E0A95C 100%);
    z-index: -1;
}

.core-card::after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: -30px;
    width: 260px;
    height: 160px;
    background: radial-gradient(100% 80% at 70% 50%, rgba(255,255,255,.48), transparent 60%), radial-gradient(80% 80% at 35% 60%, rgba(255,255,255,.25), transparent 60%);
    filter: blur(1px);
    opacity: 0;
    transition: opacity .25s ease;
}

.core-card:hover {
    color: #1b1b1b;
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 18px 36px rgba(0,0,0,.35);
    transform: translateY(-3px);
    background: transparent; /* để lộ ::before gradient */
}

    .core-card:hover::before {
        opacity: 1;
    }

    .core-card:hover::after {
        opacity: .9;
    }

    .core-card:hover .core-title {
        color: #1b1b1b;
    }

    .core-card:hover .core-icon,
    .core-card:hover .core-icon::after {
        border-color: #1b1b1b;
    }

    .core-card:hover .core-arrow {
        opacity: 1;
        transform: translateX(-50%) translateY(-2px);
    }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .mission-vision {
        grid-template-columns: 1fr;
    }

    .mv-divider {
        display: none;
    }
}

@media (max-width: 575.98px) {
    #hx-mission {
        min-height: auto;
    }

    .core-card {
        min-height: 0;
    }
}

#bottom_gt_1 {
    margin-top: 30px;
}

.h2_11 {
    background: linear-gradient(135deg, var(--gold-1), var(--gold-3) 60%, var(--gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold !important;
}

/* Trình bày bên trái */
.watermark-number {
    font-weight: 800;
    line-height: 1;
    color: rgba(0,0,0,.06);
    font-size: clamp(64px,12vw,160px);
}

.wm-underline {
    height: 6px;
    width: 160px;
    background: #e9ecef;
    border-radius: 8px;
    margin: .5rem 0 1.5rem
}

/* Card ảnh */
.img-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    box-shadow: 0 10px 30px rgba(0,0,0,.08)
}

    .img-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .6s ease
    }

    .img-card:hover img {
        transform: scale(1.03)
    }

.ratio-4x3 {
    aspect-ratio: 4/3
}
/* giữ bố cục ổn */

/* Lưới 4 ảnh bên phải */
.grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem
}

@media (max-width: 575.98px) {
    .grid-2x2 {
        grid-template-columns: 1fr
    }
    /* rất nhỏ: 1 cột */
}

/* Nút điều hướng */
.btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.08);
    color: #A07847;
}

    .btn-icon:focus {
        box-shadow: none
    }

    .btn-icon svg {
        width: 20px;
        height: 20px
    }

/* Title area */
.eyebrow {
    letter-spacing: .08em
}
/* Card styles */
.brand-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    box-shadow: 0 18px 50px rgba(0,0,0,.08)
}

    .brand-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .6s ease
    }

    .brand-card:hover img {
        transform: scale(1.03)
    }

.brand-title {
    position: absolute;
    left: 20px;
    bottom: 16px;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 3px 14px rgba(0,0,0,.5)
}
/* Middle (highlight) card: show dark overlay + caption */
.brand-card.highlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 70%);
}

.brand-caption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    z-index: 3;
    color: #fff;
    font-size: 0.98rem
}
/* fixed aspect ratio for nice layout */
.ratio-16x10 {
    aspect-ratio: 16/10
}

/* Nav buttons */
.carousel-control-prev, .carousel-control-next {
    width: 5%;
    opacity: .85;
    transition: opacity .2s ease
}

    .carousel-control-prev:hover, .carousel-control-next:hover {
        opacity: 1
    }

.ctrl {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.08)
}

    .ctrl svg {
        width: 20px;
        height: 20px
    }

.h2_awards {
    background: linear-gradient(135deg, var(--gold-1), var(--gold-3) 60%, var(--gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold !important;
    font-size: 35px;
}

/* ========== Section Styles ========== */
.member-section {
    /* Replace the URL below with your background image if needed */
    --bg-image: url('https://images.unsplash.com/photo-1532074205216-d0e1f4b87368?q=80&w=1887&auto=format&fit=crop');
    position: relative;
    color: #f8f9fa;
    background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.78) 45%, rgba(0,0,0,1) 100%), var(--bg-image) center/cover no-repeat;
}

    .member-section .section-inner {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }


    .member-section h2 span {
        color: #f0ad1a; /* accent similar to screenshot */
        background: linear-gradient(135deg, var(--hx-gold-1), var(--hx-gold-3) 60%, var(--hx-gold-4));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


/* Copy block styling for readability */
.copy-block {
    max-width: 85ch;
}


/* Logo grid */
.logo-tile {
    height: 100%;
    /* border-radius: 1rem; */
    /* border: 1px solid rgba(255,255,255,.10); */
    /* background: rgba(255,255,255,.02); */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

    .logo-tile:hover {
        transform: translateY(-2px);
        border-color: transparent;
        background: transparent;
        cursor: pointer;
    }


.logo-img {
    max-height: 58px; /* adjust as needed */
    width: auto;
    /* filter: grayscale(100%) opacity(.85); */
    /* transition: filter .2s ease; */
}

.logo-tile:hover .logo-img {
    filter: none;
}


/* Next arrow */
.next-arrow {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
}

    .next-arrow .btn {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        font-size: 1.25rem;
    }


/* Make spacing comfy on very small screens */
@media (max-width: 575.98px) {
    .member-section h2 {
        font-size: 1.75rem;
    }
}

.h5-p-bd-section-title {
    background: linear-gradient(135deg, var(--hx-gold-1), var(--hx-gold-3) 60%, var(--hx-gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pc_dt {
    padding-bottom: 30px;
    background: #000;
}

#p_dt_1 {
    --card-pad: 18px;
    display: inherit;
    padding-top: 170px !important;
}

    #p_dt_1 h2 {
        margin-bottom: 60px !important;
    }
/* ====== Section Styles ====== */
.one-service-section {
    --accent: #f0ad1a; /* vàng chủ đạo */
    --text: #f8f9fa;
    --bg-img: url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1887&auto=format&fit=crop');
    color: var(--text);
    position: relative;
    background: linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.9)), var(--bg-img) center/cover no-repeat;
}

    .one-service-section .section-inner {
        min-height: 60vh;
    }


    .one-service-section .eyebrow {
        letter-spacing: .35rem;
        color: rgba(240,173,26,.95);
        font-weight: 600;
    }

    .one-service-section h2 {
        font-weight: 800;
    }


/* Badge "1 Service" */
.service-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(150px + 1rem); /* fine-tune depending on heading block height */
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--accent);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    font-weight: 800;
    font-size: 64px;
    line-height: 1;
    text-align: center;
}

    .service-badge small {
        position: absolute;
        transform: rotate(-45deg);
        font-size: .85rem;
        top: 54%;
        color: #000;
        opacity: .8;
    }


/* Org line + connectors */
.org-grid {
    position: relative;
    margin-top: 5.5rem;
}

.org-line {
    position: absolute;
    left: 5%;
    right: 5%;
    top: -2.5rem;
    height: 0;
    border-top: 3px solid rgba(255,255,255,.85);
    border-radius: 2px;
}


.service-card {
    position: relative;
    height: 100%;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .75rem;
    padding: 1.25rem;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

    .service-card:hover {
        transform: translateY(-4px);
        background: rgba(0,0,0,.7);
        border-color: rgba(255,255,255,.2);
    }

    .service-card::before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -5.5rem;
        height: 5.5rem;
        border-left: 3px solid rgba(255, 255, 255, .85);
    }


.service-title {
    color: #F9C682;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.2;
}

.service-card p {
    color: rgba(248,249,250,.9);
}


/* Mobile tweaks: stack cards, hide connectors to avoid clutter */
@media (max-width: 991.98px) { /* < lg */
    .service-badge {
        position: static;
        transform: none;
        margin: 1rem auto 2rem;
    }

    .org-grid {
        margin-top: 1.5rem;
    }

    .org-line, .service-card::before {
        display: none;
    }
}

.one-service-section {
    padding-top: 250px;
}

.one-h2 {
    background: linear-gradient(135deg, var(--hx-gold-1), var(--hx-gold-3) 60%, var(--hx-gold-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.beauty-section {
    --accent: #d39e2f; /* vàng nâu ấm */
    --text: #fff;
    --bg: url('https://images.unsplash.com/photo-1585386959984-a41552231693?q=80&w=1887&auto=format&fit=crop'); /* thay bằng ảnh của bạn */
    color: var(--text);
    position: relative;
    background: radial-gradient(60% 60% at 50% 45%, rgba(211,158,47,.25) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.55) 100%), var(--bg) center/cover no-repeat;
    overflow: hidden;
}

    .beauty-section .section-inner {
        min-height: 90vh;
        display: flex;
        align-items: center;
    }


/* Left copy with vertical line */
.beauty-copy {
    position: relative;
    padding-left: 1.25rem;
    max-width: 142ch;
    color: #ffdfb3;
}

    .beauty-copy::before {
        content: "";
        position: absolute;
        left: 0;
        top: .35rem;
        bottom: .35rem;
        width: 3px;
        background: #ffdfb3;
        border-radius: 2px;
    }

    .beauty-copy p {
        color: #ffdfb3;
    }


/* Top-right heading */
.beauty-heading {
    position: absolute;
    right: 11rem;
    top: 17.5rem;
    text-align: right;
}

    .beauty-heading .kicker {
        opacity: 1;
        font-weight: 700;
        color: #ffdfb3;
    }

    .beauty-heading .sub {
        opacity: .85;
        font-size: 1.2rem;
        color: #ffdfb3;
    }


/* Center logo badge */
.center-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 360px;
    height: 360px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,.02) 55%, rgba(255,255,255,.0) 56%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 0 60px rgba(255,255,255,.08);
}

    .center-badge svg {
        width: 46%;
        height: auto;
        opacity: .9;
    }


/* Round feature icons bottom-right */
.feature-icons {
    position: absolute;
    right: 11rem;
    bottom: 4.25rem;
    display: flex;
    gap: .75rem;
}

    .feature-icons .circle {
        width: 56px;
        height: 56px;
        border: 2px solid #ffdfb3;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


/* Bottom-left arrow */
.next-arrow {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
}

    .next-arrow .btn {
        width: 3rem;
        height: 3rem;
        border-radius: 999px;
        border: 2px solid var(--accent);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

        .next-arrow .btn:hover {
            background: var(--accent);
            color: #111;
        }


/* Mobile tweaks */
@media (max-width: 991.98px) {
    .beauty-heading {
        position: static;
        text-align: left;
        margin-bottom: 1rem;
    }

    .center-badge {
        width: 240px;
        height: 240px;
    }

    .feature-icons {
        position: static;
        margin-top: 1rem;
    }

    .next-arrow {
        position: static;
        margin-top: 1rem;
    }

    .beauty-section .section-inner {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

#bead-log {
    width: 80%;
}

.feature-icons .circle img {
    width: 20px;
}

:root {
    --gold: #d8b15b;
    --bg: #0b0b0d;
    --muted: #a7acb1;
}

.sp-section {
    background: #000;
    color: #fff;
    overflow: hidden;
    padding-top: 150px !important;
}

.sp-eyebrow {
    letter-spacing: .08em
}

.sp-title {
    font-weight: 800;
    line-height: .95;
    font-size: clamp(40px,7vw,92px);
    color: var(--gold);
}

.sp-script {
    /* font-family: "Times New Roman",ui-serif,serif; */
    font-style: italic;
    color: var(--gold);
    font-size: clamp(24px,3vw,40px);
}

.sp-divider {
    height: 2px;
    width: 280px;
    background: rgba(255,255,255,.18);
    border-radius: 3px;
    margin: 1.25rem 0 1.5rem;
}

.sp-muted {
    color: var(--muted);
}

/* image frames */
.sp-frame {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

    .sp-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .6s ease;
    }

    .sp-frame:hover img {
        transform: scale(1.03);
    }

.ratio-3x4 {
    aspect-ratio: 3/4;
}
/* ảnh đứng như mockup */
.ratio-16x10 {
    /* aspect-ratio: 16/10; */
}
/* dùng cho màn nhỏ */

/* đường viền ngăn 2 ảnh ở màn lớn */
@media (min-width: 992px) {
    .sp-col + .sp-col {
        border-left: 1px solid rgba(255,255,255,.08);
    }
}

.sg_p {
}

    .sg_p p {
    }

:root {
    --gold: #e0b34f;
    --bg: #0b0b0d;
    --muted: #a7acb1;
}

.vv-section {
    color: #e9ecef;
    overflow: hidden;
    padding-top: 150px !important;
    padding-bottom: 100px !important;
    position: relative;
    color: #f8f9fa;
    background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 45%, rgba(0, 0, 0, 1) 100%), var(--bg-image) center / cover no-repeat;
}

.vv-eyebrow {
    letter-spacing: .08em
}

.vv-V {
    font-weight: 800;
    line-height: .8;
    font-size: clamp(80px,16vw,160px);
    color: var(--gold);
    text-shadow: 0 6px 28px rgba(224,179,79,.2);
}

.vv-text {
    max-width: 58ch
}

.vv-muted {
    color: var(--muted)
}

.vv-divider {
    height: 2px;
    width: 320px;
    background: rgba(255,255,255,.16);
    border-radius: 3px;
    margin: 1rem 0 1.25rem
}

/* phone + floating deco */
.vv-visual {
    position: relative;
    min-height: 420px
}

.vv-phone {
    position: relative;
    z-index: 2;
    width: min(90%, 360px);
    margin-inline: auto;
    filter: drop-shadow(0 24px 60px rgba(0,0,0,.45));
}

.vv-bg {
    position: absolute;
    inset: -10% -5% -10% -20%;
    z-index: 0;
    opacity: .25;
    mask-image: linear-gradient(90deg, black 40%, transparent 95%);
}

.vv-deco {
    position: absolute;
    z-index: 3;
    width: 140px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
    animation: float 6s ease-in-out infinite;
}

    .vv-deco.small {
        width: 96px
    }

    .vv-deco.coin {
        width: 88px;
        animation-duration: 7.5s
    }

/* positions */
.vv-card-top {
    top: 8%;
    left: 8%
}

.vv-card-right {
    top: 58%;
    right: 12%;
}

.vv-coin-top {
    top: 8%;
    right: 18%;
}

.vv-coin-btm {
    bottom: 2%;
    left: 3%;
    transform: translateX(-50%)
}

/* gentle float */
@keyframes float {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-10px) rotate(-2deg)
    }
}

/* mobile tweaks */
@media (max-width: 991.98px) {
    .vv-visual {
        min-height: 380px
    }

    .vv-card-right {
        right: -4%
    }

    .vv-bg {
        mask-image: linear-gradient(180deg, black 30%, transparent 95%)
    }
}

:root {
    --ink: #0b0b0d;
    --accent: #53b6ff; /* xanh logo */
    --muted: #a7acb1;
}

.ct-section {
    background: var(--ink);
    color: #e9ecef;
    overflow: hidden
}
/* Left visual (background image fading into right) */
.ct-visual {
    position: relative;
    border-radius: 0;
    min-height: 340px;
}

/* Right content */
.ct-eyebrow {
    letter-spacing: .08em;
    color: #00C2FF !important;
}

.ct-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

    .ct-brand::before { /* vertical divider */
        /*content: "";
        width: 1px;
        height: 56px;
        background: rgba(255,255,255,.16);
        display: inline-block;*/
    }

.ct-logo {
    line-height: 1;
    font-weight: 800;
    color: var(--accent);
    font-size: clamp(36px,6vw,56px);
    letter-spacing: .04em;
}

.ct-muted {
    color: var(--muted)
}

.ct-lead {
    max-width: 58ch
}

/* Spacing tweaks on large screens */
@media (min-width: 992px) {
    .ct-visual {
        min-height: 520px;
    }
}

#cleantopia_id {
    --bg-image: url(https://images.unsplash.com/photo-1532074205216-d0e1f4b87368?q=80&w=1887&auto=format&fit=crop);
    position: relative;
    color: #f8f9fa;
    background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 45%, rgba(0, 0, 0, 1) 100%), var(--bg-image) center / cover no-repeat;
    padding-top: 100px !important;
}

.ct-logo-cl {
}

    .ct-logo-cl img {
    }

#cl-des-11 {
    margin-top: 15px;
}


:root {
    --gold: #c9a552;
    --ink: #0b0b0d;
}

.snap-wrap {
    /*height: 100vh;*/ /* chỉ hiện 1 section */
    /*overflow-y: auto;*/
    scroll-snap-type: y mandatory;
}

section.fs-section {
    /* min-height: 100vh; */
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: stretch;
    isolation: isolate;
}
/* ===== Nút mũi tên ===== */
.next-btn {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 5;
    width: 65px;
    height: 35px;
    border-radius: 28px;
    border: 2px solid #ffc107;
    background: transparent;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc107;
}

    .next-btn:hover {
        background: rgba(0,0,0,.55)
    }

    .next-btn svg {
        width: 22px;
        height: 22px
    }

/* ===== Section 1 – Hero + 5 ảnh stagger ===== */
.sec1 {
    background: #0b0b0d url('https://images.unsplash.com/photo-1526318472351-c75fcf070305?q=80&w=1800&auto=format&fit=crop') center/cover no-repeat;
    padding-top: 100px;
}

    .sec1::after { /* overlay tối */
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 0;
    }

.brand-1971 {
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    font-size: clamp(42px,9vw,110px);
    line-height: .9;
}

.tagline {
    color: #ffc107;
    font-size: clamp(16px,2vw,26px);
}

.stagger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
}

.tile {
    aspect-ratio: 4/5;
}

.tile-lg {
    aspect-ratio: 4/5;
}

.gold-band {
    background: var(--gold);
    height: 56px;
    border-radius: 10px;
}

/* ===== Section 2 ===== */
.sec2 {
    background: #1a1a1a url('17.webp') center/cover fixed no-repeat;
    padding-top: 100px;
    padding-bottom: 100px;
}

    .sec2::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 0
    }

.menu-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-top: 30px;
}

    .menu-card .cover {
        border-radius: 10px;
        overflow: hidden;
        aspect-ratio: 3/4
    }

    .menu-card img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }
/* 5 cột trên desktop */
@media (min-width:992px) {
    .col-lg-1-5 {
        flex: 0 0 20%;
        max-width: 20%
    }
}

/* ===== Section 3 – locations grid ===== */
.sec3 {
    background: #0e0e0f url('18.webp') center/cover fixed no-repeat;
    padding-top: 100px;
    padding-bottom: 100px;
}

    .sec3::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 0;
    }

.loc-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 10px;
}

    .loc-card .pic {
        border-radius: 16px;
        overflow: hidden;
        aspect-ratio: 16/9;
    }

    .loc-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

.loc-title {
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    padding-top: 10px;
}

.loc-addr {
    color: #ddd
}

/* Text utilities */
.eyebrow {
    letter-spacing: .08em
}

.logo_1971_1 {
    width: 250px;
}

.logo_1971_2 {
    width: 250px;
}

.logo_1971_3 {
    width: 250px;
}

.text-warning-emphasis-1 {
    color: #ffc107 !important;
    font-size: 21px !important;
    line-height: 29px;
}

.bd-banner-video-bg {
    position: relative;
    z-index: 5;
    min-height: 100vh;
}

.help-block.error-form {
    color: #ff0000;
    font-size: 14px;
}

input#bodyContentPlaceHolder_btnSubmit {
    border: none;
}

textarea#bodyContentPlaceHolder_txtMessage {
    background: transparent;
    font-size: 16px;
    color: var(--color-body-text);
}

.jp_popup .jp_content {
    padding: 20px;
    padding-top: 0;
}

.orbit-item-1 {
    --size: 105px;
}
.logo_hx{
    width:120px;
}
.brand-strip .brand {
    background: rgba(0, 0, 0, .7); /* nền trắng mờ để logo không bị chìm */
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
    border-radius: 8px;
}
.main-menu .submenu{

}
    .main-menu .submenu li {
        list-style: disc;
        margin: 0;
        padding: 0;
        margin-left: 40px;
    }
        .main-menu .submenu li a {
            padding: 6px 0px;
        }
.bd-offcanvas-menu ul li ul li {
    position: relative;
    list-style: disc;
}