@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Trirong: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&display=swap');

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    border: none;
    outline: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

  :root {

    --color-white:#fff;
    --color-black:#010101;
    --color-blackdrop: #242021;
    --color-greendrak: #d7dfda;
    --color-green-hard: #006132;
    --color-green: #007A3F;
    --color-green-bg: #d1ddd6;
    --color-green-line: #448b69;
    --color-green-mini-text: #a8d1ba;
    --color-orange: #FF751F;
    --color-f5f5f5: #f5f5f5;
    --color-f9f9f9: #f9f9f9;
    --color-e9e9e9:  #e9e9e9;
    --color-eee: #eee;
    --color-gray: #444;
    --color-666: #666;
    --color-444: #444;
    --color-grayline: #312a29;
    --color-gold:  #b19d83;
    --color-d8d8d8: #d8d8d8;
    --color-aaa:  #aaa;
    --color-c7c7c7:  #c7c7c7;
    --color-181818: #181818;
    --color-121212:  #121212;
    --color-ccc: #ccc;
    --color-error:  #c0392b;
    --color-ddd:  #ddd;
    --color-f1f1f1: #f1f1f1;

    --color-red: #ff0000;

    --cream: #f5f0e8;
    --warm-white: #faf8f3;
    --gold: #c9a84c;
    --gold-light: #e8d5a3;
    --dark: #1a1814;
    --brown: #6b5a3e;
    --brown-light: #9b8a6e;
    --shadow: rgba(26,24,20,0.12);
    --border: #ddd;
  }


::selection {
    color: #fff;
    background: #333
}
::-moz-selection {
    color: #fff;
    background: #333
}
::placeholder {
    color: var(--color-aaa);
    font-size: 14px;
    font-weight: normal;
    opacity: 1; 
}
:-ms-input-placeholder {
    color: var(--color-aaa);
    font-size: 14px;
    font-weight: normal
}
::-ms-input-placeholder {
    color: var(--color-aaa);
    font-size: 14px;
    font-weight: normal
}


:lang(th) body,:lang(th) button,:lang(th) input[type=date],:lang(th) input[type=email],:lang(th) nput[type=password],:lang(th) input[type=phone],:lang(th) input[type=tel],:lang(th) input[type=text],:lang(th) select,:lang(th) textarea {font-family: "Trirong", sans-serif; }
:lang(en) body,:lang(en) button,:lang(en) input[type=date],:lang(en) input[type=email],:lang(en) nput[type=password],:lang(en) input[type=phone],:lang(en) input[type=tel],:lang(en) input[type=text],:lang(en) select,:lang(en) textarea { font-family: "Google Sans Flex", sans-serif; }
:lang(ar) body,:lang(ar) button,:lang(ar) input[type=date],:lang(ar) input[type=email],:lang(ar) nput[type=password],:lang(ar) input[type=phone],:lang(ar) input[type=tel],:lang(ar) input[type=text],:lang(ar) select,:lang(ar) textarea { font-family: "Noto Sans Arabic", sans-serif; }
:lang(cn) body,:lang(cn) button,:lang(cn) input[type=date],:lang(cn) input[type=email],:lang(cn) nput[type=password],:lang(cn) input[type=phone],:lang(cn) input[type=tel],:lang(cn) input[type=text],:lang(cn) select,:lang(cn) textarea { font-family: "Noto Sans TC", sans-serif; }
:lang(kr) body,:lang(kr) button,:lang(kr) input[type=date],:lang(kr) input[type=email],:lang(kr) nput[type=password],:lang(kr) input[type=phone],:lang(kr) input[type=tel],:lang(kr) input[type=text],:lang(kr) select,:lang(kr) textarea { font-family: "Noto Sans KR", sans-serif; }
:lang(js) body,:lang(js) button,:lang(js) input[type=date],:lang(js) input[type=email],:lang(js) nput[type=password],:lang(js) input[type=phone],:lang(js) input[type=tel],:lang(js) input[type=text],:lang(js) select,:lang(js) textarea { font-family: "Noto Serif JP", sans-serif; }

body { 
     /*   font-family: "Inter","Trirong","Zen Kaku Gothic New","IBM Plex Sans Arabic","Nanum Gothic","Noto Sans SC", serif;*/
    font-size: 16px;
    font-weight: normal;
    color: var(--color-black);
    line-height: 1.4;
    background:  var(--color-white);
    overflow-x: hidden
}
a,
a:active,
a:focus,
a:hover { -webkit-tap-highlight-color: transparent}

button:hover {
    transition: all .3s ease;
}
a,
abbr,
address,
b,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strong,
sub,
sup,
tfoot,
u,
ul,
var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: 0 0
}
ol,
ul {
    list-style: none
}
li { position: relative; }

blockquote,
q {
    quotes: none;
        margin-left: 20px;
    border-left: 2px solid var(--color-ddd);
    padding-left: 10px;
}

blockquote::after,
blockquote::before,
q::after,
q::before {
    content: '';
    content: none
}
:focus {
    outline: 0
}
ins {
    text-decoration: none
}

del {
    text-decoration: line-through
}

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

body,
html {
    height: 100%
}

a {
    display: block;
    color: var(--color-black);
    transition: all .3s ease;
    user-select: none
}

a:hover {
    color: var(--color-green)
}
img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: all .3s ease
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-bottom: 14px;
}
h1 {
    font-size: 60px;
}

h2 { font-size: 36px; }

p {
    margin-bottom: 18px
}
small {
    color: var(--color-666)
}
b,
strong {
    font-weight: 600;
}
main {
    position: relative;
    width: 100%;
}
section {
    position: relative;
    width: 100%;
}
header { position:relative; }
figure {
    position: relative
}
time {
    position: relative;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--color-drop2gray);
    z-index: 1
}
label {
    display: inline-flex;
    padding-bottom: 5px
}

input[type=date],input[type=email],input[type=password],input[type=phone],input[type=tel],input[type=text],select,textarea {
    border-bottom: 1px solid var(--color-d8d8d8);
    background: var(--color-white);
    font-weight: normal;
    color: var(--color-black);
    line-height: 1.4;
    display: block; width: 100%;
}

body { position: relative;  width: 100%; overflow-x: hidden}

h1,h2,h3,h4,h5,h6 {
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  display: block; width: 100%;
   }

/* LANG TH */
:lang(th) .btn-mini { font-size: 13px;  letter-spacing: 0;}
:lang(th) .check-btn { font-size: 13px;  letter-spacing: 0;}

/* LANG AR */
:lang(ar) .btn-mini { font-size: 13px; }
:lang(ar) .btn-Bookstay { margin-right: auto; margin-left:inherit; }
:lang(ar) .main-menu { margin-left: 40px; margin-right: inherit; padding-left: 0; padding-right: 40px; }
:lang(ar) .menu-toggle { margin-left: inherit; margin-right: 20px; }
:lang(ar) .header-fixed .top-social { margin-right: inherit; margin-left: 40px; }
:lang(ar) .header-fixed .head-lang .txt-connect { padding-right: 0; padding-left: 8px; }
:lang(ar) .lang-label { direction: rtl; padding-right: inherit; padding-left: inherit; padding-right: 7px; }
:lang(ar) .header-fixed .head-lang button::after { margin-left: inherit; margin-right: 7px; }
:lang(ar) .lang-label small { order: 2; padding-right: 5px; padding-left: 0; margin-right: 0; margin-right: 3px; border-left: 0;}
:lang(ar) .intro article { padding-left: 20%; padding-right: 40px; }
:lang(ar) .nav-mobile { right: inherit ; left: -50% ; }
:lang(ar) .global-lang { right: inherit ; left: -480px; }
:lang(ar) .show-nav { left: 0 !important; right: inherit !important; }
:lang(ar) .nav-mobile a { padding: 20px 90px 20px 50px ; }
:lang(ar) .nav-mobile a::before { left: inherit; right: 40px; }

:lang(ar) .home-event > article > header { text-align: right; }
:lang(ar) .home-event .btn--primary { margin-left: auto; margin-right: inherit; }

:lang(ar) .home-feature figure { margin-right: auto; margin-left: inherit; }
:lang(ar) .home-feature > article .content-left { padding-right: 0; padding-left: 80px; }

:lang(ar) .review-user .name-user { padding-left: 0; padding-right: 10px; }

:lang(ar) .room-highligts .icon-high { margin-right: 0; margin-left: 8px; }
:lang(ar) .room-detail-full .sub-title::before { left: inherit; right: 5px; }

:lang(ar) .icon-list { padding-left: 0; padding-right: 20px; }
:lang(ar) .icon-list::before { left: inherit; right: 0; }
:lang(ar) .icon-list::after { left: inherit; right: 4px; }

:lang(ar) .faqs h3 { padding: 15px 0 15px 40px; }
:lang(ar) .faqs .plus-rotate { right: inherit; left: 15px; }
:lang(ar) .review-user::before { right: inherit; left: 8px; }
:lang(ar) .review-user::after { right: inherit; left: 10px; transform: none; }

:lang(ar) .contact-list i { margin-right: 0; margin-left: 8px; }
:lang(ar) .map-wrap .btn-get { right: inherit; left: 15px; }
:lang(ar) .map-wrap span svg { margin-right: inherit; margin-left: 10px; transform: rotate(90deg); }

:lang(ar) .pg-icon { transform: rotate(180deg); }
:lang(ar) .btn-all a::before { transform: rotate(180deg); }

:lang(ar) .list-type-room .price-room { text-align: left; }
:lang(ar) .txt-subject::before { left: inherit; right: 0; }
:lang(ar) .check-date-select-room .box-select-room small { margin-left: inherit; margin-right: auto; }
:lang(ar) .txt-subject span { margin-left: inherit; margin-right: auto; }
:lang(ar) .check-date-select-room .box-select-room { text-align: left; }
:lang(ar) .select-arrow { right: inherit; left: 12px; }
:lang(ar) .custom-select { padding: 6px 10px 6px 30px; }
:lang(ar) .inline-loading { padding-left:7px; padding-right: 0; }

:lang(ar) .call-to-action { right: inherit; left: 15px; }

:lang(ar) body > footer .footer-logo-address .logo { margin-right: 0; margin-left: 40px; }
:lang(ar) body > footer .contxt span { border-right: none; padding-right: 0; padding-left: 15px; border-left: 1px solid var(--color-green) }
:lang(ar) body > footer .contxt span:last-child { border-left: none; }
:lang(ar) body > footer .siteby { margin-left: inherit; margin-right: auto; }
:lang(ar) body > footer .siteby a { padding-left: 0; padding-right: 5px; }

:lang(ar) .list-ul-ol { padding-left: 0; padding-right: 20px; }
:lang(ar) .editor ul { padding-left: 0; padding-right: 30px; }
:lang(ar) .editor ol { padding-left: 0; padding-right: 30px; }



 /*  */

body > header { position: fixed;  width: 100%;  height: 116px; padding: 0; background: var(--color-white); z-index: 999999; transition: all .2s ease;  }
.header-fixed { display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: 0; margin:0 auto; box-shadow: 0 -2px 20px 0 rgb(0 0 0 / 20%) ; }
.header-fixed .head-lang { display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 44px; padding: 0 80px;   font-size: 14px; border-bottom: 1px solid var(--color-eee); }
.header-fixed .head-lang .txt-connect { padding-right: 8px; }
.header-fixed .top-social { display: flex; flex-wrap: wrap; margin-right: 40px; gap: 10px; }
.header-fixed .top-social a:hover i { opacity: .8; transition: all 0.3s ease; }
.header-fixed .top-social i { display: block; width: 16px; height: 16px; position: relative; text-indent: -9999px; overflow: hidden;transition: all 0.3s ease; }

.icon-Facebook::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-facebook.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

.icon-Instagram::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-instagram.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

.icon-TikTok::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-tiktok.svg);
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

.icon-X::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-x.svg);
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

.icon-Youtube::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-youtube.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

.icon-Line::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-line.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

 .icon-Lemon8::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-lemon8.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

  .icon-LinkedIn::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-linkedin.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

 .icon-WhatsApp::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-whatsapp.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

 .icon-WeChat::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-wechat.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }


 .icon-Rednote::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-rednote.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

  .icon-Douyin::after { 
    position: absolute;
    content: "";
    background-image: url(../images/icon-douyin.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
 }

.header-fixed .head-lang button.btn-global { display: flex; align-items: center; font-size: 12px; color: var(--color-666); cursor: pointer; background: none;}
.header-fixed .head-lang button.btn-global:hover .icon-globe { opacity: .8; transition: all 0.3s ease; }
.header-fixed .head-lang button::after {
    content: "";
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxOC44IDEwIj4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMzAuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgMTIzKSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0uOC41MWMtLjUzLjUzLS41MywxLjQsMCwxLjkzbDYuNjcsNi42N2MxLjA3LDEuMDYsMi43OSwxLjA2LDMuODYsMGw2LjY3LTYuNjdjLjUzLS41My41My0xLjQsMC0xLjkzLS41My0uNTMtMS40LS41My0xLjkzLDBsLTUuNzEsNS43MWMtLjUzLjUzLTEuNC41My0xLjkzLDBMMi43My41MUMyLjItLjAzLDEuMzMtLjAzLjguNTFaIi8+Cjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    width: 10px;
    height: 5px;
    margin-left: 7px;
    margin-bottom: 0;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
} 
.lang-label { display: inline; font-size: 14px; padding-left: 7px; }
.lang-label small { display: inline-flex; font-size: 14px; padding-left: 5px; margin-left: 3px; border-left: 1px solid var(--color-ddd); color: var(--color-666); }
.lang-icon { display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 18px; background-repeat: no-repeat; background-position: center;
    filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);
}
.icon-globe { transition: all 0.3s ease; 
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDIyYzUuNTIzIDAgMTAtNC40NzcgMTAtMTBTMTcuNTIzIDIgMTIgMiAyIDYuNDc3IDIgMTJzNC40NzcgMTAgMTAgMTB6TTIgMTJoMjAiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMiAyYTE1LjMgMTUuMyAwIDAxNCAxMCAxNS4zIDE1LjMgMCAwMS00IDEwIDE1LjMgMTUuMyAwIDAxLTQtMTAgMTUuMyAxNS4zIDAgMDE0LTEwdjB6IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=);
}

.global-lang { position: fixed; width: 480px; height: 100vh; right: -480px; z-index: 9999999; padding: 116px 0 0 0; color: var(--color-white); background: var(--color-white);  -webkit-transition: all .8s cubic-bezier(1, .1, .2, 1); -moz-transition: all .8s cubic-bezier(1, .1, .2, 1);  -o-transition: all .8s cubic-bezier(1, .1, .2, 1);  transition: all .8s cubic-bezier(1, .1, .2, 1) }
.global-lang::before { content: ''; position: absolute; top: 0; width: 100%; height: 116px; background: var(--color-f5f5f5);  }
.global-lang a { padding: 20px 0; color: var(--color-black); border-bottom: 1px solid var(--color-d8d8d8); }
.global-lang a:hover { color: var(--color-green); }
.global-lang .btn-close-lang { position: absolute; width: 20px; height: 20px; top: 30px; right: 30px; text-indent: -99999px; overflow: hidden; cursor: pointer; }
.global-lang .btn-close-lang::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 90%; filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%); background-position: center; background-repeat: no-repeat; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMzAuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgMTIzKSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJNZW51X194MkZfX0Nsb3NlX3g1Rl9NRCI+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOTIuODYsMTAwYy0xLjgzLDAtMy42Ni0uNy01LjA1LTIuMDlsLTM3LjgxLTM3LjgxTDEyLjE5LDk3LjkxYy0yLjc5LDIuNzktNy4zMSwyLjc5LTEwLjEsMC0yLjc5LTIuNzktMi43OS03LjMxLDAtMTAuMWwzNy44MS0zNy44MUwyLjA5LDEyLjE5Qy0uNyw5LjQtLjcsNC44OCwyLjA5LDIuMDljMi43OS0yLjc5LDcuMzEtMi43OSwxMC4xLDBsMzcuODEsMzcuODFMODcuODEsMi4wOWMyLjc5LTIuNzksNy4zMS0yLjc5LDEwLjEsMCwyLjc5LDIuNzksMi43OSw3LjMxLDAsMTAuMWwtMzcuODEsMzcuODEsMzcuODEsMzcuODFjMi43OSwyLjc5LDIuNzksNy4zMSwwLDEwLjEtMS4zOSwxLjM5LTMuMjIsMi4wOS01LjA1LDIuMDlaIi8+CiAgPC9nPgo8L3N2Zz4=); }
.global-lang ul { padding: 50px; }
.global-lang li {  }

.header-fixed .logo-nav { display: flex; flex-wrap: wrap; align-items: center; width: 100%; height: 72px; padding: 0 80px; }
.header-fixed .logo { position: relative; display: flex; width: 80px; z-index: 9; cursor:pointer; }
.header-fixed .logo a { display: block;  position: relative;  width: 100%;  height: 100%; }
.header-fixed .logo figure {  position: relative; display: flex; align-items: center; width: 100%; height: 100%; transition: all .2s ease}
.header-fixed .logo img { position: relative; width: 100%; margin: 0 auto; transition: all .2s ease}

.main-menu { position: relative; display: flex; flex-wrap: wrap; align-items: center; margin-right: auto; padding-left: 40px; height: 100%; z-index: 1; }
.main-menu ul { position: relative; display: flex; flex-wrap: wrap;  }
.main-menu .name-sec { position: relative; margin: 0 10px;  text-transform: uppercase; color: var(--color-black); opacity: 1; font-weight: 500; transition: all 0.3s ease; user-select: none; }
.main-menu .name-sec a { color: var(--color-black); }
.main-menu .name-sec a:hover { color: var(--color-green); text-decoration:none; transition: all 0.3s ease; }
.main-menu .name-sec:last-child { margin-right:0 }
.main-menu .current a { color:var(--color-green);  }
.main-menu .nofocus { opacity: 0.5; transition: all 0.3s ease; }

.header-fixed .icon-line {
    background-image: url(../images/icon-line-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}
.header-fixed .icon-facebook {
    background-image: url(../images/icon-facebook-white.svg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center
}
.header-fixed .icon-tiktok {
    background-image: url(../images/icon-tiktok-white.svg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center
}
.header-fixed .icon-youtube {
    background-image: url(../images/icon-youtube-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.header-fixed .icon-youtube {
    background-image: url(../images/icon-youtube-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.open-nav {
    opacity: 1;
    visibility: visible;
    right: 0 !important;
    transition-timing-function: cubic-bezier(.76, .22, .38, .9);
    transition-duration: .5s;
    webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}
.show-nav {
    right: 0 !important;
    -webkit-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -moz-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -o-transition: all .8s cubic-bezier(1, .1, .2, 1);
    transition: all .8s cubic-bezier(1, .1, .2, 1)
}
.menu-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 40px;
    overflow: hidden; border-radius: 0;
    margin-left: 20px;
    cursor: pointer;
    background: none;
}
.menu-toggle:hover .menu-icon {   }
.menu-toggle:hover .menu-icon.is-clicked { background: none }
.menu-toggle:hover .menu-icon::before, .menu-toggle:hover .menu-icon::after { background: var(--color-666);  transition: all 0.3s ease; }

.menu-icon {
    position: relative;
   display: flex;
    right: 0;
    width:28px;
    height: 2px;
    background: var(--color-666); 
    transition: all .3s ease;
    text-indent: -99999px; display: block;
}
.menu-icon::after,
.menu-icon::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--color-666);
    right: 0;
    -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
    -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
    transition: transform .3s, top .3s, background-color 0s;
    transition: all .3s ease
}
.menu-icon::before {
    top: -10px
}
.menu-icon::after {
    top: 10px
}
.menu-icon.is-clicked {
    background: rgb(235, 0, 139, 0);
    background: linear-gradient(220deg, rgba(235, 0, 139, 0) 0, rgba(243, 113, 37, 0) 0)
}
.menu-icon.is-clicked::before {
    background: var(--color-666);
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}
.menu-icon.is-clicked::after {
    background: var(--color-666);
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.menu-icon span { position: relative; display: block; overflow: hidden;}
.nav-overay {  position: fixed;  width: 100%;  height: 100%;  left: 0;  top: 0;  background: rgba(0, 0, 0, .7);  z-index: 888;  opacity: 0;  visibility: hidden;  transition: all .3s ease}
.active-nav-overay { opacity: 1; visibility: visible; transition: all .4s ease;  -webkit-backdrop-filter: blur(8px);  backdrop-filter: blur(8px);}

.overay-lang {  position: fixed;  width: 100%;  height: 100%;  left: 0;  top: 0;  background: rgba(0, 0, 0, .7);  z-index: 999999;  opacity: 0;  visibility: hidden;  transition: all .3s ease}
.active-overay-lang { opacity: 1; visibility: visible; transition: all .4s ease;  -webkit-backdrop-filter: blur(8px);  backdrop-filter: blur(8px); }

.nav-mobile {  position: fixed; width: 50%; height: 100%;  padding: 166px 0 50px 0; margin: 0;  right: -50%;  top: 0; overflow: hidden; z-index: 999; background: var(--color-green-bg);  -webkit-transition: all .8s cubic-bezier(1, .1, .2, 1); -moz-transition: all .8s cubic-bezier(1, .1, .2, 1);  -o-transition: all .8s cubic-bezier(1, .1, .2, 1);  transition: all .8s cubic-bezier(1, .1, .2, 1) }
.nav-mobile .menu { position:relative; width: 100%; }
.nav-mobile li { border-top: 1px  solid rgb(181 203 193);  }
.nav-mobile a { position: relative; text-transform: uppercase; font-weight: 500;  font-size: 17px; color: var(--color-black); padding: 20px 50px 20px 90px; }
.nav-mobile li:last-child {  border-bottom: 1px  solid rgba(255,255,255,.05); }
.nav-mobile a:hover,.nav-mobile .current a { color:var(--color-green); }
.nav-mobile a:hover { background: rgba(255,255,255,.01); }
/* .nav-mobile a:hover::before { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7464%) hue-rotate(49deg) brightness(123%) contrast(96%); transition: all .3s ease } */
.nav-mobile a::before { content: ''; position: absolute;
     background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 25px;
    height: 25px;
    left: 40px; top: 0; bottom: 0; margin-top: auto;
    margin-bottom: auto;
    filter: brightness(0) saturate(100%) invert(34%) sepia(22%) saturate(2536%) hue-rotate(110deg) brightness(93%) contrast(101%);transition: all .3s ease}

.nav-mobile a.icon-m-home::before { background-image: url(../images/icon-home.svg); }
.nav-mobile a.icon-m-about::before { background-image: url(../images/icon-about.svg); }
.nav-mobile a.icon-m-rooms::before { background-image: url(../images/icon-rooms.svg); }
.nav-mobile a.icon-m-Breakfast::before { background-image: url(../images/icon-Breakfast.svg); }
.nav-mobile a.icon-m-facilities::before { background-image: url(../images/icon-facilities.svg); }
.nav-mobile a.icon-m-offer::before { background-image: url(../images/icon-offers.svg); }
.nav-mobile a.icon-m-explore::before { background-image: url(../images/icon-explore.svg); }
.nav-mobile a.icon-m-contact::before { background-image: url(../images/icon-contact.svg); }
.nav-mobile-fix {  position: relative; width: 100%; margin-bottom: 20px;  overflow: hidden}

.connect-social { padding: 40px;  }
.connect-social .subject { padding-bottom: 10px; }
.connect-social .box { display: inline-flex; gap: 15px; }
.connect-social a { padding: 0; font-size: 16px; }
.connect-social i { display: block; width: 24px; height: 24px; position: relative; text-indent: -9999px; overflow: hidden;transition: all 0.3s ease; }

.btn-Bookstay { margin-left: auto;   }
.btn-Bookstay a { min-width: 130px; }
.btn-Bookstay span { justify-content: center; display: flex; border-radius: 30px; background: var(--color-green); color: var(--color-white); cursor: pointer; padding: 10px 20px;  transition: all 0.3s ease; }
.btn-Bookstay:hover span { background: var(--color-green-hard); transition: all 0.3s ease; }

.btn-all { padding-top: 20px; }
.btn-all a {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 4px;
    padding: 0;
    border-radius: 0;
    white-space: normal;
    overflow: initial;
    width: fit-content;
    text-transform: capitalize;
}
.btn-all a::before { content: "";
    position: static; width: 14px; height: 14px;
    display: inline-block;
    background-image: url(../images/icon-arrowleft.svg);
    transition: transform .2s ease;
    transform-origin: center;
    filter: invert(0) sepia(0) saturate(0) hue-rotate(0deg) brightness(0) contrast(100%); }

/**/
.cover { padding-top: 116px !important; }
.cover h1 { margin-bottom: 0; line-height: 1.2; }
.cover .box-vdo { overflow: hidden; display: flex; justify-content: center; position: relative; }
.cover .box-vdo video { display: block; width: 100vw;height: 100%;object-fit: cover; }
.cover > article { z-index: 1; position: absolute; width: min(100%, 1280px); margin: 0 auto; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; color: var(--color-white); padding-left: 40px; padding-right: 40px; padding-bottom: 60px; padding-top: 60px !important; }
.cover > article .motto { padding-bottom: 10px; }
.cover-less .box-vdo { min-height: 600px; }
.cover-less .box-vdo video { height: 600px; }
.cover-gallery figure {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}
.cover-gallery figure img {     object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin: auto; }
/* .cover-less .box-vdo::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); left: 0; top: 0; transition: all 0.3s ease; } */
/**/
.page-box { padding: 64px 0; }
.page-box > article,body > footer article { display: flex;  flex-wrap: wrap;  position: relative;  margin: 0 auto;  width: min(100%, 1280px); height: inherit; padding: 0 40px;  }
.page-box > article > header { width: 100%;  }
.page-box > article > header h1 { font-size: 46px; }
/* .page-box > article > header > h2 { line-height:1.2 } */
.page-box > article > header > h2 em { color:var(--color-green-big); font-style:normal; }
.page-box > article > header p {  }

/**/
.intro {  background: var(--color-green-bg); }
.intro article { padding-right: 10%; }
.intro article > header h2 { margin-bottom: 0; font-size: 25px; font-weight: 400;   }
.intro article > header br {  }
.intro p { margin-bottom: 0;  }

/* Rooms Slide */
.rooms-slide { padding-bottom: 80px; }
.rooms-slide p { color: var(--color-666); }
.rooms-carousel { position: relative; width: 100%; }
swiper-container{ display:block; }

 /* ให้การ์ดดูเหมือนตัวอย่าง: มีช่องว่าง และเป็นการ์ดสูงเท่ากัน */
.room-slide{ height: auto;}
.room-card{ position: relative; background: var(--color-f5f5f5);  overflow: hidden;  height: 100%;  display: flex;  flex-direction: column; border-radius: 10px;} 
.room-media{ position: relative;display: flex; /*height: inherit;*/ flex-direction: column; }
/* Main gallery */
.room-gallery-main{
 width: 100%;
 height: 320px;
 --swiper-navigation-color: #fff;
 --swiper-pagination-color: #fff;
 --swiper-pagination-bullet-inactive-color: rgba(255,255,255,.55);
 --swiper-pagination-bullet-inactive-opacity: 1;
 --swiper-navigation-size: 20px;
 }
.room-gallery-main img{ width: 100%; height: 100%; object-fit: cover; display:block; }
/* Thumbs row */
.room-gallery-thumbs{ padding: 10px 12px 12px; }
.room-gallery-thumbs swiper-slide{ border-radius: 10px; overflow: hidden; height: 62px; opacity: .55; cursor: pointer; transform: translateZ(0); }
.room-gallery-thumbs swiper-slide img{ width:100%; height:100%; object-fit: cover; display:block; }
/* Swiper จะใส่ class นี้ให้ thumbs ที่ active */ 
.room-gallery-thumbs swiper-slide.swiper-slide-thumb-active{ opacity: 1;}

.room-set-des { display: flex; flex-direction: column; }

.room-body{ position: relative;  flex-grow: 1;  padding: 20px 30px 15px; display:flex; flex-direction: column; gap: 10px; }
.room-title{ margin:0; font-size: 21px;  }
.room-desc{ margin:0;max-width: 60ch; position: relative; }
.room-desc p { margin-bottom: 0; }
.room-highligts { width: 100%; margin-top: 20px; padding: 0 30px; font-size: 13px; color: var(--color-gray); }
.room-highligts .txt-label { padding-bottom: 15px; font-size: 15px; font-weight: 600; color: var(--color-gray); }
.room-highligts ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.room-highligts li { display: flex; flex-wrap: wrap; align-items: center; }
.room-highligts .icon-high { display: inline-block; width: 20px; height: 20px; margin-right: 8px; background-size: 100%; background-repeat: no-repeat; background-position: center; }

.room-footer{ position: relative; margin-top: auto; padding: 0 30px; }
.room-footer > div { margin-top: 20px; width: 100%;  display:flex;  gap: 12px; justify-content: flex-end; padding: 20px 0 30px 0 ; border-top: 1px solid var(--color-eee); }

.room-gallery-main::part(pagination) {
        --swiper-navigation-color: #fff;
                --swiper-pagination-color: #fff;
                --swiper-pagination-bullet-inactive-color: rgba(255,255,255,.55);
                --swiper-pagination-bullet-inactive-opacity: 1;
                --swiper-navigation-size: 18px;}

.status-exprie { user-select: none; }
.status-exprie::before { content:''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;  }

.facilities-home { background: var(--color-green-bg); }
.facilities-home ul { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
.facilities-home .box {  flex-wrap: wrap; align-items: flex-start; justify-content: center; text-align: center;  width: 100%; height: 100%; border-radius: 10px; padding: 15px ; background: var(--color-white); }
.facilities-home h3 { font-size: 18px; margin-bottom: 0; padding-top: 10px; }

.facilities-home img { margin: 0 auto; width: 50px; filter: brightness(0) saturate(100%) invert(21%) sepia(80%) saturate(5501%) hue-rotate(154deg) brightness(89%) contrast(102%); }
.facilities-home a:hover img { transform: scale(1.2); }
.facilities-home a { height: 100%; }

.about-home article { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.about-home article figure img { border-radius: 10px; }

.special-offers-home { background: var(--color-green-bg); }
.special-offers-home ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px; }
.special-offers-home li figure { position: relative; overflow: hidden; border-radius: 10px; }
.special-offers-home li img {   transform: scale(1);
      transition: transform .6s ease; }
.special-offers-home li img:hover {   transform: scale(1.08); }

    .btn-mini {
      appearance: none;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 10px 20px;
      cursor: pointer;
      text-decoration: none;
      display:inline-flex; 
      align-items:center;
      justify-content:center;
      min-width: 120px; font-weight: 500; text-transform: uppercase;  
    
      transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
      user-select:none;
    }
    .btn-mini:active{ transform: translateY(1px); }

    .btn--ghost{
      background: var(--color-white); 
      border-color: var(--color-green-bg);
      color: var(--color-444);  transition: all 0.3s ease; 
    }
    .btn--ghost:hover{ border-color: var(--color-green); transition: all 0.3s ease; }

    .btn--exprie{ padding-left: 0; padding-right: 0; justify-content: flex-end;
      color: var(--color-red);  
    }

    .btn--primary{
      background: var(--color-green);
      color: var(--color-white); transition: all 0.3s ease;
    }
    .btn--primary:hover{ color: var(--color-white); background: var(--color-green-hard);transition: all 0.3s ease; }

    /* ปรับเล็กน้อยบนจอเล็ก */
    @media (max-width: 520px){
      .room-gallery-main{ height: 260px; }
      .room-gallery-thumbs swiper-slide{ height: 56px; }
      .room-title{ font-size: 18px; }
    }

    /* ===== Rooms carousel wrapper + custom nav ===== */
    .rooms-carousel{position:relative; padding-top: 10px;}
    .rooms-nav{
      position:absolute; inset:0;
      pointer-events:none; /* ให้คลิกทะลุ ยกเว้นปุ่ม */
      display:flex; align-items:center; justify-content:space-between;
      padding:0 10px;
      z-index:10;
    }

    .nav-prev { left: -22px; }
    .nav-next { right: -22px; }
    .nav-btn{ position: absolute;
      pointer-events:auto;
      width:46px;height:46px;border-radius:999px;
      border: none;
      background:rgba(255,255,255,.92);
      box-shadow:0 10px 24px rgba(0,0,0,.16);
      display:grid;place-items:center;
      cursor:pointer;
      transition:transform .08s ease, background .18s ease;
      user-select:none;
    }
    .nav-btn:active{transform:translateY(1px)}
    .nav-btn span{font-size:20px;line-height:1}

    @media (max-width: 640px){
      .rooms-nav{padding:0 6px}
      .nav-btn {width:42px;height:42px}
    }

    .nav-btn:hover { background: var(--color-green); border-color: var(--color-green); }
    .nav-btn:hover svg { stroke: var(--color-white); }
    .nav-btn svg { stroke: var(--color-black); transition: stroke 0.2s; }

.explore-special-list { padding-bottom: 80px; }
.explore-special-list .tag,.explore-special-list p { color: var(--color-666); }
.explore-special-list figure {  position: relative; width: 100%; height: 0; padding: 30%; overflow: hidden;} 
.explore-special-list figure img {     object-fit: cover; object-position: top;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin: auto; }

    .color-black { color: var(--color-black); }


  /* Swiper container should be full-bleed */
    .stage { width: 100%; overflow: hidden;}

    swiper-container.dine-swiper{
      width: 100%;
      padding: 8px 0 6px;
      --swiper-navigation-size: 28px;
      --swiper-navigation-color: rgba(0,0,0,.65);
      --swiper-navigation-sides-offset: 10px;
    }

    /* Card */
    .card {
      display:block;
      position:relative;
      height: 440px;
      overflow:hidden;
      transform: translateZ(0);
      color: var(--color-white);
      border-radius: 10px;
    }
    .card:hover .btn { color: var(--color-green); transition: all 0.3s ease; }

    .card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transform: scale(1);
      transition: transform .6s ease;
    }
    .card:hover img{ transform: scale(1.08); }

    .overlay{
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg,
          rgba(0,0,0,0) 35%,
          rgba(0,0,0,.20) 55%,
          rgba(0,0,0,.55) 100%);
      pointer-events:none;
    }

    .content{
      position:absolute;
      left: 20px;
      right: 20px;
      bottom: 25px;
      z-index: 2;
    }

    .tag{
      font-size: 10px; color: var(--color-white);
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity:.8;
      margin-bottom: 6px;
    }

    .name{
      font-size: 18px;
      font-weight: 600;
      line-height: 1.15;
      margin: 0 0 20px; color: var(--color-white);
      text-shadow: 0 10px 25px rgba(0,0,0,.35);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 120px;
      padding:10px 16px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      color: var(--color-black);
      height: 40px;
      font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
    
      border: 1px solid rgba(255,255,255,.65);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      pointer-events:auto; transition: all 0.3s ease;
    }



    /* External nav */
    .dine-wrap{ position: relative; }

    .box-nav{
        align-items: center;
      display: flex;
      gap: 10px;
      z-index: 50;
    }

    .nav-btn{
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(255,255,255,.9);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: opacity .2s;
    }
    .nav-btn svg{ stroke: #111; }
    .nav-btn:disabled{
      opacity: 0;
      cursor: default;
    }

/*  */
.home-event { padding-top: 0;   }
.home-event > article { margin-bottom: 30px; }
.home-event > article > header { position: absolute; z-index: 1; width: 100%; max-width: 50%; height: 100%; display: flex;  justify-content: center; flex-direction: column; color: var(--color-white); text-align: left; padding: 40px 80px; }
.home-event > article > header h2 { font-size: 36px; }
.home-event > article figure { position: relative; width: 100%; height: 400px; overflow: hidden;  }
.home-event > article figure::before { content: ''; position: absolute ;width: 100%; height: 100%; background: rgba(0, 0, 0, .3); left: 0; top: 0; }
.home-event > article figure img { object-fit: cover; }
.home-event .btn--primary { margin-top: 20px; margin-bottom: 10px; margin-right: auto; }
.home-event .btn--primary:hover { color: var(--color-white); }

.home-facilities { margin-bottom: 0; padding-top: 80px; padding-bottom: 0; }
.home-facilities  > article { margin-bottom: 0; }

/*  */
.home-feature { display: flex; padding-top: 0; padding-bottom: 0;  background: var(--color-green-bg); }
.home-feature h2 { font-size: 34px; }
.home-feature > article { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; padding: 0; }
.home-feature > article .content-left {  padding: 60px 80px; }
.home-feature p { color: var(--color-gray);  }
.home-feature figure { position: relative; height: 100%; overflow: hidden;  }
.home-feature figure img { object-fit: cover; 
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin: auto;}

/*  */
.home-explore { padding-bottom: 80px; }
.home-explore p { color: var(--color-gray); }
.home-explore .card::after { content: ''; position: absolute; width: 100%; height: 100%; background: #000000; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%); left: 0; bottom: 0; }
.explore-nav {  position: absolute; top: 0; right: 0; left: 0; height: 100%;  display: flex; flex-wrap: wrap; margin: 0 auto; width: min(100%, 1280px); padding: 0 40px; }
.rooms-nav {  position: absolute; top: 0; right: 0; left: 0; height: 100%; display: flex; flex-wrap: wrap; margin: 0 auto; width: min(100%, 1280px); padding: 0 40px 0 40px;  }
.rooms-detail-nav {  position: absolute; top: 0; right: 0; left: 0; height: 100%; display: flex; flex-wrap: wrap; margin: 0 auto; width: min(100%, 1000px); padding: 76px 40px 0 40px;  }
.explorePrev { left: 20px; }
.exploreNext { right: 20px; }

/* Home Review */
.review { background: var(--color-green-bg); color: var(--color-black);  }
.review > article > header p { }
.review-slide { padding-bottom: 20px; }
.review-slide p { color: var(--color-666); }
.review-carousel { position: relative; width: 100%; padding-top: 20px; }

 /* ให้การ์ดดูเหมือนตัวอย่าง: มีช่องว่าง และเป็นการ์ดสูงเท่ากัน */
.review-slide { height: auto;}
.review-card { background: var(--color-white);  overflow: hidden;  height: 100%;  display: flex;  flex-direction: column; border-radius: 10px; padding:  25px; /*border: 1px solid var(--color-ddd);*/ } 
.review-user { position: relative; display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--color-ddd);  }
.review-user::after { content: ''; position: absolute; width: 20px; height: 20px; background: url('../images/icon-quotes.svg') no-repeat center; background-size: 100%; right: 10px;  bottom: -10px; transform: rotate(180deg);  filter: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(0%) hue-rotate(249deg) brightness(89%) contrast(94%);}
.review-user::before { content: ''; position: absolute; width: 24px; height: 20px; background: var(--color-white); right: 8px;  bottom: -10px; }
.review-user .profile { width: 40px; height: 40px; border-radius: 90%; padding: 4px; display: flex; align-items: center; justify-content: center; font-weight: 500; color: var(--color-white); line-height: 1; font-size: 20px;   }
.review-user .name-user { padding-left: 10px; }

.review-card p:last-child { margin-bottom: 0; }

.bg-green { background: var(--color-green); }
.bg-orange { background: var(--color-green); }
.bg-gold { background: var(--color-green); }

/* FAQs */
.faqs > article > header p { color: var(--color-666); }
.faqs article > article { width: 100%; }
.faqs h3 { padding: 15px 40px 15px 0; margin-bottom: 5px; margin-top: 5px; cursor: pointer; user-select: none; }
.faqs ul li { position: relative; border-bottom: 1px solid var(--color-eee); }
.faqs ul li:last-child { border-bottom: none; }
.faqs ul li p { display: none; color: var(--color-gray); }
.faqs ul li p a { display: inline-block; text-decoration: underline; }
.faqs .active p { display: block; }
.faqs .plus-rotate { position: absolute; display: inline-flex; right: 15px; top: 20px; width: 15px; height: 15px;   transition: transform 0.5s ease; /* ทำให้การหมุนเป็น smooth */
    transform: rotate(90deg); /* หมุนลูกศ 90 องศา */ }
.faqs .plus-rotate::before { content: ''; position: absolute; width: 14px; height: 2px; background: var(--color-black); top: 6px; }
.faqs .plus-rotate::after { content: ''; position: absolute; width: 2px; height: 14px; background: var(--color-black); left: 6px; }
.faqs .plus-rotate.rotate {
    transform: rotate(-90deg); /* หมุนลูกศร 90 องศา */
}
.faqs .plus-rotate.rotate::before {  width: 0; }

/* Room Lists */
.room-lists-all { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; }
.room-gallery-all {
      width: 100%;
      height: 320px;
      --swiper-navigation-color: #fff;
                --swiper-pagination-color: #fff;
                --swiper-pagination-bullet-inactive-color: rgba(255,255,255,.55);
                --swiper-pagination-bullet-inactive-opacity: 1;
                --swiper-navigation-size: 20px;  }
.room-gallery-all img{ width: 100%; height: 100%; object-fit: cover; display:block; }

/* .box-slide-room { padding: 40px 0; } */
.room-gallery-detail { height: 600px;  --swiper-navigation-color: #fff; --swiper-pagination-color: #fff; --swiper-pagination-bullet-inactive-color: rgba(255,255,255,.55); --swiper-pagination-bullet-inactive-opacity: 1; }

.room-detail { background: var(--color-f5f5f5); }
.room-detail .btn-book { margin-top: 20px; }
.room-detail-full { color: var(--color-gray);  }
.room-detail-full .sub-title { position: relative; padding-top: 40px; padding-bottom: 42px; font-size: 24px; font-weight: 500; color: var(--color-black); }
.room-detail-full .sub-title::before { content: ''; position: absolute; width: 1px; height: 24px; background: var(--color-c7c7c7); left: 5px; bottom:8px; }
.room-include { position: relative; display: grid; grid-template-columns: 1fr ;/* grid-template-columns: 1fr 1fr;*/ gap: 30px 50px; width: 100%; margin-top: 20px; margin-bottom: 30px; }
/* .room-include::before { content: ''; position: absolute; width: 1px; height: 100%; background: var(--color-c7c7c7); left: 0; right: 0; top: 0; bottom: 0; margin: auto; } */
.room-include .room-highligts { padding: 0;margin-top: 0; }
.room-include .txt-label { color: var(--color-gray); }

.icon-list { position: relative; padding-left: 20px; display: inline-flex; }
.icon-list::before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--color-c7c7c7); left: 0; top: 2px; }
.icon-list::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ccc; left: 4px; top: 6px; }

.explore-detail {  background: var(--color-f5f5f5); padding-top: 150px;   }
.explore-detail h1 {padding-bottom: 15px; font-size: 40px !important;border-bottom: 1px solid var(--color-green-bg);  }

.btn-contact { width: 100%; padding-top: 20px; display: flex; gap: 0 12px; }
.btn-contact a.btn--ghost:hover { color: var(--color-green); }

.single-detail {  background: var(--color-f5f5f5); padding-top: 150px;  }
.single-detail h1 { font-size: 40px !important; }

.special-detail { padding-bottom: 80px;  background: var(--color-f5f5f5); padding-top: 150px; }
.special-detail h1 { padding-bottom: 15px;  font-size: 40px !important;border-bottom: 1px solid var(--color-green-bg); }
/* .special-detail header.status-expire  h1 {   text-decoration: line-through;} */
.special-detail header.status-expire span { color: var(--color-red);     font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
     }
.special-detail .box-photo,.explore-detail .box-photo  { padding: 15px 0; }

/* About */

.aboutus-detail .box-one { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.aboutus-detail .box-one figure img { border-radius: 10px; }


.aboutus-location { background: var(--color-f5f5f5); }
.aboutus-location .box-one { display: grid; grid-template-columns: 1fr 1fr; gap: 40px;  }
.aboutus-location .text { order: 2; } 
.aboutus-location  figure img { border-radius: 10px; }


.aboutus-appropriate { background: var(--color-white); }
.aboutus-appropriate .box-one { display: grid; grid-template-columns: 1fr 1fr; gap: 40px;  }
.aboutus-appropriate .text {  } 
.aboutus-appropriate  figure img { border-radius: 10px; }


.aboutus-near { background: var(--color-f5f5f5); }
.aboutus-near .box-one { display: grid; grid-template-columns: 1fr 1fr; gap: 40px;  }
.aboutus-near .text { order: 2; } 
.aboutus-near  figure img { border-radius: 10px; }


/*  */
.category {  width: 100%; padding-bottom: 30px; }
.category ul { display: flex; gap: 20px;
    overflow: auto;
    padding-top: 2px;
    padding-left: 2px;
    padding-bottom: 10px;
    scrollbar-color: #eee #fff;
    scrollbar-width: thin; }
    .category li { white-space: nowrap; }
.category ul a { color: var(--color-gray); font-weight: 400; }
.category ul a:hover { color: var(--color-black); }
.category ul a.current { color: var(--color-black); text-decoration: underline; text-underline-offset: 5px; }

.contactform {  }
.contactform input,.contactform textarea {     padding: 0 0 10px 0; }
.contact-list { width: 100%; margin: 15px 0; display: flex; gap: 10px 20px; }
.contact-list a { display: inline-flex; align-items: center; }
.contact-list i {  display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center; }
.contact-list .icon-phone {  background-image: url('../images/icon-phone.svg'); }
.contact-list .icon-email {  background-image: url('../images/icon-email.svg'); }
.contactform .box-form { width: 100%; }
.contactform .box-form label { display: block; width: 100%;  margin-bottom: 0; color: var(--color-gray); }
.contactform .box-form ul { margin-bottom: 15px; }
.contactform .box-form li { padding-bottom: 10px; }
.contactform .box-form button { appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 10px 16px;
    margin-top: 10px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    font-weight: 400;
    text-transform: uppercase;
    background: var(--color-black);
    color: var(--color-white);
    transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
    user-select: none; }
.contactform .box-form button:hover { background: var(--color-green); }

/* Booking */

.bookign-stay {  padding-bottom: 80px;  background: var(--color-f5f5f5); padding-top: 150px;  }
.bookign-stay h1 { text-align: center; line-height: 1.2; font-size: 40px; }
.bookign-stay h1 span { color: var(--color-green); font-weight: 400; }
.bookign-stay .txt-thank { margin: 0 auto; text-align: center; padding-bottom: 30px; }
.bookign-stay .noti { padding-top: 30px; font-size: 14px; color: var(--color-666); }
.bookign-stay .noti p { margin-bottom: 0; }

.post-txt { font-weight: 500; }

.booking-number { background: var(--color-green-bg); width: 100%; padding: 30px 40px; }
.booking-number small {  font-size: 12px; padding-bottom: 7px;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    color: var(--color-black);
    text-transform: uppercase; }

.booking-number .txt-booking { color: var(--color-green); font-size: 30px; font-weight: 600; line-height: 1;  }

  .hotel-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-green);
    margin-bottom: 12px;
  }

  .hotel-name {
    font-size: clamp(36px, 6vw, 60px);
    font-weight: 300;
    color: var(--color-black);
    letter-spacing: 0.05em;
    line-height: 1.1;
  }

  .hotel-name span { color: var(--color-green); }

  .header-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .header-divider::before,
  .header-divider::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-green));
  }

  .header-divider::after {
    background: linear-gradient(90deg, var(--color-green), transparent);
  }

  .divider-diamond {
    width: 6px;
    height: 6px;
    background: var(--color-green);
    transform: rotate(45deg);
  }

  /* Main card */
  .booking-card {
    width: 100%;
    max-width: 840px; 
    margin: 0 auto;
    background: var(--color-f9f9f9);
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--shadow), 0 20px 60px rgba(26,24,20,0.08);
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .card-top {
    padding: 40px 40px 32px;
    border-bottom: 1px solid var(--border);
  }



  /* Form grid */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
  }

  .form-grid-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
  }

  .field-label { padding-bottom: 0; height: 24px;
    font-size: 12px;
    font-weight: 500; display: flex; flex-wrap: wrap;
    text-transform: uppercase;
    color: var(--color-666);
  }
    .field-label small { display: block; width: 100%; }
.semi-sum { align-items:flex-end; position: relative; }
    .txt-price-discount { padding-top: 5px; font-size: 14px; font-weight: 400; position: absolute; top: 12px; text-decoration: line-through; color: var(--color-aaa); }
    .txt-price-sum { display: inline-flex; padding-top: 7px; font-size: 19px; font-weight: 500; line-height: 1; }

  /* Custom select */
  .custom-select-wrapper {
    position: relative;
  }

  .custom-select {
    width: 100%;
    padding: 6px 30px 6px 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 14px;
    color: var(--color-black);
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .custom-select:focus {
    outline: none;
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
  }

  .select-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-666);
  }

  /* Date input */
  .date-input-wrapper {
    position: relative;
  }

  .date-display {
    width: 100%;
    padding: 12px 14px 12px 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 14px;
    color: var(--color-black);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
  }

  .date-display:hover,
  .date-display.active {
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
  }

  .date-icon {
    color: var(--color-666);
    flex-shrink: 0;
  }

  /* Bottom options */
  .form-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
  }

.box-in-toggle { padding-bottom: 5px; }
  .breakfast-toggle,.extrabed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .toggle-track {
    width: 30px;
    height: 16px;
    background: var(--border);
    border-radius: 11px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
  }

  .toggle-track.on { background: var(--color-green); }

  .toggle-thumb {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }

  .toggle-track.on .toggle-thumb { transform: translateX(12px); }

  .toggle-label {
    font-size: 12px;
    color: var(--color-666);
    font-weight: 400;
    letter-spacing: 0.05em;
    user-select: none;
  }

  .check-btn { display: inline-flex; justify-content: center;
    padding: 13px 32px; 
    background: var(--color-666);
    color: var(--color-white);
    border: none;
    min-height: 44px;
    border-radius: 30px; align-items: center;
    font-size: 12px;
    font-weight: 500;
    
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s;
  }

  .check-btn:hover { background: var(--color-green); }
  .check-btn:active {  }

  /* Results area */
  .results-area {
    padding: 20px 40px 30px 40px;
  }

.results-area .list-type-room .photo-room img { height: 150px; }

  .just-field { margin-top: 20px; }
  .just-field smal { color: var(--color-666); }

  .txt-subject { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; width: 100%;  font-size: 24px; font-weight: 500; }
.txt-subject::before { content: ''; position: absolute; width: 30px; height: 2px; background: var(--color-green); left: 0; bottom: -10px; }
  .txt-subject span {  margin-left: auto; font-size: 12px; color: var(--color-aaa); text-decoration: underline;
    text-underline-offset: 3px; text-transform: uppercase;  font-weight: 500; }
      .txt-subject span a { color: var(--color-666); }
      .txt-subject span a:hover { color: var(--color-green); }
  .booking-detail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
  .check-date-select-room { padding-top: 30px; }
  .check-date-select-room .box-check-date { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .check-date-select-room .box-select-room { text-align: right; display: flex; flex-direction: column; }
  .check-date-select-room .box-select-room small { margin-left: auto; }
    .check-date-select-room .day { font-weight: 500; color: var(--color-666); }
    .check-date-select-room .txt-night { font-weight: 500; }
    .check-date-select-room .txt-adults { color: var(--color-666);font-weight: 500; }
  .check-date-select-room .calendar { font-size: 19px; font-weight: 500; }
    .check-date-select-room .txt-type { padding-top: 7px; font-weight: 400; font-size: 14px; }
  .check-date-select-room .txt-type span { color: var(--color-666); }
  .check-date-select-room small {  padding-bottom: 10px;  font-size: 12px; 
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    text-transform: uppercase;
    color: var(--color-666); }

.border-bottom-none { border-bottom: none !important; }
      /* Section */
  .form-section {
    padding: 32px 40px;
    border-bottom: 1px solid var(--border);
  }

  .form-section:last-child { border-bottom: none; }

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }

  .section-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-green);
  }

  .secured2c2p { display: inline-flex; flex-direction: column; width: 100%; justify-content: center; padding-top: 20px; }
    .secured2c2p small { padding-top: 20px; }

  .section-badge {
    font-size: 12px !important; width: max-content; margin: 0 auto;
    font-weight: 500  !important;
    text-transform: uppercase  !important;
    color: var(--color-666); text-underline-offset: 0 !important;
    text-decoration: none !important;
    padding: 4px 0;
  }

  .edit-link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown-light);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }

  .edit-link:hover { color: var(--color-green); border-color: var(--color-green); }

  /* Form grid */
  .field-grid {
    display: grid; padding-top: 30px; padding-bottom: 20px;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
  }

  .field-grid.three { grid-template-columns: 1fr 1fr 1fr; }
  .field-full { grid-column: 1 / -1; }

  .field-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .required-star { color: var(--color-red); }

  .field-input {
    width: 100%;
    padding: 11px 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 16px;
    color: var(--dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
  }

  .field-input::placeholder {  opacity: 0.6; }

  .field-input:focus {
    outline: none;
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
  }

  .field-input.error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(192,57,43,0.08);
  }

  .error-msg {
    font-size: 12px;
    color: var(--color-error);
    letter-spacing: 0.03em;
    display: none;
  }

  .error-msg.show { display: block; color: var(--color-error); }

  /* Select */
  .select-wrapper { position: relative; }

  .select-wrapper select {
    width: 100%;
    padding: 11px 40px 11px 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 14px;
    color: var(--color-black);
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .select-wrapper select:focus {
    outline: none;
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
  }

  .select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-green);
  }

  .info-chip {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(107,90,62,0.12);
    border-radius: 2px;
    font-size: 13px;
    font-weight: 500;
    
    letter-spacing: 0.04em;
    margin-right: 6px;
  }


  /* Card number formatting */
  .card-number-wrapper { position: relative; }

  .card-icons {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
  }

  .card-icon {
    width: 32px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  .card-icon.visa { background: #1a1f71; color: white; }
  .card-icon.mc { background: #eb001b; color: white; position: relative; }
  .card-icon.mc::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(255,90,0,0.6);
  }

  /* Expiry row */
  .expiry-row {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    gap: 18px 24px;
  }

  /* Security note */
  .security-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 2px;
  }

  .security-note svg { flex-shrink: 0; color: var(--color-green); }

  .security-note p {
    font-size: 12px;
    color: var(--brown-light);
    letter-spacing: 0.03em;
  }

  /* Terms */
  .terms-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 40px;
    border-bottom: 1px solid var(--border);
  }
.terms-row a { display: inline-block; text-decoration: underline; }

  .custom-checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid #ff0000;
    border-radius: 2px;
    background: white;
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
  }

  .custom-checkbox.checked {
    background: var(--color-green);
    border-color: var(--color-green);
  }

  .custom-checkbox svg { display: none; }
  .custom-checkbox.checked svg { display: block; }

  .terms-text {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 0; user-select: none;
  }

  .terms-text a { display: inline; text-decoration: underline; }

  /* Pay button */
  .pay-section {
    padding: 28px 40px 36px;
    text-align: center;
  }

  .pay-btn {

  }


  .pay-btn:disabled {
opacity: .45;
    filter: grayscale(1);
    cursor: not-allowed;
    box-shadow: none; pointer-events: none;
  }

  .pay-sub {
    margin-top: 12px;
    font-size: 12px;
    color: var(--brown-light);
    letter-spacing: 0.05em;
  }

  /* Back link */
  .back-link {
    margin-bottom: 24px;
    align-self: flex-start;
    max-width: 820px;
    width: 100%;
  }

  .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown-light);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s;
  }

  .back-btn:hover { color: var(--color-green); }

  /* Success overlay */
  .success-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(26,24,20,0.6);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .success-overlay.open { display: flex; }

  .success-modal {
    background: var(--warm-white);
    border-radius: 2px;
    padding: 48px 40px;
    text-align: center;
    max-width: 440px;
    width: 100%;
    border: 1px solid var(--border);
    animation: calIn 0.3s ease;
  }

  @keyframes calIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
  }

.show-detail .field-group { gap: 0; }
  .show-detail label { color: var(--color-aaa); height: 18px; }


  /* ── Email Note ── */
  .email-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--color-green-bg);
    border-radius: 4px;
    background: var(--color-f5f5f5);
    padding: 16px 20px;
    margin-top: 30px;
  }

  .email-note svg { color: var(--color-green); flex-shrink: 0; margin-top: 1px; }

  .email-note p {
    font-size: 13px;
    line-height: 1.65; margin-bottom: 0;
  }

  .email-note strong { color: var(--dark); font-weight: 500; }

  .show-room { border-bottom: none !important; }
  .show-room .list-type-room { border-bottom: 1px solid var(--border); }
  .show-room .list-type-room:last-child { padding-bottom: 0; border-bottom: none; }
  .show-room .breakfast-toggle { cursor: default; }

  /* ── Actions ── */
  .actions-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 32px 40px;
  }


  .btn-outline {
    /*font-size: 12px;*/
    font-weight: 500;
    
    text-transform: uppercase;
    background: transparent;
    
    border: 1.5px solid var(--color-green-bg);
    padding: 14px 32px;
    border-radius: 30px;
    cursor: pointer;
    transition: border-color 0.25s, color 0.25s;
    text-decoration: none;
    display: inline-block;
  }

  .btn-outline:hover { color: var(--color-green); border: 1px solid rgba(0,0,0,.5); }


  .success-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(201,168,76,0.12);
    border: 1px solid var(--color-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--color-green);
  }

  .success-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 10px;
  }

  .success-sub {
    font-size: 14px;
    color: var(--brown-light);
    line-height: 1.6;
    margin-bottom: 28px;
  }

  .success-ref {
    font-size: 12px;
    letter-spacing: 0.15em;
    color: var(--brown-light);
    background: var(--cream);
    padding: 10px 20px;
    border-radius: 2px;
    margin-bottom: 24px;
  }

  .success-ref strong { color: var(--color-green); }

  .success-close {
    padding: 12px 40px;
    background: var(--dark);
    color: var(--color-gold-light);
    border: none;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    
    text-transform: uppercase;
    cursor: pointer;
  }

  /* Responsive */

.list-type-room-set { width: 100%; border-bottom: 1px solid var(--border); margin-top: 25px; }
.show-room .desc-room {  margin-bottom: 7px; }
.show-room .text-price-room {     grid-template-columns: 1fr !important; }
    .list-type-room { display: grid; width: 100%; padding-bottom: 20px; grid-template-columns: 1fr auto; gap: 20px;  }
    .list-type-room .photo-room { width: 200px; }
    .list-type-room .photo-room img { border-radius: 12px; }
    .list-type-room .text-price-room { display: grid; gap: 30px; grid-template-columns: 1fr 200px; }
    .list-type-room .text-price-room h3 { font-size: 21px; margin-bottom: 7px; }
    .list-type-room .desc-room { font-size: 12px; color: var(--color-666); }
    .list-type-room .price-room { text-align: right; padding-top: 5px; }
    .list-type-room .price-room .txt-nights { font-weight: 500; font-size: 14px; }
    .list-type-room .price-room .txt-price { position: relative; font-size: 19px; font-weight: 500; line-height: 1; padding-top: 5px; }

  .results-title {

    font-size: 21px;
    font-weight: 400;
    color: var(--color-green);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 28px 0 20px;
    text-align: center;
  }

  .price-table {
    width: 100%;
    border-collapse: collapse;
  }

  .price-table thead tr {
    border-bottom: 1px solid var(--border);
  }

  .price-table th {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown-light);
    padding: 0 0 12px;
    text-align: left;
  }

  .price-table th:last-child { text-align: right; }

  .price-table tbody tr {
    border-bottom: 1px solid rgba(107,90,62,0.08);
    transition: background 0.15s;
  }

  .price-table tbody tr:hover { background: rgba(201,168,76,0.04); }

  .price-table td {
    padding: 12px 0;
    font-size: 14px;
  }

  .date-chip {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(201,168,76,0.1);
    border-radius: 2px;
    font-size: 13px;
    font-weight: 500;
    
    letter-spacing: 0.03em;
    margin-right: 4px;
  }

  .price-cell {
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-black);
  }

  .price-cell .currency {
    font-size: 12px;
    color: var(--brown-light);
    margin-left: 4px;
    letter-spacing: 0.1em;
  }

  .not-available {
    color: #c0392b;
    font-size: 13px;
    font-style: italic;
  }

  .price-total-row td {
    padding: 16px 0 0;
    border-top: 1px solid var(--border) !important;
    border-bottom: none !important;
  }

  .total-label {
    font-size: 19px;
    font-weight: 600;
    
    letter-spacing: 0.05em;
  }

  .total-price { line-height: 1; padding: 15px 0; border-bottom: 3px double var(--border); display: grid; grid-template-columns: 1fr auto;
    font-size: 19px;
    font-weight: 600; align-items: flex-end;
  }

  .num-price-total { display: inline-flex; line-height: 1; position: relative; }

  .txt-price-total { font-size: 16px;  }

  .total-price .currency {
    font-size: 13px;
    color: var(--brown-light);
    margin-left: 6px;
  }

.inline-loading { display: inline-flex; padding-right: 7px; margin: auto 0; }
  .loader-spin {
    margin: 0 auto;
    width: 40px;
    height: 40px;
    border: 2px solid #eaecf1;
    border-bottom-color: var(--color-green);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }
.loader-spin.w80 { width:80px; height:80px; }

.loader-spin.w20 { width:18px; height:18px; }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 


  /* Book button */
  .book-section {
    padding: 0 40px 40px;
    text-align: center;
  }

  .book-btn { display: inline-flex; justify-content: center; min-width: 200px; align-items: center;
    padding: 16px 60px;
    background: var(--color-green);
    color: var(--color-white);
    border: none; 
    font-weight: 500; font-size: 15px;
    text-transform: uppercase; border-radius: 90px;
    cursor: pointer;
   /*transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(201,168,76,0.3);*/
    transition: all 0.3s ease;
  }

  .book-btn:hover {
    background: var(--color-green-hard); transition: all 0.3s ease;
   /* box-shadow: 0 4px 20px rgba(26,24,20,0.2);*/
  }

  .book-btn:active { /*transform: scale(0.98);*/ }

  /* ── CALENDAR ── */
  .cal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(26,24,20,0.4);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .cal-overlay.open { display: flex; }

  .cal-modal {
    background: var(--warm-white);
    border-radius: 4px;
    box-shadow: 0 24px 80px rgba(26,24,20,0.3);
    padding: 28px;
    width: 100%;
    max-width: 340px;
    animation: calIn 0.25s ease;
    border: 1px solid var(--border);
  }

  @keyframes calIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .cal-nav { user-select: none;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--color-ccc);
    border-radius: 50%;
    
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
  }

  .cal-nav:hover { border: 1px solid var(--color-666); }

  .cal-month-year { user-select: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black); text-transform: uppercase;
  }

  .cal-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
  }

  .cal-day-name { user-select: none;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-666);
    padding: 4px 0;
  }

  .cal-grid { user-select: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }

  .cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    color: var(--color-black);
    font-weight: 400;
  }

  .cal-cell:hover:not(.empty):not(.disabled) { background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.12); border-radius: 50%; }
  .cal-cell.empty { pointer-events: none; }
  .cal-cell.disabled { color: rgba(107,90,62,0.3); pointer-events: none; }

  .cal-cell.today {
    border: 1px solid var(--color-green);
    color: var(--color-green);
    font-weight: 500;
  }

  .cal-cell.selected {
    border: 1px solid var(--color-green)!important;
    background: var(--color-green) !important;
    color: var(--color-white) !important;
    font-weight: 600;
    border-radius: 50%;
  }

  .cal-cell.in-range {
    background: rgba(0,0,0,0.12);
    border-radius: 50%;
  }

  .cal-title {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-666);
    text-align: center;
    margin-bottom: 16px;
  }

  .cal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--brown-light);
    cursor: pointer;
    line-height: 1;
  }

  /* No results */
  .no-results {
    text-align: center;
    padding: 32px 0;
    color: var(--brown-light);
    font-style: italic;
    font-size: 14px;
  }


  /* Subtle shimmer on load */
/*   .booking-card {
    animation: fadeUp 0.5s ease both;
  } */

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

/**/
body > footer { position: relative; padding: 40px 0 0 0; background:var(--color-green-bg);  }
body > footer figure img { display: block; width: 100%; margin: auto; }
body > footer h2 { font-size: 30px; margin-bottom: 15px; }
body > footer > article address { font-style: normal;  }
body > footer > article address br { display: none; }
body > footer  .footer-logo-address { display: flex; flex-wrap: wrap; width: 100%; }
body > footer  .footer-logo-address .logo { display: flex; align-items: center; width: 160px; margin-right: 40px; }
body > footer .contxt { display: flex; padding-top: 6px; gap: 14px; }
body > footer .contxt span {padding-right: 15px;  border-right: 1px solid var(--color-green) }
body > footer .contxt span:last-child { border-right: none; }
body > footer .contxt a { color: var(--color-black);  }
body > footer .contxt a:hover { text-decoration: underline; text-decoration: underline; text-underline-offset: 3px;  }


body > footer aside { margin: 40px 0 20px 0; padding: 25px 0; width: 100%; display: grid; gap: 30px; grid-template-columns: 1fr 1fr 1fr 1fr;  border-top: 1px solid var(--color-green-line); /*border-bottom: 1px solid var(--color-green-line);*/ }
body > footer aside ul { display: grid; }
body > footer aside li { padding: 5px 0;  }
body > footer aside .subject { color: var(--color-black); text-transform: uppercase; font-weight: 600; padding-bottom: 10px; }
body > footer aside .subject a { color: var(--color-black);  }
body > footer aside li a { display: inline-block; color: var(--color-black);  font-weight: 300; line-height: 1.2; }
body > footer aside li a:hover { text-decoration: underline; text-decoration: underline; text-underline-offset: 3px; color: var(--color-black); }
    
body > footer .copy { padding: 25px 0; font-size: 14px;  display: flex; width: 100%; color: var(--color-green-mini-text); background: var(--color-green); }
body > footer .copy ul { display: flex; flex-wrap: wrap; gap: 10px;  }
body > footer .copy a { color: var(--color-green-mini-text); }
body > footer .copy a:hover { color: var(--color-white); }
body > footer .siteby { margin-left: auto; display: flex; flex-wrap: wrap; text-align: center; font-size:14px; }
body > footer .siteby a { margin-left: 5px; text-decoration:none; }

.editor { position: relative; width: 100%; overflow-x: hidden; color: var(--color-gray); }
.editor hr { border: 0; height: 1px; margin:30px 0; background-color: var(--color-ddd);  }
.editor a { display: inline-flex; text-decoration: underline; font-weight: 600; }
.editor h2 { padding-top: 20px; font-size: 30px;color: var(--color-black);  }
.editor h3 { padding-top: 20px; font-size: 24px; color: var(--color-black); }
.editor h4 { font-size: 18px; color: var(--color-black); }
.editor strong { font-weight: 600; }
.editor ul { padding-left: 30px; padding-bottom: 20px; }
.editor ul li { list-style-type: disc; padding-bottom: 10px; }
.editor ul li ul li { list-style-type: circle;padding-bottom: 10px;  }
.editor ol { padding-left: 30px; padding-bottom: 20px; }
.editor ol li ol li { list-style-type: decimal; padding-bottom: 10px; }
.editor ol li { list-style:decimal; padding-bottom: 10px; }
.editor ul.no-lists li, .editor ol.no-lists li {list-style-type: none !important;  }
.editor > figure { margin-bottom: 25px; }
.editor img { margin: 0 auto; min-width: inherit !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important; }

.editor .box-table {  position: relative; width: 100%; margin-bottom: 30px;   scrollbar-color: #eee #fff; scrollbar-width: thin;   }
.editor table { display: table; 
    border-collapse: separate;
    box-sizing: border-box; min-width: 680px;
    text-indent: initial;
    unicode-bidi: isolate; 
    border-spacing: 0; width: 100%; 
    border-color: gray; }
.editor thead {
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: gray;
}
.editor thead th { padding: 10px ; text-align: left; border-bottom: 2px solid #ccc; }
.editor tr td { padding: 10px; text-align: left;border-bottom: 1px solid #e5e5e5; }


/* editor */
.list-ul-ol { padding-left: 20px; padding-bottom: 20px; }
.list-ul-ol ul li { list-style-type: circle; }
.list-ul-ol ol li { list-style:decimal; }

/**/
.arrow-rotate {
    display: inline-block; position: absolute; right: 15px; top: 15px; color: var(--color-green); font-size: 24px;
    transition: transform 0.5s ease; /* ทำให้การหมุนเป็น smooth */
    transform: rotate(90deg); /* หมุนลูกศ 90 องศา */
}
.arrow-rotate.rotate {
    transform: rotate(-90deg); /* หมุนลูกศร 90 องศา */
}

/* --- Tabs  --- */
.tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 0 auto;

        }
.tab-button {
            padding: 15px 20px;
            border: none;
            background: #ddd;
            cursor: pointer;
             color: var(--color-6060);
            font-size: 20px;
            font-weight: 700;
            transition: 0.3s;
            border-radius: 10px 10px 0 0;
            border-bottom: 1px solid var(--color-black);
            line-height:1; text-transform:uppercase;
        }
.tab-button.active {
            background: var(--color-blue);
            color: white;
            font-weight: bold;
            border-bottom: 1px solid var(--color-blue);
        }
/* --- Content --- */
.tab-content {
            display: none;
             width: 100%;
            padding: 50px 70px; margin-bottom: 10px;
            background: var(--color-white);
            border-radius: 30px;
        }
.tab-content h3 { letter-spacing: -1px; line-height:1; font-weight:700; font-size:30px; }
.tab-content figure {
    float: right;
    margin: 0  0 20px 30px;
}
.tab-content img { width: 100%; max-width:440px; }
.tab-content cite { display: block; color:var(--color-blue); font-weight:700; font-style:normal; padding-bottom:20px; text-transform:uppercase; }
.tab-content.active {
display: block;
 }
.tab-content p { letter-spacing:-0.5px }

/**/
.lazy-loaded {
    transition: all .3s ease;
    opacity: 1
}
img[data-src] {
    opacity: 0
}
img.lazyloaded {
    opacity: 1;
    transition: all .3s ease
}

.g-recaptcha {
    display: flex;
    justify-content: center;
    padding-top: 15px
}

.hide {
    display: none !important
}
.show {
    display: block !important
}
.error {
    color: #fa5058;
    
    font-weight: 400
}


/* ── Pagination Library CSS ── */
#pagination { margin-top: 30px; width: 100%; justify-content: center; }
.pg-simple {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pg-simple button {
  height: 38px;
  padding: 0 16px;
  border: 0.5px solid var(--color-ccc);
  background: var(--color-white);
  color: var(--color-black);
  font-size: 12px; 
  border-radius: 8px;
  cursor: pointer;
  display: flex; text-transform: uppercase;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}

.pg-simple button:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #aaa;
}

.pg-simple button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pg-simple .pg-info {
  font-size: 12px;
  color: var(--color-666);
  min-width: 80px;
  text-align: center;
}

.pg-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Call to Action */
.call-to-action {
    position: fixed;
    width: 45px;
    bottom: 15px;
    right: 15px;
    z-index: 9999
}

.call-to-action .box {
    position: relative;
    width: 45px;
    height: 45px
}

.call-to-action .box span {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--color-green);
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease
}

.call-to-action .box span:hover {
    background: var(--color-green);
    transition: all .3s ease
}

.call-to-action .box::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    left: -50%;
    top: 0;
    right: -50%;
    bottom: 0;
    margin: auto;
    background-color: #000;
    border-radius: 50%;
    -webkit-animation: sk-scaleout 1.7s infinite ease-in-out;
    animation: sk-scaleout 1.7s infinite ease-in-out
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.click-call {
    position: relative;
    text-indent: -9999px;
    height: 100%;
    cursor: pointer
}

.call-to-action .icon-chat {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-green-hard) url(../images/call-action/icon-chat.svg) no-repeat center;
    background-size: 60%;
    border-radius: 50%
}

.call-to-action .icon-close {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-green-hard) url(../images/call-action/icon-close.svg) no-repeat center;
    background-size: 50%;
    border-radius: 50%
}

.call-zone-show {
    display: block !important;
    -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transition: all .6s cubic-bezier(.645, .045, .355, 1)
}

.call-to-action ul {
    display: none;
    position: absolute;
    width: 45px;
    bottom: 54px;
    right: 0;
    -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transition: all .6s cubic-bezier(.645, .045, .355, 1)
}

.call-to-action li {
    position: relative;
    width: 45px;
    padding: 4px 0;
    border-radius: 50%;
    overflow: hidden
}

.call-to-action li a {
    display: block;
    position: relative;
    width: 100%;
    height: 45px;
    border-radius: 50%;
    overflow: hidden
}

.call-to-action li .btn-line {
    display: block;
    position: relative;
    width: 100%;
    height: 45px;
    border-radius: 50%;
    overflow: hidden; cursor: pointer;
}

.call-to-action li a i {
    text-indent: -9999px
}

.call-to-action .icon-ig {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #ed1a6e url(../images/call-action/icon-call-ig.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-youtube {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #0184ff url(../images/call-action/icon-call-youtube.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-fbmessage {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #0184ff url(../images/call-action/icon-call-fbmessage.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-facebook {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #0184ff url(../images/call-action/icon-call-facebook.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-whatsapp {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #32BA46 url(../images/call-action/icon-call-whatsapp.svg) no-repeat center;
    background-size: 50%
}


.call-to-action .icon-line {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #00c300 url(../images/call-action/icon-call-line.svg) no-repeat center;
    background-size: 60%
}

.call-to-action .icon-tel {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #f9af28 url(../images/call-action/icon-call-tel.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-mail {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #ff8935 url(../images/call-action/icon-call-mail.svg) no-repeat center;
    background-size: 50%
}

.call-to-action-box {
    position: relative;
    width: 100%;
    max-width: 320px;
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2)
}

.call-to-action-box .title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    padding: 0;
    background: var(--color-whitedrop)
}

.call-to-action-box .title::before {
    display: none
}

.call-to-action-box .title h3 {
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 40px;
}

.call-to-action-box .box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 30px
}

.call-to-action-box .box dl {
    display: flex;
    flex-wrap: wrap
}

.call-to-action-box .box dd {
    width: 100%;
    padding-bottom: 10px
}

.call-to-action-box .box a {
    display: inline-flex
}

.call-to-action-box .box img {
    display: block;
    padding: 0
}

.call-to-action-box .box input[type=text] {
    width: 100%
}

.call-to-action-box .box textarea {
    height: 100px
}

.call-to-action-box .box .btn-submit {
    padding-top: 0
}

.call-to-action-box .box .btn-submit button {
    width: 100%;
    min-width: 100%
}

.call-line .title {
    margin-bottom: 0;
    background: #00c300
}
.call-line .title::after { display: none; }


.call-line .title h3 {
    color: #fff
}

.call-line .fancybox-close-small::after {
    color: #fff
}

.call-fbmessage .title {
    background: #0084ff
}

.call-fbmessage .title h3 {
    color: #fff
}

.call-fbmessage .fancybox-close-small::after {
    color: #fff
}

/*  */

.cookie-consent {
    position: fixed;
    bottom: 10px;
    right: 40px;
    left: 40px;
    
    z-index: 4
}

.cookie-consent .box {
    position: relative;    width: 100%; margin: 0 auto;
    max-width: 1200px;
    display: flex;     padding:  20px;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    background: #275638;
    border-radius: 4px;
    box-shadow: 0 1px 8px 1px rgb(12 23 83 / 20%);
}

.cookie-consent .text {
    flex: 1;
    padding-right: 20px;
    color: #fff
}

.cookie-consent .text p {
    margin-bottom: 0
}

.cookie-consent .text a {
    display: inline-flex;
    text-decoration: underline;
    color: #fff
}

.cookie-consent .text a:hover {
    text-decoration: none
}

.cookie-consent .btn-consent {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap
}

.cookie-consent .btn-consent span {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
    width: 150px;
    height: 40px;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
    background: var(--color-green);
    border-radius: 30px;
    transition: all .3s ease
}

.cookie-consent .btn-consent span:hover {
    color: var(--color-green);
    background: var(--color-white);
    transition: all .3s ease
}

/*  */

.delay-03 {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}
.delay-05 {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.delay-1 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.delay-15 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.delay-2 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.delay-25 {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s
}

.delay-3 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.delay-35 {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s
}

.delay-4 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.delay-45 {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s
}

.delay-5 {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}


.delay-s1 {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.delay-s2 {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.delay-s3 {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.delay-s4 {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.delay-s5 {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.delay-s6 {
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}
.delay-s7 {
    -webkit-animation-delay: .7s;
    animation-delay: .7s
}
.delay-s8 {
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}
.delay-s9 {
    -webkit-animation-delay: .9s;
    animation-delay: .9s
}
.delay-s10 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}


/* Animation */
.animated {
    -webkit-animation-duration: .7s;
       -moz-animation-duration: .7s;
         -o-animation-duration: .7s;
            animation-duration: .7s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
    
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }
    
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/*  */
.mb { margin-bottom: 0 !important; }
.mt { margin-top: 0 !important; }
.mr { margin-right: 0 !important; }
.ml { margin-left: 0 !important; }

.pb { padding-bottom: 0 !important; }
.pt { padding-top: 0 !important; }
.pl { padding-left: 0 !important; }
.pr { padding-right: 0 !important; }

/* Google Map */
 .map-wrap {
    width: 100%;
  }

.map-wrap .btn-get { z-index: 999; position: absolute; top: 0px; right:15px;  width: 180px; display: inline-flex; padding: 20px 0;}

.map-wrap .btn-get a { position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 180px;
    height: 34px;
    padding: 0 10px;
    
    font-weight: 400;
    text-align: center;
    color: var(--color-white) ;   text-transform: uppercase;
    font-size: 12px; line-height: 1;
     border-radius: 999px; user-select: none;
    background: var(--color-black); }
    .map-wrap .btn-get a:hover { background: var(--color-green); }
.map-wrap span { display: inline-flex; align-items: center; }
.map-wrap span svg {
    width: 14px;
    height: 14px;
    margin-right: 10px;
}

 .map-wrap span path { fill: var(--color-white); }

  .hotel-map {
    width: 100%;
    height: 450px;
    overflow: hidden;
    background: #e9e9e9;
  }

  @media (max-width: 768px) {
   
  }