/* --- 1. SETUP & VARIABLES --- */
:root {
    --tk-yellow: #FEBE10;
    --tk-black: #000000;
}

/* Custom Font Class */
.font-antonio {
    font-family: 'Antonio', sans-serif;
}

.text-tk-yellow {
    color: var(--tk-yellow) !important;
}

.bg-black {
    background-color: var(--tk-black) !important;
}

.tracking-wide {
    letter-spacing: 2px;
}

/* --- 2. HERO SECTION --- */
.hero-bg {
    background-size: cover;
    background-position: center top;
    z-index: 0;
    /* MỚI: Thêm hiệu ứng hiện nền từ từ */
    opacity: 0;
    /* Ẩn lúc đầu */
    animation: bgFadeIn 2s ease-out forwards;
}
.hero-section {
    /* Mặc định cho Desktop */
    height: 100vh;
    min-height: 700px; /* Đảm bảo không quá bé trên màn hình ngang */
}
/* MỚI: Định nghĩa Keyframe cho Background */
@keyframes bgFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Animation cho Logo */
.hero-logo {
    opacity: 0;
    /* Giữ nguyên hiệu ứng zoom cũ, nhưng thêm animation-delay */
    animation: zoomIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    /* MỚI: Logo chờ 1.2 giây (sau khi nền hiện 1 chút) mới bắt đầu chạy */
    animation-delay: 1s;
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* Scroll Icon Animation */
.scroll-icon-anim {
    animation: spin 10s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* --- INTRO SECTION FIX --- */

/* 1. Xử lý ảnh Desktop tràn viền */
.intro-image-desktop img {
    object-fit: cover;
    /* Cắt ảnh để lấp đầy khung mà không bị méo */
    object-position: center top;
    /* Ưu tiên hiển thị phần đầu và thân trên */
    /* Mẹo: Nếu ảnh bị tối, có thể thêm filter ở đây */
}

/* 2. Font chữ chuẩn design */
.intro-desc {
    font-family: 'Antonio', sans-serif;
    font-weight: 300;
    /* Light */
    font-size: 50px;
    /* Size chuẩn 50px */
    line-height: 1.2;
    /* Giãn dòng vừa phải (khoảng 60-78px) */
}

/* Hiệu ứng mũi tên */
.hover-arrow i {
    transition: transform 0.3s ease;
}

.hover-arrow:hover i {
    transform: translateX(10px);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {

    /* Trên mobile text nhỏ lại và căn trái */
    .intro-desc {
        font-size: 28px;
        /* Giảm size để không vỡ layout mobile */
        line-height: 1.3;
    }

    .intro-section {
        height: auto !important;
        /* Bỏ chiều cao cố định */
    }

    .intro-content {
        padding-right: 0;
        margin-bottom: 2rem;
    }
}

/* Mẹo nhỏ cho màn hình cực lớn (iMac, etc.) */
@media (min-width: 1600px) {
    .intro-desc {
        font-size: 60px;
        /* Tăng size chữ trên màn hình to */
    }
}

/* --- VENTURES SECTION --- */

.venture-card {
    position: relative;
    height: 350px;
    /* Chiều cao cố định cho mỗi ô */
    overflow: hidden;
    cursor: pointer;
    background-color: #000;
    /* Màu nền đen lót dưới các khe cắt */
    border: 1px solid #000;
    /* Viền đen mỏng ngăn cách các ô */
}

/* 1. Xử lý Ảnh nền */
.venture-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    /* Mặc định trắng đen */
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* 2. Xử lý Logo */
.v-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    /* Kích thước logo */
    height: auto;
    filter: grayscale(100%) brightness(200%);
    /* Logo trắng đen và sáng lên để nổi trên nền tối */
    transition: filter 0.4s ease;
    z-index: 2;
}

/* 3. Xử lý Tiêu đề */
.v-title {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #FFFFFF;
    /* Mặc định chữ trắng */
    text-transform: uppercase;
    z-index: 2;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.v-title i {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

/* --- HOVER EFFECTS --- */
.venture-card:hover .venture-bg {
    filter: grayscale(0%);
    /* Trả lại màu gốc */
    transform: scale(1.05);
    /* Zoom nhẹ */
}

.venture-card:hover .v-logo {
    filter: grayscale(0%);
    /* Trả lại màu gốc logo */
}

.venture-card:hover .v-title {
    color: var(--tk-yellow);
    /* Chữ chuyển vàng */
}

.venture-card:hover .v-title i {
    transform: rotate(90deg);
    /* Xoay mũi tên khi hover (tuỳ chọn) */
}

/* --- CLIP PATHS (Tạo góc cắt Industrial) --- */
/* Cắt góc 20px */
:root {
    --cut-size: 20px;
}

/* 1. Cắt góc Dưới-Phải (Bottom-Right) */
.clip-br {
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - var(--cut-size)),
            calc(100% - var(--cut-size)) 100%,
            0 100%);
}

/* 2. Cắt góc Dưới-Trái (Bottom-Left) */
.clip-bl {
    clip-path: polygon(0 0,
            100% 0,
            100% 100%,
            var(--cut-size) 100%,
            0 calc(100% - var(--cut-size)));
}

/* 3. Cắt 2 góc dưới (Bottom-Left & Bottom-Right) */
.clip-bl-br {
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - var(--cut-size)),
            calc(100% - var(--cut-size)) 100%,
            var(--cut-size) 100%,
            0 calc(100% - var(--cut-size)));
}

/* 4. Cắt góc Trên-Phải (Top-Right) */
.clip-tr {
    clip-path: polygon(0 0,
            calc(100% - var(--cut-size)) 0,
            100% var(--cut-size),
            100% 100%,
            0 100%);
}

/* 5. Cắt góc Trên-Trái (Top-Left) */
.clip-tl {
    clip-path: polygon(var(--cut-size) 0,
            100% 0,
            100% 100%,
            0 100%,
            0 var(--cut-size));
}

/* 6. Cắt 2 góc trên (Top-Left & Top-Right) */
.clip-tl-tr {
    clip-path: polygon(var(--cut-size) 0,
            calc(100% - var(--cut-size)) 0,
            100% var(--cut-size),
            100% 100%,
            0 100%,
            0 var(--cut-size));
}

/* Responsive Mobile */
@media (max-width: 991px) {
    .venture-card {
        height: 250px;
    }

    /* Giảm chiều cao trên mobile */
    .v-title {
        font-size: 1.2rem;
    }

    /* Trên mobile, các ô xếp dọc nên có thể bỏ clip-path hoặc giữ lại tùy ý */
    /* Nếu muốn bỏ clip-path để full hình chữ nhật: */
    /* .venture-card[class*="clip-"] { clip-path: none; } */
}

/* --- JOURNEY HEADER --- */

/* Tiêu đề lớn */
.journey-title {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    /* Bold */
    font-size: 55px;
    /* Specs chuẩn */
    line-height: 70px;
    letter-spacing: -0.02em;
    /* -2% */
    text-transform: uppercase;
}

/* Đoạn mô tả phụ */
.journey-subtitle {
    font-family: 'Mona Sans', sans-serif;
    /* Font mới */
    font-weight: 600;
    /* SemiBold */
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.02em;
    /* 2% */
    text-transform: uppercase;
    max-width: 800px;
    /* Giới hạn chiều rộng để text không tràn quá dài */
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .journey-title {
        font-size: 36px;
        /* Giảm size trên mobile */
        line-height: 1.2;
    }

    .journey-subtitle {
        font-size: 14px;
        width: 100% !important;
        /* Full width trên mobile */
    }
}

/* --- JOURNEY SECTION (FIXED LAYOUT) --- */
.journey-section {
    background-image: url('../images/timeline-bg.jpg');
    background-size: cover;
    background-position: center;
    border-top: 1px solid var(--tk-yellow);
}

.journey-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* --- JOURNEY SECTION (ADJUSTED) --- */

/* --- TRỤC VÀNG --- */
.timeline-col-yellow {
    background-color: var(--tk-yellow);
    /* Đảm bảo cột vàng liền mạch */
    min-height: 500px;
    position: relative;
    z-index: 0;
}

/* --- SỐ NĂM (YEAR STACK) --- */
.year-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    width: 100%;
    /* Chiếm hết chiều rộng cột vàng để căn trái/phải */
}

.year-stack span {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 90px;
    /* Chữ to */
    color: #000;
    letter-spacing: 0px;
    transform: scaleY(1.1);
    /* Kéo cao chữ */
}

/* --- COLLAGE 1983 --- */
.collage-1983-container {
    position: relative;
    width: 100%;
    height: 550px;
    max-width: 480px;
    margin-left: auto;
}

/* Baby: Trên cùng */
.img-1983-baby {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 150px;
    z-index: 1;
}

/* Kids: Bên trái */
.img-1983-kids {
    position: absolute;
    top: 130px;
    right: 113px;
    width: 190px;
    z-index: 2;
}

/* Family: Dưới cùng và đè sang phải */
.img-1983-family {
    position: absolute;
    bottom: 130px;
    right: -50px;
    /* Quan trọng: Đè lên cột vàng 40px */
    width: 186px;
    z-index: 3;
}

/* --- ẢNH 2010 --- */
.img-2010-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.img-overlap-left {
    margin-left: -60px;
    /* Quan trọng: Đè lên cột vàng bên trái 60px */
    position: relative;
    z-index: 5;
}

/* --- COLLAGE 2014 --- */
.collage-2014-container {
    position: relative;
    width: 100%;
    /*height: 600px;*/
    max-width: 450px;
}

.timeline-col-2014 {
    min-height: auto;
}

/* Construction: Trên cùng, đè sang phải */
.img-2014-cons {
    position: absolute;
    top: 0;
    right: 0px;
    /* Quan trọng: Đè lên cột vàng bên phải 50px */
    width: 254px;
    z-index: 1;
}

/* Skylight View: Dưới cùng, lệch trái */
.img-2014-sky {
    position: absolute;
    top: 117px;
    right: -120px;
    width: 300px;
    z-index: 2;
}

/* --- BUTTON INDUSTRIAL (CẬP NHẬT) --- */
.btn-timeline-industrial {
    background-color: #000;
    color: var(--tk-yellow);
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 20px 0;
    /* Tăng padding một chút cho nút dày dặn hơn */
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    width: 100%;
    text-align: center;
    /* Cắt góc */
    clip-path: polygon(20px 0, 100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0 100%,
            0 20px);
    transition: all 0.3s;
    /* Margin âm nhỏ để đảm bảo nó dính chặt vào cột vàng 2014 bên trên mà không có khe hở */
    margin-top: -1px;
    /* Đảm bảo không có margin dưới làm lòi nền vàng ra */
    margin-bottom: 0;
    position: relative;
    z-index: 10;
    /* Đảm bảo nút nổi lên trên cùng */
}

.btn-timeline-industrial:hover {
    background-color: #222;
    color: #fff;
}

/* --- BUTTON STEPPED STYLE (Chuẩn Image) --- */
.btn-timeline-step {
    background-color: #000;
    color: var(--tk-yellow);
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 25px 10px;
    /* Padding trên dưới đủ lớn để chứa hình khối */
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;

    /* TẠO HÌNH BẬC THANG (STEPPED SHAPE) */
    /* Giải thích:
       - 0% 0%: Góc trên trái (Cao)
       - 45% 0%: Điểm bắt đầu dốc xuống ở cạnh trên
       - 50% 20%: Điểm kết thúc dốc xuống ở cạnh trên (Thấp hơn)
       - 100% 20%: Góc trên phải (Thấp)
       - 100% 100%: Góc dưới phải (Thấp)
       - 55% 100%: Điểm bắt đầu dốc lên ở cạnh dưới
       - 50% 80%: Điểm kết thúc dốc lên ở cạnh dưới (Cao hơn)
       - 0% 80%: Góc dưới trái (Cao)
    */
    clip-path: polygon(0% 0%,
            45% 0%,
            50% 25%,
            100% 25%,
            100% 100%,
            55% 100%,
            50% 75%,
            0% 75%);

    transition: all 0.3s;
    /* Margin âm để nút đè lên phần vàng bên trên */
    margin-top: -5px;
    margin-bottom: -1px;
    /* Đảm bảo che kín chân */
    position: relative;
    z-index: 10;
}

.btn-timeline-step:hover {
    background-color: #222;
    color: #fff;
    /* Hiệu ứng hover có thể làm nút phẳng lại hoặc đổi màu */
}

/* RESPONSIVE MOBILE */
@media (max-width: 991px) {
    .btn-timeline-step {
        width: auto;
        display: inline-block;
        padding: 20px 40px;
        /* Trên mobile có thể bỏ clip-path phức tạp hoặc giữ nguyên tùy ý */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        /* Về hình chữ nhật trên mobile cho gọn */
        margin-top: 30px;
        border-radius: 4px;
        /* Bo nhẹ */
    }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {

    /* Ẩn cột vàng trên mobile */
    .timeline-col-yellow {
        background: transparent;
        min-height: auto;
        padding: 0;
        width: 100%;
    }

    /* Năm hiển thị ngang */
    .year-stack {
        flex-direction: row;
        align-items: center !important;
        /* Reset căn trái phải */
        justify-content: center;
        margin: 20px 0;
    }

    .year-stack span {
        font-size: 80px;
        color: var(--tk-yellow);
        margin: 0 5px;
    }

    /* Reset vị trí ảnh */
    .collage-1983-container,
    .collage-2014-container {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
    }

    .img-1983-baby,
    .img-1983-kids,
    .img-1983-family,
    .img-2014-cons,
    .img-2014-sky,
    .img-overlap-left {
        position: static;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .img-2010-wrapper {
        margin-left: 0;
    }

    /* Trên mobile, nút nên có khoảng cách với nội dung bên trên */
    .btn-timeline-industrial {
        margin-top: 30px;
        width: auto;
        /* Không full width nữa */
        display: inline-block;
        padding: 15px 40px;
    }

    /* Ẩn cột vàng chứa nút trên mobile đi */
    .row.g-0 .col-lg-2.bg-tk-yellow.pt-0.pb-0 {
        background: transparent !important;
    }
}

.last-timeline .timeline-col-yellow {
    min-height: 190px;
}

/* --- NEWS & UPDATES SECTION --- */

/* Tiêu đề chính */
.news-main-title {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 45px;
    line-height: 70px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* Nút điều hướng (< >) */
.nav-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 0;
}

.nav-btn:hover {
    transform: scale(1.2);
}

/* --- NEWS CARD --- */
.news-card {
    cursor: pointer;
    transition: transform 0.3s;
}

.news-card:hover {
    transform: translateY(-5px);
}


.news-img-rounded {
    display: block;
    /* Đảm bảo ảnh luôn fit khung */
    height: 250px;
    object-fit: cover;
}

/* Tag danh mục (Investment, News...) */
.badge-tag {
    background-color: #E0E0E0;
    /* Màu xám đúng mẫu */
    color: #000;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    padding: 8px 16px;
    /* Padding dày dặn hơn */
    border-radius: 4px;
    display: inline-block;
}

/* Xử lý ảnh Thumbnail đặc biệt */
.news-thumb {
    overflow: hidden;
    width: 100%;
    /* Bo góc dưới bên trái cực lớn (60px) như design */

    transition: opacity 0.3s;
}

.news-img-custom {
    display: block;
    height: 240px;
    /* Chiều cao cố định cho ảnh đều nhau */
    object-fit: cover;
    width: 100%;
}

.news-card:hover .news-thumb {
    opacity: 0.9;
    /* Hiệu ứng hover nhẹ */
}

/* Tiêu đề bài viết */
.news-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    /* Bold đậm hơn */
    font-size: 19px;
    line-height: 1.3;
    margin-top: 10px;
    padding-right: 10px;
    /* Chừa lề phải một chút */

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- SCROLL CONTAINER (Ẩn thanh cuộn) --- */
.news-scroll-container {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    scroll-behavior: smooth;
}

.news-scroll-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .news-main-title {
        font-size: 32px;
        line-height: 1.2;
    }

    .news-title {
        font-size: 20px;
        line-height: 1.4;
    }

    .news-img-rounded {
        height: 200px;
    }
}

/* --- GAM CHANGERS SECTION (HARD FIXED PIXEL) --- */
.gam-changer-section {
    background-image: url('../images/gam-changer-bg.png');
    background-size: cover;
    background-position: center;
    /* Chiều cao cố định để chứa đủ ảnh TK lớn */
    height: 700px;
    overflow: hidden;
    position: relative;
}

.gam-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Nền tối */
    z-index: 1;
}

/* --- STAGE (SÂN KHẤU CỐ ĐỊNH) --- */
.gam-stage {
    position: relative;
    width: 100%;
    max-width: 1200px;
    /* Khóa chiều rộng vùng làm việc */
    height: 100%;
    margin: 0 auto;
    /* Căn giữa màn hình */
}

/* --- BOX NỘI DUNG (LỚP DƯỚI) --- */
.gam-fixed-card {
    position: absolute;
    right: 130px;
    /* Cách lề phải stage 50px */
    top: 50%;
    transform: translateY(-50%);
    /* Căn giữa chiều dọc */

    width: 310px;
    /* Chiều rộng cố định */
    height: 430px;
    /* Chiều cao cố định */

    background-color: #000;
    padding: 50px 10px 10px 10px;
    /* Padding trái lớn (100px) để chừa chỗ cho tay TK đè lên mà không che chữ */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8);
    border: 1px solid #727272;
    z-index: 10;
    /* Z-index thấp */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gam-logo-fixed {
    width: 190px;
    height: auto;
}

.listen-btn-fixed {
    height: 40px;
    width: auto;
}

.gam-desc-fixed {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 34px;
    color: #fff;
    text-align: center;
}

/* --- ẢNH TK (LỚP TRÊN) --- */
.tk-fixed-img-wrapper {
    position: absolute;
    top: -180px;
    /* Dính đáy section */
    left: 0;
    /* Dính lề trái stage */
    z-index: 20;
    /* Z-index cao hơn Box (20 > 10) => Đè lên */

    /* Kích thước wrapper cố định */
    width: 900px;
    height: 900px;
    pointer-events: none;
    /* Không chặn click */
}

.tk-img-fixed {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom left;
    filter: drop-shadow(20px 20px 50px rgba(0, 0, 0, 0.6));
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 991px) {
    .gam-changer-section {
        height: auto;
        padding: 60px 0;
    }

    .gam-card-mobile {
        background: #000;
    }
}

/* --- 4. MENU OVERLAY (SIDEBAR) --- */
/* 1. Cập nhật class .menu-link */
.menu-link {
    display: flex;
    /* Để mũi tên và chữ nằm ngang hàng */
    align-items: center;
    /* Căn giữa theo chiều dọc */
    font-family: 'Antonio', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.3;
    transition: all 0.3s ease;
    /* Hiệu ứng mượt mà */
}

/* 2. Style cho Mũi tên (Mặc định ẩn đi) */
.hover-arrow-icon {
    opacity: 0;
    /* Ẩn hoàn toàn */
    transform: translateX(-20px);
    /* Dịch sang trái 20px để lấy đà */
    /* Khoảng cách giữa mũi tên và chữ */
    /* Kích thước mũi tên nhỏ hơn chữ chút */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Hiệu ứng nảy nhẹ */
    color: #000;
    font-size: 0.8rem;
    margin-left: 10px;
    vertical-align: middle;
}

/* 3. Hiệu ứng khi Hover vào Menu Link */
.menu-link:hover {
    /* XÓA dòng filter: blur(...) cũ đi nếu bạn muốn chữ nét căng */
    filter: none;
    opacity: 1;
    padding-left: 10px;
    /* Chữ dịch nhẹ sang phải chút cho đẹp */
}

/* Khi hover thì mũi tên hiện ra */
.menu-link:hover .hover-arrow-icon {
    opacity: 1;
    /* Hiện lên */
    transform: translateX(0);
    /* Trượt về vị trí gốc */
}

.menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 500px;
    /* Sidebar rộng 500px trên desktop */
    height: 100vh;
    background-color: var(--tk-yellow);
    z-index: 2000;
    padding: 60px 0;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.menu-overlay.active {
    transform: translateX(0);
}

.menu-close-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #000;
    cursor: pointer;
    transition: transform 0.3s;
}

.menu-close-btn:hover {
    transform: rotate(90deg);
}

.menu-link {
    display: block;
    font-family: 'Antonio', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.3;
    transition: padding-left 0.3s;
}


.menu-link.active {
    filter: blur(1.5px);
    /* Làm mờ chữ */
    opacity: 0.5;
    /* Làm trong suốt bớt */
    pointer-events: none;
    /* Không cho click */
}

.menu-link:hover {}

.menu-link.small {
    font-size: 1.8rem;
}

.has-submenu i {
    font-size: 0.8rem;
    margin-left: 10px;
    vertical-align: middle;
}

/* Responsive Menu Mobile */
@media (max-width: 576px) {
    .menu-link {
        font-size: 1.8rem;
    }

    .menu-overlay {
        max-width: 100%;
    }

    /* Full màn hình trên đt */
}

/* --- SPEAKING ENGAGEMENTS FIX --- */
.speaking-section {
    background-image: url('../images/speaking-bg.jpg');
    background-size: cover;
    background-position: center;
    /* Tăng chiều cao để hình người đứng thoải mái */
    height: 850px;
    position: relative;
    overflow: hidden;
}

.speaking-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1;
}

/* --- ẢNH TK ĐỨNG (Ghim Đáy) --- */
.tk-standing-absolute {
    position: absolute;
    bottom: 0;
    /* Chân chạm đáy */
    left: 0px;
    /* Đẩy sang trái một chút để cân đối */
    height: 90%;
    /* Chiều cao ảnh so với section */
    z-index: 10;
    pointer-events: none;
}

.tk-full-height {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom left;
}

/* --- COLLAGE IMAGES (Viền trắng) --- */
.border-white-fix {
    /* Ép buộc hiển thị viền trắng 5px */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    display: block;
    /* Đảm bảo border không bị lỗi layout */
    width: 100%;
}

.speaking-collage {
    height: 450px;
    /* Tăng chiều cao vùng collage */
    width: 100%;
    position: relative;
}

.collage-item {
    position: absolute;
    transition: transform 0.3s;
}

.collage-item:hover {
    transform: scale(1.02);
    z-index: 50;
}

/* Vị trí ảnh Collage */
.item-top {
    top: 0;
    right: 0;
    width: 100%;
    z-index: 1;
}

.item-bottom-right {
    bottom: 45px;
    right: 26px;
    width: 55%;
    z-index: 2;
}

.item-bottom-left {
    bottom: -30px;
    left: 0;
    width: 50%;
    z-index: 3;
}

/* --- TEXT CONTENT --- */
.speaking-title {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 1;
    text-transform: uppercase;
}

.speaking-desc {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0.02em;
    color: #A2A29E;
    opacity: 0.9;
}

/* Button Yellow */
.btn-speaking-yellow {
    background-color: var(--tk-yellow);
    color: #000;
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 35px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    margin-top: 20px;
}

/* --- MOBILE --- */
@media (max-width: 991px) {
    .speaking-section {
        height: auto;
        padding: 60px 0;
    }

    /* Ẩn ảnh đứng trên mobile hoặc hiển thị dạng thường */
    .tk-standing-absolute {
        position: relative;
        height: 400px;
        left: 0;
        bottom: 0;
        margin-bottom: 30px;
        text-align: center;
    }

    .tk-full-height {
        height: 100%;
        width: auto;
    }

    .speaking-collage {
        height: 350px;
        margin-top: 40px;
    }
}

/* --- MILESTONES SECTION --- */
.milestones-section {
    overflow: hidden;
    /* Ẩn thanh cuộn ngang của trang web nếu line đỏ quá dài */
}

.milestones-heading {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 45px;
    line-height: 70px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* 1. LINE ĐỎ FULL WIDTH */
.milestone-fullwidth-lines {
    position: absolute;
    left: 0;
    width: 100%;
    /* Full màn hình */

    /* Căn chỉnh vị trí (Top) và Chiều cao (Height) để khớp với ảnh */
    /* Bạn có thể cần tinh chỉnh số px này tùy vào kích thước ảnh thực tế trên màn hình */
    top: 156px;
    height: 291px;

    /* Vẽ 2 đường kẻ */
    border-top: 1px solid #585858;
    border-bottom: 1px solid #585858;

    z-index: 1;
    /* Nằm dưới nội dung nhưng trên nền đen */
    pointer-events: none;
    /* Không chặn click chuột */
}

/* 2. CARD & ẢNH */
.milestone-card {
    min-width: 300px;
    max-width: 320px;
    flex: 0 0 auto;
    cursor: pointer;
    /* Xóa border cũ của slide nếu không cần nữa, hoặc giữ lại tùy bạn */
    /* border: 1px solid rgba(255,255,255,0.1); */
    padding: 0;
}

.milestone-img-box {
    position: relative;
    padding: 15px 0;
    /* Tạo khoảng hở nhỏ giữa ảnh và 2 đường kẻ đỏ cho thoáng */
}

.milestone-photo {
    height: 290px;
    /* CỐ ĐỊNH CHIỀU CAO ẢNH để khớp với khung đỏ */
    width: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.4s;
    /* Bỏ viền trắng của ảnh */
    border: none;
}

.milestone-card:hover .milestone-photo {
    filter: grayscale(0%);
}

/* Cup */
.milestone-cup {
    position: absolute;
    bottom: -41px;
    right: 0px;
    width: 75px;
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8));
}

.milestone-tiktok {
    position: absolute;
    bottom: -58px;
    right: 0px;
    width: 75px;
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8));
}

.milestone-wechoice {
    position: absolute;
    bottom: -45px;
    right: 10px;
    width: 28px;
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8));
}

.milestone-medal {
    position: absolute;
    bottom: -67px;
    right: 0px;
    width: 86px;
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8));
}

.milestone-ted {
    position: absolute;
    bottom: -32px;
    right: 0px;
    width: 86px;
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8));
}

.milestone-hennessy {
    position: absolute;
    bottom: -42px;
    right: 0px;
    width: 86px;
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8));
}

/* Typography */
.milestone-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 5px;
}

.milestone-sub {
    font-family: 'Mona Sans', sans-serif;
    font-size: 14px;
    color: #999;
}

/* Scrollbar ẩn */
.milestones-scroll-container {
    scrollbar-width: none;
}

.milestones-scroll-container::-webkit-scrollbar {
    display: none;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    /* Trên mobile, có thể cần chỉnh lại vị trí line đỏ */
    .milestone-fullwidth-lines {
        top: 100px;
        height: 280px;
    }

    .milestone-photo {
        height: 250px;
    }
}

/* --- CONNECT SECTION (NEWSLETTER) --- */
.bg-tk-yellow {
    background-color: var(--tk-yellow);
    /* Màu vàng thương hiệu */
}

.connect-title {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 50px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
}

.connect-desc {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    max-width: 600px;
    color: #464646;
}

/* Form Styles */
.connect-form {
    max-width: 700px;
}

.custom-input {
    border-radius: 10px;
    /* Bo tròn các ô input */
    border: none;
    padding: 15px 20px;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    /* Chữ đậm trong placeholder */
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
}

.custom-input::placeholder {
    color: #000;
    /* Placeholder màu đen */
}

.custom-input:focus {
    box-shadow: none;
    outline: 2px solid #000;
}

/* Subscribe Button */
.btn-subscribe {
    background: transparent;
    color: #000;
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 40px;
    text-transform: uppercase;
    border: 1px solid #000;
    /* Viền đen mỏng */
    cursor: pointer;
    transition: all 0.3s;

    /* Cắt góc nhẹ (Industrial look) */
    clip-path: polygon(10px 0, 100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px);
}

.btn-subscribe:hover {
    background-color: #000;
    color: var(--tk-yellow);
}

/* --- FOOTER (SOCIALS) --- */
.footer-section {
    border-top: 1px solid #222;
    /* Viền mờ ngăn cách nếu cần */
}

.social-link {
    text-decoration: none;
    color: #fff;
    /* Mặc định icon màu trắng */
    transition: transform 0.3s, color 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-icon {
    font-size: 28px;
    /* Kích thước icon */
    background: #333;
    /* Nền xám cho icon */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    /* Bo góc vuông nhẹ */
    transition: background 0.3s, color 0.3s;
}

/* Style riêng cho Instagram (Active) */
.social-link.active .social-icon {
    background-color: var(--tk-yellow);
    /* Nền vàng */
    color: #000;
    /* Icon đen */
}

.social-text {
    color: #fff;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.social-link.active .social-text {
    color: var(--tk-yellow);
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover effects */
.social-link:hover {
    transform: translateY(-5px);
}

.social-link:hover .social-icon {
    background-color: var(--tk-yellow);
    /* Nền vàng */
    color: #000;
}

.social-link:hover .social-text {
    color: var(--tk-yellow);
}

.social-link:not(.active):hover .social-icon {
    /* background-color: #555;*/
}

/* --- 1. LENIS SMOOTH SCROLL (Giữ lại để cuộn mượt) --- */
/* --- 1. LENIS SMOOTH SCROLL FIX --- */
html.lenis, html.lenis body {
    height: auto;
}

/* Quan trọng: Đảm bảo trên mobile scroll behavior là mặc định */
@media (max-width: 1024px) {
    html, body {
        scroll-behavior: smooth !important; /* Dùng mượt mặc định của trình duyệt */
        overflow-x: hidden;
        width: 100%;
        height: auto !important; /* Tránh việc bị set cứng chiều cao */
    }
}
/* Riêng cho Mobile: Dùng svh để không bị nhảy khi thanh địa chỉ co giãn */
@media (max-width: 991px) {
    .hero-section {
        height: 100svh !important; /* Quan trọng: svh ổn định hơn vh */
        min-height: auto !important;
    }
    
    /* Đảm bảo html/body không bị khóa chiều cao */
    html, body {
        height: auto !important;
        overflow-x: hidden;
        overscroll-behavior-y: none; /* Ngăn chặn hiệu ứng kéo nảy (rubber band) của iOS */
    }
}
.lenis.lenis-smooth {
    scroll-behavior: auto;
}

/* Tùy chỉnh thanh cuộn cho đẹp hơn (tùy chọn) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: #000;
}

/* --- 2. ANIMATION UTILITIES (Giữ lại hiệu ứng chữ và ảnh) --- */

/* Wrapper để che phần chữ trượt lên */
.reveal-text-wrapper {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

/* Phần chữ bên trong sẽ trượt từ dưới lên */
.reveal-text-inner {
    display: inline-block;
    transform: translateY(110%);
    /* Mặc định ẩn bên dưới */
}

/* Class hỗ trợ ảnh Parallax */
.parallax-img-wrapper {
    overflow: hidden;
    position: relative;
}

.timeline-head {
    color: var(--tk-yellow) !important;
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.timeline-loc {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    max-width: 800px;
}

.timeline-desc {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0.02em;
    color: #A2A29E;
    opacity: 0.9;
}

.milestone-content {
    width: 190px;
}

.menu-content {
    padding-left: 30px;
}

.sticky-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

/* =========================================
   MOBILE RESPONSIVE FIXES (MAX-WIDTH: 991px)
   ========================================= */

@media (max-width: 991px) {

    /* --- 1. GLOBAL TYPOGRAPHY --- */
    /* Giảm kích thước chữ tiêu đề lớn để không bị tràn màn hình */
    .journey-title,
    .speaking-title,
    .milestones-heading,
    .connect-title,
    .news-main-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    .intro-desc {
        font-size: 24px !important;
        /* Chữ intro nhỏ lại */
    }

    /* --- 2. HERO SECTION --- */
    .hero-logo {
        max-width: 80% !important;
        /* Logo không quá to trên mobile */
    }

    /* --- 3. VENTURES SECTION --- */
    /* Cho các ô dự án cao vừa phải */
    .venture-card {
        height: 250px !important;
    }

    /* Bỏ hiệu ứng cắt góc phức tạp nếu muốn (hoặc giữ nguyên nếu thấy ổn) */
    /* .venture-card { clip-path: none !important; } */

    /* --- 4. JOURNEY TIMELINE (QUAN TRỌNG: FIX VỠ ẢNH) --- */
    /* Reset cột vàng */
    .timeline-col-yellow {
        background: transparent !important;
        min-height: auto !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Stack năm (19 83) thành hàng ngang */
    .year-stack {
        flex-direction: row !important;
        justify-content: flex-start !important;
        margin: 10px 0 !important;
    }

    .year-stack span {
        font-size: 60px !important;
        /* Giảm size số năm */
        margin-right: 10px;
    }

    /* Reset toàn bộ ảnh Collage Timeline về dạng khối dọc */
    .collage-1983-container,
    .collage-2014-container,
    .img-2010-wrapper {
        height: auto !important;
        max-width: 100% !important;
        margin: 20px 0 !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Chia 2 cột ảnh */
        gap: 10px;
    }

    /* Reset vị trí absolute của từng ảnh */
    .img-1983-baby,
    .img-1983-kids,
    .img-1983-family,
    .img-2014-cons,
    .img-2014-sky,
    .img-overlap-left {
        position: static !important;
        /* Bỏ absolute */
        width: 100% !important;
        margin: 0 !important;
    }

    /* Riêng ảnh 2010 to */
    .img-overlap-left {
        grid-column: span 2;
        /* Chiếm full chiều rộng */
    }

    /* Nút xem full timeline */
    .listen-btn-fixed {
        height: 40px;
        /* Nút nhỏ lại */
        margin-top: 20px;
    }

    /* --- 5. GAM CHANGERS --- */
    .gam-changer-section {
        height: auto !important;
        padding: 50px 0 !important;
    }

    /* Box mobile */
    .gam-card-mobile {
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid #333;
        margin-top: -50px;
        /* Đẩy lên đè nhẹ vào ảnh */
        position: relative;
        z-index: 2;
    }

    /* --- 6. SPEAKING ENGAGEMENTS --- */
    .speaking-section {
        height: auto !important;
        padding: 60px 0;
    }

    /* Collage ảnh sự kiện: Xếp chồng gọn lại */
    .speaking-collage {
        height: 300px !important;
        margin-top: 40px;
    }

    .item-top {
        width: 90% !important;
        right: 5% !important;
        /* Căn giữa */
    }

    .item-bottom-right {
        width: 60% !important;
        bottom: 0 !important;
        right: 0 !important;
    }

    .item-bottom-left {
        width: 60% !important;
        bottom: -20px !important;
        left: 0 !important;
    }

    /* --- 7. MILESTONES (FIX LINE ĐỎ) --- */
    /* Vì trên mobile chiều cao ảnh thay đổi, ta nên ẩn line absolute đi và dùng border container */
    .milestone-fullwidth-lines {
        display: none !important;
        /* Ẩn line cứng */
    }

    .milestone-img-box {
        border-top: 1px solid #585858;
        border-bottom: 1px solid #585858;
        padding: 15px 0;
    }

    /* Giảm chiều cao ảnh trên mobile */
    .milestone-photo {
        height: 250px !important;
    }

    /* Chỉnh vị trí Cúp */
    .milestone-cup,
    .milestone-tiktok,
    .milestone-medal,
    .milestone-ted,
    .milestone-hennessy {
        width: 60px !important;
        /* Cúp nhỏ lại */
        bottom: -30px !important;
    }

    /* --- 8. CONNECT FORM --- */
    .connect-form {
        width: 100%;
        padding: 0 15px;
    }

    /* Input full width */
    .custom-input {
        width: 100%;
    }

    /* --- 9. MENU OVERLAY --- */
    .menu-overlay {
        max-width: 100% !important;
        /* Full màn hình mobile */
    }

    .menu-link {
        font-size: 40px !important;
        /* Chữ menu to vừa phải */
    }
}

/* Fix riêng cho màn hình điện thoại nhỏ (dưới 576px) */
@media (max-width: 576px) {

    .journey-title,
    .speaking-title {
        font-size: 32px !important;
    }

    .collage-1983-container {
        grid-template-columns: 1fr;
        /* Ảnh xếp dọc 1 cột cho to */
    }

    .img-overlap-left {
        grid-column: span 1;
    }
}

/* =========================================
   MOBILE RESPONSIVE FIXES (MAX-WIDTH: 991px)
   ========================================= */

@media (max-width: 991px) {

    /* --- 1. GLOBAL TYPOGRAPHY --- */
    /* Giảm kích thước chữ tiêu đề lớn để không bị tràn màn hình */
    .journey-title,
    .speaking-title,
    .milestones-heading,
    .connect-title,
    .news-main-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    .intro-desc {
        font-size: 24px !important;
        /* Chữ intro nhỏ lại */
    }

    /* --- 2. HERO SECTION --- */
    .hero-logo {
        max-width: 80% !important;
        /* Logo không quá to trên mobile */
    }

    /* --- 3. VENTURES SECTION --- */
    /* Cho các ô dự án cao vừa phải */
    .venture-card {
        height: 250px !important;
    }

    /* Bỏ hiệu ứng cắt góc phức tạp nếu muốn (hoặc giữ nguyên nếu thấy ổn) */
    /* .venture-card { clip-path: none !important; } */

    /* --- 4. JOURNEY TIMELINE (QUAN TRỌNG: FIX VỠ ẢNH) --- */
    /* Reset cột vàng */
    .timeline-col-yellow {
        background: transparent !important;
        min-height: auto !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Stack năm (19 83) thành hàng ngang */
    .year-stack {
        flex-direction: row !important;
        justify-content: flex-start !important;
        margin: 10px 0 !important;
    }

    .year-stack span {
        font-size: 60px !important;
        /* Giảm size số năm */
        margin-right: 10px;
    }

    /* Reset toàn bộ ảnh Collage Timeline về dạng khối dọc */
    .collage-1983-container,
    .collage-2014-container,
    .img-2010-wrapper {
        height: auto !important;
        max-width: 100% !important;
        margin: 20px 0 !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Chia 2 cột ảnh */
        gap: 10px;
    }

    /* Reset vị trí absolute của từng ảnh */
    .img-1983-baby,
    .img-1983-kids,
    .img-1983-family,
    .img-2014-cons,
    .img-2014-sky,
    .img-overlap-left {
        position: static !important;
        /* Bỏ absolute */
        width: 100% !important;
        margin: 0 !important;
    }

    /* Riêng ảnh 2010 to */
    .img-overlap-left {
        grid-column: span 2;
        /* Chiếm full chiều rộng */
    }

    /* Nút xem full timeline */
    .listen-btn-fixed {
        height: 40px;
        /* Nút nhỏ lại */
        margin-top: 20px;
    }

    /* --- 5. GAM CHANGERS --- */
    .gam-changer-section {
        height: auto !important;
        padding: 50px 0 !important;
    }

    /* Box mobile */
    .gam-card-mobile {
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid #333;
        margin-top: -50px;
        /* Đẩy lên đè nhẹ vào ảnh */
        position: relative;
        z-index: 2;
    }

    /* --- 6. SPEAKING ENGAGEMENTS --- */
    .speaking-section {
        height: auto !important;
        padding: 60px 0;
    }

    /* Collage ảnh sự kiện: Xếp chồng gọn lại */
    .speaking-collage {
        height: 300px !important;
        margin-top: 40px;
    }

    .item-top {
        width: 90% !important;
        right: 5% !important;
        /* Căn giữa */
    }

    .item-bottom-right {
        width: 60% !important;
        bottom: 0 !important;
        right: 0 !important;
    }

    .item-bottom-left {
        width: 60% !important;
        bottom: -20px !important;
        left: 0 !important;
    }

    /* --- 7. MILESTONES (FIX LINE ĐỎ) --- */
    /* Vì trên mobile chiều cao ảnh thay đổi, ta nên ẩn line absolute đi và dùng border container */
    .milestone-fullwidth-lines {
        display: none !important;
        /* Ẩn line cứng */
    }

    .milestone-img-box {
        border-top: 1px solid #585858;
        border-bottom: 1px solid #585858;
        padding: 15px 0;
    }

    /* Giảm chiều cao ảnh trên mobile */
    .milestone-photo {
        height: 250px !important;
    }

    /* Chỉnh vị trí Cúp */
    .milestone-cup,
    .milestone-tiktok,
    .milestone-medal,
    .milestone-ted,
    .milestone-hennessy {
        width: 60px !important;
        /* Cúp nhỏ lại */
        bottom: -30px !important;
    }

    /* --- 8. CONNECT FORM --- */
    .connect-form {
        width: 100%;
        padding: 0 15px;
    }

    /* Input full width */
    .custom-input {
        width: 100%;
    }

    /* --- 9. MENU OVERLAY --- */
    .menu-overlay {
        max-width: 100% !important;
        /* Full màn hình mobile */
    }

    .menu-link {
        font-size: 40px !important;
        /* Chữ menu to vừa phải */
    }
}

/* Fix riêng cho màn hình điện thoại nhỏ (dưới 576px) */
@media (max-width: 576px) {

    .journey-title,
    .speaking-title {
        font-size: 32px !important;
    }

    .collage-1983-container {
        grid-template-columns: 1fr;
        /* Ảnh xếp dọc 1 cột cho to */
    }

    .img-overlap-left {
        grid-column: span 1;
    }
}

/* =========================================
   TIMELINE MOBILE REORDER FIX (Order: Year -> Text -> Image)
   ========================================= */

@media (max-width: 991px) {
    .timeline-wrapper {
        padding-top: 10px
    }

    /* 1. Thiết lập Flex Column cho từng dòng Timeline */
    .timeline-row {
        display: flex;
        flex-direction: column;
        padding-bottom: 40px;
        /* Khoảng cách giữa các mốc thời gian */
    }

    /* 2. Cấu hình chung cho cột Năm (Year) */
    .timeline-col-yellow {
        background: transparent !important;
        min-height: auto !important;
        width: 100% !important;
        padding: 0 !important;
        /* Đặt thứ tự ưu tiên hiển thị đầu tiên */
        order: 1;
        margin-bottom: 10px;
    }

    .year-stack {
        flex-direction: row !important;
        /* Số năm nằm ngang: 19 83 */
        justify-content: flex-start !important;
        /* Căn trái */
        margin: 0 !important;
    }

    .year-stack span {
        font-size: 60px !important;
        color: var(--tk-yellow);
        margin-right: 0px;
        line-height: 1;
    }

    /* 3. XỬ LÝ DÒNG 1 (1983) VÀ DÒNG 3 (2014) */
    /* Cấu trúc HTML gốc: [Image] - [Year] - [Text] */
    .timeline-row:nth-of-type(1)>div:nth-child(1),
    /* Image */
    .timeline-row:nth-of-type(3)>div:nth-child(1) {
        order: 3;
        /* Đẩy xuống cuối */
        margin-top: 20px !important;
    }

    .timeline-row:nth-of-type(1)>div:nth-child(3),
    /* Text */
    .timeline-row:nth-of-type(3)>div:nth-child(3) {
        order: 2;
        /* Nằm giữa */
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        /* Reset padding trái của desktop */
        text-align: left !important;
    }

    /* 4. XỬ LÝ DÒNG 2 (2010) */
    /* Cấu trúc HTML gốc: [Text] - [Year] - [Image] */
    .timeline-row:nth-of-type(2)>div:nth-child(1) {
        /* Text */
        order: 2;
        /* Nằm giữa */
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-right: 0 !important;
        /* Reset padding phải của desktop */
        text-align: left !important;
    }

    .timeline-row:nth-of-type(2)>div:nth-child(3) {
        /* Image */
        order: 3;
        /* Đẩy xuống cuối */
        margin-top: 0px !important;
    }

    /* 5. RESET STYLE CHO ẢNH (COLLAGE THÀNH GRID) */
    .collage-1983-container,
    .collage-2014-container,
    .img-2010-wrapper {
        height: auto !important;
        max-width: 100% !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Chia 2 cột ảnh cho gọn */
        gap: 10px;
        margin: 0 !important;
    }

    /* Reset vị trí ảnh absolute về bình thường */
    .img-1983-baby,
    .img-1983-kids,
    .img-1983-family,
    .img-2014-cons,
    .img-2014-sky,
    .img-overlap-left,
    .img-fluid {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        /* Bỏ bóng đổ nếu muốn sạch sẽ hơn */
        border-radius: 10px;
        /* Bo góc nhẹ cho đẹp */
    }

    /* Ảnh to năm 2010 chiếm full chiều rộng */
    .img-overlap-left {
        grid-column: span 2;
    }

    /* Canh chỉnh lại tiêu đề Text */
    .timeline-head {
        font-size: 30px !important;
        margin-bottom: 10px;
    }

    .timeline-desc {
        font-size: 16px !important;
        color: #ccc !important;
    }

    .timeline-loc {

        /* Nằm dưới tiêu đề */
        display: flex;
        /* Dùng flex để đảo icon */
        /* Căn trái */
    }

    .timeline-loc i {
        order: -1;
        /* Luôn đẩy icon lên trước text bất kể HTML viết thế nào */
        margin-right: 10px !important;
        margin-left: 0 !important;
        margin-top: 5px !important;
        /* Reset margin cũ */
        color: #fff;
    }

    .gam-changer-section {
        background-repeat: no-repeat !important;
        /* Không lặp lại background */
        background-size: cover !important;
        background-position: top center !important;
    }

}

/* --- ANIMATION HELPER --- */

/* Ẩn overflow để chữ trượt từ dưới lên trông như chui ra từ mặt đất */
.hero-title,
.intro-desc,
.section-title,
.journey-title,
.speaking-title,
.milestones-heading,
.connect-title {
    /* Quan trọng cho hiệu ứng reveal */
    will-change: transform, opacity;
}

/* Đảm bảo ảnh Parallax không bị đè lên header */
.intro-image-desktop,
.tk-fixed-img-wrapper,
.tk-standing-absolute {
    will-change: transform;
    /* Tối ưu hiệu năng render */
}

/* --- HERO LOGO ANIMATION SETUP --- */
.hero-logo-text {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 180px;
    /* Tùy chỉnh kích thước */
    color: var(--tk-yellow);
    line-height: 1;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    /* Căn giữa toàn bộ */
    align-items: center;
    overflow: hidden;
    margin: 0;
}

/* Các chữ cái đơn lẻ */
.char-tk,
.char-n {
    display: inline-block;
    will-change: transform, opacity;
}

/* Nhóm chứa NGUYEN */
.nguyen-group {
    display: flex;
    overflow: hidden;
    /* Để có thể animate width từ 0 -> auto */
    width: 0;
    /* Mặc định bằng 0 để TK nằm chính giữa */
    opacity: 0;
}

.spacer {
    display: inline-block;
    min-width: 30px;
    /* Khoảng cách giữa TK và NGUYEN */
}

/* Responsive */
@media (max-width: 991px) {
    .hero-logo-text {
        font-size: 100px;
    }

    .spacer {
        min-width: 15px;
    }
}

@media (max-width: 576px) {
    .hero-logo-text {
        font-size: 80px;
    }
}

/* --- SCROLL ICON ANIMATION --- */
/* --- SCROLL ICON ANIMATION (SIZE NHỎ) --- */

/* 1. Giảm kích thước khung bao xuống còn 55px (Cũ là 120px) */
.scroll-circle-wrapper {
    position: relative;
    width: 55px;
    /* <--- Đã sửa: Nhỏ hơn 1/2 kích thước cũ */
    height: 55px;
    /* <--- Đã sửa */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* 2. SVG giữ nguyên, nó sẽ tự co theo khung cha */
.scroll-text-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: rotateText 10s linear infinite;
}

/* 3. Giảm kích thước mũi tên cho cân đối (Cũ là 30px) */
.scroll-arrow-center {
    position: relative;
    z-index: 2;
    color: var(--tk-yellow);
    font-size: 14px;
    /* <--- Đã sửa: Giảm xuống còn 14px */
}

/* Các phần khác giữ nguyên */
.scroll-text-path {
    fill: var(--tk-yellow);
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    font-size: 26px;
    /* Giữ nguyên số này, SVG tự scale */
    letter-spacing: 5px;
    text-transform: uppercase;
}

@keyframes rotateText {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- BUTTON BOOK TK TO SPEAK --- */
.btn-book-tk {
    /* 1. Thiết lập ảnh nền */
    background-image: url('../images/see-photo-btt-bg.png');
    /* Tên file ảnh nền bạn vừa up */
    background-size: 100% 100%;
    /* Kéo giãn ảnh nền vừa khít khung */
    background-repeat: no-repeat;
    background-position: center;

    /* 2. Kích thước nút (Điều chỉnh cho khớp tỉ lệ ảnh) */
    display: inline-flex;
    /* Để căn giữa chữ */
    justify-content: center;
    align-items: center;

    /* Bạn có thể chỉnh width/height này tùy theo kích thước ảnh thực tế */
    min-width: 180px;
    height: 50px;
    
    /* Khoảng cách an toàn 2 bên */

    /* 3. Style cho chữ */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    /* Kích thước chữ */
    color: #000000;
    /* Chữ màu đen trên nền vàng */
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;

    /* 4. Hiệu ứng */
    transition: transform 0.3s ease, filter 0.3s ease;
    margin-top: 20px;
    /* Cách phần văn bản bên trên một chút */
}
.listen-btn{
    /* 1. Thiết lập ảnh nền */
    background-image: url('../images/listen-btt.png');
    /* Tên file ảnh nền bạn vừa up */
    background-size: 100% 100%;
    /* Kéo giãn ảnh nền vừa khít khung */
    background-repeat: no-repeat;
    background-position: center;

    /* 2. Kích thước nút (Điều chỉnh cho khớp tỉ lệ ảnh) */
    display: inline-flex;
    /* Để căn giữa chữ */
    justify-content: center;
    align-items: center;

    /* Bạn có thể chỉnh width/height này tùy theo kích thước ảnh thực tế */
    min-width: 180px;
    height: 50px;
    
    /* Khoảng cách an toàn 2 bên */

    /* 3. Style cho chữ */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    /* Kích thước chữ */
    color: #000000;
    /* Chữ màu đen trên nền vàng */
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;

    /* 4. Hiệu ứng */
    transition: transform 0.3s ease, filter 0.3s ease;
    padding-left:40px;
    /* Cách phần văn bản bên trên một chút */
}
/* --- BUTTON STYLE (Dùng chung cho Timeline & Subscribe) --- */
.btn-seefulltimeline-tk {
    /* 1. Thiết lập ảnh nền */
    background-image: url('../images/fulltimeline-btt.png'); 
    /* Lưu ý: Nếu nút Subscribe cần hình dáng khác, hãy đổi tên ảnh ở đây, ví dụ: url('../images/subscribe-bg.png') */
    
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    /* 2. Kích thước & Reset mặc định của Input */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    width: 180px;
    height: 50px;
    
    /* QUAN TRỌNG: Reset viền và nền của thẻ Input Submit */
    border: none !important; 
    background-color: transparent !important;
    cursor: pointer; /* Thêm con trỏ tay khi rê chuột */
    padding: 0; /* Xóa padding mặc định để căn giữa chuẩn */

    /* 3. Style cho chữ */
    font-family: 'Mona Sans', sans-serif; /* Đảm bảo bạn đã load font này */
    font-weight: 700;
    font-size: 15px;
    color: var(--tk-yellow); 
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;

    /* 4. Hiệu ứng */
    transition: transform 0.3s ease, filter 0.3s ease;
    margin: 0 auto;
}

/* Hiệu ứng khi rê chuột vào */
.btn-book-tk:hover,.btn-seefulltimeline-tk:hover,.listen-btn:hover {
    transform: translateY(-5px);
    /* Nổi lên nhẹ */
    filter: brightness(1.1);
    /* Sáng lên chút */
}

/* Responsive Mobile */
@media (max-width: 991px) {
    .btn-book-tk {
        min-width: 180px;
        height: 50px;
        font-size: 15px;
    }
}
/* --- PAGINATION STYLE --- */
.tk-pagination .nav-links {
    display: flex;
    gap: 10px;
}

.tk-pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #f1f1f1;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px; /* Bo nhẹ hoặc để 0 nếu muốn vuông */
    transition: all 0.3s;
    font-family: 'Antonio', sans-serif;
}

.tk-pagination .page-numbers.current,
.tk-pagination .page-numbers:hover {
    background-color: var(--tk-yellow); /* Màu vàng thương hiệu */
    color: #000;
}

.tk-pagination .prev, 
.tk-pagination .next {
    background-color: #000;
    color: #fff;
}

.tk-pagination .prev:hover, 
.tk-pagination .next:hover {
    background-color: var(--tk-yellow);
    color: #000;
}
/* --- SINGLE POST STYLE --- */

/* 1. Hero Banner */
.single-hero {
    height: 60vh; /* Chiều cao 60% màn hình */
    min-height: 400px;
    background-color: #000;
}
.single-hero .hero-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Hiệu ứng bóng đen giúp chữ dễ đọc trên nền ảnh */
.single-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    z-index: 1;
}

/* 2. Content Typography (Làm đẹp nội dung văn bản) */
.post-content p {
    margin-bottom:0px;
    color: #333;
}
.post-content h2, 
.post-content h3, 
.post-content h4 {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: #000;
}
.post-content blockquote {
    border-left: 5px solid var(--tk-yellow); /* Kẻ sọc vàng bên trái */
    padding-left: 20px;
    margin: 2rem 0;
    font-style: italic;
    font-size: 1.4rem;
    color: #000;
    font-family: 'Antonio', sans-serif;
}
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 2rem 0;
}
.post-content ul, .post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}
.post-content li {
    margin-bottom: 0.5rem;
}

/* 3. Navigation Buttons Hover Effect */
.nav-post-card {
    transition: all 0.3s ease;
}
.nav-post-card .hover-bg {
    transform: translateX(-101%); /* Ẩn nền vàng sang trái */
    transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
/* Khi hover: Nền vàng trượt vào */
.nav-post-card:hover .hover-bg {
    transform: translateX(0);
}
/* Khi hover: Text chuyển màu đen đậm hơn (hoặc giữ nguyên vì nền vàng chữ đen rất hợp) */
.nav-post-card:hover .text-muted {
    color: #000 !important; 
}
/* --- SHARE BUTTONS STYLE --- */
.share-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Hình tròn */
    background-color: #f1f1f1; /* Nền xám nhạt */
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
}

/* Hiệu ứng Hover: Nền đen, Icon vàng (Chuẩn TK Brand) */
.share-link:hover {
    background-color: #000;
    color: var(--tk-yellow); /* Màu vàng thương hiệu */
    transform: translateY(-3px); /* Nảy lên nhẹ */
}

/* Tùy chọn: Nếu muốn giữ màu gốc của từng mạng xã hội khi hover thì dùng code dưới (tùy bạn chọn) */
/* .share-link.facebook:hover { background-color: #3b5998; color: white; }
.share-link.linkedin:hover { background-color: #0077b5; color: white; }
.share-link.twitter:hover { background-color: #1da1f2; color: white; } 
*/
/* --- CONNECT / SUBSCRIBE SECTION STYLE --- */

/* 1. Input Fields (Nền trắng, bo góc) */
.custom-input {
    background-color: #fff !important;
    border: none !important;
    border-radius: 10px !important; /* Bo góc tròn như thiết kế */
    padding: 15px 20px !important;
    font-family: 'Antonio', sans-serif; /* Hoặc font bạn muốn */
    font-weight: 700;
    color: #000 !important;
    text-transform: uppercase;
}

.custom-input::placeholder {
    color: #000; /* Màu chữ placeholder đen */
    opacity: 1;
}

.custom-input:focus {
    box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
    background-color: #fff !important;
}
/* --- CUSTOM ERROR STYLES FOR CONTACT FORM 7 --- */

/* 1. Ẩn dòng chữ báo lỗi (Tips) bên dưới mỗi ô input */
.wpcf7-not-valid-tip {
    display: none !important;
}

/* 2. Hiển thị viền đỏ cho ô Input bị lỗi */
.custom-input.wpcf7-not-valid {
    border: 2px solid #ff0000 !important; /* Viền màu đỏ */
    background-color: #fff !important; /* Giữ nền trắng */
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.3) !important; /* Hiệu ứng phát sáng đỏ nhẹ */
}

/* 3. Tùy chỉnh dòng thông báo chung ở dưới cùng (Box màu cam trong hình bạn gửi) */
/* Chuyển nó thành chữ đơn giản, bỏ khung nền màu mè mặc định của CF7 */
.wpcf7-response-output {
    border: none !important; /* Bỏ viền khung */
    background: transparent !important; /* Nền trong suốt */
    color: #000 !important; /* Chữ màu đen hoặc trắng tùy bạn chọn */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    margin-top: 20px !important;
    padding: 0 !important;
    text-align: center;
}

/* Khi có lỗi (Validation errors) - Chữ màu đỏ */
.wpcf7-response-output.wpcf7-validation-errors {
    color: #cc0000 !important;
}

/* Khi gửi thành công - Chữ màu xanh hoặc trắng */
.wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #fff !important; 
}
.wpcf7-spinner{
    display:none;
}
/* --- HERO VIDEO BACKGROUND --- */

/* 1. Video Background */
.hero-video {
    z-index: 0; /* Nằm dưới cùng */
    object-fit: cover; /* Cắt video để lấp đầy màn hình mà không bị méo */
    font-family: 'object-fit: cover'; /* Polyfill cho IE cũ (nếu cần) */
}

/* 2. Lớp phủ tối (Overlay) */
/* Tạo cảm giác Cinematic giống Steven Bartlett */
.hero-overlay {
    background: rgba(0, 0, 0, 0.4); /* Màu đen, độ trong suốt 40% */
    /* Bạn có thể chỉnh 0.4 thành 0.6 nếu video quá sáng làm chìm chữ */
    z-index: 1; /* Nằm trên video */
    pointer-events: none; /* Cho phép click xuyên qua */
}

/* 3. Nội dung chính (Logo chữ, Scroll icon...) */
.hero-section .container {
    z-index: 2; /* Nằm trên cùng */
}

/* Tùy chỉnh riêng cho màn hình Mobile (Tùy chọn) */
@media (max-width: 768px) {
    /* Nếu muốn mobile vẫn hiện video thì giữ nguyên code này */
    /* Nếu muốn mobile hiện ảnh cho nhẹ thì dùng code dưới: */
    /* .hero-video { display: none; }
    .hero-section { background-image: url('assets/images/home-bg.png'); background-size: cover; }
    */
}
/* Chống double-click: Vô hiệu hóa nút Submit khi đang tải */
form.wpcf7-submitting .btn-seefulltimeline-tk {
    pointer-events: none !important; /* Không cho click nữa */
    opacity: 0.6 !important; /* Làm mờ đi một chút để user biết nút đang bị khóa */
    filter: grayscale(50%);
}
/* =========================================
   EDITORIAL BLOG STYLE (GAFFER INFLUENCED)
   ========================================= */

/* Tiện ích viền đen dày */
.border-black { 
    border-color: #000 !important; 
}
.border-2 { 
    border-width: 2px !important; 
}

/* Xử lý viền lưới dọc trên Desktop (Tránh bị viền đôi) */
@media (min-width: 992px) {
    .border-end-lg { 
        border-right: 2px solid #000 !important; 
    }
    .grid-post-item {
        border-right: 2px solid #000 !important;
    }
    /* Bỏ viền phải của phần tử thứ 3 mỗi hàng để không dính lề màn hình */
    .grid-post-item:nth-child(3n) {
        border-right: none !important;
    }
}

/* Xử lý viền dọc trên Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .grid-post-item {
        border-right: 2px solid #000 !important;
    }
    .grid-post-item:nth-child(2n) {
        border-right: none !important;
    }
}

/* --- ANIMATION & HOVER EFFECTS --- */
.img-zoom-wrapper {
    overflow: hidden;
}
.img-zoom-wrapper img {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.editorial-card:hover .img-zoom-wrapper img {
    transform: scale(1.05); /* Zoom ảnh nhẹ */
}

.title-hover {
    transition: color 0.3s ease;
}
.editorial-card:hover .title-hover {
    color: var(--tk-yellow); /* Tiêu đề chuyển vàng khi hover vào cả khung */
}

/* --- EDITORIAL TAGS --- */
.editorial-tag {
    display: inline-block;
    background-color: var(--tk-yellow);
    color: #000;
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    padding: 8px 20px;
    text-transform: uppercase;
    border: 2px solid #000;
    font-size: 1.2rem;
    box-shadow: 4px 4px 0px #000; /* Hiệu ứng đổ bóng cứng (Brutalism) */
    transition: transform 0.2s;
}
.editorial-card:hover .editorial-tag {
    transform: translate(2px, 2px); /* Tag lún xuống nhẹ */
    box-shadow: 2px 2px 0px #000;
}

.editorial-tag-small {
    display: inline-block;
    background-color: #000;
    color: var(--tk-yellow);
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    padding: 4px 12px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* --- PAGINATION (PHÂN TRANG MỚI) --- */
.tk-editorial-pagination .nav-links {
    display: flex;
    gap: 15px;
    align-items: center;
}
.tk-editorial-pagination .page-numbers {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    font-size: 1.3rem;
    padding: 10px 25px;
    border: 2px solid #000;
    transition: all 0.3s;
    background-color: #fff;
}
.tk-editorial-pagination .page-numbers.current,
.tk-editorial-pagination .page-numbers:hover {
    background-color: var(--tk-yellow);
    color: #000;
    box-shadow: 4px 4px 0px #000; /* Bóng Brutalism cho nút bấm */
    transform: translate(-2px, -2px);
}

/* =========================================
   GAFFER EDITORIAL BLOG STYLE
   ========================================= */

/* Hiệu ứng Zoom ảnh khi di chuột vào cả cụm (Card/Row) */
.img-zoom-wrapper {
    overflow: hidden;
    display: block;
}
.img-zoom-wrapper img {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); /* Zoom rất mượt và chậm rãi kiểu điện ảnh */
}
.group-hover:hover .img-zoom-wrapper img,
.alternating-post:hover .img-zoom-wrapper img {
    transform: scale(1.05);
}

/* Hiệu ứng đổi màu Tiêu đề */
.title-hover-yellow {
    transition: color 0.3s ease;
}
.group-hover:hover .title-hover-yellow,
.alternating-post:hover .title-hover-yellow {
    color: var(--tk-yellow) !important;
}

/* Hiệu ứng gạch chân của nút READ MORE */
.read-more-link {
    transition: all 0.3s ease;
    border-width: 2px !important; /* Gạch chân đậm đà */
}
.read-more-link:hover {
    color: var(--tk-yellow) !important;
    border-color: var(--tk-yellow) !important;
}
.alternating-post:hover .read-more-link {
    color: var(--tk-yellow) !important;
    border-color: var(--tk-yellow) !important;
}

/* Style Phân trang (Pagination) đồng bộ */
.tk-editorial-pagination .nav-links {
    display: flex;
    gap: 15px;
    align-items: center;
}
.tk-editorial-pagination .page-numbers {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    font-size: 1.2rem;
    padding: 10px 20px;
    border: 2px solid #000;
    transition: all 0.3s;
}
.tk-editorial-pagination .page-numbers.current,
.tk-editorial-pagination .page-numbers:hover {
    background-color: #000;
    color: var(--tk-yellow);
}

/* Mobile Responsive: Cân bằng lại chiều cao trên điện thoại */
@media (max-width: 991px) {
    .alternating-post .col-lg-6 {
        order: unset !important; /* Xóa order để trên mobile luôn hiển thị: Ảnh trên, Chữ dưới */
    }
    .alternating-post .img-zoom-wrapper img {
        min-height: 40vh !important; /* Ảnh thấp lại chút trên mobile */
    }
    .alternating-post > .col-lg-6:first-child {
        /* Đẩy ảnh lên trên chữ khi ở màn hình nhỏ */
        order: -1 !important; 
    }
}

/* =========================================
   SINGLE EDITORIAL POST STYLE
   ========================================= */

/* Nội dung bài viết chuyên nghiệp */
.post-content p {
    margin-bottom: 0px;
    color: #1a1a1a;
}


.post-content h2, 
.post-content h3, 
.post-content h4 {
    font-family: 'Antonio', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    color: #000;
    letter-spacing: -0.02em;
}

/* Blockquote kiểu tạp chí */
.post-content blockquote {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 2rem 0;
    margin: 3rem 0;
    font-size: 1.6rem;
    font-family: 'Antonio', sans-serif;
    color: #000;
    text-align: center;
    text-transform: uppercase;
}
.post-content blockquote p {
    margin-bottom: 0;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border: 2px solid #000; /* Viền đen cho ảnh trong bài */
    margin: 2.5rem 0;
}

/* Nút Share Brutalism */
.editorial-share-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
    text-decoration: none;
    font-size: 1.1rem;
    box-shadow: 3px 3px 0px #000;
    transition: all 0.2s;
}
.editorial-share-btn:hover {
    background-color: var(--tk-yellow);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #000;
    color: #000;
}

/* Khối điều hướng Next/Prev */
.nav-block-link {
    transition: background-color 0.3s;
}
.nav-block-link:hover {
    background-color: #f8f9fa; /* Sáng nhẹ lên khi hover */
}

/* Tiện ích border responsive */
@media (min-width: 768px) {
    .border-end-md {
        border-right: 2px solid #000 !important;
    }
}
@media (max-width: 767px) {
    .border-top-mobile {
        border-top: 2px solid #000 !important;
    }
}

/* --- 2. CANH GIỮA ẢNH ĐƠN --- */
.post-content img {
    max-width: 100%;
    height: auto;
    border: 2px solid #000; /* Giữ lại viền đen style tạp chí, nếu không thích bạn có thể xóa dòng này */
    
    /* Thuật toán ép ảnh luôn nằm giữa */
    display: block; 
    margin: 2rem auto; 
}

/* Ép luôn các thẻ chứa ảnh của WordPress (figure, wp-block-image) canh giữa */
.post-content figure, 
.post-content .wp-block-image {
    margin: 2rem auto;
    text-align: center;
}

.post-content figure figcaption {
    font-family: 'Mona Sans', sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}

/* --- 3. XỬ LÝ NHIỀU ẢNH TRÊN 1 DÒNG (GALLERY) --- */

/* Xử lý khối Gallery chuẩn của WordPress */
.post-content .wp-block-gallery,
.post-content .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Tự động canh đều khối ảnh ra giữa */
    gap: 0px; /* Khoảng cách giữa các ảnh */
    margin: 2rem auto;
    padding: 0;
}

.post-content .wp-block-gallery img,
.post-content .gallery img {
    margin: 0; /* Bỏ margin block ở trên để ảnh có thể đứng ngang nhau */
    display: inline-block;
}

/* Xử lý trường hợp bạn chèn thủ công nhiều ảnh liền nhau vào 1 đoạn văn (Dùng tính năng CSS :has hiện đại) */
.post-content p:has(img) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.post-content p:has(img) img {
    margin: 0; /* Xóa margin block để các ảnh đứng thành hàng ngang */
}

/* --- 4. XỬ LÝ VIDEO YOUTUBE EMBED TRONG BÀI VIẾT --- */

/* Đảm bảo khung bọc ngoài của video bung hết cỡ */
.post-content .wp-block-embed,
.post-content .wp-block-embed-youtube {
    width: 100%;
    margin: 2rem 0;
}

/* Tự động co giãn iframe (Video YouTube, Vimeo...) */
.post-content iframe,
.post-content object,
.post-content embed {
    width: 100%;           /* Full chiều rộng của container */
    max-width: 100%;
    height: auto;          /* Chiều cao tự động */
    aspect-ratio: 16 / 9;  /* Giữ đúng tỉ lệ 16:9 của video chuẩn */
    display: block;
    margin: 2rem auto;
    
    /* (Tùy chọn) Thêm viền đen 2px để đồng bộ với style Tạp chí/Brutalism của bạn */
    border: 2px solid #000; 
}