/* ============== */
/* Font */
/* ============== */
html, body {
    font-size: 16px;
}
h3 {
    font-size: 30px;
    line-height: 1.2;

}
.uk-grid-collapse .uk-card-body h3 {
    margin-bottom: 15px;
}
.common-navbar .uk-navbar-nav > li > a , .common-navbar .uk-navbar-dropdown-nav > li > a {
    color: #707272;
    font-size: 14px;
}
.common-footer .common-footer-content p , .common-footer .common-footer-content ul li {
    font-size: 14px;
    color: #fff;
}
/* ============== */
/* Icon */
/* ============== */
.icon-wechat:before {
    font-size: 20px;
}
.icon-bookingtokrabi {
    width: 25px;
}

/* ============== */
/* Menu bar */
/* ============== */
#uk-menu-desktop li.current-menu-ancestor>a, #uk-menu-desktop li.current-menu-item>a, #uk-menu-desktop li.current_page_item>a {
    color: var(--primary-color);

}
#uk-mobile-menu li.current-menu-item>a, #uk-mobile-menu li.current_page_item>a {
    color: var(--primary-color);
}
#uk-menu-desktop li.checkbox-navbar.current-menu-item>a{ color: #fff; }
#uk-mobile-menu li.checkbox-navbar.current-menu-item>a{ color: #fff; }
/* mobile */
.common-navbar-offcanvas .main-social-media ul li {
    display: flex;
    list-style: none;
    padding: 0px 20px 0 0;
}
.common-navbar-offcanvas .main-social-media ul {
        display: flex;
}
.common-navbar-offcanvas .uk-subnav .uk-dropdown .uk-nav > li:first-child {
    border-top: 1px solid #eeeeee;
}
.common-navbar .uk-navbar-dropdown {
    padding: 10px 20px;
}
.common-navbar-offcanvas .uk-subnav .uk-dropdown {
    padding: 10px 10px;
}
.common-navbar-offcanvas .uk-subnav .uk-dropdown .uk-nav > li , .common-navbar .uk-navbar-dropdown li {
    padding: 5px 0 !important;
    text-transform: uppercase;
    border-bottom: 1px solid #eeeeee;
}
.common-navbar-offcanvas .uk-offcanvas-bar .uk-close, .common-navbar-offcanvas .uk-offcanvas-bar .uk-subnav > * > :first-child, .common-navbar-offcanvas .main-social-media ul li a, .common-navbar-offcanvas .uk-dropdown-nav > li > a, .common-navbar-offcanvas .main-social-media label {
    font-size: 14px;
    padding: 5px 0;
}



/* ============== */
/* Main slide */
/* ============== */
.common-slideshow .common-slideshow-intro .slideshow-title {
    font-size: 56px;
}
.common-slideshow .common-slideshow-intro .slideshow-sub-title {
    font-size: 26px;
}

/* ============== */
/* Button */
/* ============== */
/* primary */
.common-wrapper .common-content .common-row .uk-button-primary , .common-wrapper .common-content .common-row .uk-button-default:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 1px solid var(--primary-color);
}
/* default */
.common-wrapper .common-content .common-row .uk-button-default , .common-wrapper .common-content .common-row .uk-button-primary:hover {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

#WCL_RESERVATION_WIDGET .wcl_button button {
    font-size: 14px;
}

/* ============== */
/* Booking Engine */
/* ============== */
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_container {
    padding: 0px 0 0px 20px;
}
#WCL_RESERVATION_WIDGET .wcl_button button {
    border-radius: 0px 5px 0 0;
    background: #3d97df !important;
}
/* ============== */
/* Home */
/* ============== */
/* accom */
.common-slider-primary .position-nav-center {
    display: none;
}

/* facebook */
.section-facebook .heading-intro h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.icon-fb {
    width: 32px;
}


/* offer */
.btn {
    margin-top: 0px;
}


/* ============== */
/* Footer */
/* ============== */
/* logo */
.common-footer .uk-navbar-center .uk-slider-items {
    display: flex;
    align-items: center;
}
.common-footer .uk-navbar-center .uk-position-small {
    margin: 15px;
    --uk-position-margin-offset: 15px;
    background: #ddd;
    /* border-radius: 100%; */
}
.common-footer .uk-navbar-center .uk-child-width-1-3\@m > * {
    width: calc(100%* 1 / 3.8);
}
.common-footer .uk-navbar-center .uk-grid > * {
    padding-left: 20px;
}




.common-footer .common-footer-content .uk-button-secondary {
    background-color: #42ca1c;
}
.common-footer .common-footer-content .uk-button-secondary:hover {
    background-color: #42ca1c;
    opacity: 0.7;
}
.common-footer {
    background-color: var(--primary-color);
}
.common-copyright {
    background-color: var(--white-color);
}
.common-copyright .common-copyright-content , .common-copyright .common-copyright-content a {
    color: var(--text-color);
}
.common-footer .common-footer-content a:hover , .common-footer .common-footer-content .get-direct a:hover {
    opacity: 0.7;
    color: var(--white-color);
}
.common-footer .common-footer-content form .uk-flex p {
    justify-content: center;
}
.common-footer .common-footer-content form .uk-flex p .wpcf7-form-control-wrap {
    width: auto;
}


/* PDPA */
.content-pdpa { line-height: 1.5; }
.content-pdpa a { text-decoration: underline; color:var(--secondary-color); }
.content-pdpa p { margin: 0 auto 0px auto; text-align: left;     color: var(--text-color); }
.content-pdpa p strong { color: var(--e-global-color-primary); }
.content-pdpa h3 {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    color: var(--e-global-color-primary);
    margin: 15px 0 15px 0;
    text-align: left;
    overflow: hidden;
    font-size: 24px;
    color: var(--text-color);
    font-weight: 300;
}
.content-pdpa ul { list-style-position: inside !important; list-style: disc; margin: 0 auto;     padding-left: 0px;}
.content-pdpa ul p { font-size: 16px; }
.content-pdpa ul strong { color: var(--e-global-color-primary); }
.content-pdpa ul li { width: 100%; font-weight: 300; line-height: 1.7;  margin-left: 20px; text-align: left;     color: var(--text-color);}
.content-pdpa ul li:last-child { margin-bottom: 0px; }
.content-pdpa b {font-weight: 400;}
.content-pdpa span {}
.content-pdpa .title-text-pdpa { margin-bottom: 50px; }
.content-pdpa .title-text-pdpa h1 {  font-weight: 500; text-align: center; margin: 0 auto; }
.content-pdpa .title-text-pdpa p { text-align: center; }
.content-pdpa .content-text-pdpa { max-width: 1440px; margin: 0 auto; }

.privacy-policy .common-wrapper .common-content {
    word-break: break-word;
    overflow: hidden;
}
.privacy-policy .common-wrapper.uk-background-muted {
    background-color: #ffffff;
}

.ft-privacy-policy {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

/*Slider Room Home*/
.common-slider-primary .position-nav-center{ margin: 0 auto; top: calc(60vh - 50px); }

/*Content*/
.common-wrapper .common-content .common-row .details .heading-intro .heading-sub{ margin: 0!important; }

.common-wrapper .common-content .common-row .wp-block-button__link{ background-color: inherit; padding: 0; }
.heading-intro .wp-block-buttons{ margin-top: 20px;}
.heading-intro .wp-block-button__link:hover{ color: #fff; }

/*Contact*/
.wpcf7-form .uk-grid-small p{ margin: 0 !important;}
.wpcf7-form .uk-grid-small .uk-form-icon.uk-icon{ z-index: 1; top: 10px; bottom: auto; }
.uk-form-icon:not(.uk-form-icon-flip) ~ span.wpcf7-form-control-wrap .uk-input{ padding-left: 40px;}
.wpcf7-form .uk-grid-small.uk-grid > .uk-grid-margin {
    margin-top: 15px;
}
.wpcf7-form .wpcf7-not-valid-tip{
    font-size: 0.8em;
    margin-top: 10px;
}

/*bar checkbox*/
.uk-offcanvas-bar-checkbox h3{ font-size: 1.6em; color: #333; margin-bottom: 20px!important; text-align: center;}
.uk-offcanvas-bar-checkbox .uk-close{ color: #000;}
.uk-offcanvas-bar-checkbox .uk-close:hover{ color: #000;}

/*Blog*/
.uk-breadcrumb a{ color: #999; }
.uk-breadcrumb a:hover{ color: #A68563; }
.common-breadcrumb .nav-breadcrumb .uk-breadcrumb .breadcrumb_last:hover *{ color: #999 !important;}
.uk-breadcrumb.common-tag a{ color: #999; }
.breadcrumb-end-content a{ color: #999; }
.breadcrumb-end-content a:hover{ color: var(--secondary-color); }
.sidebar-entry .wp-block-latest-posts li{ margin-bottom: 10px; display: inline-block;}
.widget_block .wp-block-latest-posts__featured-image{ max-width: 60px;}
.widget_block .wp-block-latest-posts__post-title{ font-family: var(--font-primary); color: var(--primary-color);}
.widget_block .wp-block-latest-posts__post-title:hover{ color: var(--secondary-color);}
.widget_block .wp-block-categories-list{ padding: 0;}
.widget_block .wp-block-categories-list li{ list-style-type: none;}
.widget_block .wp-block-categories-list li a{ color: #999;}
.widget_block .wp-block-categories-list li a:hover{ color: var(--secondary-color);}
.widget_block .wp-block-tag-cloud a,
.widget_block .wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date{ color: #999;}
.widget_block .wp-block-tag-cloud a:hover{ color: var(--secondary-color);}
.widget_block .wp-block-search__button-inside .wp-block-search__inside-wrapper{border: 1px solid var(--border-color);}
.widget_block .wp-block-search__button svg{ color: #999;}
.widget_block .wp-block-search__button:hover svg{ color: var(--secondary-color);}
.widget_block .wp-element-button{border:0; background: transparent;}
/*Footer*/
.common-footer .common-footer-content form .uk-flex p{ display: flex; width: 100%; margin: 0!important; }
/* .common-footer .common-footer-content form .uk-flex p .wpcf7-form-control-wrap{ width: 70%;} */
.common-footer .common-footer-content form input{ width: 100%;}
.common-footer .common-footer-content form button{ width: 30%; height: 40px;}
.common-footer .common-footer-content form .uk-flex p .wpcf7-form-control-wrap .wpcf7-not-valid-tip{ color: #FF0000;}
.common-footer .common-footer-content form.invalid .wpcf7-response-output,
.common-footer .common-footer-content form.sent .wpcf7-response-output{ border: none; background-color: #A78563; font-size: 0.8em; color: #FFF; }
.award-header { margin: 20px 0; color: #fff; }
.award-container { max-width: 200px; margin: 0 auto; }

/* ================= */
/* FAQ */
/* ================= */
.common-faq-content {
    max-width: 1024px;
    margin: 0 auto;
}
.common-faq-section + .common-faq-section {
    margin-top: 60px;
}
.common-faq-heading {
    text-align: center;
    margin-bottom: 30px;
}
.common-faq-heading .common-faq-subtitle {
    max-width: 820px;
    margin: 15px auto 0;
    color: #333333;
    line-height: 1.8;
}
.common-faq-accordion {
    margin: 0;
}
.common-faq-accordion > li {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    padding: 0;
    margin-top: 12px !important;
}
.common-faq-accordion > li:first-child {
    margin-top: 0 !important;
}
.common-faq-accordion .uk-accordion-title {
    display: block;
    padding: 20px 55px 20px 25px;
    color: var(--primary-color);
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
}
.common-faq-accordion .uk-accordion-title:hover,
.common-faq-accordion .uk-open > .uk-accordion-title {
    color: var(--secondary-color);
}
.common-faq-accordion .uk-accordion-title::before {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}
.common-faq-accordion .uk-accordion-content {
    padding: 0 25px 25px;
    margin-top: 0;
}
.common-faq-accordion .uk-accordion-content p {
    color: #333333;
    line-height: 1.8;
    margin-top: 0;
}
.common-faq-accordion .uk-accordion-content a {
    color: var(--secondary-color);
}
.common-faq-accordion .uk-accordion-content a:hover {
    color: var(--primary-color);
}



/* ================= */
/* Guest Reviews */
/* ================= */
.guest-reviews-list {
    max-width: 990px;
    margin: 0 auto;
}
.guest-review {
    display: flex;
    gap: 80px;
    padding: 46px 0;
    border-bottom: 1px solid var(--border-color);
}
.guest-review:first-child {
    padding-top: 0;
}
.guest-review-meta {
    flex: 0 0 250px;
}
.guest-review-meta h2 {
    margin: 0 0 14px;
    color: var(--primary-color);
    font-family: var(--font-primary);
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: .5px;
}
.guest-review-meta p {
    margin: 0 0 8px;
    color: #666;
    font-size: .9rem;
    line-height: 1.6;
}
.guest-review-score {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 12px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: .85rem;
    font-weight: 600;
}
.guest-review-content {
    flex: 1;
}
.guest-review-content h3 {
    margin: 0 0 15px;
    color: var(--primary-color);
    font-size: 1.35rem;
    font-weight: 400;
}
.guest-review-content p {
    margin: 0;
    color: #333;
    line-height: 1.85;
}
.guest-review-content p::before {
    content: '“';
    color: var(--secondary-color);
    font-family: Georgia, serif;
    font-size: 2rem;
    line-height: 0;
    vertical-align: -.35rem;
}
.guest-review-content p::after {
    content: '”';
    color: var(--secondary-color);
    font-family: Georgia, serif;
    font-size: 2rem;
    line-height: 0;
    vertical-align: -.35rem;
}




/* Fit the full desktop menu, including Book Now, on wide screens. */
@media (min-width: 1201px) {
    .common-navbar .common-navbar-main .common-logo {
        width: 15%;
    }
    .common-navbar .common-navbar-main .common-navbar-container {
        width: 85%;
    }
    .common-navbar .uk-navbar-nav,
    .common-navbar .uk-navbar-right {
        gap: 8px;
    }
    .common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a {
        padding: 20px 15px;
    }
}

/* Keep the Book Now button accessible when the desktop navigation no longer fits. */
@media (min-width: 641px) and (max-width: 1200px) {
    .common-navbar .common-navbar-main {
        padding-left: 20px;
    }
    .common-navbar .common-navbar-main .common-logo,
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-hamburger {
        width: 50%;
    }
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-fixed,
    .common-navbar-fixed.active .common-navbar-button {
        display: none;
    }
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-hamburger {
        display: block;
    }
}

@media (max-width: 1024px){
    .common-slider-primary .position-nav-center{ top: calc(25vh - 40px); }
    #checkbox-flip{ display: none!important; }

    /* logo */
    .common-footer .uk-navbar-center:not(:only-child) {
        width: 25%;
    }
    .common-footer .uk-navbar-center .uk-child-width-1-3\@m > * {
        width: calc(100%* 1 / 3);
    }

    .common-faq-content {
        max-width: 100%;
        padding: 0 30px;
    }
    .common-faq-section + .common-faq-section {
        margin-top: 50px;
    }
}

@media (max-width: 768px) {
    .guest-review {
        gap: 40px;
    }
    .guest-review-meta {
        flex-basis: 210px;
    }

    /* logo */
    .common-footer .uk-navbar-center:not(:only-child) {
        width: 65%;
        top: 75%;
    }
    .common-footer-content .uk-navbar {
        height: 280px;
    }
    .ft-privacy-policy {
        justify-content: center;
    }

    .common-faq-content {
        padding: 0 20px;
    }
    .common-faq-section + .common-faq-section {
        margin-top: 40px;
    }
    .common-faq-heading {
        margin-bottom: 24px;
    }
    .common-faq-heading .common-faq-subtitle {
        max-width: 100%;
        margin-top: 12px;
    }
    .common-faq-accordion .uk-accordion-title {
        font-size: 1.1rem;
        padding: 18px 50px 18px 20px;
    }
    .common-faq-accordion .uk-accordion-title::before {
        right: 18px;
    }
    .common-faq-accordion .uk-accordion-content {
        padding: 0 20px 20px;
    }
}

@media (max-width: 640px) {
    /* Keep the compact phone header on one line. */
    .common-navbar .common-navbar-main .common-logo {
        width: 30%;
    }
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-hamburger {
        display: block;
        width: 70%;
    }
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-hamburger .uk-navbar-right {
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    .common-navbar .common-navbar-main .hamburger {
        padding-left: 15px;
        padding-right: 15px;
    }
    .common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a {
        padding: 10px 6px;
        font-size: 0.65rem;
        letter-spacing: 1px;
    }

    .guest-review {
        display: block;
        padding: 34px 0;
    }
    .guest-review-meta {
        margin-bottom: 22px;
    }
    .guest-review-meta h2 {
        font-size: 1.5rem;
    }
    .guest-review-content h3 {
        font-size: 1.2rem;
    }

    .common-navbar .common-navbar-main .common-logo img {
        padding: 10px 0 0;
        width: 100px;
    }

    .common-faq-content {
        padding: 0 16px;
    }
    .common-faq-section + .common-faq-section {
        margin-top: 32px;
    }
    .common-faq-heading {
        text-align: left;
        margin-bottom: 20px;
    }
    .common-faq-heading .common-faq-subtitle {
        margin-top: 10px;
    }
    .common-faq-accordion .uk-accordion-title {
        font-size: 1rem;
        padding: 16px 44px 16px 16px;
        letter-spacing: 0.3px;
    }
    .common-faq-accordion .uk-accordion-title::before {
        right: 14px;
    }
    .common-faq-accordion .uk-accordion-content {
        padding: 0 16px 18px;
    }
    .common-faq-accordion .uk-accordion-content p {
        font-size: 0.95rem;
    }
    .common-faq-accordion > li {
        margin-top: 8px !important;
    }
}

@media (max-width: 480px) {

.section-facebook .heading-intro h2 {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}
    .common-faq-content {
        padding: 0 12px;
    }
    .common-faq-section + .common-faq-section {
        margin-top: 24px;
    }
    .common-faq-accordion .uk-accordion-title {
        font-size: 0.9rem;
        padding: 14px 40px 14px 14px;
        line-height: 1.4;
    }
    .common-faq-accordion .uk-accordion-title::before {
        right: 12px;
    }
    .common-faq-accordion .uk-accordion-content {
        padding: 0 14px 16px;
    }
    .common-faq-accordion .uk-accordion-content p {
        font-size: 0.9rem;
        line-height: 1.7;
    }

}

.section-facebook {
    background-color: #f7f9fc;
}


/* ===== Home FAQ Section ===== */
.home-faq-section {
    padding: 60px 0;
}

.home-faq-section .heading-intro {
    margin-bottom: 40px;
    text-align: center;
}

.home-faq-section .heading-sub {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 8px;
}

.home-faq-section h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 36px;
    color: #6699cc;
    font-weight: 400;
    margin: 0;
}

/* ===== Home FAQ Section ===== */
.home-faq-section {
    padding: 60px 0;
}

.home-faq-section .heading-intro {
    margin-bottom: 40px;
    text-align: center;
}

.home-faq-section .heading-sub {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 8px;
}

.home-faq-section h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 36px;
    color: var(--primary-color);
    font-weight: 400;
    margin: 0;
}

.home-faq-list {
    width: 100%;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.home-faq-list.uk-accordion > li {
    border: 1px solid #e0e0e0;
    margin-top: 8px !important;
    padding: 0;
    background: #fff;
}

.home-faq-list .uk-accordion-title {
    display: block;
    padding: 20px 55px 20px 24px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
    text-decoration: none;
    position: relative;
    transition: background 0.2s ease;
}

.home-faq-list .uk-accordion-title:hover {
    background: #eef2f8;
    color: var(--primary-color);
    text-decoration: none;
}

.home-faq-list .uk-accordion-content {
    padding: 0 24px 20px;
    margin: 0;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.8;
}

.home-faq-list .uk-accordion-title::before {
    color: #333;
}

/* ซ่อนคำถามที่เกิน limit */
.home-faq-list > li.home-faq-hidden,
.home-faq-list.uk-accordion > li.home-faq-hidden,
ul.home-faq-list > li.home-faq-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ===== ปุ่ม Read more / View all — ใหญ่ขึ้น ===== */
.home-faq-readmore-wrap {
    margin-top: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.home-faq-readmore-btn {
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 20px 60px;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.home-faq-readmore-btn:hover {
    background: var(--primary-color);
    color: #fff;
    opacity: 1;
}

.home-faq-link {
    font-size: 0.85rem;
    color: var(--primary-color);
    text-decoration: underline;
    opacity: 0.7;
}

.home-faq-link:hover {
    opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .home-faq-section {
        padding: 40px 0;
    }

    .home-faq-section h2 {
        font-size: 26px;
    }

    .home-faq-list .uk-accordion-title {
        padding: 16px 44px 16px 18px;
        font-size: 0.8rem;
        letter-spacing: 0.04em;
    }

    .home-faq-list .uk-accordion-content {
        padding: 0 18px 18px;
        font-size: 0.85rem;
    }

    .home-faq-readmore-wrap {
        flex-direction: column;
        gap: 12px;
    }

    .home-faq-readmore-btn {
        width: 100%;
        text-align: center;
        padding: 18px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .home-faq-section h2 {
        font-size: 22px;
    }

    .home-faq-list .uk-accordion-title {
        font-size: 0.75rem;
        padding: 14px 40px 14px 16px;
    }
}