/*!
Theme Name: nt-theme
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nt-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

nt-theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@font-face {
    font-family: 'Tomatoes';
    src: url('fonts/Tomatoes.woff2') format('woff2'),
        url('fonts/Tomatoes.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DFVN Catchy Mager';
    src: url('fonts/DFVN-CatchyMager-Regular.woff2') format('woff2'),
        url('fonts/DFVN-CatchyMager-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    color: #1f1f1f;
    font-style: normal;
    font-siZE: 14px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}
h1, h2, h3, h4, h5, h6{
    font-family: "Playfair Display", serif;
}
header.side-header {
    position: relative;
    z-index: 2;
    background-color: #d184c2;
    padding: 5px 0px;
}
img{
    max-width: 100%;
}
a.logo img {
    margin: 0 auto;
    display: block;
    max-height: 62px;
}

.slick-next {
    right: 0;
    width: 31px;
    font-size: 35px;
}
.list-room {
    background: #fff7f9;
    border-radius: 12px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    font-family: sans-serif;
    padding-bottom: 12px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(225, 175, 209) 0px 1px 3px 0px, rgb(225, 175, 209) 0px 1px 2px -1px
}
.slick-prev:before, .slick-next:before{
    font-size: 30px;
}.slick-prev {
    left: 0;
    z-index: 2;
}
.slick-dots{
    bottom: 25px;
}
.slick-dots li button:before {
    font-family: 'slick';
    font-size: 10px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .5;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before{
    color: #fff;
    opacity: 1;
}
.room-row {
    display: grid
;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}.title-center h2 {
    color: #d184c2;
    font-size: 25px;
    font-family: Helvetica, sans-serif;
}.title-center p {
    color: rgb(75, 85, 99);
    font-size: 18px;
    font-weight: 600;
}.title-center img {
    max-width: 70px;
}
.title-center{
    margin: 20px 0px;
    text-align: center;
}
.info-room {
    padding: 12px;
}
.info-room h3 a {
    color: #d184c2;
    text-decoration: none;
    margin-bottom: 5px;
    display: block;
}.info-room p {
    color: rgb(75, 85, 99);
}p.price-3h {
    color: rgb(116, 105, 182);
    font-weight: bold;
    margin-top: 10px;
}
main#content {
    background: rgb(255 239 254);
}
section.room {
    padding: 40px 15px;
}.container-footer>a>img {
    max-width: 100px;
}
footer {
    background: #d184c2;
    padding: 30px 30px;
    color: #fff;
    text-align: center;
}ul.list-social svg {
    fill: #fff;
    font-size: 20px;
    width: 20px;
}
ul.list-social {
    display: flex
;
    align-items: center;
    justify-content: center;
    list-style: none;
    color: #fff !important;
    gap: 20px;
    padding: 0;
}
.copyright {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid;
}.list-room img {
    max-width: 100%;
    height: auto;
}
.booking-wrapper {
  overflow-x: auto;
  max-width: 100%;
}

.booking-table table {
    border-collapse: collapse;
    width: max-content;
    min-width: 480px;
    font-family: sans-serif;
    background-color: #fff5eb;
}

.booking-table th,
.booking-table td {
  border: 1px solid #f2d5d5;
  text-align: center;
  padding: 8px;
  min-width: 100px;
  background-color: #fff5eb;font-size: 10px;
}

.booking-table thead th {
    background-color: #d184c2;
    color: white;
    font-weight: normal;
    font-size: 10px;
}
.room-name {
  background-color: #e17eb7;
  color: white;
}

.room-name span {
    font-weight: normal;
    font-size: 10px;
}
.sticky-col {
  position: sticky;
  left: -1px;
  z-index: 2;
  background-color: #ffe3f3;
  min-width: 80px;
}
td.not-book span {
    background-color: transparent;
    border-radius: 12px;
    padding: 3px 17px;
    display: inline-block;
    font-size: 10px;
    color: #d184c2;
    border: 1px solid #d184c2;
   
    width: 60px;
    height: 19px;
    cursor: pointer;
}

.booking-table tbody .sticky-col {
  z-index: 1;
}
.sticky-col {
  position: sticky;
  background-color: #ffe3f3;
  z-index: 2;
}

/* Cột “Thứ” luôn nằm ngoài cùng trái */
.col-thu {
  left: -1px;
  z-index: 3;
}

/* Cột “Ngày” nằm ngay sau cột “Thứ” */
.col-ngay {
    left: 77px;
    z-index: 2;
}
/* Tùy chỉnh thêm nếu cần */
.booking-table th,
.booking-table td {
  min-width: 80px;
}
/* Giá tiền và trạng thái */
.price {
    background-color: transparent;
    border-radius: 12px;
    padding: 3px 17px;
    display: inline-block;
    font-size: 10px;
    color: #d184c2;
    border: 1px solid #d184c2;
    box-shadow: -1px 0px 14px 0px #d184c2;
    -webkit-box-shadow: -1px 0px 14px 0px #d184c2;
    -moz-box-shadow: -1px 0px 14px 0px #d184c2;
    width: 60px;
}
.booked {
    background-color: #d184c2;
    height: 19px;
    width: 60px;
    display: inline-block;
    border-radius: 8px;
    border-radius: 12px;
}
section.booking-home>h2 {
    color: #d184c2;
    text-align: center;
    margin-bottom: 10px;
    font-size: 24px;
}
.note-booking ul
 {
    display: flex
;
    align-items: center;
    list-style: none;
    padding: 15px;
    gap: 10px;
    font-size: 12px;
}
.note-booking ul li{
       display: flex
;
    align-items: center;
    gap: 5px;
}
li.booked-note span {
    background-color: #d184c2;
    height: 21px;
    width: 35px;
    display: inline-block;
    border-radius: 12px;
}
li.not-book-note span {
    background-color: transparent;
    border-radius: 12px;
    height: 21px;
    display: inline-block;
    font-size: 10px;
    color: #d184c2;
    border: 1px solid #d184c2;
  
    width: 35px;
}
li.booking-note span{
    background-color: #e5b4dc;
    height: 21px;
    width: 35px;
    display: inline-block;
    border-radius: 12px;
}
li.sale-note span {
      background-color: transparent;
    border-radius: 12px;
    height: 21px;
    display: inline-block;
    font-size: 10px;
    color: #d184c2;
    border: 1px solid #d184c2;
    box-shadow: -1px 0px 14px 0px #d184c2;
    -webkit-box-shadow: -1px 0px 14px 0px #d184c2;
    -moz-box-shadow: -1px 0px 14px 0px #d184c2;
    width: 35px;
}
.result-total {
    display: flex
;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}
a.booking-now-home {
    background: #d184c2;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 10px;
}span.total-home {
    color: #e672a1;
}
td.bookes.selected span {
    background-color: #e5b4dc !important;
    border-color: #e5b4dc !important;
}td.not-book span.price.pink:empty {
    box-shadow: none;
}
span.discount-note {
    display: block;
    width: 100%;
    font-size: 13px;
    font-weight: normal;
    margin-top: 5px;
}
td.not-book.bookes.selected span.price.pink {
    box-shadow: none;
}booking-info { max-width: 400px; margin: auto; font-family: sans-serif; background: #fff5eb; padding: 20px; border-radius: 10px; }
.booking-info h2 { text-align: center; color: #d184c2; }
.booking-info label {
    display: block;
    margin-bottom: 15px;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}
.booking-info input[type="text"],
.booking-info input[type="email"],
.booking-info input[type="tel"],
.booking-info textarea { width: 100%; padding: 8px; margin-top: 5px; border-radius: 5px; border: 1px solid #ccc; }
.booking-info textarea { resize: vertical; height: 80px; }
.guest-control {
    display: flex;
    gap: 0px;
    align-items: center;width: 100%;
}
.guest-control button {
    padding: 5px 10px;
    width: 30px;
    height: 30px;
    border: 1px solid #d184c2;
    background: #fff;
}
.result-total { padding: 10px; border-radius: 5px; text-align: center; }
.result-total .total-home { color: #d184c2; font-weight: bold; font-size: 20px; font-family: "Quicksand", sans-serif;}
.discount-note { color: red; font-size: 14px; margin-top: 5px; }
.note {
    font-size: 12px;
    color: #f44336;
    margin-top: 4px;
    margin-bottom: 20px;
}
.submit-booking
 {
    width: 135px;
    padding: 10px;
    background: #d184c2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.booking-table tbody tr {
  display: none;
}button#loadMoreBtn svg {
    width: 15px;
    fill: #d184c2d6;
    margin-right: 5px;
}
button#loadMoreBtn {
    display: flex
;
cursor: pointer;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 10px;
    padding-bottom: 10px;
    background: transparent;
    border: none;
    width: 100px;
    color: #d184c2d6;
    font-weight: bold;
}
.cmnd {
  display: flex;
  gap: 20px;
}

.upload-box {
  width: 50%;
  height: 140px;
  border: 2px dashed #d184c2;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #fffaf5;
  position: relative;
  transition: border-color 0.3s;
}
.upload-icon svg {
    width: 44px;
}
.upload-box:hover {
  border-color: #ff9999;
}

.upload-icon {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}section.booking-info {
    padding: 0px 15px;
    padding-top: 50px;
}
.upload-icon img {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}
.guest-control input {
    height: 30px;
    width: calc(100% - 60px);
    border-left: none;
    border-right: none;
    border-top: 1px solid #d184c2;
    border-radius: 0px;
    border-bottom: 1px solid #d184c2;
    text-align: center;
}
.coppon-tr {
    display: flex
;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.coppon-tr input {
    margin: 0px !important;
    height: 34px;
}
button#apply-coupon {
    width: 100px;
    height: 34px;
    border: 1px solid #d184c2;
    background: #d184c2;
    color: #fff;
    font-weight: bold;
}.coppon-tr input {
    margin: 0px !important;
    height: 34px;
    border-radius: 0px !important;
}
.box-button-booking {
    display: flex
;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 30px;
    margin-top: 10px;
}

a.button.btn-back {
    width: 104px;
    padding: 8px;
    border: 1px solid #d184c2;
    color: #d184c2;
        border-radius: 10px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: flex
;
    align-items: center;
    justify-content: space-between;
}
section.booking-home {
    padding: 40px 15px;
}
.total-fixed h3 {
    display: flex
;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 20px;
}
.total-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    max-width: 100vw;
    max-width: 480px;
    left: calc(50% - 240px);
    padding: 10px;
    border-top: 1px solid #e672a1;
}
.total-fixed h3{
    font-family: "Quicksand", sans-serif;
}
a.booking-now-home svg, button.submit-booking svg {
    width: 17px;
}
a.booking-now-home, button.submit-booking {
    display: flex
;
    width: 109px;
    align-items: center;
    justify-content: space-between;
}a.button.btn-back svg {
    width: 20px;
}
.total-fixed span.total-home {
    color: #000;
    font-size: 20px;
}
.top-info-room {
    display: flex
;
    padding: 15px;
    align-items: center;
    justify-content: space-between;
    background: #ffefef;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}
.top-info-room h3 {
    font-size: 20px;
    color: #d184c2;
}.left-top-info-room p {
    color: #7469b6;
    font-weight: bold;
    margin: 3px 0px;
}
a.btn-primary {
    display: block;
    background: #d184c2;
    color: #fff;
    padding: 7px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
}
.list-widget {
    display: grid
;
    grid-template-columns: 1fr 1fr;
    padding: 40px 15px;
    gap: 20px;
}
.widget-item {
    display: flex
;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
    border-radius: 8px;
    padding: 10px;
    color: #000;
    font-weight: 500;
    font-size: 12px;
}
.widget-item svg {
    width: 20px;
    color: #6b7280;
}
.bottom-info-room {
    background: #fff;
    padding: 20px;
    line-height: 1.7;
}.bottom-info-room {
    background: linear-gradient(to right top, rgb(237 246 255), rgb(255, 255, 255), rgb(227 241 255));
    padding: 20px;
    line-height: 1.7;
    font-weight: 500;
}.bottom-info-room h3 {
    font-size: 30px;
    color: #d184c2;
    text-align: center;
    margin-bottom: 10px;
}
.booking-social-fixed {
    align-items: center;
    position: fixed;
    bottom: 0;
    max-width: 480px;
    background: #89497c;
    width: 100%;
    height: 64px;
    padding: 18px 10px;
    z-index: 9;
}.booking-social-fixed svg {
    width: 30px;
    color: #ffff;
    height: auto;
}.list-icon-room {
    display: flex
;
    /* align-items: center; */
    justify-content: space-between;
}.calendar-icon svg {
    color: #d184c2;
}
.calendar-icon {
    height: 50px;
    width: 50px;
    text-align: center;
    border: 3px solid #d184c2;
    background: #fff;
    border-radius: 50%;
    line-height: 64px;
    text-align: center;
    display: block;
    margin: 0 auto;
}.calendar-fixed {
    margin-top: -35px;
    text-align: center;
}.calendar-fixed a {
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}
.qr-page h2 {
    text-align: center;
    font-size: 27px;
    margin-top: 30px;
    text-align: center;
    margin-bottom: 10px;
    font-size: 23px;
    color: #d184c2;
    text-align: center;
    padding-top: 19px;
    padding-bottom: 20px;
    margin: 0px;
}.qr-page {
    text-align: center;
    padding: 50px 0px;
}.qr-page img {
    max-width: 200px;
    margin-bottom: 20px;
}
    div#payment-status {
    padding-bottom: 20px;
}
.time-icon svg{
    max-width: 15px;
}
.time-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.slider {
  display: flex;
  transition: transform 0.3s ease;
  user-select: none; /* tránh chọn text khi kéo */
  touch-action: pan-y; /* cho phép cuộn dọc khi cần */
  cursor: grab;
}
.room-template-default footer {
    padding-bottom: 100px;
}
.slick-prev, .slick-next {
    font-size: 0px !important;
}.booking-table {
    padding-bottom: 15px;
}
@media (max-width: 448px) {
    .total-fixed{left: 0;}
       .note-booking ul {
        gap: 15px;
        font-size: 10px;
        padding: 15px 0px;
    }
}