/* ==========================================================================

   LANDING PAGE MODERN STYLES - Bất động sản cao cấp

   ========================================================================== */



/* Animation Keyframes */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeInLeft {

    from {

        opacity: 0;

        transform: translateX(-30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeInRight {

    from {

        opacity: 0;

        transform: translateX(30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes pulse {

    0%, 100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

}



@keyframes shimmer {

    0% {

        background-position: -200% 0;

    }

    100% {

        background-position: 200% 0;

    }

}



@keyframes float {

    0%, 100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-10px);

    }

}



/* ==========================================================================

   SECTION: GIỚI THIỆU - flex_bouts

   ========================================================================== */

section.flex_bouts {

    position: relative;

    padding: 100px 0;

    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);

    overflow: hidden;

}



section.flex_bouts::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255, 206, 0, 0.1) 0%, transparent 70%);

    border-radius: 50%;

    animation: float 6s ease-in-out infinite;

}



section.flex_bouts::after {

    content: '';

    position: absolute;

    bottom: -30%;

    left: -5%;

    width: 400px;

    height: 400px;

    background: radial-gradient(circle, rgba(196, 76, 26, 0.08) 0%, transparent 70%);

    border-radius: 50%;

    animation: float 8s ease-in-out infinite reverse;

}



section.flex_bouts .mycontainer {

    position: relative;

    z-index: 2;

}



section.flex_bouts .row.r_ab {

    align-items: center;

    gap: 60px;

}



section.flex_bouts .c_ab {

    flex: 1;

}



section.flex_bouts .items_inforabouts {

    animation: fadeInLeft 0.8s ease-out;

}



section.flex_bouts .abouts {

    font-size: 1.1rem;

    line-height: 1.9;

    color: #555;

    margin-bottom: 40px;

    padding: 30px;

    background: white;

    border-radius: 16px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);

    border-left: 4px solid var(--main-color, #ffce00);

}



section.flex_bouts .owl_abouts {

    margin-top: 30px;

}







section.flex_bouts .itenms_link a {

    display: block;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



section.flex_bouts .itenms_link a:hover {

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);

}



section.flex_bouts .items_inforaboutsPhotoss {

    animation: fadeInRight 0.8s ease-out;

    position: relative;

}



section.flex_bouts .items_inforaboutsPhotoss::before {

    content: '';

    position: absolute;

    top: 30px;

    left: 30px;

    right: -30px;

    bottom: -30px;

    background: linear-gradient(135deg, #89abff 0%, #080c21 100%);

    border-radius: 20px;

    z-index: -1;

}



section.flex_bouts .items_inforaboutsPhotoss img {

    border-radius: 20px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);

}



/* ==========================================================================

   SECTION: TỔNG QUAN - tongquan

   ========================================================================== */

section.tongquan {

    position: relative;

    padding: 120px 0;

    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

    overflow: hidden;

}



section.tongquan .mycontainer {

    position: relative;

    z-index: 2;

}



section.tongquan .title_tongquan {

    text-align: center;

    margin-bottom: 60px;

}

section.tongquan .title_tongquan h2 {

    font-family: 'Montserrat-SemiBold', sans-serif;

    font-size: 5rem;

    color: #1a1a2e;

    position: relative;

    display: inline-block;

    padding-bottom: 20px;

    text-transform: uppercase;

}







section.tongquan .row.r_tongquan {

    align-items: center;

    gap: 50px;

}



section.tongquan .c_tongquan {

    flex: 1;

}



section.tongquan .items_tongquan:first-child {

    animation: fadeInLeft 0.8s ease-out;

}



section.tongquan .content_tongquan {

    background: white;

    border-radius: 24px;

    padding: 20px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);

    border: 1px solid rgba(0, 0, 0, 0.04);

}



section.tongquan .d-flex.flex_tongquan {

    display: grid !important;

    grid-template-columns: repeat(2, 1fr);

    gap:15px;

}



section.tongquan .box {

    position: relative;

    padding: 25px;

    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

    border-radius: 16px;

    border: 1px solid rgba(0, 0, 0, 0.04);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}





section.tongquan .box:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    border-color: var(--main-color, #ffce00);

}



section.tongquan .box:hover::before {

    opacity: 1;

}



section.tongquan .box h3 {

    font-family: 'Montserrat-Medium', sans-serif;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: #888;

    margin-bottom: 12px;

}



section.tongquan .desc_tq {

    font-family: 'Montserrat-SemiBold', sans-serif;

    font-size: 1.1rem;

    color: #1a1a2e;

    line-height: 1.4;

}



section.tongquan .items_tongquan:last-child {

    animation: fadeInRight 0.8s ease-out;

    position: relative;

}



section.tongquan .items_inforaboutsPhotoss {

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);

}



section.tongquan .items_inforaboutsPhotoss img {

    transition: transform 0.6s ease;

}



section.tongquan .items_inforaboutsPhotoss:hover img {

    transform: scale(1.05);

}



/* ==========================================================================

   SECTION: NEWSLETTER BLOCK - Form đăng ký

   ========================================================================== */

section.newsllter_block {

    position: relative;

    padding: 100px 0;

    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

    overflow: hidden;

}



section.newsllter_block::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}



section.newsllter_block .mycontainer {

    position: relative;

    z-index: 2;

}



section.newsllter_block .center_newsllter {

    text-align: center;

    width: 100%;

    margin: 0 auto;

}



section.newsllter_block .title_newsllter {

    margin-bottom: 50px;

}



section.newsllter_block .title_newsllter h2 {

    font-family: 'Montserrat-Bold', sans-serif;

    font-size: 3.5rem;

    color: #ffffff;

    margin-bottom: 0;

    position: relative;

    display: inline-block;

    text-transform: uppercase;

}

section.newsllter_block .title_newsllter h2::after {

    content: '';

    position: absolute;

    bottom: -15px;

    left: 50%;

    transform: translateX(-50%);

    width: 100px;

    height: 4px;

    background: #43587b;

    border-radius: 2px;

}



section.newsllter_block .title_newsllter p {

    font-size: 1.15rem;

    color: rgba(255, 255, 255, 0.8);

    line-height: 1.8;

    max-width: 600px;

    margin: 30px auto 0;

}



section.newsllter_block .content_newsllter {

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    padding:25px;

}



section.newsllter_block .newsletter-form .form-row {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

}



section.newsllter_block .newsletter-input {

    flex: 1;

}



section.newsllter_block .newsletter-input input {

    width: 100%;

    padding: 18px 24px;

    font-size: 1rem;

    height: auto;

    color: #1a1a2e;

    background: white;

    border: 2px solid transparent;

    border-radius: 12px;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



section.newsllter_block .newsletter-input input:focus {

    border-color: var(--main-color, #ffce00);

    box-shadow: 0 8px 30px rgba(255, 206, 0, 0.2);

    outline: none;

}



section.newsllter_block .newsletter-input input::placeholder {

    color: #999;

}



section.newsllter_block .button-center {

    display: flex;

    align-items: center;

    justify-content: center;

}



section.newsllter_block .readon-button {

    width: 100%;

    padding: 18px 40px;

    font-family: 'Montserrat-SemiBold', sans-serif;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #1a1a2e;

    background: linear-gradient(135deg, var(--main-color, #ffce00) 0%, #ff9500 100%);

    border: none;

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 8px 25px rgba(255, 206, 0, 0.3);

    position: relative;

    overflow: hidden;

}



section.newsllter_block .readon-button::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

    transition: left 0.5s ease;

}



section.newsllter_block .readon-button:hover::before {

    left: 100%;

}



section.newsllter_block .readon-button:hover {

    background: #06162c;

    color: #fff;

}



section.newsllter_block .readon-button:active {

    transform: translateY(-1px);

}



/* ==========================================================================

   SECTION: QUẢNG CÁO - Banner Slider

   ========================================================================== */

Section.quangcao,

Section.quangcao2 {

    position: relative;

    padding: 0;

    overflow: hidden;

}



Section.quangcao .items_inforabouts,

Section.quangcao2 .items_inforabouts {

    position: relative;

}



Section.quangcao .owl_abouts2,

Section.quangcao2 .owl_abouts2 {

    position: relative;

}



Section.quangcao .itenms_qc,

Section.quangcao2 .itenms_qc {

    position: relative;

}



Section.quangcao .itenms_qc a,

Section.quangcao2 .itenms_qc a {

    display: block;

    position: relative;

    overflow: hidden;

}



Section.quangcao .itenms_qc a::after,

Section.quangcao2 .itenms_qc a::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.4) 100%);

    pointer-events: none;

}





/* ==========================================================================

   SECTION: VỊ TRÍ - vitri

   ========================================================================== */

section.vitri {

    position: relative;

    padding: 120px 0;

    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);

}



section.vitri .mycontainer {

    position: relative;

    z-index: 2;

}



section.vitri .top_vitri {

    margin-bottom: 80px;

}



section.vitri .row.r_vitri {

    align-items: center;

    gap: 60px;

}



section.vitri .c_vitri {

    flex: 1;

}



section.vitri .vitri {

    animation: fadeInLeft 0.8s ease-out;

}



section.vitri .vitri h2 {

    font-family: 'Montserrat-Bold', sans-serif;

    font-size: 6rem;

    color: #1a1a2e;

    margin-bottom: 43px;

    position: relative;

    text-transform: uppercase;

}



section.vitri .vitri p {

    font-family: 'Montserrat-Medium', sans-serif;

    font-size: 3.3rem;

    color: var(--hover-color, #c20903);

    text-transform: uppercase;

    letter-spacing: 3px;

}



section.vitri .information_vitri {

    animation: fadeInRight 0.8s ease-out;

    font-size: 1.1rem;

    line-height: 1.9;

    color: #555;

}



section.vitri .bottom_vitri {

    position: relative;

    padding: 0;

}

.photo_vtri a {

    border-radius: 15px;

    overflow: hidden;

}

section.vitri .bg_vt {

    color: #ffffff;

    border-radius: 30px;

    overflow: hidden;

    border: 5px solid #586ca7;

        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);

}



section.vitri .row.r_vt {

    align-items: center;

    margin: 0;

}



section.vitri .c_vt {

    padding: 0;

}



section.vitri .photo_vtri {

    position: relative;

    overflow: hidden;

    height: 100%;

    min-height: 400px;

}



section.vitri .photo_vtri a {

    display: block;

    height: 100%;

}





section.vitri .photo_vtri img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}



section.vitri .photo_vtri:hover img {

    transform: scale(1.08);

}



section.vitri .information_vitri2 {

    padding: 60px;

    font-size: 1.1rem;

    line-height: 2;

    color: rgba(255, 255, 255, 0.9);

}



section.vitri .information_vitri2 p {

    margin-bottom: 20px;

}



section.vitri .information_vitri2 ul {

    padding-left: 0;

    list-style: none;

}



section.vitri .information_vitri2 ul li {

    position: relative;

    padding-left: 30px;

    margin-bottom: 15px;

}



section.vitri .information_vitri2 ul li::before {

    content: '✓';

    position: absolute;

    left: 0;

    color: var(--main-color, #ffce00);

    font-weight: bold;

    font-size: 1.2rem;

}



/* ==========================================================================

   SECTION: ALBUM BLOCK

   ========================================================================== */

Section.album_block {

    position: relative;

    padding: 120px 0 10px;

    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

}



Section.album_block .mycontainer {

    position: relative;

    z-index: 2;

}



Section.album_block .title_album {

    text-align: center;

    margin-bottom: 60px;

}



Section.album_block .title_album h2 {

    font-family: 'Montserrat-Bold', sans-serif;

    font-size: 3.8rem;

    color: #1a1a2e;

    margin-bottom: 20px;

    position: relative;

    display: inline-block;

    text-transform: uppercase;

}



Section.album_block .title_album h2::after {

    content: '';

    position: absolute;

    bottom: -15px;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 4px;

    background: linear-gradient(90deg, var(--main-color, #ffce00), #ff9500);

    border-radius: 2px;

}



Section.album_block .desc_album {

    font-size: 1.1rem;

    color: #666;

    max-width: 700px;

    margin: 30px auto 0;

    line-height: 1.8;

}



/* ==========================================================================

   SECTION: TẠI SAO CHỌN - taisaochon

   ========================================================================== */

Section.taisaochon {

    position: relative;

    padding: 80px 0;

    background: linear-gradient(135deg, #f8f9fa 0%, #e8e8e8 100%);

    overflow: hidden;

}



Section.taisaochon::before {

    content: '';

    position: absolute;

    top: -100px;

    right: -100px;

    width: 400px;

    height: 400px;

      background: radial-gradient(circle, rgb(0 42 255 / 15%) 0%, transparent 70%);

    border-radius: 50%;

}



Section.taisaochon .mycontainer {

    position: relative;

    z-index: 2;

}



Section.taisaochon .title_index {

    text-align: center;

    margin-bottom: 60px;

}

Section.taisaochon .title_index h2 {

    font-family: 'Montserrat-Bold', sans-serif;

    font-size: 3.5rem;

    color: #1a1a2e;

    margin-bottom: 15px;

    text-transform: uppercase;

}



Section.taisaochon .title_index p {

    font-size: 1.1rem;

    color: #888;

    text-transform: uppercase;

    letter-spacing: 3px;

}



Section.taisaochon .contennt_whychooose {

    position: relative;

}



Section.taisaochon .items_whychooose {

    text-align: center;

    background: white;

    border-radius: 24px;

    padding: 50px 35px;

    margin: 15px;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

    border: 3px solid #8d9cb5;

}



Section.taisaochon .items_whychooose:hover {

    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);

        border: 3px solid #2a4c86;



}





Section.taisaochon .title_why {

    margin-bottom: 25px;

}



Section.taisaochon .title_why h3 {

      font-family: 'Montserrat-SemiBold', sans-serif;

    font-size: 1.6rem;

    color: #1a1a2e;

    position: relative;

    padding-bottom: 20px;

    text-transform: uppercase;

}



Section.taisaochon .title_why h3::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 50px;

    height: 3px;

    background: var(--main-color, #ffce00);

    border-radius: 2px;

}



Section.taisaochon .desc_why {

    font-size: 1rem;

    color: #666;

    line-height: 1.8;

}



/* ==========================================================================

   SECTION: MẶT BẰNG - matbang

   ========================================================================== */

section.matbang {

    position: relative;

    padding: 120px 0;

    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

}



section.matbang .mycontainer {

    position: relative;

    z-index: 2;

}



section.matbang .title_index {

    text-align: center;

    margin-bottom: 60px;

}

section.matbang .title_index h2 {

    font-family: 'Montserrat-Bold', sans-serif;

    font-size: 3.5rem;

    color: #1a1a2e;

    margin-bottom: 25px !important;

    text-transform: uppercase;

    width: 52%;

    margin: auto;

}



section.matbang .title_index p {

    font-size: 1.1rem;

    color: #888;

    text-transform: uppercase;

    letter-spacing: 3px;

}



section.matbang .content_playout {

    position: relative;

}



section.matbang .items_matbang {

    padding: 15px;

    margin: 0 10px;

}



section.matbang .items_matbang a {

    display: block;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.12);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

}



section.matbang .items_matbang a::before {

    content: '';

    position: absolute;

    top: 20px;

    right: 20px;

    width: 50px;

    height: 50px;

    background: var(--main-color, #ffce00);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

    opacity: 0;

    transform: scale(0);

    transition: all 0.3s ease;

}



section.matbang .items_matbang a::after {

    content: '\f002'; 

    font-family: "FontAwesome"; 

    font-weight: normal;

    position: absolute;

    top: 20px;

    right: 20px;

    width: 50px;

    color: #ffff;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 3;

    font-size: 1.2rem;

    opacity: 0;

    transform: scale(0);

    transition: all 0.3s ease 0.1s;

}



section.matbang .items_matbang a:hover {

    transform: translateY(-10px);

    box-shadow: 0 30px 20px rgba(0, 0, 0, 0.2);

}



section.matbang .items_matbang a:hover::before,

section.matbang .items_matbang a:hover::after {

    opacity: 1;

    transform: scale(1);

}



/* ==========================================================================

   SECTION: CHÍNH SÁCH - chinhsach

   ========================================================================== */

section.chinhsach {

    position: relative;

    padding: 120px 0;

    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

    overflow: hidden;

}



section.chinhsach::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");

}



section.chinhsach .mycontainer {

    position: relative;

    z-index: 2;

}



section.chinhsach .title_index3 {

    text-align: center;

    margin-bottom: 40px;

}



section.chinhsach .title_index3 h2 {

    font-family: 'Montserrat-Bold', sans-serif;

    font-size: 3.5rem;

    color: #ffffff;

    margin-bottom: 15px;

    text-transform: uppercase;

}



section.chinhsach .title_index3 p {

    font-size: 1.1rem;

    color: rgba(255, 255, 255, 0.6);

}



section.chinhsach .txt_ {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 60px;

}



section.chinhsach .txt_ h3 {

    font-family: 'Montserrat-Medium', sans-serif;

    font-size: 1.3rem;

    color: rgba(255, 255, 255, 0.9);

    line-height: 1.8;

    padding: 30px 40px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);

}



section.chinhsach .content_form2 {

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    padding: 50px;

    margin: 0 auto;

}



section.chinhsach .newsletter-form .form-row {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

}



section.chinhsach .newsletter-input {

    flex: 1;

    min-width: 200px;

}



section.chinhsach .newsletter-input input {

    width: 100%;

    padding: 18px 24px;

    font-size: 1rem;

    height: auto;

    color: #1a1a2e;

    background: white;

    border: 2px solid transparent;

    border-radius: 12px;

    transition: all 0.3s ease;

}



section.chinhsach .newsletter-input input:focus {

    border-color: var(--main-color, #ffce00);

    outline: none;

}



section.chinhsach .button-center {

    display: flex;

    align-items: center;

    justify-content: center;

}



section.chinhsach .readon-button {

    width: 100%;

    padding: 18px 40px;

    font-family: 'Montserrat-SemiBold', sans-serif;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #1a1a2e;

    background: linear-gradient(135deg, var(--main-color, #ffce00) 0%, #ff9500 100%);

    border: none;

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.4s ease;

}



section.chinhsach .readon-button:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 40px rgba(255, 206, 0, 0.4);

}



/* ==========================================================================

   SECTION: ALBUM BLOCK 2 - Hình ảnh nhà mẫu

   ========================================================================== */

Section.album_block2 {

    position: relative;

    padding: 120px 0;

    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);

}



Section.album_block2 .mycontainer {

    position: relative;

    z-index: 2;

}



Section.album_block2 .title_index4 {

    text-align: center;

    margin-bottom: 60px;

}



Section.album_block2 .title_index4 h2 {

    font-family: 'Montserrat-Bold', sans-serif;

    font-size: 3.5rem;

    color: #1a1a2e;

    position: relative;

    display: inline-block;

    text-transform: uppercase;

}



Section.album_block2 .title_index4 h2::after {

    content: '';

    position: absolute;

    bottom: -15px;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 4px;

    background: linear-gradient(90deg, var(--main-color, #ffce00), #ff9500);

    border-radius: 2px;

}



Section.album_block2 .owl_nhamau {

    position: relative;

}



Section.album_block2 .items_album {

    padding: 10px 15px;

}



Section.album_block2 .items_album a {

    display: block;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



Section.album_block2 .items_album a:hover {

    transform: translateY(-8px) scale(1.02);

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);

}



/* ==========================================================================

   SECTION: VIDEO STATICS

   ========================================================================== */

Section.video_statics {

    position: relative;

    padding: 80px 0;

    background: #1a1a2e;

}



Section.video_statics .box_video_main {

    max-width: 1000px;

    margin: 0 auto;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);

}



/* ==========================================================================

   SECTION: COMMENT/BÌNH LUẬN - newslleter3

   ========================================================================== */

Section.newslleter3 {

    position: relative;

    padding: 120px 0;

    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

}



Section.newslleter3 .mycontainer {

    position: relative;

    z-index: 2;

}



Section.newslleter3 .title_index5 {

    text-align: center;

    margin-bottom: 60px;

}



Section.newslleter3 .title_index5 p {

    font-size: 1rem;

    color: var(--hover-color, #c20903);

    text-transform: uppercase;

    letter-spacing: 3px;

    margin-bottom: 15px;

}



Section.newslleter3 .title_index5 h2 {

    font-family: 'Montserrat-Bold', sans-serif;

    font-size: 2.2rem;

    color: #1a1a2e;

    max-width: 800px;

    margin: 0 auto;

    line-height: 1.4;

}



Section.newslleter3 .content_newsllForm {

    max-width: 1000px;

    margin: 0 auto;

}



Section.newslleter3 .coment_title {

    background: white;

    padding: 30px 40px;

    border-radius: 20px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);

    margin-bottom: 40px;

    border-left: 4px solid var(--main-color, #ffce00);

}



Section.newslleter3 .coment_title h3 {

    font-family: 'Montserrat-SemiBold', sans-serif;

    font-size: 1.5rem;

    color: #1a1a2e;

    margin-bottom: 15px;

}



Section.newslleter3 .coment_title p {

    font-size: 0.95rem;

    color: #666;

    line-height: 1.7;

}



Section.newslleter3 .newsletter-form {

    background: white;

    border-radius: 24px;

    padding: 40px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);

}



Section.newslleter3 .row.r_comment {

    align-items: flex-start;

    gap: 10px;

}



Section.newslleter3 .c_comment {

    flex: 1;

}



Section.newslleter3 .content_newsdllter textarea {

    width: 100%;

    min-height: 165px;

    padding: 20px;

    font-size: 1rem;

    color: #333;

    background: #f8f9fa;

    border: 2px solid transparent;

    border-radius: 16px;

    resize: vertical;

    transition: all 0.3s ease;

}



Section.newslleter3 .content_newsdllter textarea:focus {

    border-color: var(--main-color, #ffce00);

    background: white;

    outline: none;

}



Section.newslleter3 .button_newsllter {

    margin-top: 25px;

}

.newsletter-input4 input {

    border: 1px solid #e7e7e7 !important;

}

Section.newslleter3 .button_newsllter input {

    padding: 10px 42px;

    font-family: 'Montserrat-SemiBold', sans-serif;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #ffffff;

    background: #000000;

    width: 100%;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.4s ease;

}



Section.newslleter3 .button_newsllter input:hover {

    transform: translateY(-3px);

    box-shadow: 0 5px 10px rgb(62 62 62 / 40%);

}



Section.newslleter3 .right_newsllter {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



Section.newslleter3 .newsletter-input4 input {

    width: 100%;

    padding: 18px 24px;

    font-size: 1rem;

    color: #333;

    background: #f8f9fa;

    border: 2px solid transparent;

    border-radius: 12px;

    transition: all 0.3s ease;

}



Section.newslleter3 .newsletter-input4 input:focus {

    border-color: var(--main-color, #ffce00);

    background: white;

    outline: none;

}



/* ==========================================================================

   OWL CAROUSEL CUSTOM NAVIGATION

   ========================================================================== */

.control-owl_news,

.control-owl_quangcao,

.control-owl_album {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 40px;

}



.control-owl_news button,

.control-owl_quangcao button,

.control-owl_album button {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: white;

    border: 2px solid #e0e0e0;

    color: #333;

    font-size: 1rem;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

}



.control-owl_news button:hover,

.control-owl_quangcao button:hover,

.control-owl_album button:hover {

    background: var(--main-color, #ffce00);

    border-color: var(--main-color, #ffce00);

    color: #1a1a2e;

    transform: scale(1.1);

}



.control-owl_news button i,

.control-owl_quangcao button i,

.control-owl_album button i {

    font-size: 1rem;

}



/* ==========================================================================

   RESPONSIVE DESIGN

   ========================================================================== */

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

    section.tongquan .d-flex.flex_tongquan {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media screen and (max-width: 991px) {

    section.flex_bouts,

    section.tongquan,

    section.vitri,

    Section.taisaochon,

    section.matbang,

    section.chinhsach,

    Section.album_block2,

    Section.newslleter3 {

        padding: 80px 0;

    }

    

    section.flex_bouts .row.r_ab,

    section.tongquan .row.r_tongquan,

    section.vitri .row.r_vitri {

        flex-direction: column;

        gap: 20px;

    }

    

    section.tongquan .d-flex.flex_tongquan {

        grid-template-columns: 1fr;

    }

    

    section.newsllter_block .newsletter-form .form-row {

        flex-direction: column;

    }

    

    section.newsllter_block .newsletter-input {

        width: 100%;

    }

    

    Section.album_block .title_album h2,

    Section.taisaochon .title_index h2,

    section.matbang .title_index h2,

    section.chinhsach .title_index3 h2,

    Section.album_block2 .title_index4 h2,

    section.tongquan .title_tongquan h2,

    section.newsllter_block .title_newsllter h2,

    Section.newslleter3 .title_index5 h2 {

        font-size: 2rem;

    }

    

    section.vitri .vitri h2 {

        font-size: 2.2rem;

    }

    

    section.vitri .information_vitri2 {

        padding: 20px;

    }

    

    Section.newslleter3 .row.r_comment {

        flex-direction: column;

    }

    

    Section.newslleter3 .newsletter-form {

        padding: 30px;

    }

}



@media screen and (max-width: 767px) {

    section.flex_bouts,

    section.tongquan,

    section.vitri,

    Section.taisaochon,

    section.matbang,

    section.chinhsach,

    Section.album_block2,

    Section.newslleter3 {

        padding: 60px 0;

    }

    

    section.tongquan .content_tongquan {

        padding: 15px;

    }

    

    section.tongquan .box {

        padding: 20px;

    }

    

    section.newsllter_block .content_newsllter,

    section.chinhsach .content_form2 {

        padding: 15px;

    }

    

    Section.album_block .title_album h2,

    Section.taisaochon .title_index h2,

    section.matbang .title_index h2,

    section.chinhsach .title_index3 h2,

    Section.album_block2 .title_index4 h2,

    section.tongquan .title_tongquan h2,

    section.newsllter_block .title_newsllter h2,

    Section.newslleter3 .title_index5 h2 {

        font-size: 1.8rem;

    }

    

    section.vitri .vitri h2 {

        font-size: 1.8rem;

    }

    

    Section.taisaochon .items_whychooose {

        padding: 30px 20px;

    }

    

    Section.newslleter3 .coment_title {

        padding: 20px;

    }

    

    Section.newslleter3 .newsletter-form {

        padding: 25px;

    }

}



/* ==========================================================================

   SCROLL ANIMATIONS - Add class "animate-on-scroll" to elements

   ========================================================================== */

.animate-on-scroll {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.animate-on-scroll.animated {

    opacity: 1;

    transform: translateY(0);

}



/* Staggered Animation Delays */

.delay-1 { transition-delay: 0.1s; }

.delay-2 { transition-delay: 0.2s; }

.delay-3 { transition-delay: 0.3s; }

.delay-4 { transition-delay: 0.4s; }

.delay-5 { transition-delay: 0.5s; }



/* ==========================================================================

   GLASS MORPHISM EFFECTS

   ========================================================================== */

.glass-effect {

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 20px;

}



/* ==========================================================================

   HOVER EFFECTS FOR LINKS

   ========================================================================== */

a.scale-img {

    display: block;

    overflow: hidden;

}



a.scale-img img {

    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



a.scale-img:hover img {

    transform: scale(1.08);

}



.owl_abouts {

    position: relative;

}

.items_inforabouts .control-owl {

    top: calc(67% - 15px);

}

.items_inforabouts .control-owl button.owl-prev {

    left: -50px;

}

.items_inforabouts .control-owl button.owl-next {

    right: -50px;

}

.title_video p {

    color: #fff;

    font-size: 19px;

    font-family: 'Montserrat-Regular';

    opacity: .8;

}

@media screen and (max-width: 991px) {



  section.vitri .vitri p {

    font-size: 1.5rem;

    text-transform: uppercase;

    letter-spacing: 3px;

    line-height: 53px;

  }

  Section.album_block {

    padding: 60px 0 10px;

  }

  section.newsllter_block {

    padding: 70px 0;

    }

    section.vitri .vitri h2 {

        margin-bottom: 9px;

    }

    Section.taisaochon .title_index {

        text-align: center;

        margin-bottom: 34px;

    }

    section.matbang .title_index h2 {

        width: 100%;

    }

section.matbang .items_matbang {

    padding: 0;

    margin: 0 0px;

}

section.matbang .items_matbang a:hover {

    transform: unset;

    box-shadow: unset;

}

section.chinhsach .txt_ h3 {

    font-size: 1rem;

    color: rgba(255, 255, 255, 0.9);

    line-height: 1.8;

    padding: 20px 15px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 16px;

    border: 1px solid rgba(255, 255, 255, 0.1);

}

section.chinhsach .txt_ {

    text-align: center;

    max-width: 100%;

    margin: 0 auto 37px;

}

.title_video h2 {

    font-size: 2rem;

    color: #ffffff;

    margin-bottom: 10px;

}

.title_video p {

    font-size: 15px;

}

Section.video_statics {

    position: relative;

    padding: 38px 0 55px;

    background: #1a1a2e;

}

Section.newslleter3 .title_index5 p {

    font-size: .6rem;

    letter-spacing: 2px;

    margin-bottom: 15px;

}

Section.newslleter3 .content_newsdllter textarea {

    border: 1px solid #dedede;

}

Section.newslleter3 .button_newsllter {

    margin-top: 25px;

    margin-bottom: 14px;

}

.content_form {

    padding: 0 0px;

}

Section.taisaochon .items_whychooose {

    margin: 0;

}

Section.taisaochon .title_why h3 {

    font-size: 1.4rem;

}

input.readon-button.pd {

    padding: 10px 0 !important;

}

  }