@charset "UTF-8";
@import "base.css";
/*@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Play:wght@400;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");*/
/* Natalie */
@font-face {
    font-family: "Natalie";
    src: url("font/Natalie.otf") format("opentype"),
         url("font/Natalie.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Blooming Elegant */
@font-face {
    font-family: "BloomingElegant";
    src: url("font/BloomingElegant1.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BloomingElegantSans";
    src: url("font/BloomingElegantSans1.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BloomingElegantHand";
    src: url("font/BloomingElegantHand1.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    --f-main: "Crimson Text", serif;
    --f-ttl: "Natalie", sans-serif;
    --f_be: "BloomingElegant", sans-serif;
    --f-bes: "BloomingElegantSans", sans-serif;
    --f-beh: "BloomingElegantHand", sans-serif;
    --txt: #4e4e4b;
    --mcolor: #c89e96;
    --scolor: #C89E96;
}

h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
textarea,
select,
p,
blockquote,
th,
td,
pre,
address,
li,
dt,
dd {
    font-size: 18px;
    -webkit-text-size-adjust: none;
}

header,
section,
footer,
aside,
nav,
main,
article,
figure {
    display: block;
}

img {
    vertical-align: bottom;
    height: auto;
}

a {
    color: var(--txt);
    text-decoration: none;
    transition: all 0.3s;
}

    a:hover,
    a:active {
        text-decoration: none;
        color: var(--scolor);
    }

table {
    width: 100%;
}

p {
    margin: 0 0 0.5em;
}

.section {
    padding: 0 0 30px;
}

p,
dd,
td,
th,
li {
    line-height: 1.75em;
}

#totop {
    position: fixed;
    bottom: 60px;
    right: -15px;
    z-index: 10;
    margin-bottom: 0;
    width: 80px;
}

    #totop a {
        display: block;
        transition: all 0.5s;
        -webkit-animation: slide-top 0.8s linear infinite alternate-reverse;
        animation: slide-top 0.8s linear infinite alternate-reverse;
    }

        #totop a:hover {
            opacity: 0.7;
        }

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

.bold {
    font-weight: bold;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    outline: none;
}
/*==========================================================================*/
/*                            Container                                     */
/*==========================================================================*/
body {
    color: var(--txt);
    font-family: var(--f-main);
    background-color: #f9ceb9;
}

#wrapper {
    min-width: 1200px;
    overflow: hidden;
}

.container {
    width: 1200px;
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    position: relative;
}

img {
    max-width: 100%;
}

.sp {
    display: none !important;
}

.pc {
    display: block !important;
}

#header {
    position: relative;
    z-index: 99;
}

h1 {
    display: none;
}

#logo {
    text-align: center;
    margin: 0 auto;
    border-bottom: 1px solid #0000002e;
}

.fixed #logo {
    border-bottom: none;
}

#logo img {
    width: 175px;
    margin-bottom: 10px;
}

#logo .txt {
    display: block;
}

.h_main {
    position: absolute;
    background: #ffffffb0;
    width: 100%;
    top: 0;
    left: 0;
    padding: 14px 0 11px;
	backdrop-filter: blur(10px);
}

.h_right {
    position: absolute;
    right: 34px;
    top: 36px;
    display: flex;
    align-items: center;
}

.h_btn {
    display: flex;
    margin-right: 50px;
}

    .h_btn li:not(:last-child) {
        margin-right: 9px;
    }

.h_lang {
    display: flex;
}

    .h_lang li:not(:last-child) {
        margin-right: 6px;
    }

    .h_lang img {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.21);
    }

.h_search {
    cursor: pointer;
    transition: all 0.3s;
}

#gnavi {
    margin: 9px 0 0;
}

.gnavi {
    display: flex;
    justify-content: center;
	align-items: center;
}

    .gnavi > li {
        position: relative;
        padding: 0 20px;
        line-height: normal;
    }

        .gnavi > li:not(:last-child):after {
            /* content: ""; */
            position: absolute;
            width: 1px;
            height: 22px;
            right: 0;
            background: #000;
            opacity: 0.2;
            top: calc(50% - 11px);
        }

        .gnavi > li > a {
            display: block;
            text-transform: uppercase;
            text-align: center;
            font-size: 20px;
            padding: 3px 0;
            font-size: 36px;
            /* font-weight: 600; */
            font-family: var(--f-bes);
            line-height: normal;
        }

.submenu {
    position: absolute;
    width: 172px;
	width: max-content;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: none;
	
}

.gnavi > li.active > a {
    color: var(--scolor);
    font-weight: 700;
}

.submenu a {
    display: block;
    background: var(--mcolor);
    text-align: center;
    color: #fff;
    font-size: 16px;
    padding: 5px 10px;
    position: relative;
    line-height: 1.5em;
    font-family: var(--f-bes);
    font-size: 26px;
}
.submenu a:hover {
	background: var(--txt);
}
    .submenu a:after {
        content: "";
        position: absolute;
        width: calc(100% - 12px);
        left: 6px;
        bottom: 0;
        background: #fff;
        opacity: 0.06;
        height: 1px;
    }

.notranslate {
    background: var(--scolor);
    text-transform: uppercase;
    font-family: var(--f-bes);
    font-size: 36px;
    padding: 5px;
    line-height: normal;
    height: 100%;
}
.fixed .notranslate {
	font-size: 32px;
}
.fixed #logo {
    margin: 0;
}

    .fixed #logo .txt {
        display: none;
    }

.fixed .h_right {
    top: 0;
}

.fixed .gnavi > li > a {
    font-size: 32px;
}

.fixed .gnavi > li {
    padding: 0 15px;
}

.fixed .gnavi {
    justify-content: flex-end;
}

.fixed #gnavi {
    align-content: center;
}

.fixed .container {
    display: flex;
    justify-content: space-between;
}

.fixed .h_main {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -webkit-animation: header-fixed 0.6s;
    -moz-animation: header-fixed 0.6s;
    -ms-animation: header-fixed 0.6s;
    animation: header-fixed 0.6s;
}

.h_main {
    -webkit-animation: remove-fixed 0.3s linear;
    -moz-animation: remove-fixed 0.3s linear;
    -ms-animation: remove-fixed 0.3s linear;
    animation: remove-fixed 0.3s linear;
}

@keyframes remove-fixed {
    0% {
        opacity: 0.9;
        -webkit-transform: translateY(20%);
        -ms-transform: translateY(20%);
        -moz-transform: translateY(20%);
        transform: translateY(20%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes remove-fixed {
    0% {
        opacity: 0.9;
        -webkit-transform: translateY(20%);
        -ms-transform: translateY(20%);
        -moz-transform: translateY(20%);
        transform: translateY(20%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes remove-fixed {
    0% {
        opacity: 0.9;
        -webkit-transform: translateY(20%);
        -ms-transform: translateY(20%);
        -moz-transform: translateY(20%);
        transform: translateY(20%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes header-fixed {
    0% {
        opacity: 0.5;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes header-fixed {
    0% {
        opacity: 0.5;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes header-fixed {
    0% {
        opacity: 0.5;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

.mainvisual {
    position: relative;
    padding-top: 193px;
}

.main_cont {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    color: #fff;
    padding-top: 60px;
}

.main_info {
    width: 445px;
    margin: 0 0 0 auto;
}

.main_info_ttl {
    font-size: 48px;
    font-family: var(--f-ttl);
    text-transform: uppercase;
    line-height: 1.35em;
    margin: 0 0 30px;
}

    .main_info_ttl .num {
        font-size: 145.84%;
    }

.main_info_txt {
    margin: 0;
    line-height: 1.5em;
    font-style: italic;
    text-align: justify;
}

    .main_info_txt .lager {
        font-size: 120%;
        font-weight: 600;
        font-style: normal;
    }

.main_slide .slick-dots {
    display: flex !important;
}

.main_slide .slick-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

    .main_slide .slick-dots li {
        margin: 0 4px;
        line-height: 0;
    }

        .main_slide .slick-dots li button {
            width: 12px;
            height: 12px;
            background: rgb(78 78 75 / 50%);
            border-radius: 10px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            text-indent: -5000000px;
        }

.main_slide li.slick-active button,
.main_slide li:hover button {
    background: #4e4e4b;
}

.main_slide li.slick-active button {
    width: 50px;
}

.slick-arrow {
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 30px;
    cursor: pointer;
    z-index: 3;
    background: url("/assets/images/ic_next.svg") no-repeat center center;
    background-size: 25px;
    transition: all 0.3s;
    text-indent: -500000px;
    background-color: var(--mcolor);
    border: none;
    top: 40%;
    right: -65px;
}

.slick-prev {
    background-image: url("/assets/images/ic_prev.svg");
    left: -65px;
}

.main_slide .slick-arrow {
    left: calc(50% + 346px);
    bottom: 33px;
}

.main_slide .slick-prev {
    left: calc(50% + 239px);
}

.sec01 {
    padding: 89px 0;
    position: relative;
}

.sec01_main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    gap: 40px;
}
.sec01_main p {
	width: 40%;
}

    .sec01_main:nth-child(2) {
        flex-direction: row-reverse;
    }

.sec01_img {
    flex-shrink: 0;
    margin: 0 0 0 80px;
    width: calc(50% - 40px);
}

    .sec01_img img {
        border-radius: 10px;
        border-top-left-radius: 300px;
        border-bottom-right-radius: 100px;
        width: 100%;
    }
@keyframes pulseMobile {
		  0%, 100% { transform: scale(1); }
		  50% { transform: scale(1.03); }
		}

		  .sec01_main p a img {
			animation: pulseMobile 3s infinite ease-in-out;
		  }
.idx_ttl {
    font-size: 100px;
    font-family: var(--f-ttl);
    position: relative;
    color: var(--txt);
    margin: 0 0 10px;
    text-align: center;
}

    .idx_ttl:before {
        /* content: ""; */
        position: relative;
        display: inline-block;
        background: url("/assets/images/ic_ttl.png") no-repeat center center/100% auto;
        width: 47px;
        height: 47px;
    }

.txt_clr1 {
    color: var(--mcolor);
}

.sec01_main:nth-child(2) .sec01_img {
    margin: -300px 80px 0 0;
}

    .sec01_main:nth-child(2) .sec01_img img {
        border-radius: 10px;
        border-top-right-radius: 300px;
        border-bottom-left-radius: 100px;
    }

.sec01_main:not(:last-child) {
    margin: 0 0 55px;
}

.sec01 .idx_btn {
    position: absolute;
    width: calc(50% - 40px);
    right: 0;
    bottom: 14px;
    right: 0;
    display: flex;
    justify-content: center;
}

.idx_btn {
    margin: 0;
    padding-top: 30px;
    text-align: center;
}

    .idx_btn a {
        position: relative;
        border-radius: 50px;
        font-size: 16px !important;
        font-weight: 600;
        text-transform: uppercase;
        padding-bottom: 2px;
        /* background: #fff; */
        /* padding: 10px 20px; */
        border: 12px solid #ffffff80;
    }

    .idx_btn span {
        background: #fff;
        border-radius: 50px;
        padding: 3px 15px;
        color: var(--txt);
    }

.sec01:before,
.sec01:after {
    content: "";
    position: absolute;
    z-index: -2;
    pointer-events: none;
}

.sec02 {
    padding: 80px 0;
    background: linear-gradient(180deg, #efc7b3 0%, #f9ceb9 100%);
}

.sec02_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.sec02_info {
    width: 50%;
}

.sec02_img {
    position: relative;
    width: 50%;
}

.sec02_item_img a {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 3 / 3.5;
}

.sec02_item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
}

.sec02_item_img {
    margin: 0;
}

.sec02_item .idx_btn {
    position: absolute;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 3.5;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(3 44 70 / 44%);
    border-radius: 10px;
    transition: all 0.3s;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}

.sec03 {
    padding: 0 0 80px;
    position: relative;
}

.sec03_bg {
    background: url("/assets/images/bg_service.png") no-repeat;
    padding: 90px 0;
    background-size: cover;
}

.sec03_main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/*.sec03_itm:last-child {
    align-content: center;
}*/

.sec03_info {
    position: relative;
    margin-bottom: 20px;
    padding-left: 40px;
    font-size: 20px;
    line-height: 1.4;
}

.sec03_info_address::before {
    content: "";
    position: absolute;
    background: url(/assets/images/ic_address.png) no-repeat center center / 100% auto;
    width: 29px;
    height: 42px;
    left: 0;
    top: 4px;
}

.sec03_info_phone::before {
    content: "";
    position: absolute;
    background: url(/assets/images/ic_phone.png) no-repeat center center / 100% auto;
    width: 30px;
    height: 44px;
    left: 0;
    top: -9px;
}

.sec03_info_email::before {
    content: "";
    position: absolute;
    background: url(/assets/images/ic_mail.png) no-repeat center center / 100% auto;
    width: 28px;
    height: 47px;
    left: 0;
    top: -7px;
}

.sec03_info_open span {
    font-weight: bold;
}

.sec03_info_social {
    display: flex;
    gap: 30px;
}

.sec03_img {
    margin-left: 10px;
    flex: 1;
    display: flex;
    align-items: center;
}

    .sec03_img .img:not(:last-child) {
        margin-right: 10px;
        width: 62%;
    }

    .sec03_img img {
        border-radius: 10px;
        width: 100%;
    }

    .sec03_img .img:last-child {
        flex: 1;
    }

.sec03_ttl {
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 35px;
}

.sec03_txt p {
    line-height: normal;
    text-align: justify;
}

    .sec03_txt p:not(:last-child) {
        margin-bottom: 1.5em;
    }

.sec03_txt {
    margin-bottom: 40px;
}

.sec03 .idx_btn a {
    color: #fff;
}

.sec04_main {
    background-color: #ffd7c3; /* Màu nền của form */
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #c89e96;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    width: 860px;
    margin: auto;
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các hàng */
}

.form-row {
    display: flex;
    gap: 10px; /* Khoảng cách giữa các ô trong một hàng */
    align-items: center;
}

.form-group {
    flex: 1; /* Chia đều không gian cho các ô */
}

    .form-group.full-width {
        flex-basis: 100%; /* Cho textarea chiếm hết chiều rộng */
    }

/* --- Các ô input và textarea --- */
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
    width: 100%;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    background-color: #ffffff;
    font-size: 18px;
    color: #333;
    border: 1px solid #c89e96;
}

    input::placeholder,
    textarea::placeholder {
        color: #b0b0b0;
    }

    /* Loại bỏ mũi tên tăng/giảm của input number */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

input[type="number"] {
    -moz-appearance: textfield;
}

textarea {
    height: 100px;
    resize: vertical;
}

/* --- Các dòng text thông báo --- */
.info-text {
    text-align: center;
    /* padding: 0 5px; */
    margin: 0;
    font-size: 18px;
}

/* --- Nhóm Checkbox --- */
.checkbox-group {
    justify-content: space-between;
    padding: 0 5px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

input[type="checkbox"] {
	width: 20px;
    height: 20px;;
    accent-color: #6d5d56;
}

label {
    /* cursor: pointer; */
    font-size: 16px;
}

/* --- Nút "Book Now" --- */
.submit-btn-container {
    text-align: center;
}

    .submit-btn-container .idx_btn {
        padding: 0;
    }

.submit-btn {
    background-color: #fff;
    border: 1px solid #f5c6b8;
    border-radius: 50px;
    padding: 12px 40px;
    font-size: 24px;
    font-weight: 500;
    color: var(--txt);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .submit-btn:hover {
        background-color: #fceae3;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.sec04 {
    padding: 20px 0 80px;
    position: relative;
}

    .sec04 .idx_ttl {
        justify-content: center;
    }

.sec04_list {
    background: url("/assets/images/sec04_img.png") no-repeat center center/100% auto;
    position: relative;
    height: 400px;
    max-width: 1179px;
    margin: 0 auto;
    width: 100%;
    counter-reset: item4;
}

    .sec04_list li {
        font-size: 16px;
        font-weight: 700;
        color: var(--mcolor);
        text-transform: uppercase;
        position: absolute;
        line-height: normal;
        counter-increment: item4;
        display: flex;
        align-items: center;
        padding-left: 5px;
        white-space: nowrap;
    }

        .sec04_list li:before {
            content: counter(item4);
            position: relative;
            display: inline-block;
            font-size: 300%;
            margin-right: 5px;
        }

        .sec04_list li:after {
            content: "";
            position: absolute;
            width: 2px;
            left: 0;
            top: 0;
            height: 100%;
            background-image: linear-gradient( 0deg, #032c46 25%, #ffffff 25%, #ffffff 50%, #032c46 50%, #032c46 75%, #ffffff 75%, #ffffff 100% );
            background-size: 16px 16px;
        }

        .sec04_list li:nth-child(odd) {
            top: 31px;
        }

        .sec04_list li:nth-child(even) {
            bottom: 58px;
        }

        .sec04_list li:nth-child(1) {
            left: 140px;
        }

        .sec04_list li:nth-child(2) {
            left: 370px;
        }

        .sec04_list li:nth-child(3) {
            left: 590px;
        }

        .sec04_list li:nth-child(4) {
            left: 815px;
        }

        .sec04_list li:nth-child(5) {
            left: 1035px;
        }

.sec05 {
    background: #ffd6c2;
    padding: 60px 0;
    color: #fff;
    position: relative;
}

.sec05_main {
    margin: 0 -20px;
}
.sec05_item {
    margin: 0 20px;
}
.sec05_item_img img {
    width: 100%;
}
.sec05_txt {
    margin: 0;
}

.sec06 {
    padding: 80px 0;
}

    .sec06 .idx_ttl {
        justify-content: center;
    }

.sec06_list {
    margin: 0 -10px;
}

.sec06_item {
    margin: 0 10px;
}

.sec06_item_img img {
    width: 100%;
}

.sec06_item_img {
    margin: 0 0 32px;
    border-radius: 10px;
    overflow: hidden;
}

.sec06_item_ttl {
    font-size: 24px;
    color: var(--txt);
    font-weight: 600;
    margin: 0 0 12px;
	line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sec06_item_txt {
    line-height: 2em;
    margin: 0;
    color: var(--txt);
    display: flex;
    gap: 15px;
	align-items: center;
    font-weight: bold;
}

.sec06 .idx_btn a {
    width: 200px;
    margin: 0 auto;
    color: #fff;
}

.sec06_item_txt img {
    width: 50px;
}

.btn_group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn_book a {
    border: 12px solid #4e4e4b66;
}

    .btn_book a span {
        background: var(--txt);
        color: var(--mcolor);
    }

.sec07 {
    padding: 80px 0;
    position: relative;
}

    .sec07:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 270px;
        bottom: 0;
        left: 0;
        z-index: -2;
        pointer-events: none;
        background: #032c46;
    }

    .sec07 .idx_ttl {
        justify-content: center;
    }

.sec07_list.slick-initialized .slick-slide {
    margin: 0 17px;
}

    .sec07_list.slick-initialized .slick-slide img {
        width: 100%;
    }

.sec07_list {
    margin: 0 -17px;
}

    .sec07_list .slick-arrow {
        bottom: 0;
        left: calc(50% + 13px);
        background-image: url("/assets/images/ic_next_white.svg");
    }

    .sec07_list .slick-prev {
        right: calc(50% + 13px);
        left: auto;
        background-image: url("/assets/images/ic_prev_white.svg");
    }

    .sec07_list.slick-initialized.slick-slider {
        padding: 0 0 74px;
    }

.gallery-container {
    margin: 40px 0;
    padding: 20px;
    text-align: center;
}
/* --- Tabs Navigation --- */
.tabs-nav {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    gap: 30px; /* Khoảng cách giữa các nút */
}

.tab-btn {
    background-color: #ffffff;
    border: none;
    border-radius: 50px; /* Bo tròn hình viên thuốc */
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #8d8d8d;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ cho nút */
	font-family: var(--f-bes);
    font-size: 24px;
}

    .tab-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
    }

    /* Style cho nút Tab đang Active */
    .tab-btn.active {
        color: #c58f7d; /* Màu chữ khi active (hơi nâu cam giống ảnh) */
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Hiệu ứng nút chìm xuống khi active */
        /* Tùy chọn: Thêm gạch chân giống ảnh gốc nếu muốn */
        text-decoration: underline;
        text-underline-offset: 5px;
        text-decoration-thickness: 2px;
        text-decoration-color: #e6c4b8;
    }

/* --- Tab Content Area --- */
/* Mặc định ẩn tất cả nội dung tab */
.tab-content {
    display: none;
    animation: fadeIn 0.5s ease; /* Hiệu ứng hiện dần */
}

    /* Chỉ hiện nội dung tab có class active */
    .tab-content.active {
        display: block;
    }

        /* --- Tabs Navigation --- */
        .tabs {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 40px;
        }

        .tab-button {
			border: none;
			padding: 10px;
			border-radius: 20px;
			font-size: 28px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s ease;
			background-color: var(--scolor);
			color: #fff;
			font-family: var(--f-bes);
			line-height: 0.9em;
			}

        .tab-button.active {
            background-color: #fff;
            color: var(--mcolor);
        }

        .tab-button:hover:not(.active) {
            background-color: #fff;
            color: var(--mcolor);
        }

        /* --- Tab Content --- */
        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }

        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* --- Service Cards --- */
        .services-list {
            display: grid;
            gap: 30px;
        }

        .service-card {
            display: flex;
            /* background-color: #fff; */
            /* border: 1px solid var(--txt); */
            /* border-radius: 15px; */
            /* overflow: hidden; */
            /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */
            align-items: center;
        }

        /* Alternating layout for cards */
        .service-card:nth-child(even) {
            flex-direction: row-reverse;
        }

        .service-card-image {
            width: 40%;
            flex-shrink: 0;
            border: 2px solid var(--txt);
            border-radius: 30px;
            overflow: hidden;
			height: 320px;
        }

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

        .service-card-details {
            padding: 25px 30px;
            flex-grow: 1;
            border: 2px solid  var(--txt);
            border-radius: 0 20px 20px 0;
			border-left: 0;
			text-align: center;
        }
		.service-card:nth-child(even) .service-card-details {
			border-radius: 20px 0 0 20px;
			border-right: 0;
			border-left: 2px solid  var(--txt);
		}
        .service-card h2 {
            font-size: 1.25rem;
            color: #333;
            margin-top: 0;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .service-card h3 {
            font-size: 1rem;
            color: #777;
            margin-top: 0;
            margin-bottom: 15px;
            font-weight: 400;
        }

        .service-card .p {
            margin: 5px 0;
            line-height: 1.6;
            font-size: 0.9rem;
        }
       
        .service-card .pricing {
            margin-top: 20px;
            font-size: 0.95rem;
            font-weight: 500;
        }
        
        .service-card .pricing p {
            margin: 8px 0;
        }
        
        /* Placeholder for empty tabs */
        .placeholder-content {
            text-align: center;
            padding: 50px;
            background-color: #fff;
            border: 1px solid #F9E5D4;
            border-radius: 15px;
        }
.service-card-details p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #000;
  text-align: start;
  line-height: 1.4;
}

/* Phần tên dịch vụ */
.service-card-details p strong {
  position: relative;
  flex: 1;
  font-weight: 600;
  display: flex;
  align-items: center;
  text-align: start;
  line-height: 1.4;
  font-weight: bold;
  font-size: 18px;
}

/* Dấu chấm chỉ xuất hiện giữa strong và giá */
.service-card-details p strong::after {
  content: "";
  flex: 1;
  border-bottom: 2px dotted #333;
  height: 1px;
  margin-left: 10px;
  margin-right: 10px;
  transform: translateY(6px);
}

/* Phần giá */
.service-card-details p .price {
  white-space: nowrap;
    font-weight: bold;
    font-size: 18px;
}
/* --- Image Grid Layout --- */
.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, 100px);
    gap: 20px;
}
.image-grid p {
	overflow: hidden;
    border-radius: 20px;
}
.image-grid img {
	width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.gallery-item {
    overflow: hidden;
    border-radius: 20px;
}
.gallery-item:nth-child(n+9) {
	display:none;
}
    .gallery-item:nth-child(1) {
        grid-row: span 3 / span 3;
    }

    .gallery-item:nth-child(2) {
        grid-row: span 4 / span 4;
    }

    .gallery-item:nth-child(3) {
        grid-row: span 3 / span 3;
    }

    .gallery-item:nth-child(4) {
        grid-row: span 4 / span 4;
    }

    .gallery-item:nth-child(5) {
        grid-row: span 4 / span 4;
        grid-row-start: 4;
    }

    .gallery-item:nth-child(6) {
        grid-row: span 3 / span 3;
        grid-column-start: 2;
        grid-row-start: 5;
    }

    .gallery-item:nth-child(7) {
        grid-row: span 4 / span 4;
        grid-column-start: 3;
        grid-row-start: 4;
    }

    .gallery-item:nth-child(8) {
        grid-row: span 3 / span 3;
        grid-column-start: 4;
        grid-row-start: 5;
    }

    .gallery-item img {
		width: 100% !important;
		height: 100% !important;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.05); /* Phóng to nhẹ khi di chuột */
    }

.sec08 {
    padding: 80px 0;
}

    .sec08 .idx_ttl {
        justify-content: center;
    }

.sec08_txt {
    text-align: center;
    line-height: 2em;
    margin: 0 0 30px;
}

    .sec08_txt .lager {
        font-weight: 700;
        color: var(--mcolor);
    }

.sec08_main {
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
}

.sec08_form {
    width: 500px;
    background: var(--scolor);
    padding: 50px;
    border-radius: 10px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sec08_img {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.sec08_img_item:nth-child(1) {
    margin: 0;
    width: calc(21.5% - 8px);
}

.sec08_img_item:nth-child(2) {
    margin: 0;
    width: calc(32.5% - 8px);
}

.sec08_img_item:last-child {
    margin: 0;
    width: calc(46% - 16px);
}

.sec08_img_item .img:not(:last-child) {
    margin-bottom: 16px;
}

.sec08_img_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec08_img_item .img {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    border-radius: 10px;
    height: 100%;
}

.sec08_img_item:last-child .img:last-child {
    display: flex;
    justify-content: space-between;
}

.sec08_img_item:last-child .img {
    height: calc(50% - 8px);
}

    .sec08_img_item:last-child .img:last-child .item {
        width: calc(35% - 8px);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        overflow: hidden;
        border-radius: 10px;
        height: 100%;
    }

        .sec08_img_item:last-child .img:last-child .item:nth-child(2) {
            width: calc(65% - 8px);
        }

.sec08_img_item:nth-child(1) .img {
    height: calc(50% - 8px);
}

.sec08_form input {
    width: 100%;
    border-radius: 30px;
    border: none;
    font-size: 15px;
    color: #a7a7a7;
    margin: 0 0 27px;
    padding: 15px 20px;
    border-radius: 0;
}

.sec08_form button {
    width: 100px;
    margin: 0 auto;
    background: var(--mcolor);
    color: #fff;
    border: 1px solid var(--mcolor);
    border-radius: 50px;
    font-size: 16px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 700;
}

.sec08_bnr {
    margin: 0;
    text-align: center;
}

    .sec08_bnr img {
        width: 100%;
    }

.sec09 .idx_ttl {
    justify-content: center;
}

.sec09_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sec09_item {
    border-radius: 10px;
    overflow: hidden;
    height: 500px !important;
    position: relative;
}

    .sec09_item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(78 78 75 / 50%);
        z-index: 1;
    }

    .sec09_item:nth-child(3n) {
        margin-right: 0;
    }

.sec09_item_img {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    margin: 0;
    height: 100%;
}

    .sec09_item_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sec09_item_img:after {
        content: "";
        position: absolute;
        background: url("/assets/images/ic_play.svg") no-repeat center center/100% auto;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

.sec09_item_ttl {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    font-style: italic;
}

.sec09 .idx_btn a {
    margin: 0 auto;
}

.sec09 {
    padding: 0 0 80px;
}

.sec09_item a {
    height: 100%;
    display: block;
}

.ft_main {
    /* background: url("/assets/images/ft_bg.jpg") no-repeat top center/cover; */
    padding: 45px 0;
    color: var(--mcolor);
}
.footer-main {
    background: linear-gradient(0deg, #4e4e4b33 0, #f9ceb9 100%);
}
.footer-top {
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 60px;
    border-bottom: 2px solid rgb(78 78 75 / 20%); /* Màu đường kẻ nhạt */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

    .footer-top .footer-logo img {
        max-width: 200px;
        /* margin-bottom: 15px; */
    }

    .footer-top .tagline-main {
        font-family: 'Cormorant Garamond', serif;
        font-size: 42px;
        /* font-weight: 600; */
        color: var(--f-main);
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .footer-top .tagline-sub {
        font-size: 42px;
        margin: 0;
    }

/* --- Grid Layout cho 3 cột bên dưới --- */
.footer-grid {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 30px; /* Khoảng cách giữa các cột */
    justify-content: space-between;
    padding-bottom: 60px;
}

.footer-col {
    /* flex: 1; */
    /* min-width: 250px; */ /* Chiều rộng tối thiểu cho mỗi cột */
    width: calc(100% /3);
}
.links-col {
    width: 200px;
}
.footer-contact {
    padding-bottom: 30px;
}
/* --- Style cho các cột --- */
.footer-heading {
    /* font-family: 'Poppins', sans-serif; */
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--txt);
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

    /* Tạo đường gạch chân ngắn dưới tiêu đề */
    .footer-heading::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 3px;
        background-color: #333;
    }

    .footer-heading::after {
        content: '';
        position: absolute;
        bottom: 1px;
        left: 0;
        width: 100px;
        height: 1px;
        background-color: #333;
    }

.contact-list, .quick-links {
    list-style: none;
    padding: 0;
}

    .contact-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .contact-list i {
        margin-right: 15px;
        margin-top: 5px;
        color: #333;
    }

    .quick-links li {
        margin-bottom: 7px;
    }

    .quick-links a {
        text-decoration: none;
        color: #5d5d5d;
        transition: color 0.3s ease;
    }

        .quick-links a:hover {
            color: #333;
        }

.map-container {
    margin-bottom: 20px;
}

    .map-container iframe {
        border: none;
        border-radius: 5px;
    }

.social-icons {
    display: flex;
    gap: 15px; /* Khoảng cách giữa các icon */
}

/* Đảm bảo social icons của cột map không bị căn giữa */
.map-col {
    text-align: left;
    align-content: center;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--txt);
    border-radius: 5px;
    text-decoration: none;
    color: #5d5d5d;
    font-size: 18px;
    transition: background-color 0.3s, color 0.3s;
}

    .social-icons a:hover {
        background-color: #333;
        color: #fff;
        border-color: #333;
    }


/* --- Phần Copyright cuối trang --- */
.footer-bottom {
    background-color: var(--txt); /* Màu xám tối */
    text-align: center;
    padding: 15px 0;
    font-size: 13px;
}

    .footer-bottom p {
        font-size: 16px;
        margin: 0;
        color: var(--mcolor);
    }

    .footer-bottom a {
        color: var(--mcolor);
        text-decoration: underline;
        font-weight: bold;
    }

        .footer-bottom a:hover {
            text-decoration: none;
        }

.form_search {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}

    .form_search.show {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    .form_search input {
        width: 800px;
        max-width: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid #fff;
        padding: 15px 20px;
        color: #fff;
    }

        .form_search input::placeholder {
            color: #fff;
        }

    .form_search .btn_close {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        position: absolute;
        right: 10px;
        top: calc(50% - 20px);
        padding: 10px;
        background: var(--mcolor);
        cursor: pointer;
    }
/* --- Responsive CSS --- */

/* Tablet view */
@media (max-width: 992px) {
    .footer-grid {
        gap: 40px 20px;
    }

    .footer-col {
        /* Chuyển layout thành 2 cột + 1 cột ở dưới */
        flex: 1 1 45%;
    }
}

/* Mobile view */
@media (max-width: 768px) {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	input,
	button,
	textarea,
	select,
	p,
	blockquote,
	th,
	td,
	pre,
	address,
	li,
	dt,
	dd {
		font-size: 16px;
		-webkit-text-size-adjust: none;
	}
    .footer-main {
        padding: 40px 0 0;
    }

    .footer-top {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

        .footer-top .tagline-main {
            font-size: 24px;
        }

        .footer-top .tagline-sub {
            font-size: 20px;
        }

    .footer-grid {
        flex-direction: column; /* Các cột xếp chồng lên nhau */
        gap: 30px;
    }

    .footer-col {
        min-width: 100%;
    }
}

@media screen and (max-width: 1800px) {
    .mainvisual:after {
        background-position: bottom -30px center;
    }
}

@media screen and (max-width: 1400px) {
    .sec02_list.slick-initialized .slick-slide {
        width: calc(1110px / 3);
    }

    .sec04_list {
        transform: scale(0.95);
    }

    .gnavi > li {
        padding: 0 20px;
    }

        .gnavi > li > a {
        font-size: 28px;
        }

        .gnavi > li:not(:last-child):after {
            top: calc(50% - 9px);
        }

    .fixed .gnavi > li > a {
        font-size: 34px;
    }

    .notranslate {
        font-size: 28px;
    }
	.fixed .notranslate {
		font-size: 28px;
	}
    .fixed #logo img {
        width: 130px;
    }

    .btn_search img {
        width: 25px;
        position: relative;
        top: -5px;
    }
	.mainvisual {
		padding-top: 180px;
	}
}

@media screen and (min-width: 769px) {
    .h_lang a:hover,
    .h_btn a:hover,
    .sec08_bnr a:hover,
    .h_search:hover {
        opacity: 0.7;
    }

    .gnavi > li:hover > a,
    .ft_link li a:hover {
        color: var(--scolor);
    }

    .submenu a:hover {
        background: var(--txt);
    }

    .slick-arrow:hover,
    .idx_btn a:hover {
        /* background-color: var(--scolor); */
        color: var(--txt);
    }

    .sec02_item:hover .idx_btn {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }

    .sec02_item:hover .sec02_item_img img {
        transform: scale(1.1);
    }
    .sec08_form button:hover {
        background: #fff;
        color: var(--mcolor);
    }
}

@media screen and (max-width: 768px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    input,
    button,
    textarea,
    select,
    p,
    blockquote,
    th,
    td,
    pre,
    address,
    li,
    dt,
    dd {
        font-size: 16px;
    }

    #wrapper {
        min-width: 100%;
        margin: 0;
        padding-top: 110px;
    }

    #main,
    #footer {
        min-width: 100%;
    }
	#main {
		padding: 20px 0 0 !important;
	}
	.main_slide .slick-dots li button {
		width: 8px;
		height: 8px;
	}
	.main_slide li.slick-active button {
		width: 25px;
	}
    .container {
        padding: 0 15px;
        width: 100%;
    }

    .sp {
        display: block !important;
    }

    .pc {
        display: none !important;
    }
    /* MENU-ICON */
    .menu-icon {
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        text-align: center;
        text-transform: uppercase;
        line-height: 1em;
        cursor: pointer;
        color: #fff;
        font-size: 14px;
        padding: 8px 0;
        z-index: 10;
        background: var(--mcolor);
        /*margin-left: 10px;*/
        border-radius: 5px;
    }

        .menu-icon span {
            display: block;
            margin: 0 auto 15px;
            width: 20px;
            height: 2px;
            background-color: #fff;
            -webkit-transition-duration: 0;
            -moz-transition-duration: 0;
            -ms-transition-duration: 0;
            -o-transition-duration: 0;
            transition-duration: 0;
            -webkit-transition-delay: 0.2s;
            -moz-transition-delay: 0.2s;
            -ms-transition-delay: 0.2s;
            -o-transition-delay: 0.2s;
            transition-delay: 0.2s;
            top: 12px;
            left: 0;
            position: relative;
        }

            .menu-icon span::after,
            .menu-icon span::before {
                display: block;
                content: "";
                position: absolute;
                width: 20px;
                height: 2px;
                background-color: #fff;
                -webkit-transition-property: margin, -webkit-transform;
                -webkit-transition-duration: 0.2s;
                -moz-transition-duration: 0.2s;
                -ms-transition-duration: 0.2s;
                -o-transition-duration: 0.2s;
                transition-duration: 0.2s;
                -webkit-transition-delay: 0.2s, 0;
                -moz-transition-delay: 0.2s, 0;
                -ms-transition-delay: 0.2s, 0;
                -o-transition-delay: 0.2s, 0;
                transition-delay: 0.2s, 0;
            }

            .menu-icon span::before {
                margin-top: -8px;
            }

            .menu-icon span::after {
                margin-top: 8px;
            }

        .menu-icon.active span {
            background-color: transparent;
        }

            .menu-icon.active span::before,
            .menu-icon.active span::after {
                margin-top: 0px;
                -webkit-transition-delay: 0, 0.2s;
                -moz-transition-delay: 0, 0.2s;
                -ms-transition-delay: 0, 0.2s;
                -o-transition-delay: 0, 0.2s;
                transition-delay: 0, 0.2s;
            }

            .menu-icon.active span::before {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .menu-icon.active span::after {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

    .gnv-ico {
        width: 50px;
        height: 48px;
        position: absolute;
        background: var(--txt);
        right: 0;
        top: 0 !important;
        transform: none !important;
        border: none !important;
    }

        .gnv-ico:before {
            content: "";
            position: absolute;
            border: solid #fff;
            border-width: 0 1px 1px 0;
            display: inline-block;
            padding: 3px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            left: calc(50% - 3px);
            top: calc(50% - 3px);
            transition: all 0.5s ease;
        }

    .gnavi li.active > .gnv-ico:before {
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    #totop {
        width: 40px;
        right: 3%;
        bottom: 50px;
        line-height: 0;
    }

    #logo {
        margin: 0;
		border: none;
    }

        #logo img {
			width: 140px;
			margin: 0;	
        }

        #logo .txt {
            display: none;
        }

    .h_main {
        position: fixed;
        width: 100%;
        z-index: 99;
        border-radius: 0;
        padding: 10px 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		background: #fff;
    }

        .h_main .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    #gnavi {
        margin: 0;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.7);
        left: 100%;
        transition: all 0.3s;
    }

        #gnavi.show {
            left: 0;
        }

    .gnv_main {
        display: block;
        background: #fff;
        width: 300px;
        padding: 30px 20px;
        height: 100%;
        overflow: auto;
        margin: 0 0 0 auto;
    }

    .gnavi {
        display: block;
    }

        .gnavi > li {
            padding: 0;
        }

            .gnavi > li > a {
                text-align: left;
                border-bottom: 1px solid #f0f0f0;
                padding: 10px 0;
            }

            .gnavi > li:not(:last-child):after {
                display: none;
            }

    .submenu {
        position: relative;
        left: 0;
        transform: none;
        width: 100%;
    }

        .submenu a {
            text-align: left;
            padding: 10px 15px;
        }

    .gnv_close {
        background: var(--mcolor);
        width: 30px;
        height: 30px;
        position: absolute;
        right: 320px;
        top: 20px;
        border-radius: 5px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
	.gnv_close img {
		position: relative;
		top: -10px;
	}
    .gnv_main .h_lang {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
	.form_search input {
		width: 100%;
	}
	.btn_search  {
		margin: 0;	
	}
	    .btn_search img {
			top: -4px;
		}
		.h_right {
			gap: 10px;
		}
    .h_right {
        position: relative;
        right: 0;
        top: 0;
        margin: 0 0 0 auto;
    }

    .h_btn {
        margin: 0;
    }

    .mainvisual {
        padding: 0;
    }

        .mainvisual:after {
            display: none;
        }

    .main_info {
        width: 100%;
    }

    .main_info_ttl {
        font-size: 30px;
        margin: 0 0 15px;
    }

    .main_cont {
        padding: 0 0 50px;
    }

    .main_slide .slick-arrow {
        left: calc(50% + 10px);
        bottom: 20px;
    }

    .main_slide .slick-prev {
        left: auto;
        right: calc(50% + 10px);
    }

    .main_slide.slick-initialized .slick-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .main_slide.slick-initialized .slick-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
		
    .sec01 {
        padding: 30px 0;
    }

    .sec01_main {
        flex-wrap: wrap;
        gap: 10px;
    }
	.sec01_main p {
		width: 45%;
	}

        .sec01_main:not(:last-child) {
            margin: 0 0 40px;
        }


.service-card {
	flex-wrap: wrap;
}
.service-card-image {
	width: 100%;
	height: 200px;
	/* border: none; */
	border-radius: 20px 20px 0 0;
	border-bottom: 0;
}
.service-card-details {
	border-radius: 20px;
	border-left: 2px solid;
	border-radius: 0 0 20px 20px;
	padding: 10px;
	/* border-top: 0; */
}
.service-card:nth-child(even) .service-card-details {
	border-radius: 20px;
	border-right: 2px solid;
	border-radius: 0 0 20px 20px;
}
.tabs {
	gap: 10px;
}
.tab-button {
	padding: 5px 10px;
	font-size: 22px;
}
.service-card h3 {
	    margin-bottom: 5px;
}

    .idx_ttl {
        font-size: 30px;
        justify-content: center;
        margin: 0 0 20px;
    }

        .idx_ttl:before {
            width: 30px;
            height: 30px;
        }
	.form-group {
	width: 47%;
	flex: auto;
	}
	input[type="text"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], textarea {
		padding: 10px;
		font-size: 16px;
	}
	
	.booking-form {
		gap: 10px;
	}
	.info-text {
		font-size: 16px;
	}
	input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
	.sec04_main {
        padding: 0;
		width: 100%;
    }
	.sec04_main {
        padding: 0;
        border: none;
        background: none;
        box-shadow: none;
    }
    .sec01_txt {
        margin: 0 0 20px;
    }

    .sec01_img {
        width: 100%;
        text-align: center;
        margin: 0;
    }

        .sec01_img img {
            width: 400px;
            border-radius: 20px !important;
        }

    .sec01_main:nth-child(2) .sec01_img {
        margin: 0 0 40px;
    }

    .sec01 .idx_btn {
        position: relative;
        width: 100%;
        bottom: 0;
    }

    .sec01:before {
        width: 120px;
        height: 135px;
    }

    .sec01:after {
        width: 120px;
        height: 110px;
    }

    .sec02 {
        padding: 30px 0 0;
    }
	
    .sec02_list.slick-initialized .slick-slide {
        width: 300px;
        margin: 0 5px;
        height: 420px;
    }

        .sec02_list.slick-initialized .slick-slide.slick-current {
            padding-top: 30px;
        }

    .sec02_item_ttl {
        font-size: 22px;
        margin-top: 20px;
    }

    .sec02_list.slick-initialized.slick-slider {
        padding: 0 0 60px;
    }

    .sec02_list .slick-list {
        overflow: visible;
    }

    .sec03 {
        padding: 0;
    }

    .sec03_main {
        display: block;
    }
	.sec03_bg { 
		padding: 30px 0;
	}
    .sec03_info {
        width: 100%;
        margin-bottom: 30px;
		font-size: 18px;
    }

    .sec03_ttl {
        font-size: 22px;
        text-align: center;
        margin: 0 0 20px;
    }

    .sec03_txt {
        margin-bottom: 20px;
    }
	
.sec03_info_social {
	    justify-content: space-between;
}
	.sec03_info_social img {
		width: 45% !important;
	}
    .idx_btn a {
        margin: 0 auto;
        font-size: 16px;
    }

    .sec03_info:after {
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        background-size: 70px auto, auto;
        background-position: right -5px bottom -5px, top left;
    }

    .sec03_img {
        margin: 0;
    }

    .sec04 {
        padding: 0 0 50px;
    }

    .sec04_list {
        transform: scale(1);
        background-image: url("/assets/images/sec04_img_sp.png");
        background-size: 160px auto;
        height: 818px;
        max-width: 290px;
    }

        .sec04_list li:nth-child(odd) {
            left: calc(50% + 69px) !important;
        }

        .sec04_list li:nth-child(even) {
            right: calc(50% + 69px) !important;
            left: auto;
            padding: 0 5px 0 0;
        }

        .sec04_list li:after {
            background-image: linear-gradient( 90deg, #032c46 25%, #ffffff 25%, #ffffff 50%, #032c46 50%, #032c46 75%, #ffffff 75%, #ffffff 100% );
            background-size: 16px 16px;
            width: 100%;
            height: 2px;
        }

        .sec04_list li:nth-child(1) {
            top: 63px;
        }

        .sec04_list li:nth-child(2) {
            top: 220px;
            bottom: auto;
        }

        .sec04_list li:nth-child(3) {
            top: 390px;
        }

        .sec04_list li:nth-child(4) {
            bottom: 200px;
        }

        .sec04_list li:nth-child(5) {
            bottom: 39px;
            top: auto;
        }

    .sec04:after {
        width: 130px;
        height: 140px;
        bottom: -60px;
    }

    .sec05 {
        padding: 40px 0;
    }

    .sec05_main {
        padding: 0;
        border-radius: 10px;
    }
	.tab-btn {
		width: calc(100% / 3 - 10px);
        text-align: center;
        padding: 10px;
        font-size: 22px;
        padding: 10px 0;
	}
	.btn_group .idx_btn {
		padding: 0;
	}
        .sec05_main:before {
            width: 60px;
            height: 60px;
            margin: -10px 10px 0 0;
        }

    .sec06 {
        padding: 50px 0;
    }
	.sec06_list {
		margin: 0;
	}
    .sec06_item_ttl {
        font-size: 20px;
		line-height: 1.4;
    }

    .sec07 {
        padding: 30px 0;
    }

    .sec07_list.slick-initialized .slick-slide {
        margin: 0 5px;
    }

    .sec07_list {
        margin: 0 -5px;
    }

        .sec07_list.slick-initialized.slick-slider {
            padding: 0 0 55px;
        }

    .sec07:after {
        height: 35%;
    }

    .sec08 {
        padding: 50px 0;
    }

    .sec08_main {
        display: block;
        margin-bottom: 50px;
    }

    .sec08_img {
        margin: 0 0 30px;
    }

    .sec08_form {
        width: 100%;
        margin: 0;
        padding: 30px 15px;
    }

        .sec08_form input {
            margin: 0 0 10px;
        }

    .sec08_img_item:last-child {
        margin: 0;
        width: calc(46% - 4px);
    }

    .sec08_img_item:nth-child(2) {
        margin: 0;
        width: calc(32.5% - 2px);
    }

    .sec08_img_item:nth-child(1) {
        margin: 0;
        width: calc(21.5% - 2px);
    }

    .sec08_img_item .img:not(:last-child) {
        margin-bottom: 4px;
    }

    .sec08_img_item:last-child .img:last-child .item {
        width: calc(35% - 2px);
    }

        .sec08_img_item:last-child .img:last-child .item:nth-child(2) {
            width: calc(65% - 2px);
        }

    .sec08_img_item:nth-child(1) .img,
    .sec08_img_item:last-child .img {
        height: calc(50% - 4px);
    }

    .sec09_item {
        width: calc((100% - 40px) / 3);
        margin: 0 20px 0 0;
    }

    .sec09_item_img {
        margin-bottom: 15px;
    }

    .sec09_item_ttl {
        font-size: 20px;
    }

    .sec09_list {
        margin-bottom: 30px;
    }

    .sec09 {
        padding: 0 0 50px;
    }
	.footer-top {
		flex-wrap: wrap;
	}
    .ft_main {
        padding: 40px 0;
    }

        .ft_main .container {
            display: block;
        }

    .ft_logo img {
        width: 180px;
    }

    .ft_ttl {
        font-size: 22px;
    }

    .ft_info {
        max-width: 320px;
        margin: 0 auto;
    }

    .ft_mod:not(:last-child) {
        margin-bottom: 30px;
    }

    .ft_mod:nth-child(2) {
        display: none;
    }

    .ft_mod:last-child {
        width: 100%;
        max-width: 317px;
        margin: 0 auto;
    }

    .copyright {
        font-size: 12px;
        padding: 15px;
    }
	
	.service-card-details p strong {
		font-size: 16px;
	}
	.service-card h2 {
		font-size: 18px;
	}
}

@media screen and (max-width: 440px) {
	.main_slide .slick-dots {
		bottom:0;
	}
	
    .sec02_main {
        flex-wrap: wrap;
    }

    .sec02_info,
    .sec02_img {
        width: 100%;
    }
3	.sec04_main {
	}
	.form-row {
		    flex-wrap: wrap;
		    gap: 10px;
	}
    .sec09_list {
        display: block;
    }

    .sec09_item {
        width: 100%;
        margin: 0 0 30px;
    }

    .idx_ttl {
        font-size: 56px;
        text-align: center;
        flex-wrap: wrap;
    }

    .sec06_item {
        width: 100%;
        margin: 0 0 40px;
    }

    .sec06_item_img {
        margin: 0 0 20px;
    }

    .sec04_list {
        background-size: 110px auto;
        height: 565px;
    }

        .sec04_list li {
            font-size: 11px;
        }

            .sec04_list li:nth-child(odd) {
                left: calc(50% + 48px) !important;
            }

            .sec04_list li:nth-child(1) {
                top: 52px;
            }

            .sec04_list li:nth-child(2) {
                top: 163px;
            }

            .sec04_list li:nth-child(even) {
                right: calc(50% + 48px) !important;
            }

            .sec04_list li:nth-child(3) {
                top: 276px;
            }

            .sec04_list li:nth-child(4) {
                bottom: 137px;
            }

            .sec04_list li:nth-child(5) {
                bottom: 28px;
            }

            .sec04_list li:before {
                font-size: 260%;
                margin-right: 2px;
            }

    .sec02_list.slick-initialized .slick-slide {
        width: 280px;
        height: 400px;
    }

    .sec02_item_ttl {
        font-size: 18px;
    }

    .main_info_ttl {
        font-size: 24px;
    }

    .main_info_txt {
        font-size: 14px;
    }

    .gnv_main {
        width: 270px;
    }

    .gnv_close {
        right: 280px;
    }
}

@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cột trên tablet/mobile */
        grid-template-rows: auto; /* để tự co giãn theo ảnh */
        gap: 10px;
    }

    .gallery-item {
        grid-column: auto !important;
        grid-row: auto !important;
    }
	.footer-heading {
		font-size: 24px;
	}

}

@media (max-width: 480px) {
    .image-grid {
        gap: 8px;
    }

    .gallery-item {
        grid-column: auto !important;
        grid-row: auto !important;
		        height: 250px;
    }
	.tabs-nav {
		flex-wrap: wrap;
		margin-bottom: 30px;
		gap: 10px;
	}
}