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

/*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; }



/* ====================== */
/* Root */
/* ====================== */
:root {
    --font-primary: 'Utile', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

.custom-item01 .common-content .common-row {
    padding: 80px 0;
}
em {
    color: #fff;
}
/* ====================== */
/* Menu */
/* ====================== */
.common-navbar {
    z-index: 50;
}
.common-navbar .common-navbar-main .common-logo img {
    /* padding: 12px; */
    width: 180px;
}
.common-navbar .uk-navbar-nav > li > a, .common-navbar .uk-navbar-dropdown-nav > li > a, .common-navbar .uk-navbar-item, .common-navbar .uk-navbar-toggle ,
.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-family: var(--font-primary);
    font-size: 14px;

}

.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-subnav .uk-dropdown .uk-nav > li:first-child {
    border-top: 1px solid #eeeeee;
}
.common-navbar .uk-navbar-dropdown {
    padding: 10px 20px;
}

#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(--secondary-color);

}
#uk-mobile-menu li.current-menu-item>a, #uk-mobile-menu li.current_page_item>a {
    color: var(--secondary-color);
}

/* ====================== */
/* Font */
/* ====================== */

html, body {
    font-family: var(--font-secondary) !important;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0.5px;
}
h1 {
    font-size: 48px !important;
    font-weight: 400;
    text-transform: none !important;
    line-height: 1em;
    letter-spacing: 0.5px;
}
h2 {
    font-size: 36px !important;
    font-weight: 400;
    text-transform: none !important;
    line-height: 1em;
    letter-spacing: 0.5px;
}
h3 {
    font-size: 30px !important;
}

h4 {
    font-size: 28px !important;
    font-weight: 400;
    text-transform: none !important;
    line-height: 1em;
    letter-spacing: 0.5px;
}
h5 {
    font-size: 18px !important;
    font-weight: 400;
    text-transform: none !important;
    line-height: 1em;
    letter-spacing: 0.5px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary) !important;
    text-transform: none !important;
    font-weight: 400;

}
.common-wrapper .common-content .common-row .details .heading-intro .heading-sub ,
.common-slider-primary .details .heading-sub , 
.common-slider-content .details .heading-sub ,
.common-content .uk-card-body .heading-sub  {
    font-family: var(--font-primary) !important;
    /* color: #d0bc87 !important; */
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 1.8px !important;
}
.uk-subnav-pill > * > :first-child {
    font-family: var(--font-primary) !important;
    color: #333;
    font-size: 18px !important; 
}



/* ====================== */
/* Button */
/* ====================== */

.button-filled {
  background-color: var(--secondary-color); /* สีตามรูป */
  color: #FFFFFF;
  padding: 11px 40px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  font-family: var(--font-primary);
  border: none;
  cursor: pointer;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.button-filled:hover {
  background-color: var(--primary-color); 
}

.uk-background-muted .button-filled:hover {
    background-color:#001c32;
    color: #d0bd87;
}
.uk-background-muted .button-outlined:hover::before {
    background-color:#f2e9cf;
}
.uk-background-muted .button-outlined span:hover {
    color: #f2e9cf;
}

/* พื้นหลังม่วง */

.uk-background-muted .room-slider-home .button-filled:hover {
    color:#001c32;
    background-color: #f2e9cf;
}

/* Container for the button to position it correctly */
.button-outlined {
  display: inline-block;
  position: relative;
  background-color: transparent;
  text-align: center;
  font-family: var(--font-primary);
  text-transform: uppercase;
  color: var(--secondary-color);
}

/* The inner part of the button (the text and the transparent background) */
.button-outlined span {
  position: relative;
  z-index: 10; /* Ensures the text is on top */
  line-height: 60px; /* Center the text vertically */
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 20px;
  color: var(--secondary-color);
}

/* The outer hexagon border using ::before */
.button-outlined::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-color); /* The color of the border */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 1; /* Puts the border below the text */
}

/* The inner hexagon that creates the "hollow" effect using ::after */
.button-outlined::after {
  content: '';
  position: absolute;
  top: 2px; /* Adjust this value to control the border thickness */
  left: 2px; /* Adjust this value to control the border thickness */
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color: var(--primary-color);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 2; /* Puts this element on top of the border */
}

/* พื้นหลังทอง */
/* Container for the button to position it correctly */
.button-outlined2 {
  display: inline-block;
  position: relative;
  background-color: transparent;
  text-align: center;
  font-family: var(--font-primary);
  text-transform: uppercase;
  color: var(--secondary-color);
}

/* The inner part of the button (the text and the transparent background) */
.button-outlined2 span {
  position: relative;
  z-index: 10; /* Ensures the text is on top */
  line-height: 60px; /* Center the text vertically */
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 20px;
  color: var(--secondary-color);
}

/* The outer hexagon border using ::before */
.button-outlined2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-color); /* The color of the border */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 1; /* Puts the border below the text */
}
.button-outlined2:hover::before {
  background-color: var(--primary-color);
}
.button-outlined2 span:hover {
    color: var(--primary-color);
}
/* The inner hexagon that creates the "hollow" effect using ::after */
.button-outlined2::after {
  content: '';
  position: absolute;
  top: 2px; /* Adjust this value to control the border thickness */
  left: 2px; /* Adjust this value to control the border thickness */
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color:#fdfcfa;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 2; /* Puts this element on top of the border */
}

.button-filled:hover {
    color: var(--secondary-color); 
}

/* .uk-button:hover {
 opacity: 0.8;   
} */

.btn-custom-size {
    display: flex;
    align-items: center;
}



/* ====================== */
/* Popup */
/* ====================== */
.common-popup .common-popup-content {
    display: flex;
    flex-direction: column;
}
.countdown-popup {
    display: flex;
    flex-direction: column;
    align-items: stretch;  
    background: #f6f2e7;
    gap: 15px;
}
.countdown-popup .uk-countdown {
    justify-content: center;
}
.countdown-popup .uk-countdown-number {
    font-size: 4rem;
    border: 2px solid;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.countdown-popup .uk-countdown-label {
    font-weight: 600;
}
.countdown-popup h1 {
  font-weight: 600;
}
.countdown-popup .p {
font-weight: 600;
}
.countdown-popup .btn-popup a {
    color: #ffffff;
    font-weight: 600;
}
.countdown-popup .btn-popup  {
    background: #d0bd87;
    border-radius: 5px;
}
.countdown-popup .btn-popup:hover  {
    background: #001c32;
    border-radius: 5px;
}
.countdown-popup .uk-first-column {
    padding-left: 0;
}

/* ====================== */
/* Booking */
/* ====================== */
#WCL_RESERVATION_WIDGET .wcl_button button {
        border-radius: 0px 5px 0 0;
}
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_container {
    padding: 0px;
    border-radius: 5px 5px 0 0;
}
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_date {
    top: 44px;
}


/* ====================== */
/* Home */
/* ====================== */

.common-slideshow .common-slideshow-intro .slideshow-sub-title {
    color: var(--white-color);
    text-transform: none;
    font-size: 72px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px;
    font-family: var(--font-primary) !important;
    padding-bottom: 10px;
}
.common-slideshow .common-slideshow-intro .slideshow-title {
    font-family: var(--font-primary);
    text-transform: none;
    letter-spacing: 0.5px;
    color: #FFF;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.home .common-wrapper .common-content .common-row .details {
    max-width: 960px;
}
.home .bg-title01::after {
    content: " ";
    width: 1280px;
    height: 388px;
    right: -200px;
    position: absolute;
    background: url(../images/item-01.png);
    background-repeat: no-repeat;
    background-position: right;
    top: -50px;
    display: block;
    z-index: 0;
}
.bg-title01::after {
    content: " ";
    width: 1280px;
    height: 422px;
    right: -160px;
    position: absolute;
    background: url(../images/item-01.png);
    background-repeat: no-repeat;
    background-position: right;
    top: -45px;
    display: block;
    z-index: 0;
}
.custom-item01 {
    overflow: hidden;
    height: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home .custom-item01 h1 {
    color: #333;
}
.slider-home .common-slider-primary ul li p {
    gap: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
}


/* room */
.room-slider-home h3 {
    color: #fff;
}

/* Restaurants */

.common-slider-content .details {
    margin-top: 0px !important;
    padding: 50px 20px;
}
.common-slider-content .flex-card {
    background: #ffffffc2;  
}
.common-slider-content .flex-card  .details  p {
    gap: 20px;
    display: flex;
    justify-content: center;
}
.bg-white {
    background-color: #fff;    
    position: relative;
    overflow: hidden;
}

.bg-item02::before {
    content: " ";
    width: 100%;
    height: 1100px;
    right: 0px;
    position: absolute;
    background: url(../images/item-07.png);
    background-repeat: repeat;
    background-position: bottom;
    display: block;
    z-index: 0;
}
.home .common-wrapper .common-content .common-row .details .split-sentence p {
    margin-bottom: 0px;
}

/* ig */
.bg-item03::before {
    content: " ";
    width: 100%;
    height: 755px;
    left: 40px;
    position: absolute;
    background: url(../images/item-05.png);
    background-repeat: no-repeat;
    background-position: left;
    top: 0px;
    display: block;
    z-index: 0;
}
.bg-item03 {
    position: relative;
    overflow: hidden;
}



/* ====================== */
/* rooms */
/* ====================== */
.slider-accom h1 ,
.common-amenities-list h3 {
    color: #fff;
}
.common-card-content .common-card-default .uk-card-body {
    background: #ffffffc2;
}
.common-card-content .common-card-default {
    border: none;
}

.bg-rooms-item01::before {
    content: " ";
    width: 100%;
    height: 3600px;
    right: 0px;
    position: absolute;
    background: url(../images/item-03.png);
    background-repeat: repeat;
    background-position: bottom;
    display: block;
    z-index: 0;
}
.bg-rooms-item01 {
   position: relative;
    overflow: hidden; 
}
.common-card-default .uk-card-body p {
    gap: 20px;
    display: flex;
}



/* sub rooms */
.common-accom h1 , 
.common-accom h5 ,
.common-accom .common-list-flex i {
    color: #fff;
}
.single-accommodation-sub .common-card-default .uk-card-body p {
    gap: 20px;
    display: flex;
    flex-direction: column;
}


.heading-intro h1 {
    color: #fff;

}





/* ====================== */
/* Specials */
/* ====================== */
.section-specials .uk-child-width-1-3\@m > * {
    width: calc(100%* 1 / 2);
}
.section-specials .common-card-content .common-card-default .uk-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-specials .common-content .uk-card-body h3 {
    text-align: center;
}
.section-specials .common-card-content .common-card-default .uk-card-body {
    background: #fff;
}

.uk-modal-close {
    margin-top: 20px;
}


/* sub page */
.single-specials-sub .heading-intro h1 {
    color: #000;
}


/* ====================== */
/* Restaurants */
/* ====================== */

.section-restaurants .uk-child-width-1-3\@m > * {
    width: calc(100%* 1 / 2);
} 
.section-restaurants .common-card-content .common-card-default .uk-card-body {
    flex-direction: column;
    align-items: center;
}
.section-restaurants .common-content .common-row .none-flex-grow p , 
.section-restaurants .common-content .uk-card-body h3 {
    text-align: center;
}

.custom-azizi-sec3 {
    background: #fef5ea;
    overflow: hidden;
}
/* azizi */
.custom-azizi-sec1  {
    background: #fef5ea;
    overflow: hidden;
}
 .custom-azizi-sec7 {
    background: #fef5ea;
}
.custom-azizi-sec1 .common-content .common-row .details {
    color: #000;
}
.custom-azizi-sec1 .button-filled {
    background-color: #d56327;
}

.custom-azizi-sec1 .button-filled:hover {
    color: #fff;
    background-color:#097875;
}
.custom-azizi-sec1  .heading-intro h1 {
    margin-bottom: 15px;
    font-family: 'Mansalva' !important;
    font-size: 100px !important;
    line-height: 1;
    color: #d76427;
    text-align: start;
}
.custom-azizi-sec1 .sub-title {
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 1.8px !important;    
    color: #000;
}
.custom-azizi-sec1 .link {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}
.custom-azizi-sec1 .common-content {
    max-width: var(--breakpoint-l);
}
.custom-azizi-sec1 .common-row {
    z-index: 5;
    position: relative;
}
.custom-azizi-sec1 .heading-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.custom-azizi-sec1 .button-outlined::after {
    background-color: #fef5ea;
}
.custom-azizi-sec1  .button-outlined::before {
    background-color: #d56327;

}
.custom-azizi-sec1 .button-outlined:hover::before {
    background-color:#097875;

}
.custom-azizi-sec1 .button-outlined span:hover {
    color: #067977;
}
.custom-azizi-sec1 .button-outlined span {
    color:  #d56327;
}

.custom-azizi-sec1 .common-content .common-row .details {
    max-width: 100%;
    text-align: start;
    margin-top: -25px;
}
.bg-01::before {
    content: " ";
    width: 300px;
    height: 280px;
    left: -160px;
    position: absolute;
    background: url(../images/bg-07.png);
    background-repeat: no-repeat;
    background-position: left;
    top: -10px;
    display: block;
    z-index: 0;
    
}
.bg-02::after {
    content: " ";
    width: 300px;
    height: 280px;
    right: -115px;
    position: absolute;
    background: url(../images/bg-08.png);
    background-repeat: no-repeat;
    background-position: right;
    top: 285px;
    display: block;
    z-index: 0;
    
}
.page-id-972 {
    background-color:#fef5ea;
}
.custom-azizi-sec1 .uk-grid-collapse.uk-child-width-1-2\@s.uk-grid {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.custom-azizi-sec1 .heading-img {
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}
.custom-azizi-sec1 .heading-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-azizi-sec1 .uk-child-width-1-2\@s > * {
    width: 45%;
}
.custom-card-menu {
    background-color: #d66427;
    color: #fff;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 30px;
}
.pd-none {
    padding: 0;
}
.restaurants-title {
    text-align: left;
    font-weight: 600;
    font-size: 18px;
}
.restaurants-sub-title {
    text-align: left;
    text-transform: uppercase;
    font-weight: 500;
}
.button-menu {
    background-color: #fff !important;
    color: #000;
    margin-top: 20px;
}
.button-menu:hover , .btn-sec3 a:hover , .btn-sec5 a:hover {
    color: #fff !important;
    background-color: #067976 !important;
}

.custom-card .uk-grid {
    display: flex;        
    flex-wrap: wrap;      
    align-items: stretch; 
}

.custom-card .uk-card {
    height: 100%; 
}
/*
   ใช้คลาสใหม่ (menu-row-match) เพื่อให้โค้ดนี้มีน้ำหนักมากกว่า
   และทำงานเหมือน uk-grid-match โดยไม่ใช้ JS component
*/
.menu-row-match {
    display: flex !important;           /* 1. บังคับให้เป็น Flexbox */
    flex-wrap: wrap;                    /* 2. อนุญาตให้ขึ้นบรรทัดใหม่เมื่อจอเล็ก */
    align-items: stretch !important;    /* 3. **ทำให้คอลัมน์ยืดความสูงเท่ากัน** */
}

/* 4. ทำให้กล่องสีส้มยืดเต็มความสูงของคอลัมน์ */
.menu-row-match > div > .custom-card-menu {
    height: 100% !important;
}

/* 5. ทำให้กล่องรูปภาพยืดเต็มความสูงของคอลัมน์ */
/* ให้แน่ใจว่าองค์ประกอบที่บรรจุรูปภาพก็ยืดเต็มความสูงเช่นกัน */
.menu-row-match > div > img,
.menu-row-match > div > .image-container { /* ใช้ class ที่ครอบรูปภาพจริง */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* เพื่อให้รูปภาพเต็มพื้นที่โดยไม่ผิดสัดส่วน */
}

.custom-azizi-sec3 .common-content {
    max-width: var(--breakpoint-l);
}

.custom-azizi-sec3  .common-content .common-row .details {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.custom-azizi-sec3 p , .custom-azizi-sec3 h1 {
    color: #000;
}
.custom-azizi-sec3 h1 {
    margin-bottom: 0px;
    font-family: 'Mansalva' !important;
    font-size: 100px !important;
    line-height: 1;
}
.btn-sec3 {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.btn-sec3 a {
    background-color: #d66427;
}


.custom-azizi-sec3 .sub-title {
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase;
}
.custom-azizi-sec3  .common-content .common-row .details {
    text-align: center;
}

.custom-azizi-sec4 , .custom-azizi-sec6  , .custom-azizi-sec8 {
    overflow: hidden;
    
}
.custom-azizi-sec4 {
    background-color: #fef5ea;    
    color: #000;
}
.custom-azizi-sec6 {
    background-color: #d76427;    

}

 .custom-azizi-sec8 {
    background-color: #067976;
    overflow: hidden;
}
.custom-azizi-sec4 .button-filled , .custom-azizi-sec6 .button-filled {
    background-color: #d56327;
}
.custom-azizi-sec4 .button-filled:hover , .custom-azizi-sec6 .button-filled:hover {
    color: #ffffff;
    background-color: #097876;

}
.custom-azizi-sec4 .button-filled , .custom-azizi-sec6 .button-filled {
    padding: 15px 40px;
    font-size: 16px;
}

.custom-azizi-sec4 .details h1 , .custom-azizi-sec4 .details  , .custom-azizi-sec4 .details h4 ,
.custom-azizi-sec6 .details h1 , .custom-azizi-sec6 .details  , .custom-azizi-sec6 .details h4 ,
.custom-azizi-sec8 .details h1 , .custom-azizi-sec8 .details  , .custom-azizi-sec8 .details h4 , .custom-azizi-sec8 .details a {
    color: #fff;
}
.custom-azizi-sec8 .details a:hover {
    color: #d76427;    
}
.custom-azizi-sec5 {
    background-color: #d66427;    
}
.custom-azizi-sec4 .details h4 , .custom-azizi-sec6 .details h4 {
    padding-bottom: 30px;
}


.custom-azizi-sec5 .uk-dotnav > * > * {
    border: 1px solid #ffffff;
}
.custom-azizi-sec5 .uk-dotnav > .uk-active > *, .uk-dotnav > * > :hover {
    background-color: #ffffff;
}
.custom-azizi-sec5 .uk-slider-container-offset {
    padding: 0;
}
.custom-azizi-sec7 .heading-intro h2 {
    color: #000;
}
.custom-azizi-sec7 .common-content .common-row .details .heading-intro .heading-sub {
    color: #fff !important;
}
.custom-azizi-sec4 .common-row .details  {
    z-index: 5;
position: relative;
} 
.custom-azizi-sec5 .title h1 {
    margin-bottom: 50px;
    color: #fff;
    font-family: 'Mansalva' !important;
    font-size: 100px !important;
    line-height: 1;
}
.custom-azizi-sec5 .uk-slider-container-offset {
    padding: 0 30px;
}
.custom-azizi-sec5 .common-content {
    max-width: var(--breakpoint-l);
}
.btn-sec5 {
    display: flex;
    justify-content: center;
    padding: 40px 0px 0 0;
}
.btn-sec5 a {
    background-color: #d66427;
}
.custom-azizi-sec7 .common-content {
    max-width: var(--breakpoint-l);
}
/* .bg-15::before {
    content: " ";
    width: 400px;
    height: 400px;
    position: absolute;
    background: url(../images/bg-16.png);
    background-repeat: no-repeat;
    background-position: right;
    right: -170px;
    top: 630px;
    display: block;
    z-index: 0;   
} */
.bg-09 {
  background-image:  url(../images/bg-09.png);/* เปลี่ยนเป็นที่อยู่ไฟล์รูปภาพของคุณ */
  background-size: auto; /* ทำให้รูปภาพขยายเต็มพื้นที่ */
  background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
  background-repeat: repeat; /* ป้องกันไม่ให้รูปภาพซ้ำ */
}
.bg-10 {
    background-image: url(../images/bg-20.png);
    background-size: 10%;
    background-position: center;
    background-repeat: repeat;
    /* background-color: currentcolor; */
}
.bg-11 {
    background-image: url(../images/bg-21.svg);
    background-size: 40%;
    background-position: right;
    background-repeat: no-repeat;
    /* background-color: currentcolor; */
}




/* ====================== */
/* Facilities */
/* ====================== */
.section-facilities .common-content .uk-card-body h3 {
    padding-bottom: 20px;
}

/* ====================== */
/* Contact */
/* ====================== */
.page-id-62 .bg-title01::after {
    content: " ";
    width: 1280px;
    height: 388px;
    right: -160px;
    position: absolute;
    background: url(../images/item-01.png);
    background-repeat: no-repeat;
    background-position: right;
    top: -50px;
    display: block;
    z-index: 0;
}
.wpcf7 form.sent .wpcf7-response-output , .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    color: #fff;
}
/* ====================== */
/* Footer */
/* ====================== */
.common-copyright {
    background-color: var(--secondary-color);
}
.common-footer .common-footer-content .uk-button-secondary:hover {
    background-color: var(--secondary-color);
    opacity: 0.9;

}
.common-copyright .common-copyright-content {
    text-align: center;
    color: var(--white-color);
    font-size: 12px;
    padding: 0 30px;
}
.common-copyright .common-copyright-content a:hover {
    color: var(--primary-color);

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

:focus-visible {
    outline: 0;
}

/* ====================== */
/* Custom theme */
/* ====================== */
.light-mode .heading-intro h1 {
    color: var(--text-color);    
}
.dark-mode .common-contact .uk-grid h4 ,
.dark-mode  h4 ,
.dark-mode h5 ,
.dark-mode p , 
.dark-mode strong ,
.dark-mode .common-contact .common-contact-details a ,
.dark-mode  h3 ,
.dark-mode .uk-card-body {
    color: #fff !important;
}
.dark-mode .common-contact .common-contact-details a:hover {
    color: var(--secondary-color) !important;
}

/* ====================== */
/* 404 */
/* ====================== */
.common-page-404 .details .heading-intro h1 {
    color: #333;
}
.common-page-404 .details .heading-intro .heading-large {
    padding: 100px;
}


/* 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: #fff; }
.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: #fff;
    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: #fff;}
.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;
}

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

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

    .custom-azizi-sec1 .heading-intro h1 {
        margin-bottom: 0px;
        text-align: center;
    }
    /* .button-menu {
        display: none;
    } */
    .custom-card-menu {
        padding: 10px 30px;
    }
}

@media screen and (max-width: 973px){
.custom-card-menu {
    padding: 10px 10px;
}
.custom-card-menu .button-menu {
    padding: 5px 5px;
}
.button-menu {
    margin-top: 10px;    
}
.restaurants-title {
    font-size: 14px;
}
.restaurants-sub-title {
    font-size: 12px;
}
}

@media screen and (max-width: 818px){
    .common-slider-content .flex-card  .details  p {
        flex-direction: column;
    }

}

@media screen and (max-width: 768px){
/* ====================== */
/* Main Slide */
/* ====================== */
    .common-slideshow .common-slideshow-intro .slideshow-sub-title {
        font-size: 48px;
    }
    .common-slideshow .common-slideshow-intro .slideshow-title {
        font-size: 26px;
    }
/* ====================== */
/* Home */
/* ====================== */
    .home .common-wrapper .common-content .common-row .details {
        max-width: 80%;
    }
    .bg-title01::after , .bg-item03::before  {
        display: none;
    }
    .custom-item01 {
        height: auto;
    }
    .section-specials .common-card-default .uk-card-body p ,
    .section-restaurants .common-card-default .uk-card-body p {
        display: flex;
        flex-direction: column;
    }
/* ====================== */
/* Footer */
/* ====================== */

    .common-footer-content .uk-width-1-3 .wpcf7 {
        display: flex;
        justify-content: center;
    }
    .ft-privacy-policy {
        justify-content: center;
    }
    .custom-azizi-sec1 .common-content .common-row {
    margin: 50px 0;
}
/* Azizi */
/* .custom-card-menu {
    padding: 10px 10px;
}
.custom-card-menu .button-menu {
    padding: 5px 5px;
}
.button-menu {
    margin-top: 10px;    
}
.restaurants-title {
    font-size: 14px;
}
.restaurants-sub-title {
    font-size: 12px;
} */
}

@media screen and (max-width: 600px){
/* .custom-card-menu {
    display: none; 
} */
}

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


    /* main slide */
    [class*='uk-position-center-left'] {
        --uk-position-translate-y: -40%;
    }


    .section-ig h2 {
        font-size: 28px !important;
    }
    .slider-home .common-slider-primary ul li p ,
    .common-card-default .uk-card-body p {
        flex-direction: column;
    }

    /* .common-slider-primary .details {
        margin: 0px !important;
    } */
    .home .common-wrapper .common-content .common-row .details {
        max-width: 100%;
    }
    .section-specials .uk-child-width-1-3\@m > * ,
    .section-restaurants .uk-child-width-1-3\@m > *  {
        width:100%;
    }

    /* Azizi */
    .custom-card .uk-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    margin-left: 0px;
}
.custom-card .uk-width-1-4  , .custom-card .uk-width-3-4{
    width: 100%;
    padding-left: 0px;
}
.switch-card {
    flex-direction: column-reverse;
}
.custom-card-menu {
    display: flex;
    align-items: center;
}
.custom-azizi-sec1 .uk-child-width-1-2\@s > * {
    width: 100%;
}
.custom-azizi-sec1 .uk-grid-collapse.uk-child-width-1-2\@s.uk-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.custom-azizi-sec1 .heading-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.custom-azizi-sec5 .title h1 , .custom-azizi-sec3 h1 , .custom-azizi-sec1 .heading-intro h1 {
    font-size: 60px !important;
}
.custom-azizi-sec1 .common-content .common-row .details {
    max-width: 100%;
    text-align: center;
    margin-top: -15px;
}
/* ====================== */
/* Font */
/* ====================== */
h1 {
    font-size: 38px !important;
}
h2 {
    font-size: 32px !important;
}
h3 {
    font-size: 26px !important;
}

.custom-azizi-sec1 .link {
    flex-direction: column;
    align-items: center;
}
.custom-azizi-sec1 .button-filled , .custom-azizi-sec1 .button-outlined {
    width: 175px;
}

}

@media screen and (max-width: 384px){
/* ====================== */
/* Home */
/* ====================== */

    .section-ig h2 {
        font-size: 24px !important;
    }
}

@media screen and (max-width: 320px){
/* ====================== */
/* Home */
/* ====================== */
    .section-ig h2 {
        font-size: 20px !important;
    }
}