/*
Theme Name: vietsite
Description: This is a child theme for Flatsome Theme
Author: vietsite Team
Template: flatsome
Version: 3.1
*/
/*************** ADD CUSTOM CSS HERE.   ***************/
/* import font */
@font-face {
  font-family: "SF Pro Display";
  src: url("assets/fonts/SFProDisplay/SFProDisplay-LightItalic.woff2") format("woff2"),
    url("assets/fonts/SFProDisplay/SFProDisplay-LightItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("assets/fonts/SFProDisplay/SFProDisplay-BlackItalic.woff2") format("woff2"),
    url("assets/fonts/SFProDisplay/SFProDisplay-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("assets/fonts/SFProDisplay/SFProDisplay-Bold.woff2") format("woff2"),
    url("assets/fonts/SFProDisplay/SFProDisplay-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("assets/fonts/SFProDisplay/SFProDisplay-Medium.woff2") format("woff2"),
    url("assets/fonts/SFProDisplay/SFProDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("assets/fonts/SFProDisplay/SFProDisplay-Thin.woff2") format("woff2"),
    url("assets/fonts/SFProDisplay/SFProDisplay-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("assets/fonts/SFProDisplay/SFProDisplay-HeavyItalic.woff2") format("woff2"),
    url("assets/fonts/SFProDisplay/SFProDisplay-HeavyItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("assets/fonts/SFProDisplay/SFProDisplay-Regular.woff2") format("woff2"),
    url("assets/fonts/SFProDisplay/SFProDisplay-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("assets/fonts/SFProDisplay/SFProDisplay-ThinItalic.woff2") format("woff2"),
    url("assets/fonts/SFProDisplay/SFProDisplay-ThinItalic.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("assets/fonts/SFProDisplay/SFProDisplay-SemiboldItalic.woff2") format("woff2"),
    url("assets/fonts/SFProDisplay/SFProDisplay-SemiboldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.banner h1,
.banner h2 {
  font-weight: 500 !important;
}

body {
  font-family: "SF Pro Display", sans-serif !important;
}

.nav>li>a,
.mobile-sidebar-levels-2 .nav>li>ul>li>a {
  font-family: "SF Pro Display", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical>li>a {
  font-family: "SF Pro Display", sans-serif !important;
}

.alt-font {
  font-family: "SF Pro Display", sans-serif !important;
}

/* style home page */
.header:not(.transparent) .header-bottom-nav>li>a {
  color: rgb(0, 108, 228) !important;
  font-size: 18px;
  font-weight: 500;
}

.header:not(.transparent) .header-bottom-nav>li>a:hover,
.header:not(.transparent) .header-bottom-nav>li.active>a,
.header:not(.transparent) .header-bottom-nav>li.current>a,
.header:not(.transparent) .header-bottom-nav>li>a.active,
.header:not(.transparent) .header-bottom-nav>li>a.current {
  color: #ff5722 !important;
}

.header:not(.transparent) .header-bottom-nav.nav li.has-icon-left>a>i {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(8, 145, 178, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: rgb(0, 108, 228);
}

.header:not(.transparent) .header-bottom-nav.nav li.has-icon-left>a:hover>i,
.header:not(.transparent) .header-bottom-nav.nav li.has-icon-left>a.active>i,
.header:not(.transparent) .header-bottom-nav.nav li.has-icon-left>a.current>i,
.header:not(.transparent) .header-bottom-nav.nav li.has-icon-left.active>a>i,
.header:not(.transparent) .header-bottom-nav.nav li.has-icon-left.current>a>i {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgb(0, 108, 228);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #fff;
}

.glink {
  color: #fff;
}

.vs_slider {
  padding: 2vw !important;
}

.vs_slider .box-image {
  border-radius: 20px;
}

.section-title-normal span {
  border-bottom: 0;
}

.section-title-normal {
  border-bottom: 0;
  margin-bottom: 0;
}

.section-title {
  font-size: 1.5rem;
}

.vs_why-chose .col .icon-box {
  border-radius: 8px;
  height: 100%;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.vs_why-chose .col .icon-box h3 {
  color: var(--fs-color-primary);
  text-align: center;
}

.product-small .box .box-image img {
  aspect-ratio: 4/3;
  object-fit: cover;
}

.product-small .product-title a {
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-small.box {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
  border-radius: 10px;
  border-radius: 10px;
  background-color: #fff;
}

.product-small .price-wrapper {
  margin-top: 12px;
}

.product-small .box-text {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

.section-title b {
  background-color: transparent;
}

.product-small .price-wrapper br {
  display: none;
}

.product-small .price-wrapper ins {
  display: block;
  margin-top: 10px;
}

.widget_media_image img {
  transition: .4s ease-out;
  border-radius: 8px;
}

.widget_media_image img:hover {
  transform: scale(1.01);
  transition: .4s ease;
}

.product_list_widget del,
.product_list_widget del span.amount,
.product-small .price-wrapper del span.amount,
.product-small .price-wrapper del {
  color: #404040;
  font-size: 14px;
  font-weight: 400;
}

.product_list_widget span.amount,
.product-small .price-wrapper span.amount {
  color: var(--primary-color);
  font-weight: bold;
  margin-left: 0px;
  font-size: 18px;
}

.product-small.box {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
  border-radius: 10px;
  border-radius: 10px;
}

.product-small .box-image {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.box-vertical .box-image {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.vs_tour .tabbed-content .nav {
  gap: 20px;
}

.vs_tour .tabbed-content .nav li {
  padding: 0 20px;
}

.vs_tour .tabbed-content .nav li a {
  font-size: 1rem;
  background-color: transparent;
}

.vs_tour .tabbed-content .nav li.active {
  background: var(--fs-color-primary);
  color: #fff;
  border-radius: 8px;
}

.vs_tour .tabbed-content .nav li.active a {
  color: #fff;
}

.vs_tour .tabbed-content .nav li a:before {
  display: none;
}

.vs_tour .tabbed-content .nav li:not(.active):hover a {
  color: var(--fs-color-primary);
}

.product-small .box-text {
  padding-bottom: 15px;
}

.product-small .box-text .vs-product-archive-info {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
}

.product-small .box-text .vs-product-archive-info .vs-info-item {
  font-size: 0.8rem;
  width: 100%;
  color: #666;
}

.product-small .box-text .vs-product-archive-info .vs-info-item i {
  width: 14px;
  text-align: center;
  font-size: 0.7rem;
}

.product-small .box-text .price-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  align-items: center;
  justify-content: space-between;
}

.product-small .box-text .price-wrapper .vs-view-detail {
  margin: 0;
  border-radius: 4px;
  text-transform: none;
  font-size: 0.8rem;
}

.vs_review .slider .row {
  opacity: 1 !important;
}

.vs_review .slider .row .col-inner {
  padding: 10px;
}

.vs_review .slider .row .col-inner .content-reivew {
  font-size: 1.1rem;
  padding: 15px;
}

.vs_review .slider .box-review .icon-box-text {
  position: relative;
}

.vs_review .slider .box-review .icon-box-text:after {
  content: "\f10d";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 1.6rem;
  color: #fff;
  position: absolute;
  z-index: 1;
  top: 0px;
  right: 10px;
}

.vs_review .slider .box-review .box-image:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 224px;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.8) 75.5%);
  pointer-events: none;
}

.vs_review .slider .icon-box .icon-box-img {
  width: 70px !important;
  border: 2px dashed white;
  border-radius: 99px;
  padding: 5px;
  height: 70px;
}

.vs_review .slider .icon-box .icon-box-text {
  font-size: 1.1rem;
}

.vs_review .slider .icon-box {
  text-shadow: none;
}

.vs_review .box-review {
  border-radius: 10px;
  overflow: hidden;
}

.vs_review .slider .icon-box .icon-box-img img {
  aspect-ratio: 1/1;
  border-radius: 100px;
  overflow: hidden;
  object-fit: cover;
  padding: 0;
}

.flickity-page-dots .dot {
  background: black;
  border-color: black !important;
}

.flickity-page-dots .dot.is-selected {
  border-color: var(--primary-color) !important;
  width: 50px;
  border-radius: 8px;
  background: var(--primary-color) !important;
}

.product-main .product-title .is-divider {
  display: none;
}

.product-main .product-title h1 {
  color: var(--fs-color-secondary);
  margin-bottom: 0;
}

.product-main .col-box>.col-inner {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.product-main .col-box>.col-inner .title-single {
  color: var(--fs-color-primary);
  font-size: 1.8rem;
}

.product-main .product-gallery {
  margin-bottom: 20px;
}

.product-main .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  border-radius: 8px;
  overflow: hidden;
}

.product-main .product-thumbnails .col {
  flex-basis: 20%;
  max-width: 20%;
}

.product-main .product-thumbnails .col a {
  border-radius: 5px;
  overflow: hidden;
}

.product-main .product-thumbnails .col img {
  aspect-ratio: 5/3;
  object-fit: cover;
}

#form-booking {
  border-radius: 10px;
}

#form-booking .btn-booking {
  display: block;
}

#form-booking .btn-booking span {
  display: block;
  font-size: 1.2rem;
}

#form-booking .title h3 {
  color: var(--fs-color-primary);
  font-size: 1.6rem;
  margin-bottom: 0;
}

#form-booking .title {
  margin-bottom: 15px;
}

#form-booking .btn-booking p {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  margin-bottom: 0;
}

#form-booking .booking-field {
  margin-bottom: 15px;
}

#form-booking .booking-field label {
  margin-bottom: 0;
}

#booking-form .message {
  margin-bottom: 0;
  font-size: 1rem;
}

#booking-form .message.error {
  color: #9f0712;
  background-color: #fef2f2;
  border: 1px solid #f5c2c7;
  padding: 10px 20px;
  border-radius: 4px;
}

.product-info {
  padding-top: 0;
}

.product-info .tour-video__img img {
  border-radius: 5px;
  overflow: hidden;
}

.product-info .tour-video__img i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-size: 3rem;
}

.product-info table tr:nth-child(1) {
  background-color: var(--fs-color-primary);
}

.product-info table tr:nth-child(1) td {
  color: #fff;
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
}

.product-info table tr td {
  padding: 5px;
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
}

.product-info table tr td:nth-child(1) {
  border-left: 1px solid #ececec;
}


#booking-form .message.success {
  color: #0f5132;
  background-color: #d1e7dd;
  border: 1px solid #badbcc;
  padding: 10px 20px;
  border-radius: 4px;
}

.product-booking .tabs {
  border-bottom: 1px solid #ddd;
}

.product-booking .tabs li a {
  font-size: 1.1rem;
  color: #3e3e3e;
}

.product-booking .tabs li a:before {
  bottom: 0;
  top: unset;
}

.product-booking .tabs li.active a {
  color: var(--primary-color);
}

.product-related .product-section-title {
  display: none;
}

.product-related .product-section {
  border-top: unset;
}

.product-info .product-related .price {
  font-size: 1rem;
}


/* Mobile Bottom Navigation */
.vs-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
  z-index: 999;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.vs-mobile-nav-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  max-width: 100%;
}

.vs-mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;

  text-decoration: none;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.vs-mobile-nav-item i {
  font-size: 20px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.vs-mobile-nav-item span {
  font-size: 11px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.vs-mobile-nav-item:hover,
.vs-mobile-nav-item.active {
  color: var(--primary-color);
}

.vs-mobile-nav-item:hover i,
.vs-mobile-nav-item.active i {
  transform: scale(1.1);
}

/* Show only on mobile devices */
@media (max-width: 549px) {
  .vs-mobile-bottom-nav {
    display: block;
  }

  body {
    padding-bottom: 70px;
  }
}

/* Footer */

/* gtranslate */
.gt_float_switcher .gt_options {
  position: absolute !important;
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
}

.gt_float_switcher .gt_options a {
  min-width: 90px !important;
}

.gt_float_switcher .gt_options a:hover {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.10), rgba(6, 182, 212, 0.10), rgba(20, 184, 166, 0.10)) !important;
  border-radius: 8px;
  color: rgb(0, 108, 228) !important;
}

.gt_float_switcher .gt-selected,
.gt_float_switcher {
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
}

.gt_float_switcher img {
  width: 24px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang:hover {
  border-radius: 99px;
}

.gt_float_switcher .gt-selected .gt-current-lang:hover {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.10), rgba(6, 182, 212, 0.10), rgba(20, 184, 166, 0.10)) !important;
}

/* ===== NhaTrangTourist Footer Light (pattern + logo accents) ===== */
.absolute-footer {
  display: none;
}

.footer-nt-light {
  position: relative;
  overflow: hidden;
  /* Base light */
  background: #ffffff;
  color: #0f172a;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  padding: 2vw;
}

.footer-nt-light .section-content {
  background: rgba(59, 130, 246, 0.05);
  border-radius: 30px;
  padding: 30px 0;
}

.footer-nt-light .section-content p {
  margin-bottom: 0;
}

/* Pattern layer: dots + soft wave glows (subtle) */
.footer-nt-light:before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background-size: auto, auto, auto, 18px 18px;
  opacity: 0.9;
}

/* Links */
.footer-nt-light a {
  color: rgba(15, 23, 42, 0.92);
  text-decoration: none;
}

.footer-nt-light a:hover {
  color: #0b5cff;
}

/* Cards */
/* Brand */
.footer-nt-light .fl-brand-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.footer-nt-light .fl-logo {
  max-width: 170px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.1));
}

/* Typography */
.fl-brand h1 {
  font-size: 22px;
  position: relative;
  line-height: 1.7;
}

.fl-brand h1::after {
  height: 3px;
  width: 150px;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  background-color: #ff9a16;
}

.footer-nt-light .fl-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #0f172a;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  position: relative;
  line-height: 1.7;
}

.footer-nt-light .fl-title::after {
  height: 3px;
  width: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  background-color: #ff9a16;
}

.footer-nt-light .fl-desc {
  margin: 8px 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(15, 23, 42, 0.78);
}

/* Meta */
.footer-nt-light .fl-meta {
  margin-top: 8px;
}

.footer-nt-light .fl-meta-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.82);
}

.footer-nt-light .fl-ic {
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.14);
  color: rgba(59, 130, 246, 0.95);
  margin-top: 1px;
}

.footer-nt-light .fl-meta a {
  font-weight: 800;
}

/* Lists */
.footer-nt-light .fl-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nt-light .fl-links li {
  margin: 10px 0;
}

.footer-nt-light .fl-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.16s ease, background 0.16s ease,
    border-color 0.16s ease;
}

.footer-nt-light .fl-links a i {
  opacity: 0.95;
  color: rgba(249, 115, 22, 0.95);
  /* orange accent */
}

.footer-nt-light .fl-links a:hover {
  border-color: rgba(59, 130, 246, 0.18);
  transform: translateX(2px);
}

/* ===== Contact List ===== */
.footer-nt-light .contact-list {
  display: flex;
  flex-direction: column;
  /* gap: 0.875rem; */
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nt-light .contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: rgba(15, 23, 42, 0.78);
  transition: color 0.2s ease;
  margin-left: 0;
}

.vs-product-cat-banner__inner {
  margin-bottom: 20px;
}


.footer-nt-light .contact-item:hover {
  color: #1d2e3f;
  /* --text */
}

.footer-nt-light .contact-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* linear-gradient(135deg, --primary, --accent-orange) */
  background-color: hsl(#e1ebff / 0.1);
  border-radius: 8px;
  font-size: 0.875rem;
  /* shadow same feel */
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.25);
}

.footer-nt-light .contact-item a {
  color: inherit;
  font-size: 13px;
  text-decoration: none;
}

.footer-nt-light .contact-item a:hover {
  color: #f97316;
  /* --accent-orange */
}

/* ===== Social Links ===== */
.footer-nt-light .social-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}


.footer-nt-light .social-link {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  /* --background-light */
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
}

.footer-nt-light .social-link svg {
  display: block;
}

.footer-nt-light .social-link:hover {
  background: linear-gradient(135deg, #fbfeff, #cde9f1);
  /* primary + accent-orange */
  border-color: transparent;
  color: #f8fafc;
  /* --text */
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
}

/* BCT */
.footer-nt-light .fl-bct {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 23, 42, 0.14);
}

.footer-nt-light .fl-bct a {
  font-weight: 800;
  color: rgba(34, 197, 94, 0.92);
  /* green accent */
}

.footer-nt-light .fl-bct a:hover {
  color: #0f172a;
}

/* Map */
.footer-nt-light .fl-map-wrap {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.footer-nt-light .fl-map-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Bottom */
.footer-nt-light .fl-bottom {
  text-align: left;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.68);
}

.footer-nt-light .fl-bottom-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tax-product_cat.woocommerce .shop-container .term-description {
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;

  font-size: 18px;
}

.webantam_readmore_taxonomy_flatsome {
  text-align: center;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  bottom: 0;
  width: 100%;
  background: #ecf0f5;
}

.webantam_readmore_taxonomy_flatsome:before {
  height: 55px;
  margin-top: -45px;
  content: "";
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgb(236 240 245) 100%);
  display: block;
}

.webantam_readmore_taxonomy_flatsome a {
  color: var(--fs-color-secondary);
  display: block;
  border-radius: 5px;
  margin: 0 auto;
  max-width: 216px;
  padding: 5px 15px;
  text-align: center;
}

.webantam_readmore_taxonomy_flatsome a:after {
  content: "";
  width: 0;
  right: 0;
  border-top: 6px solid var(--fs-color-secondary);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  display: inline-block;
  vertical-align: middle;
  margin: -2px 0 0 5px;
}

.webantam_readmore_taxonomy_flatsome_less:before {
  display: none;
}

.webantam_readmore_taxonomy_flatsome_less a:after {
  border-top: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #00578f;
}

/* Form */
/* ===== NT CF7 Tour Form (anti-Flatsome override) ===== */
.nt-form.nt-form--tour {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 22px !important;
  border-radius: 18px !important;
  /* border: 1px solid rgba(226,232,240,.8) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.14) !important; */
}

.wpcf7-spinner {
  position: absolute;
  bottom: 40px;
}

.nt-form--tour .nt-form__head {
  margin-bottom: 16px !important;
}

.nt-form--tour .nt-form__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: linear-gradient(135deg,
      rgba(8, 145, 178, 0.14),
      rgba(20, 184, 166, 0.14)) !important;
  border: 1px solid rgba(8, 145, 178, 0.18) !important;
}

.nt-form--tour .nt-form__title {
  margin: 10px 0 6px !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  color: #0f172a !important;
  text-align: center;
}

.nt-form--tour .nt-form__desc {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  text-align: center;
}

/* Grid */
.nt-form--tour .nt-form__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.nt-form--tour .nt-field {
  margin: 0 !important;
}

.nt-form--tour .nt-field--full {
  grid-column: 1 / -1 !important;
}

/* Label */
.nt-form--tour .nt-label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.nt-form--tour .nt-req {
  color: #ef4444 !important;
  font-weight: 800 !important;
}

/* Inputs (target both custom class & CF7 generated controls) */
.nt-form--tour .wpcf7-form-control {
  width: 100% !important;
  box-sizing: border-box !important;
}

.nt-form--tour .nt-input,
.nt-form--tour .nt-select,
.nt-form--tour .nt-textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226, 232, 240, 1) !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: transform 0.12s ease, border-color 0.12s ease,
    box-shadow 0.12s ease !important;
}

.nt-form--tour .nt-textarea {
  height: 120px !important;
  resize: vertical !important;
}

.nt-form--tour .nt-input:focus,
.nt-form--tour .nt-select:focus,
.nt-form--tour .nt-textarea:focus {
  border-color: rgba(8, 145, 178, 1) !important;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.15) !important;
}

/* Fix Flatsome input styling */
.nt-form--tour input[type="text"],
.nt-form--tour input[type="tel"],
.nt-form--tour input[type="email"],
.nt-form--tour select,
.nt-form--tour textarea {
  margin: 0 !important;
  height: auto !important;
}

/* Actions */
.nt-form--tour .nt-form__actions {
  margin-top: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.nt-form--tour .nt-btn {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  border: 0 !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0891b2, #06b6d4, #14b8a6) !important;
  box-shadow: 0 18px 40px -18px rgba(8, 145, 178, 0.6) !important;
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease !important;
  margin: 0;
}

.nt-form--tour .nt-btn:hover {
  opacity: 0.95 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 46px -18px rgba(8, 145, 178, 0.7) !important;
}

.nt-form--tour .nt-btn:active {
  transform: translateY(0) !important;
  opacity: 0.9 !important;
}

/* Note */
.nt-form--tour .nt-form__note {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
}

/* CF7 messages */
.nt-form--tour .wpcf7-response-output {
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

.nt-form--tour .wpcf7-not-valid-tip {
  margin-top: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ===== NHATRANGTOURIST - CF7 Tour Form ===== */
.ntt-tour-form {
  padding: 60px;
  margin: 0 auto !important;
}

.ntt-head {
  text-align: center;
  margin-bottom: 30px;
}

.ntt-tour-form .ntt-head h1 {
  margin: 0 0 10px 0 !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.2px !important;
}

.ntt-tour-form .ntt-desc {
  margin: 0 0 18px 0 !important;
  opacity: 0.85 !important;
}

.ntt-tour-form .ntt-card {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.ntt-tour-form .ntt-section {
  padding: 12px 0 !important;
}

.ntt-tour-form .ntt-section+.ntt-section {
  border-top: 1px dashed rgba(0, 0, 0, 0.12) !important;
}

.ntt-tour-form .ntt-section-title {
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin: 2px 0 14px 0 !important;
  color: rgba(0, 0, 0, 0.7) !important;
}

.ntt-tour-form .ntt-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 14px !important;
}

.ntt-tour-form .ntt-span-2 {
  grid-column: span 2 !important;
}

@media (max-width: 768px) {
  .ntt-tour-form {
    padding: 0;
  }

  .ntt-tour-form .ntt-stars .wpcf7-form-control.wpcf7-checkbox {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ntt-tour-form .ntt-grid {
    grid-template-columns: 1fr !important;
  }

  .ntt-tour-form .ntt-span-2 {
    grid-column: auto !important;
  }
}

.ntt-tour-form .ntt-field label {
  display: block !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 0 0 8px 0 !important;
  color: rgba(0, 0, 0, 0.78) !important;
}

.ntt-tour-form .ntt-req {
  color: #d93025 !important;
  font-weight: 700 !important;
}

.ntt-tour-form input[type="text"],
.ntt-tour-form input[type="email"],
.ntt-tour-form input[type="tel"],
.ntt-tour-form input[type="number"],
.ntt-tour-form input[type="date"],
.ntt-tour-form textarea {
  width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  padding: 12px 12px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease !important;
  position: relative;
  z-index: 999;
}

.ntt-tour-form textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

.ntt-tour-form input:focus,
.ntt-tour-form textarea:focus {
  border-color: rgba(0, 0, 0, 0.35) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06) !important;
}

.ntt-tour-form .wpcf7-not-valid {
  border-color: #d93025 !important;
  box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.1) !important;
  background: #fff !important;
}

.ntt-tour-form .wpcf7-not-valid-tip {
  font-size: 12px !important;
  margin-top: 6px !important;
}

/* Checkbox/radio layout */
.ntt-tour-form .wpcf7-form-control.wpcf7-checkbox,
.ntt-tour-form .wpcf7-form-control.wpcf7-radio {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  padding: 2px !important;
}

.ntt-tour-form .ntt-stars {
  margin-bottom: 10px;
}

/* Stars: 2 columns */
.ntt-tour-form .ntt-stars .wpcf7-form-control.wpcf7-checkbox {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Flight checkbox: 1 column full row */
.ntt-tour-form .ntt-flight-row .wpcf7-form-control.wpcf7-checkbox {
  grid-template-columns: 1fr !important;
}

/* (Optional) làm flight box dài full đẹp hơn */
.ntt-tour-form .ntt-flight-row .wpcf7-list-item label {
  width: 100% !important;
}

@media (max-width: 768px) {

  .ntt-tour-form .wpcf7-form-control.wpcf7-checkbox,
  .ntt-tour-form .wpcf7-form-control.wpcf7-radio {
    grid-template-columns: 1fr !important;
  }
}

.ntt-tour-form .wpcf7-list-item {
  margin: 0 !important;
}

.ntt-tour-form .wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.08s ease, box-shadow 0.12s ease,
    border-color 0.12s ease !important;
  z-index: 8988;
  position: relative;
}

.ntt-tour-form .wpcf7-list-item label:hover {
  border-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06) !important;
}

.ntt-tour-form .wpcf7-list-item input[type="checkbox"],
.ntt-tour-form .wpcf7-list-item input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
}

/* Footer + button */
.ntt-tour-form .ntt-foot {
  margin-top: 10px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.ntt-tour-form .ntt-hint {
  margin: 0 0 12px 0 !important;
  opacity: 0.8 !important;
  font-size: 13px !important;
}

.ntt-tour-form .ntt-actions {
  display: flex !important;
  justify-content: flex-end !important;
}

.ntt-tour-form .ntt-btn {
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.08s ease, box-shadow 0.12s ease, opacity 0.12s ease !important;
  position: relative;
  z-index: 999;
}

.ntt-tour-form .ntt-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.14) !important;
}

.ntt-tour-form .ntt-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1) !important;
}

/* Loading spinner (CF7) */
.ntt-tour-form .wpcf7-spinner {
  margin: 0 0 0 10px !important;
}

.ntt-tour-form .ntt-flight-airline {
  display: none !important;
}

.ntt-tour-form.is-flight .ntt-flight-airline {
  display: block !important;
}

/* ===== Base font size 16 for this section ===== */
.section.ntt-page,
.section.ntt-page * {
  font-size: 16px !important;
}

/* ===== Background "có vị": gradient + radial glow + subtle grid ===== */
.section.ntt-page {
  position: relative !important;
  overflow: hidden !important;
  /* nền chính */
  background: radial-gradient(900px 500px at 15% 10%,
      rgba(0, 0, 0, 0.08),
      transparent 55%),
    radial-gradient(900px 500px at 85% 0%, rgba(0, 0, 0, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0)) !important;
}

/* lớp pattern grid nhẹ */
.section.ntt-page:before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, 0.06) 1px,
      transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  opacity: 0.08 !important;
}

/* blob blur tạo "vị" */
.section.ntt-page:after {
  content: "" !important;
  position: absolute !important;
  width: 560px !important;
  height: 560px !important;
  left: -160px !important;
  top: -180px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 30%,
      rgba(0, 0, 0, 0.1),
      transparent 60%) !important;
  filter: blur(18px) !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
}

/* đảm bảo nội dung nằm trên background */
.section.ntt-page .row,
.section.ntt-page .col {
  position: relative !important;
  z-index: 1 !important;
}

/* ===== Hero ===== */
.ntt-hero {
  margin-bottom: 18px !important;
}

.ntt-hero__badge {
  display: inline-block !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 12px !important;
}

.ntt-hero h1 {
  font-size: 38px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
  margin: 0 0 12px 0 !important;
}

.ntt-hero__desc {
  max-width: 760px !important;
  margin: 0 auto !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  opacity: 0.9 !important;
}

/* ===== Form container (Card) ===== */
.ntt-form-shell {
  margin-top: 18px !important;
}

.ntt-form-shell .wpcf7 {
  text-align: left !important;
}

.ntt-form-shell .wpcf7 form {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  position: relative;
}

.ntt-form-shell .wpcf7 form::before {
  content: "";
  background-image: url("/wp-content/uploads/2026/01/bgForm2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  left: 0;
  position: absolute;
  width: 55%;
  height: 100%;
}

.ntt-form-shell .wpcf7 form::after {
  content: "";
  background-image: url("/wp-content/uploads/2026/01/bgForm3.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  right: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
}

/* Flatsome hay chèn p/br trong CF7 - giảm bể layout */
.ntt-form-shell .wpcf7 form p {
  margin-bottom: 0 !important;
}

.ntt-form-shell .wpcf7 form br {
  display: none !important;
}

/* Responsive */
@media (max-width: 849px) {
  .ntt-hero h1 {
    font-size: 30px !important;
  }
}

/* contact page */
.vs_contact-bg .section-bg :is(img, picture, video) {
  left: unset;
  right: 0;
  width: 61.9375rem;
  bottom: 0;
  height: 100%;
}

/* ===== Filter ===== */
.yith-wcan-filters {
  padding: 20px;
  border-radius: 12px;
}

.view-more-button {
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--fs-color-primary);
  color: var(--fs-color-primary);
}

.view-more-button:hover {
  background: var(--fs-color-primary);
  border: 1px solid var(--fs-color-primary);
  color: #FFF;
}

/* Responsive */
@media (max-width: 640px) {
  .ntt-tour-form .ntt-btn {
    margin-top: 15px;
    padding: 0px 17px !important;
  }

  .ntt-tour-form .ntt-actions {

    justify-content: center !important;
  }

  .product-booking .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    border-bottom: 0;
  }

  .product-booking .tabs li {
    width: calc(50% - 5px);
    background: #ecf0f5;
    border-radius: 5px;
    text-align: center;
  }

  .product-booking .tabs li a {
    font-size: 1rem;
  }

  .product-booking .tabs li.vs_phu_phi_tab,
  .product-booking .tabs li.vs_huy_doi_tab,
  .product-booking .tabs li.vs_luu_y_tab {
    width: calc(100% / 3 - 20px / 3);
  }

  .nav-vertical>li>a>i,
  .nav li.has-icon-left>a>i {
    opacity: 1;
    color: #FFF !important;
    background-color: rgb(0, 108, 228);
    border-radius: 8px;
    width: 40px !important;
    height: 40px;
    margin-right: 10px !important;
    line-height: 40px;
  }

  .nav-slide {
    padding-top: 0;
  }

  .nt-form--tour {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .nt-form--tour .nt-form__grid {
    grid-template-columns: 1fr !important;
  }

  .footer-nt-light .social-links {
    justify-content: center;
  }

  .footer-nt-light .contact-item {
    justify-content: center;
  }

  .breadcrumbs {
    margin-top: 15px;
  }

  .nav-pagination {
    gap: 6px !important;
  }

  ul.links li {
    margin: 0;
  }

  /* Chỉ áp dụng cho gallery grid của Flatsome (row-grid) */
  .row.row-grid.is-mobile-slider {
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row.row-grid.is-mobile-slider>.col {
    width: 85%;
    max-width: 85%;
    flex: 0 0 85%;
    padding: 0 !important;
  }

  /* Tắt height cố định của các ô grid-col-* để không bị cắt */
  .row.row-grid.is-mobile-slider .grid-col-1,
  .row.row-grid.is-mobile-slider .grid-col-1-2,
  .row.row-grid.is-mobile-slider .grid-col-1-3,
  .row.row-grid.is-mobile-slider .grid-col-2-3,
  .row.row-grid.is-mobile-slider .grid-col-1-4,
  .row.row-grid.is-mobile-slider .grid-col-3-4 {
    height: auto !important;
  }

  /* Ảnh full khung, crop đẹp */
  .row.row-grid.is-mobile-slider .box-image img {
    width: 100%;
    height: 260px;
    /* chỉnh theo ý */
    object-fit: cover;
    border-radius: 10px;
    /* tuỳ chỉnh */
  }

  /* khoảng cách giữa slides */
  .row.row-grid.is-mobile-slider .flickity-slider>.col {
    margin-right: 12px;
  }
}

/* Mobile */
@media (max-width: 849px) {
  .footer-nt-light {
    padding-bottom: 26px;
  }

  .footer-nt-light .fl-logo {
    max-width: 155px;
  }
}

/* VSW Helpbox (no background) */
/* accent line bên trái để box “có điểm nhấn” mà không cần background */
.contact-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-list .contact-item {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  line-height: 1.6 !important;
  margin: 0 0 8px 0 !important;
  font-size: 13px;
  justify-content: flex-start;
}

.contact-list .contact-item i {
  flex: 0 0 18px !important;
  width: 18px !important;
  margin-top: 3px !important;
  opacity: 0.8 !important;
  text-align: center;
}



/* Link đẹp, dễ đọc */
.contact-list .contact-item a {
  text-decoration: none !important;
}

.contact-list .contact-item a:hover {
  text-decoration: underline !important;
}

.contact-list br {
  display: none;
}

/* Nếu theme không có icon-file-text thì vẫn hiển thị ổn */
.contact-list .contact-item i.icon-file-text:before {
  content: "\f15b";
  /* fallback nếu dùng FontAwesome; nếu không có FA thì vẫn không lỗi layout */
}

/* Title */
.vsw-helpbox__title {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.2px !important;
  color: #111 !important;
}

/* Meta row */
.vsw-helpbox__meta {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 0 4px 0 !important;
  font-size: 14px !important;
  color: rgba(0, 0, 0, 0.72) !important;
}

.vsw-helpbox__label {
  font-weight: 600 !important;
  opacity: 0.9 !important;
}

.vsw-helpbox__phone {
  font-weight: 900 !important;
  text-decoration: none !important;
  color: #111 !important;
  letter-spacing: 0.2px !important;
}

.vsw-helpbox__phone:hover {
  text-decoration: underline !important;
}

/* Sub text */
.vsw-helpbox__sub {
  font-size: 16px !important;
  color: rgba(0, 0, 0, 0.62) !important;
  margin: 0 !important;
}

.vsw-helpbox__sub strong {
  font-weight: 900 !important;
  color: #111 !important;
}

.vsw-hotline {
  display: inline-block !important;
}

/* Card */
.vsw-hotline__card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  background: #F7971E;
  background: -webkit-linear-gradient(to right, var(--fs-color-primary), #F7971E);
  background: linear-gradient(to right, var(--fs-color-primary), #F7971E);
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 99px !important;
  padding: 8px 20px 8px 8px;
  box-shadow:
    0 12px 28px rgba(255, 87, 34, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(6px) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;
}

.vsw-hotline__card:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow:
    0 18px 44px rgba(255, 87, 34, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Icon bubble */
.vsw-hotline__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 99px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: #ff5722 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
  flex: 0 0 auto !important;
}

.vsw-hotline__icon i {
  font-size: 16px !important;
}

/* Text */
.vsw-hotline__texts {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.vsw-hotline__number {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.vsw-hotline__sub {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1.2 !important;
}

/* Focus */
.vsw-hotline__card:focus {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* Title widget giống hình */
.widget-title,
span.widget-title {
  position: relative !important;
  display: inline-block !important;
  padding-left: 22px !important;
  /* chừa chỗ cho thanh cam */
  margin: 0 0 18px 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  color: #111 !important;
}

/* Thanh dọc màu cam bên trái */
.widget-title::before,
span.widget-title::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 34px !important;
  border-radius: 6px !important;
  background: #ff6a2a !important;
  /* cam giống hình */
}

/* Nếu Flatsome wrap title trong .widget-title span */
.widget-title span {
  display: inline !important;
}

.widget .is-divider {
  display: none;
}

/* Card + shadow nhẹ giống hình */
.vsw-post-item,
.vsw-wc-prod-item {
  background: #ecf0f5 !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06) !important;
  /* nhẹ */
  border: 1px solid rgba(17, 24, 39, 0.04) !important;
  /* viền mờ */
  transition: transform .18s ease, box-shadow .18s ease !important;
}

/* Hover nhẹ */
.vsw-post-item:hover,
.vsw-wc-prod-item:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.09) !important;
}

/* Nếu muốn đúng “khoảng cách trong card” như ảnh */
.vsw-post-widget,
.vsw-wc-prod-widget {
  gap: 18px !important;
}

/* Bo góc thumbnail cho khớp card */
.vsw-post-thumb,
.vsw-wc-prod-thumb {
  border-radius: 14px !important;
}

/* ===== Custom Ordering ===== */
.custom-ordering {
  position: relative;
}

.ordering-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  font-weight: 600;
  color: var(--fs-color-secondary);
  cursor: pointer;
  margin: 0;
  margin-left: auto;
  font-size: 18px;
  min-height: unset;
  line-height: 1.3;
  padding: 10px 20px;
}

.ordering-toggle img {
  width: 18px;
  height: 18px;
}

/* Dropdown box */
.ordering-dropdown {
  position: absolute;
  right: 0;
  top: 55px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 6px 0;
  min-width: 200px;
  z-index: 999;
  display: none;
}

/* Ẩn UI mặc định nhưng vẫn giữ select để submit */
.ordering-dropdown .woocommerce-ordering {
  margin: 0;
}

.ordering-dropdown .woocommerce-ordering label {
  display: none;
}

.ordering-dropdown .woocommerce-ordering select {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* List custom */
.ordering-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.ordering-list li {
  margin: 0;
}

.ordering-item {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1.2;
  color: #111827;
  margin: 0;
  min-height: unset;
}

.ordering-item:hover {
  background: rgba(0, 0, 0, .04);
}

.ordering-item.is-active {
  color: var(--fs-color-primary);
  font-weight: 600;
}

.custom-ordering.active .ordering-dropdown {
  display: block;
}

/* Layout header bạn đang dùng */
.wc-archive-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 30px;
}

.wc-archive-header-inner .wc-archive-title {
  flex-basis: 80%;
}

.wc-archive-header-inner .wc-archive-ordering {
  flex-basis: 20%;
}

.wc-archive-title {
  font-size: 2.3rem;
  color: var(--fs-color-secondary);
  margin: 0;
  text-transform: capitalize;
}

/* ===== POST LIST (Flatsome) ===== */
#post-list .row.large-columns-3 {
  margin-left: -12px;
  margin-right: -12px;
}

#post-list .row.large-columns-3>.col {
  padding-left: 12px;
  padding-right: 12px;
}

#post-list .post-item .col-inner {
  height: 100%;
}

#post-list .box-blog-post {
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#post-list .box-blog-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
  border-color: rgba(0, 0, 0, .10);
}

/* Image */
#post-list .box-blog-post .box-image {
  position: relative;
  overflow: hidden;
}

#post-list .box-blog-post .image-cover img {
  transition: transform .35s ease;
  transform: scale(1);
}

#post-list .box-blog-post:hover .image-cover img {
  transform: scale(1.06);
}

/* Optional overlay for readability (nhẹ thôi) */
#post-list .box-blog-post .box-image:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .22) 100%);
  pointer-events: none;
  opacity: .9;
}

/* Text area */
#post-list .box-blog-post .box-text {
  padding: 14px 16px 16px;
}

#post-list .box-blog-post .blog-post-inner {
  margin: 0;
}

/* Divider (ẩn hoặc làm mảnh) */
#post-list .box-blog-post .is-divider {
  margin: 10px 0 10px;
  height: 1px;
  background: rgba(0, 0, 0, .08);
  max-width: 48px;
}

/* Title */
#post-list .post-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}

#post-list .post-title a {
  color: #0f172a;
  text-decoration: none;
  transition: color .2s ease;
  font-size: 20px;
}

#post-list .box-blog-post:hover .post-title a {
  color: #0a3a7a;
}

/* Clamp title 2 lines */
#post-list .post-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.breadcrumbs .divider,
.breadcrumbs .separator {
  opacity: 1 !important;
}

/* Excerpt */
#post-list .from_the_blog_excerpt {
  margin: 0;
  color: rgba(15, 23, 42, .72);
  font-size: 16px;
  line-height: 1.55;
}

/* Clamp excerpt 2 lines */
#post-list .from_the_blog_excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile spacing */

/* ===== Pagination ===== */
.nav-pagination {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-pagination .page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .10);
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  transition: all .2s ease;
}

.nav-pagination a.page-number:hover {
  transform: translateY(-1px);
  border-color: rgba(10, 58, 122, .35);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
  color: #fff !important;
  background: var(--fs-color-secondary) !important;

}

.nav-pagination .current {
  background: var(--fs-color-secondary) !important;
  border-color: var(--fs-color-secondary) !important;
  color: #fff;
}

.nav-pagination .dots {
  border: 0;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
  opacity: .6;
}

.nav-pagination .next.page-number i {
  font-size: 16px;
}

/* ===============================
   ARCHIVE HEADER – CLEAN PREMIUM
   (Title + description + breadcrumbs)
================================ */
#archive-page-title .page-title {
  padding: 22px 0 10px;
}

/* Canh giữa đẹp + tạo khoảng cách */
#archive-page-title .page-title-inner {
  row-gap: 10px;
}

/* ===== TITLE ===== */
#archive-page-title .title-wrapper .page-title {
  margin: 0;
  font-weight: 800;
  line-height: 1.15;
  font-size: 36px;
}

/* Nhẹ nhàng hơn cho span */
#archive-page-title .title-wrapper .page-title span {
  display: inline-block;

  color: rgb(0, 108, 228);

}

/* ===== DESCRIPTION ===== */
#archive-page-title .archive-term-description {
  max-width: 860px;
  margin: 10px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
}

/* Nếu bạn có h2 trong description */
#archive-page-title .archive-term-description h2 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
}

/* Paragraph trong description */
#archive-page-title .archive-term-description p {
  margin: 0 auto;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 500;
  opacity: .92;
  text-align: left;
}

/* ===== BREADCRUMB ===== */
.breadcrumbs {
  font-weight: 500;
  font-size: 14px;
}

#archive-page-title .title-breadcrumbs {
  margin-top: 10px;
  padding-top: 8px;
  display: inline-flex;
  width: 100%;
}

#archive-page-title .breadcrumbs {
  display: inline-flex;
  flex-wrap: wrap;
  border-radius: 999px;
  /* pill nhẹ, sang */
  font-size: 14px;
  line-height: 1.4;
  opacity: .92;
}

#archive-page-title .breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

#archive-page-title .breadcrumbs a:hover {
  text-decoration: underline;
}

#archive-page-title .breadcrumbs .divider {
  opacity: .55;
}

/* ===============================
   IF HEADER HAS BACKGROUND IMAGE
================================ */
#archive-page-title[style*="background-image"] .breadcrumbs {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .24);
  backdrop-filter: blur(6px);
}

/* ===============================
   NO BACKGROUND IMAGE
================================ */

#archive-page-title:not([style]) .title-wrapper .page-title,
#archive-page-title[style=""] .title-wrapper .page-title {
  color: #0f172a !important;
}

#archive-page-title:not([style]) .archive-term-description,
#archive-page-title[style=""] .archive-term-description {
  color: rgba(15, 23, 42, .78) !important;
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 849px) {
  .vs_slider-banner .banner h1 {
    font-size: 2rem;
    line-height: 1.3;
  }

  .section-title span {
    font-size: 110% !important;
  }

  #post-list .row.large-columns-3>.col {
    margin-bottom: 18px;
  }

  #post-list .box-blog-post .box-text {
    padding: 12px 14px 14px;
  }

  #post-list .post-title {
    font-size: 15px;
  }

  #archive-page-title .page-title {
    padding: 16px 0 8px;
  }

  #archive-page-title .archive-term-description p {
    font-size: 14px;
    line-height: 1.65;
  }

  .vsw-hotline__card {
    padding: 11px 12px !important;
    border-radius: 99px !important;
  }

  .vsw-hotline__icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  .vsw-hotline__number {
    font-size: 17px !important;
  }

  .vsw-hotline__sub {
    font-size: 12.5px !important;
  }

  .vsw-helpbox__wrap {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  .vsw-helpbox__title {
    font-size: 15px !important;
  }

  .vsw-helpbox__meta {
    font-size: 13.5px !important;
  }

  .vsw-helpbox__sub {
    font-size: 12.5px !important;
  }
}

/* =========================
   VS Related Posts (Flatsome)
========================= */
.vs-related-posts {
  padding: 22px 0 !important;
}

.vs-related-posts .container>h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  color: #0f172a !important;
}

/* Slider spacing */
.vs-related-posts .row.row-slider {
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.vs-related-posts .row.row-slider>.col {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Card */
.vs-related-posts .post-item .col-inner {
  height: 100% !important;
}

.vs-related-posts .box.box-blog-post {
  height: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.vs-related-posts .box.box-blog-post:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(249, 115, 22, .25) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14) !important;
}

/* Image */
.vs-related-posts .box-image .image-cover {
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
}

.vs-related-posts .box-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1) !important;
  transition: transform .35s ease !important;
}

.vs-related-posts .box.box-blog-post:hover .box-image img {
  transform: scale(1.06) !important;
}

/* Text area */
.vs-related-posts .box-text {
  padding: 14px 14px 16px !important;
}

.vs-related-posts .blog-post-inner .is-divider {
  display: none !important;
}

/* Title 2 lines */
.vs-related-posts .post-title {
  margin: 0 0 8px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  font-size: 16px !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.vs-related-posts .post-title a {
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}

.vs-related-posts .box.box-blog-post:hover .post-title a {
  color: #f97316 !important;
}

/* Excerpt 3 lines */
.vs-related-posts .from_the_blog_excerpt {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.55 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Add subtle bottom highlight */
.vs-related-posts .box-text {
  position: relative !important;
}

.vs-related-posts .box-text::after {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 10px !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, rgba(249, 115, 22, .0), rgba(249, 115, 22, .55), rgba(249, 115, 22, .0)) !important;
  opacity: 0 !important;
  transition: opacity .18s ease !important;
}

.vs-related-posts .box.box-blog-post:hover .box-text::after {
  opacity: 1 !important;
}

/* Flickity buttons */
.vs-related-posts .flickity-prev-next-button {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}

.vs-related-posts .flickity-prev-next-button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(249, 115, 22, .35) !important;
}

.vs-related-posts .flickity-prev-next-button .arrow {
  fill: #0f172a !important;
}

.vs-related-posts .flickity-prev-next-button:hover .arrow {
  fill: #f97316 !important;
}

.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button {
  margin-top: 0 !important;
  width: 38px !important;
  height: 35px !important;
  background: #fff !important;
  opacity: 1;
  border-radius: 100px;
}

.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button svg {
  width: 25px;
}

.is-loading {
  opacity: .55;
  pointer-events: none;
}

#archive-page-title .title-wrapper .page-title {
  font-size: 2.3rem !important;
}

/* Mobile tối ưu */
@media (max-width: 549px) {
  .slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button {
    margin-top: 0 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0;
    line-height: 24px;
    min-height: unset;
  }

  .slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button svg {
    width: 20px;
  }

  .vs-related-posts .container>h3 {
    font-size: 18px !important;
  }

  .vs-related-posts .box-text {
    padding: 12px 12px 14px !important;
  }

  .vs-related-posts .post-title {
    font-size: 15px !important;
  }

  .product-info table {
    border-spacing: 0 8px !important;
  }

  .product-info table tbody tr td {
    padding: 12px 12px !important;
    font-size: 14px !important;
  }

  .product-info table tbody tr td:last-child {
    white-space: normal !important;
  }

  .wc-archive-header-inner .wc-archive-title {
    flex-basis: 100%;
  }

  .filter-button {
    margin: 0;
    color: var(--fs-color-secondary) !important;
    font-size: 16px;
    text-transform: unset;
    text-align: center;
    border: 1px solid #000;
    padding: 10px 20px;
    line-height: 1.3;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
  }

  .ordering-toggle {
    font-size: 16px;
    text-align: center;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
    width: 100%;
  }

  .category-filter-row {
    padding: 0 !important;
  }

  .wc-archive-tools {
    flex-basis: 100%;
    display: flex;
    gap: 15px;
    margin-top: 20px;
  }

  .wc-archive-header-inner .wc-archive-ordering,
  .category-filtering {
    width: 50%;
    max-width: 50%;
    flex-basis: 100%;
  }

  .wc-archive-title,
  #archive-page-title .title-wrapper .page-title {
    font-size: 32px !important;
  }

  .category-page-row {
    padding-top: 0;
  }

  .wc-archive-header-inner {
    margin-bottom: 0;
  }

  .breadcrumbs {
    text-align: left;
  }

  .vs_review .row.row-collapse {
    width: 90% !important;
    max-width: 90% !important;
  }

  .vs-review-modal__panel {
    margin-top: 0 !important;
  }

  .nt-form.nt-form--tour {
    background: #fff4ecbd;
    backdrop-filter: blur(15px);
  }

  .off-canvas-left .mfp-content,
  .off-canvas-right .mfp-content {
    background-color: #FFF !important;
  }

  .off-canvas:not(.off-canvas-center) .nav-vertical li>a {
    color: #000;
    font-size: 16px;
  }

  .mfp-close {
    background: #ff5722;
    color: #FFF;
    mix-blend-mode: unset;
    border-radius: 0 0 0 30px;
  }

  .mfp-ready .mfp-close {
    opacity: 1;
  }

  /* ===== Submenu ===== */
  #main-menu ul.sub-menu,
  #main-menu ul.children {
    margin: 6px 0 10px;
    padding: 8px;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, .06);
    z-index: 10;
  }

  #main-menu ul.sub-menu li a,
  #main-menu ul.children li a {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 10px;
    border-radius: 12px;

    color: #111;
    font-weight: 500;
    text-transform: none;
    font-size: 16px;
  }

  #main-menu ul.sub-menu li a:hover,
  #main-menu ul.children li a:hover {
    background: rgba(255, 255, 255, .70);
  }

  /* icon trái trong submenu (FA6) */
  #main-menu .has-icon-left i,
  #main-menu ul.sub-menu i,
  #main-menu ul.children i {
    width: 18px;
    min-width: 18px;
    text-align: center;
    color: rgba(0, 108, 228, 1);
  }

  .toggle {
    color: rgba(0, 108, 228, 1);
    opacity: 1;
  }
}

/* ====== Universal responsive table (many types, safe) ====== */
.product-info table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  /* chống tràn */
}

/* cell safe wrap */
.product-info table td,
.product-info table th {
  overflow-wrap: anywhere !important;
  /* bẻ chữ dài */
  word-break: break-word !important;
  line-height: 1.45 !important;
}

/* images inside table */
.product-info table img,
.product-info table iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* ====== Mobile ====== */
@media (max-width:768px) {

  /* biến table thành block để có thể scroll ngang */
  .product-info table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  /* giữ cấu trúc table bên trong để không phá colspan */
  .product-info table thead,
  .product-info table tbody {
    display: table !important;
    width: 100% !important;
    min-width: 720px;
    /* tránh ép chữ quá xấu */
    table-layout: fixed !important;
  }

  .product-info table td,
  .product-info table th {
    font-size: 13px !important;
    padding: 8px 10px !important;
    vertical-align: top !important;
  }

  /* dòng colspan/ghi chú dài: cho xuống dòng đẹp */
  .product-info table td[colspan],
  .product-info table th[colspan] {
    white-space: normal !important;
  }

  /* số/giá: tránh bị dồn 1 cục */
  .product-info table td {
    font-variant-numeric: tabular-nums;
  }

  /* ưu tiên giảm “style inline” font family/size rối mắt */
  .product-info table td span,
  .product-info table th span {
    font-family: inherit !important;
    font-size: inherit !important;
  }
}

/* ====== Optional: sticky header on mobile (nếu muốn) ====== */
/* Chỉ bật khi bảng có header dạng thead; với table chỉ có tbody thì không ảnh hưởng */
@media (max-width:768px) {
  .product-info table thead th {
    position: sticky;
    top: 0;
    background: #f9fafb !important;
    z-index: 2;
  }
}

/* End footer */
/* ===== Review: truncate mặc định (36 ký tự sẽ do JS cắt) ===== */

.vs_review .content-reivew p {
  margin: 0;
}

/* Nút "Xem thêm" nhỏ (JS sẽ thêm) */
.vs_review .vs-review-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  user-select: none;
}

.vs_review .vs-review-more:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .30);
}

/* ===== Modal ===== */
.vs-review-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.vs-review-modal.is-open {
  display: block;
}

.vs-review-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
}

.vs-review-modal__dialog {
  position: relative;
  width: min(920px, calc(100vw - 28px));
  margin: 6vh auto;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(14, 18, 26, .92);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.vs-review-modal.is-open .vs-review-modal__dialog {
  transform: translateY(0);
  opacity: 1;
}

/* Header */
.vs-review-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.vs-review-modal__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.vs-review-modal__close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.vs-review-modal__close:hover {
  transform: rotate(6deg);
  background: rgba(255, 255, 255, .12);
}

/* Body layout */
.vs-review-modal__body {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  padding: 16px;
}

@media (max-width: 850px) {
  .vs-review-modal__body {
    grid-template-columns: 1fr;
  }

  .vs-review-modal__dialog {
    margin: 4vh auto;
  }
}

/* Image */
.vs-review-modal__media {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
}

.vs-review-modal__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Content card */
.vs-review-modal__card {
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
}

.vs-review-modal__person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, .14);
  margin-bottom: 12px;
}

.vs-review-modal__avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  flex: 0 0 auto;
}

.vs-review-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vs-review-modal__person h4 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.vs-review-modal__person p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
}

.vs-review-modal__content {
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  line-height: 1.7;
  max-height: 52vh;
  overflow: auto;
  padding-right: 6px;
}

.vs-review-modal__content::-webkit-scrollbar {
  width: 8px;
}

.vs-review-modal__content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
}

/* ===== Review card đẹp hơn ===== */
.vs_review .row.row-collapse {
  border-radius: 18px;
  overflow: hidden;
  transform: translateZ(0);
}

.vs_review .box-review .box-text {
  padding: 16px 16px 12px;
}

/* tên + chức danh */
.vs_review .icon-box-text p {
  margin: 0 !important;
  color: #fff !important;
}

.vs_review .icon-box-text p:first-child {
  font-weight: 800;
  font-size: 16px;
}

.vs_review .icon-box-text p:last-child {
  opacity: .85;
  font-size: 13px;
}

.page-title-inner {
  display: flex;
  padding-top: 0;
}

.text-center>div.title-content {
  order: 1;
}

.text-center>div.title-wrapper {
  order: 2;
}

.text-center>div.title-wrapper,
.text-center>div.title-content {
  margin: unset;
}

/* ===== Ẩn đoạn dài, chỉ show bản rút gọn do JS set ===== */
.vs_review .content-reivew {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #fde1ca;
  color: #000;
  line-height: 1.65;
  font-size: 14px;
}

.vs_review .content-reivew p {
  margin: 0 !important;
}

/* nút xem thêm */
.vs_review .vs-review-more {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.vs_review .vs-review-more:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .14);
}

/* ===== MODAL đẹp ===== */
.vs-review-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.vs-review-modal.is-open {
  display: block;
}

.vs_review .flickity-page-dots {
  bottom: -30px;
}

.vs-review-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(8px);
}

.vs-review-modal__panel {
  position: relative;
  width: min(980px, calc(100vw - 26px));
  margin: 25vh auto;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(16, 18, 24, .65);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 90px rgb(197 148 94 / 60%);
  transform: translateY(10px);
  opacity: 0;
  transition: .18s ease;
}

.vs-review-modal.is-open .vs-review-modal__panel {
  transform: translateY(0);
  opacity: 1;
}

.vs-review-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.vs-review-modal__head b {
  color: #fff;
  font-size: 15px;
}

.vs-review-modal__close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.vs-review-modal__body {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  padding: 16px;
}

@media (max-width: 860px) {
  .vs-review-modal__body {
    grid-template-columns: 1fr;
  }
}

.vs-review-modal__img {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
}

.vs-review-modal__img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.vs-review-modal__card {
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
}

.vs-review-modal__person {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, .14);
  margin-bottom: 12px;
}

.vs-review-modal__ava {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
}

.vs-review-modal__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vs-review-modal__name {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.vs-review-modal__role {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}

.vs-review-modal__content {
  color: rgba(255, 255, 255, .92);
  line-height: 1.75;
  font-size: 15px;
  max-height: 55vh;
  overflow: auto;
  padding-right: 6px;
}

/* 1) Đảm bảo vùng ảnh là relative */
.vs_review .box-review .box-image .image-cover {
  position: relative;
}

/* 2) Overlay Flatsome không được chặn icon */
.vs_review .box-review .box-image .image-cover .overlay {
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 3) Lớp hover overlay của mình */
.vs_review .box-review .box-image .image-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .32);
  opacity: 0;
  transition: .22s ease;
  z-index: 2;
  pointer-events: none;
}

/* 4) Icon button */
.vs_review .box-review .box-image .image-cover .vs-review-open {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.92);
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: .22s ease;
  z-index: 3;
  /* cao hơn overlay */
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.vs_review .box-review .box-image .image-cover .vs-review-open i {
  font-size: 20px;
}

/* 5) Hover hiện icon */
.vs_review .row.row-collapse:hover .box-review .box-image .image-cover::after {
  opacity: 1;
}

.vs_review .row.row-collapse:hover .box-review .box-image .image-cover .vs-review-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Mobile: luôn hiện */
@media (max-width: 849px) {
  .vs_review .box-review .box-image .image-cover::after {
    opacity: .10;
  }

  .vs_review .box-review .box-image .image-cover .vs-review-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/**
 * Flatsome AJAX Ordering Styles
 */

/* Loading states */
body.ajax-loading {
  cursor: wait !important;
}

.ajax-dimmed {
  opacity: 0.5 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease;
}


/* Responsive */
@media (max-width: 768px) {
  .wc-archive-ordering.custom-ordering .ordering-dropdown {
    left: 0;
    right: 0;
    min-width: auto;
  }

  .wc-archive-ordering.custom-ordering .ordering-toggle {
    width: 100%;
    justify-content: space-between;
  }
}

/* Fix for Flatsome theme */
.wc-archive-ordering.custom-ordering .ordering-dropdown {
  z-index: 9999 !important;
}

/* Prevent form submission */
.wc-archive-ordering.custom-ordering form.woocommerce-ordering {
  pointer-events: auto;
}

.wc-archive-ordering.custom-ordering select.orderby {
  pointer-events: auto;
  cursor: pointer;
}

/* Animation for products */
.products.row.ajax-dimmed {
  position: relative;
}

.products.row.ajax-dimmed::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: 1;
  pointer-events: none;
}

/* Loading spinner (optional) */
body.ajax-loading .products.row.ajax-dimmed::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  z-index: 2;
  animation: ajax-ordering-spin 1s linear infinite;
}

@keyframes ajax-ordering-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}