/* Font-face declarations (place valid URLs here if needed) */
@font-face {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("") format('woff2'); /* Replace with actual font URL */
}
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("") format('woff2'); /* Replace with actual font URL */
}
@font-face {
    font-family: "Beautique Display";
    src: url("") format("opentype"); /* Replace with actual font URL */
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
::-webkit-scrollbar {
    width: 0;
}

::-webkit-scrollbar-thumb {
    background: #878d8d78;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #878d8d78;
}

button,
input,
select,
textarea {
    margin: 0;
    outline: none;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%; /* Ensure html takes full height */
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

img,
video {
    height: auto;
    max-width: 100%;
}

iframe {
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}
td:not([align]),
th:not([align]) {
    text-align: left;
}

html,
body {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "Work Sans", sans-serif; /* Fallback to system sans-serif */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    min-height: 100%; /* Ensure body takes at least full height */
    display: flex; /* Enable flexbox for sticky footer */
    flex-direction: column; /* Arrange children in a column */
}
/* Removed the html.hidden, body.hidden { overflow: hidden; } rule */

.site-content {
    /* Removed overflow: hidden; */
    flex-grow: 1; /* Allow site-content to grow and push footer down */
    display: flex;
    flex-direction: column;
}

/* Typography resets */
.typography html, .typography body, .typography p, .typography ol, .typography ul, .typography li,
.typography dl, .typography dt, .typography dd, .typography blockquote, .typography figure,
.typography fieldset, .typography legend, .typography textarea, .typography pre, .typography iframe,
.typography hr, .typography h1, .typography h2, .typography h3, .typography h4, .typography h5, .typography h6 {
    margin: 0;
    padding: 0;
}
.typography h1, .typography h2, .typography h3, .typography h4, .typography h5, .typography h6 {
    font-size: 100%;
    font-weight: normal;
}
.typography ul {
    list-style: none;
}

/* Animations */
@-webkit-keyframes spinAround {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}
@keyframes spinAround {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}

@-webkit-keyframes future {
    0% { -webkit-transform: translate(-330px, -50%) rotate(-45deg); transform: translate(-330px, -50%) rotate(-45deg); }
    50% { -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-50deg); }
    to { -webkit-transform: translate(330px, -50%) rotate(-45deg); transform: translate(330px, -50%) rotate(-45deg); }
}
@keyframes future {
    0% { -webkit-transform: translate(-330px, -50%) rotate(-45deg); transform: translate(-330px, -50%) rotate(-45deg); }
    50% { -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); }
    to { -webkit-transform: translate(330px, -50%) rotate(-45deg); transform: translate(330px, -50%) rotate(-45deg); }
}

@-webkit-keyframes hideMessage {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes hideMessage {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Global Typography and Buttons */
.typography .tw-title {
    color: #FFF;
    text-align: center;
    font-family: "Beautique Display", serif; /* Fallback to system serif */
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
@media only screen and (max-width: 1199px) { .typography .tw-title { font-size: 30px; } }
@media only screen and (max-width: 767px) { .typography .tw-title { font-size: 24px; } }
@media only screen and (max-width: 575px) { .typography .tw-title { font-size: 20px; } }

.typography .tw-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    padding: 8px 16px;
    font-family: "Work Sans", sans-serif;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.02em;
    border-radius: 24px;
    background: transparent;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: none; /* Ensure no default button border */
    cursor: pointer;
}
.typography .tw-button span {
    content: "";
    width: 0;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.25);
    position: absolute;
    top: 0;
    transform: rotate(-45deg);
    box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0.45098);
    animation: future 2.35s linear infinite;
    opacity: .8;
}
.typography .tw-button::before, .typography .tw-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #05C7BD 0%, #F3582F 100%), linear-gradient(90deg, #C54618 0%, #781F12 100%);
    z-index: -1;
    transition: .4s ease-out;
}
.typography .tw-button::after {
    opacity: 0;
    background: #05C7BD;
}
.typography .tw-button:hover::after {
    opacity: 1;
}

/* Container classes */
.tw-container {
    width: 100%;
    max-width: 1440px;
    padding: 0 25px;
    margin: 0 auto;
}
@media only screen and (max-width: 1440px) { .tw-container { max-width: 1370px; } }
@media only screen and (max-width: 1200px) { .tw-container { max-width: 1120px; } }
@media only screen and (max-width: 992px) { .tw-container { max-width: 920px; } }
@media only screen and (max-width: 768px) { .tw-container { max-width: 720px; } }
@media only screen and (max-width: 575px) { .tw-container { max-width: 100%; padding: 0 20px; } }

.tw-container2 {
    width: 100%;
    max-width: 1440px;
    padding: 0 120px;
    margin: 0 auto;
}
@media only screen and (max-width: 1199px) { .tw-container2 { max-width: 100%; padding: 0 30px; } }
@media only screen and (max-width: 767px) { .tw-container2 { max-width: 100%; padding: 0 24px; } }

/* Flexbox utilities */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.flex-column { flex-direction: column; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-30 { gap: 30px; }
.gap-32 { gap: 32px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }
.gap-56 { gap: 56px; }
.gap-64 { gap: 64px; }

/* Form styles */
.form-group {
    position: relative;
    display: flex;
    flex-direction: column; /* Ensure label and input stack */
    width: 100%; /* Default width, overridden by .col-2 .form-group */
    border-radius: 8px;
    background: var(--Neutral-2, #F5F6F8);
    padding: 6px 12px 8px 12px;
    border: 1px solid #f5f6f8;
}
.form-group.form-textarea .form-control {
    height: 120px;
    padding: 15px;
}
.form-group.invalid .form-control {
    border-color: var(--error, #FF9800);
}
.form-group.invalid .form-message {
    color: var(--error, #FF9800);
}
.form-message {
    position: relative;
    margin-top: 8px;
    font-size: 12px;
    margin-left: 3px;
}
.form-submit.loading {
    cursor: not-allowed;
    opacity: 0.5;
}
.form-submit.disable {
    opacity: 0.5;
    cursor: not-allowed;
}
.form-response {
    display: none;
}
.form-response.failed {
    display: block;
    color: #FF9800;
    animation: hideMessage .3s 3s forwards;
    text-align: center;
    margin-bottom: 18px;
}
.form-response.success {
    display: block;
    color: green;
    animation: hideMessage .5s 6s forwards;
    text-align: center;
    margin-bottom: 18px;
}

/* Teaser Form Section */
.teaser-form {
    padding: 50px 0;
    background-color: #f0f0f0; /* A light background for this section */
}
@media only screen and (max-width: 1023px) { .teaser-form { padding: 48px 0 72px 0; } }

.tw-form-teaser {
    border-radius: 80px 0px;
    /* Updated background to yellow-orange gradient */
    background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);
    padding: 48px 64px; /* Adjust padding for the whole block */
    gap: 24px;
    position: relative;
    display: flex; /* Make it a flex container for its children */
    flex-direction: row; /* Default to row on desktop */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: space-between; /* Space between the two main columns */
    /* Add shadow and transition for hover effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.tw-form-teaser:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 1023px) {
    .tw-form-teaser {
        padding: 40px 24px;
        border-radius: 40px 0;
        flex-direction: column; /* Stack columns on smaller screens */
    }
}

.tw-form-teaser .wrap-infomation {
    width: 30%; /* Width for info column on desktop */
    color: #FFF; /* Text color for dark background */
}
@media only screen and (max-width: 1023px) {
    .tw-form-teaser .wrap-infomation {
        width: 100%; /* Full width on smaller screens */
        margin-bottom: 40px; /* Space between info and form on mobile */
    }
}
.tw-form-teaser .wrap-infomation .logo {
    margin-bottom: 90px;
}
@media only screen and (max-width: 1023px) {
    .tw-form-teaser .wrap-infomation .logo {
        display: flex;
        justify-content: center;
        margin-bottom: 36px;
    }
}
.tw-form-teaser .wrap-infomation .info { margin-bottom: 12px; }
.tw-form-teaser .wrap-infomation .info_title {
    color: #FFF; /* White title color on dark background */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 142.857%;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.tw-form-teaser .wrap-infomation .info_describe {
    color: #FFF; /* White text for info on dark background */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration: none;
    gap: 6px;
}
.tw-form-teaser .wrap-infomation .info_describe img { flex: 0 0 32px; /* Fixed width for icon */ }
.tw-form-teaser .wrap-infomation .info_describe:hover { text-decoration: underline; }
.tw-form-teaser .wrap-infomation .title-social {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.5); /* White border for dark background */
    color: #FFF; /* White title for social on dark background */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 142.857%;
    text-transform: uppercase;
}
.tw-form-teaser .wrap-infomation .social_item {
    width: calc((100% - 32px)/ 3);
    color: #FFF; /* White text for social items */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    margin-top: 18px;
}

.tw-form-teaser .wrap-form {
    width: 60%; /* Width for form column on desktop */
}
@media only screen and (max-width: 1023px) {
    .tw-form-teaser .wrap-form {
        width: 100%; /* Full width on smaller screens */
    }
}

.form-contact { /* New container for the actual form with white background */
    background: #fff;
    border-radius: 80px 0; /* Match outer container's border-radius */
    padding: 48px 64px; /* Inner padding for the form fields */
    box-sizing: border-box;
}
@media only screen and (max-width: 1023px) {
    .form-contact {
        padding: 40px 24px;
        border-radius: 40px 0;
    }
}

.form-contact .text .title {
    color: #582118; /* Darker title for white background */
    font-family: "Beautique Display";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 8px;
}
.form-contact .text .sub-title {
    color: var(--Neutral-6, #343B46); /* Darker text for white background */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 171.429%;
    margin-bottom: 48px;
    letter-spacing: -0.28px;
}

.form-contact .col-2 { /* This is the container for name and phone inputs */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 16px; /* Gap between the two columns */
    margin-bottom: 16px; /* Space below the two-column row */
}
@media only screen and (max-width: 1023px) {
    .form-contact .col-2 {
        flex-direction: column; /* Stack columns on smaller screens */
    }
}
.form-contact .col-2 .form-group {
    width: calc((100% - 16px) / 2); /* Two columns with a gap */
}
@media only screen and (max-width: 1023px) {
    .form-contact .col-2 .form-group {
        width: 100%; /* Full width on smaller screens */
    }
}

.form-contact .form-group.invalid .form-control::-webkit-input-placeholder { color: #B01C02; }
.form-contact .form-group.invalid .form-control::-moz-placeholder { color: #B01C02; }
.form-contact .form-group.invalid .form-label,
.form-contact .form-group.invalid .form-control::placeholder { color: #B01C02; }
.form-contact .form-group textarea { height: 118px; }
.form-contact .form-group.focus { border-color: #c2f0be; }
.form-contact .form-label {
    color: var(--Neutral-4, #99A3B3);
    font-family: "Work Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 166.667%;
    letter-spacing: -0.12px;
}
.form-contact .form-control {
    color: var(--Neutral-6, #343B46);
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 171.429%;
    height: 24px;
    letter-spacing: -0.14px;
    background: var(--Neutral-2, #F5F6F8);
    border: none;
}
.form-contact .form-message { display: none; }
.form-contact .form-bottom .form-submit {
    border-radius: 48px;
    /* Updated button background and border to match new theme accent */
    background: #FF8C00; /* Darker orange for the button */
    width: 74.3243243243%;
    margin: 0 auto;
    padding: 12px 28px;
    color: var(--Neutral-1, #FFF);
    text-align: right;
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    transition: all .3s ease-in-out;
    border: none;
    border: 1px solid #FF8C00; /* Darker orange border */
    cursor: pointer;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}
@media only screen and (max-width: 767px) { .form-contact .form-bottom .form-submit { width: 100%; } }
.form-contact .form-bottom .form-submit :before {
    content: "";
    width: 0;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.25);
    position: absolute;
    transform: rotate(-45deg);
    box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0.45098);
    animation: future 2.35s linear infinite;
    opacity: .8;
}
.form-contact .form-bottom .form-submit:hover {
    background: #fff;
    color: #FF8C00; /* Updated hover color to match new theme accent */
}


/* Teaser Banner Section (Hero) */
.teaser-banner {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide overflowing parts of the image */
    display: flex;
    align-items: center;
    justify-content: center;
}
.teaser-banner .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire area */
    z-index: 1;
}
.teaser-banner .logo {
    position: absolute;
    z-index: 9;
    top: 32px;
    left: 64px;
}
@media only screen and (max-width: 1023px) {
    .teaser-banner .logo {
        top: 39px;
        left: 24px;
        width: 112px;
    }
}
.teaser-banner .entry-title {
    color: #B01C02;
    text-align: center;
    font-family: "Beautique Display", serif;
    font-size: 96px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: relative; /* Changed to relative to be within flex context */
    z-index: 9;
    width: 100%;
    max-width: 800px; /* Adjust as needed */
    padding: 0 20px;
    box-sizing: border-box;
}
@media only screen and (max-width: 1023px) { .teaser-banner .entry-title { font-size: 40px; } }
@media only screen and (max-width: 767px) { .teaser-banner .entry-title { font-size: 60px; } }
@media only screen and (max-width: 460px) { .teaser-banner .entry-title { line-height: 1.15; letter-spacing: .05em; } }
@media only screen and (max-width: 395px) { .teaser-banner .entry-title { letter-spacing: 0; font-size: 52px; } }

/* Mobile optimization for teaser-banner */
@media only screen and (max-width: 767px) {
    .teaser-banner {
        height: 45vh; /* Reduce height on mobile to prevent excessive image cropping */
    }
}

/* Removed .teaser-banner .hotline styles as it's being removed from HTML */

/* Main Navigation Styles */
.main-nav {
    position: absolute; /* Position relative to .teaser-banner */
    top: 32px; /* Align with logo */
    z-index: 10; /* Ensure it's above other elements */
    width: auto; /* Adjust width based on content */
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Horizontal menu items */
    gap: 30px; /* Space between menu items */
}

.main-nav ul li a {
    color: #FFF;
    text-decoration: none;
    font-family: "Work Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: #FFD700; /* Yellow on hover */
}

/* Hamburger menu icon for mobile */
.menu-toggle {
    display: none; /* Hidden by default on desktop */
    position: absolute;
    top: 32px;
    right: 24px;
    width: 30px;
    height: 25px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    z-index: 100; /* Ensure it's on top */
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #FFF;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Mobile menu styles */
@media only screen and (max-width: 767px) {
    .main-nav {
        position: fixed; /* Overlay menu */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.95); /* Darker overlay */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        border-radius: 0; /* Remove border-radius for full screen */
    }

    .main-nav.active {
        opacity: 1;
        visibility: visible;
    }

    .main-nav ul {
        flex-direction: column; /* Stack menu items vertically */
        gap: 20px;
        text-align: center;
    }

    .main-nav ul li a {
        font-size: 24px; /* Larger font for mobile */
    }

    .menu-toggle {
        display: flex; /* Show hamburger icon on mobile */
    }

    /* Hamburger icon animation when active */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }

    .teaser-banner .logo {
        top: 24px; /* Adjust logo position for mobile */
        left: 24px;
    }
    /* No hotline to adjust for mobile */
}
/* End Main Navigation Styles */


/* Section 2 (News & Gallery) */
.t-section2 {
    position: relative;
    z-index: 0;
    padding-top: 12.5%;
    margin-top: -8.6111111111%;
    background: linear-gradient(333deg, #EC703D 10.1%, #A78263 33.48%, #459A97 69.93%, #2A6562 102.62%); /* Background gradient */
    padding-bottom: 80px; /* Added padding to the bottom */
}
@media only screen and (max-width: 640px) { .t-section2 { padding-top: 110px; margin-top: -60px; } }
/* The clip-path for the top edge is complex and might not be fully reproducible without SVG or more advanced CSS */
/* .t-section2::before { ... } */

/* Removed .decor and .svg styles */

.t-section2 .tw-container { position: relative; z-index: 9; }
.t-section2 .tw-container a { text-decoration: none; }
.t-section2 .tw-container .header-title { color: #fff; padding: 0 40px 32px; }

.titlehead {
 
  color: #fff;    /* Màu chữ xám đen để dễ đọc hơn */
  font-size: 20px;
  font-weight: 600;
  padding: 12px 16px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
  font-family: "Work Sans", sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  display: inline-block; /* Giữ lại thuộc tính này để ôm vừa nội dung */
  white-space: nowrap;  /* Giữ lại thuộc tính này để ngăn xuống dòng */
   border: 1px dotted #ffffff;
}

.titlehead {
 
  color: #fff;    /* Màu chữ xám đen để dễ đọc hơn */
  font-size: 20px;
  font-weight: 600;
  padding: 12px 16px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
  font-family: "Work Sans", sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  display: inline-block; /* Giữ lại thuộc tính này để ôm vừa nội dung */
  white-space: nowrap;  /* Giữ lại thuộc tính này để ngăn xuống dòng */
   border: 1px dotted #ffffff;
   margin-bottom: 20px;
}
.titleheadb {
  /* Các thuộc tính hiện có */
  background: #00a19d;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: 12px 16px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
  font-family: "Work Sans", sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  

  /* Thêm thuộc tính này */
  display: inline-block; /* Hoặc inline-flex nếu bạn muốn sử dụng flexbox bên trong */
  white-space: nowrap; /* Ngăn không cho văn bản xuống dòng nếu có thể */
  margin-bottom: 20px;

  
}
@media only screen and (max-width: 640px) { .t-section2 .tw-container .header-title { padding: 0 0 48px; } }

/* News Swiper (Carousel) */
.t-section2 .swiper-news {
    position: relative;
    display: flex; /* Simulating swiper layout with flex */
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-snap-type: x mandatory; /* Snap to items */
    padding-bottom: 20px; /* Space for scrollbar */
    gap: 16px; /* Gap between news items */
}
.t-section2 .swiper-news::-webkit-scrollbar { height: 8px; }
.t-section2 .swiper-news::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); border-radius: 4px; }
.t-section2 .swiper-news::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5); border-radius: 4px; }

.t-section2 .swiper-news .swiper-slide {
    flex: 0 0 auto; /* Don't grow, don't shrink, base on content */
    width: 300px; /* Example fixed width for slides */
    scroll-snap-align: start; /* Snap to start of item */
    box-sizing: border-box;
    overflow: visible;
}
@media (min-width: 768px) {
    .t-section2 .swiper-news .swiper-slide {
        width: 430px; /* Wider on larger screens */
    }
}

.t-section2 .swiper-news .swiper-slide .news-item {
    text-decoration: none;
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Add transition for animation */
    height: 100%; /* Ensure items fill slide height */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Initial shadow */
}
.t-section2 .swiper-news .swiper-slide .news-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
    transform: translateY(-5px); /* Lift effect on hover */
}
.t-section2 .swiper-news .swiper-slide .news-item .news-image {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    overflow: hidden;
    border-radius: 16px; /* Apply to image container for consistency */
}
.t-section2 .swiper-news .swiper-slide .news-item .news-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s ease-out;
}
.t-section2 .swiper-news .swiper-slide .news-item .news-image img.fade-out { opacity: 0; }
.t-section2 .swiper-news .swiper-slide .news-item .tag {
    color: #00A19D;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.28px;
    text-transform: uppercase;
    padding: 24px 24px 8px;
}
@media only screen and (max-width: 640px) { .t-section2 .swiper-news .swiper-slide .news-item .tag { padding: 16px 16px 8px; } }
.t-section2 .swiper-news .swiper-slide .news-item .news-content {
    padding: 0 24px 38px;
    flex-grow: 1; /* Allow content to take available space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom */
}
@media only screen and (max-width: 640px) { .t-section2 .swiper-news .swiper-slide .news-item .news-content { padding: 0 16px 28px; } }
.t-section2 .swiper-news .swiper-slide .news-item .news-title {
    color: #781F12;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.32px;
    width: 100%; /* Adjusted width */
    transition: .4s ease-out;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 60px; /* Fixed height for consistent layout */
    margin-bottom: 15px; /* Space before button */
}
.t-section2 .swiper-news .swiper-slide .news-item .news-title:hover { color: #00A19D; }
@media only screen and (max-width: 640px) { .t-section2 .swiper-news .swiper-slide .news-item .news-title { width: 100%; } }
.t-section2 .swiper-news .swiper-slide .news-item .tw-button {
    font-size: 14px;
    flex-shrink: 0;
    align-self: flex-start; /* Align button to start within content */
    padding: 10px 20px; /* Adjusted padding for button */
}

/* Gallery Images Section */
.t-section2 .gallery-images {
    padding: 6.6666666667% 0 5.8333333333%;
    position: relative;
}
@media only screen and (max-width: 640px) { .t-section2 .gallery-images { padding: 20px 0 80px; } }
.t-section2 .gallery-images .tw-title { text-align: left; }
.t-section2 .gallery-images .tw-description {
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.33333;
    letter-spacing: -0.02em;
    margin: 32px 0 90px;
}
@media only screen and (max-width: 640px) { .t-section2 .gallery-images .tw-description { margin: 24px 0 0; font-size: 16px; } }
.t-section2 .gallery-images .tw-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 9.4890510949%;
    padding-right: 7.299270073%;
    gap: 6.7226890756%;
}
@media only screen and (max-width: 640px) {
    .t-section2 .gallery-images .tw-container {
        flex-direction: column; /* Stack items vertically on mobile */
        padding: 0 20px; /* Adjust padding for mobile */
    }
}

.t-section2 .gallery-images .tw-container .gallery-sticky {
    width: 35.5263157895%;
    height: auto; /* Allow height to adjust */
    border-radius: 16px;
    background: linear-gradient(320deg, #2A6562 -32.91%, #2D6B68 -20.65%, #367D7A -2.82%, #449996 7.89%, #459B98 13.18%, #469D9A 18.36%, #4C9B96 25.05%, #5F968B 35.08%, #2EC0BD 47.34%, #A78263 60.72%, #DD7345 75.21%, #EC703D 78.55%), #343B46;
    overflow: hidden;
    padding: 8px 7px 8px 8px;
    position: sticky; /* Make it sticky */
    top: 20px; /* Stick 20px from the top */
    align-self: flex-start; /* Align to the start of the flex container */
    /* Add shadow and transition for hover effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.t-section2 .gallery-images .tw-container .gallery-sticky:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 640px) {
    .t-section2 .gallery-images .tw-container .gallery-sticky {
        display: block; /* Show on mobile */
        width: 100%; /* Full width on mobile */
        position: static; /* Remove sticky on mobile */
        margin-bottom: 30px; /* Add space below the main image */
    }
}
.t-section2 .gallery-images .tw-container .gallery-sticky .item-gallery {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    padding-bottom: 177.78%; /* Aspect ratio for the main image */
    overflow: hidden;
    border-radius: 16px;
}
.t-section2 .gallery-images .tw-container .gallery-sticky .item-gallery img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.15s ease;
}
.t-section2 .gallery-images .tw-container .gallery-sticky .item-gallery img.fade-out { opacity: 0; }
.t-section2 .gallery-images .tw-container .content-right {
    width: 57.5438596491%;
    padding: 80px 0 0;
}
@media only screen and (max-width: 640px) {
    .t-section2 .gallery-images .tw-container .content-right {
        width: 100%;
        padding: 0; /* Remove top padding on mobile */
        display: flex;
        flex-wrap: wrap;
        flex-direction: column; /* Stack title, description, and thumbnails */
    }
}
.t-section2 .gallery-images .swiper-gallery {
    overflow: hidden;
    padding-left: 20px;
    margin-left: -20px;
    display: flex; /* Make it a flex container for thumbnails */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px; /* Gap between thumbnails */
}
@media only screen and (max-width: 640px) {
    .t-section2 .gallery-images .swiper-gallery {
        padding-left: 0;
        margin-left: 0;
        overflow: visible;
        width: 100%;
        justify-content: center; /* Center thumbnails on small screens */
    }
}
.t-section2 .gallery-images .swiper-gallery .swiper-slide {
    width: 100px; /* Fixed width for thumbnails */
    height: 100px; /* Fixed height for thumbnails */
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}
.t-section2 .gallery-images .swiper-gallery .swiper-slide.active {
    border-color: #00A19D; /* Highlight active thumbnail */
}
.t-section2 .gallery-images .swiper-gallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Project Video Section */
.project-video-section {
    background-color: #f0f0f0; /* Light background for contrast */
    padding: 80px 0;
    text-align: center;
}
.project-video-section .tw-title {
    color: #582118; /* Dark title for light background */
    margin-bottom: 40px;
}
.video-grid { /* New class for the grid of videos, now flexbox for scrolling */
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-snap-type: x mandatory; /* Snap to items */
    padding-bottom: 20px; /* Space for scrollbar */
    gap: 30px; /* Gap between video items */
    max-width: 1440px; /* Allow wider for scrollable content */
    margin: 0 auto;
    padding-left: 25px; /* Adjust padding for scrolling content */
    padding-right: 25px;
    box-sizing: border-box; /* Include padding in width */
}
.video-grid::-webkit-scrollbar {
    height: 8px;
}
.video-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Black track for scrollbar */
    border-radius: 4px;
}
.video-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5); /* Black thumb for scrollbar */
    border-radius: 4px;
}

.video-item {
    flex: 0 0 auto; /* Don't grow, don't shrink, base on content */
    width: 400px; /* Fixed width for video items */
    scroll-snap-align: start; /* Snap to start of item */
    background: linear-gradient(320deg, #2A6562 -32.91%, #2D6B68 -20.65%, #367D7A -2.82%, #449996 7.89%, #459B98 13.18%, #469D9A 18.36%, #4C9B96 25.05%, #5F968B 35.08%, #2EC0BD 47.34%, #A78263 60.72%, #DD7345 75.21%, #EC703D 78.55%), #343B46; /* Gradient background for border effect */
    border-radius: 16px;
    overflow: hidden;
    /* Add shadow and transition for hover effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Subtle shadow */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding: 8px; /* Padding to create the border effect */
    box-sizing: border-box; /* Include padding in width */
}
.video-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}
.video-item iframe {
    width: 100%;
    height: 100%;
    display: block; /* Remove extra space below iframe */
    border-radius: 8px; /* Slightly smaller border-radius for inner iframe */
}
/* Inner container for iframe to maintain aspect ratio */
.video-item .iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px; /* Match iframe border-radius */
}
.video-item .iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
}

@media only screen and (max-width: 767px) {
    .video-item {
        width: 90vw; /* Make videos take up most of the viewport width on small screens */
    }
}
/* End Project Video Section */

/* Footer Styles */
.site-footer {
    background: linear-gradient(333deg, #EC703D 10.1%, #A78263 33.48%, #459A97 69.93%, #2A6562 102.62%); /* Changed to match news section background */
    color: #ccc;
    padding: 50px 0;
    font-family: "Work Sans", sans-serif;
    margin-top: auto; /* Push footer to the bottom */
}
.site-footer .tw-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}
.site-footer .footer-col {
    flex: 1;
    min-width: 250px; /* Minimum width for columns */
}
.site-footer .footer-col h4 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
}
.site-footer .footer-col h4::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    background-color: #05C7BD;
    height: 2px;
    box-sizing: border-box;
    width: 50px;
}
.site-footer .footer-col ul {
    list-style: none;
    padding: 0;
}
.site-footer .footer-col ul li:not(:last-child) {
    margin-bottom: 10px;
}
.site-footer .footer-col ul li a {
    font-size: 16px;
    text-decoration: none;
    color: #ccc;
    display: block;
    transition: all 0.3s ease;
}
.site-footer .footer-col ul li a:hover {
    color: #fff;
    padding-left: 8px;
}
.site-footer .social-links a {
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: rgba(255,255,255,0.2);
    margin: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #fff;
    transition: all 0.5s ease;
}
.site-footer .social-links a:hover {
    color: #24262b;
    background-color: #fff;
}
.site-footer .copyright {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    color: #888;
}

/* Styles for the summary modal */
.summary-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.summary-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.summary-modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    color: #343B46; /* Neutral-6 from your CSS */
    font-family: "Work Sans", sans-serif;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.summary-modal-overlay.active .summary-modal-content {
    transform: translateY(0);
}

.summary-modal-content h3 {
    font-family: "Beautique Display", serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #781F12; /* From your news-title color */
}

.summary-modal-content p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.summary-modal-content .close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #99A3B3; /* Neutral-4 */
    transition: color 0.2s ease;
}

.summary-modal-content .close-button:hover {
    color: #B01C02; /* Your primary button hover color */
}

.summary-loading {
    text-align: center;
    font-style: italic;
    color: #99A3B3;
}

/* Scroll to Top Button Styles */
.scroll-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #05C7BD; /* A vibrant color for the button */
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    z-index: 999; /* Ensure it's above other content */
}

.scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top-btn:hover {
    transform: translateY(-3px); /* Slight lift on hover */
    background-color: #00A19D; /* Darker shade on hover */
}

.scroll-to-top-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor; /* Ensure SVG color matches button text color */
}

/* Fixed Social Menu Styles */
.fixed-social-menu {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between icons */
    z-index: 998; /* Below scroll-to-top button */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
    border-radius: 8px 0 0 8px; /* Rounded left side */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.fixed-social-menu .social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px; /* Icon size */
    height: 45px;
    border-radius: 50%;
    background-color: #fff; /* White background for icons */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.fixed-social-menu .social-icon img {
    width: 30px; /* Image size within icon */
    height: 30px;
    object-fit: contain;
}

.fixed-social-menu .social-icon:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Specific icon colors (optional, if you want to override img background) */
.fixed-social-menu .zalo-icon {
    background-color: #008000; /* Zalo green */
}
.fixed-social-menu .facebook-icon {
    background-color: #1877F2; /* Facebook blue */
}
.fixed-social-menu .contact-icon {
    background-color: #FF8C00; /* Orange for contact */
}

/* Adjust for smaller screens if needed */
@media only screen and (max-width: 767px) {
    .fixed-social-menu {
        top: auto;
        bottom: 80px; /* Position above scroll-to-top button */
        flex-direction: row; /* Arrange horizontally on mobile */
        width: auto;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 8px; /* Fully rounded on mobile */
        padding: 8px;
    }
    .fixed-social-menu .social-icon {
        width: 40px;
        height: 40px;
    }
    .fixed-social-menu .social-icon img {
        width: 25px;
        height: 25px;
    }
}

@media only screen and (max-width: 767px) {
    .main-nav {
        left: 0 !important;
        transform: none !important;
    }
}
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-overlay.active {
  display: flex;
}

.popup-content {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  color: #000;
  position: relative;
}

.popup-content h3 {
  margin-top: 0;
  color: #FF8C00;
}

.popup-content .form-group {
  margin-bottom: 15px;
}

.popup-content input {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
}

.banner-buttons {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.banner-buttons {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 24px;
  margin-top: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.main-banner-button {
  background: #00A19D; /* Màu xanh ngọc */
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: 16px 32px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  font-family: "Work Sans", sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.main-banner-button:hover {
  background: #008077;
  transform: translateY(-2px);
}
/* Thêm các quy tắc CSS này vào file style.css của bạn */

.banner-buttons {
    position: absolute;
    bottom: 10%; /* Điều chỉnh giá trị này để di chuyển các nút lên hoặc xuống từ cạnh dưới của banner */
    left: 50%;
    transform: translateX(-50%); /* Căn giữa theo chiều ngang */
    z-index: 9; /* Đảm bảo các nút nằm trên ảnh nền */
    display: flex; /* Hiển thị các nút cạnh nhau trên desktop */
    gap: 20px; /* Khoảng cách giữa các nút trên desktop */
}

@media only screen and (max-width: 767px) {
    .banner-buttons {
        bottom: 5%; /* Điều chỉnh giá trị này để di chuyển các nút gần hơn xuống dưới trên mobile */
        flex-direction: column; /* Xếp chồng các nút lên nhau trên mobile */
        gap: 10px; /* Khoảng cách giữa các nút khi xếp chồng trên mobile */
    }
}