/* WaterWorld — Dim mode theme override
   Loaded after main.css to override legacy hard-coded colors.
*/

:root {
  /* Core palette */
  /* Tuned back to darker navy like original dim design */
  --ww-dim-bg: #0a2740;
  --ww-dim-surface: #0e3553;
  --ww-dim-surface-soft: #124565;
  --ww-dim-border: rgba(142, 186, 216, 0.28);
  --ww-dim-text: #e6f1ff;
  --ww-dim-text-soft: #b2c7da;

  /* Brand blue (#30a8d5) brightened ~20% */
  --ww-dim-accent: #67c6e8;
  --ww-dim-accent-soft: rgba(103, 198, 232, 0.35);

  /* “Glow” like the provided design */
  --ww-dim-card: rgba(7, 30, 47, 0.62);
  --ww-dim-card-2: rgba(12, 44, 68, 0.66);
  --ww-dim-glow: 0 0 0 1px rgba(103, 198, 232, 0.35), 0 10px 26px rgba(0, 0, 0, 0.25);
  --ww-dim-glow-strong: 0 0 0 1px rgba(103, 198, 232, 0.55), 0 0 26px rgba(103, 198, 232, 0.22), 0 14px 40px rgba(0, 0, 0, 0.28);
  --ww-dim-glow-neon: 0 0 0 1px rgba(103, 198, 232, 0.65), 0 0 34px rgba(103, 198, 232, 0.28), 0 18px 52px rgba(0, 0, 0, 0.32);
}

/* Final resize: services cards back to original bigger proportions */
@media (min-width: 1024px) {
  .services-section {
    padding-top: 2.2rem !important;
    padding-bottom: 1.4rem !important;
  }

  /* Slide widths: leave to Swiper (slidesPerView: 3 + spaceBetween) */

  .services-section .service-card {
    min-height: 24.5rem !important;
  }

  .services-section .service-card .box-img img {
    height: 23rem !important;
    max-height: 23rem !important;
  }

  .services-section .service-card .content .top-content {
    bottom: 1.2rem !important;
    padding: 0 1.2rem !important;
  }

  .services-section .service-card .content .top-content .title {
    font-size: 1.55rem !important;
    line-height: 1.3 !important;
  }
}

/* FORCE OVERRIDE (debug/final): ensure services cards are visibly larger */
@media (min-width: 1024px) {
  section.services-section .swiper-slide .item .service-card {
    min-height: 27rem !important;
    height: 27rem !important;
  }

  section.services-section .swiper-slide .item .service-card .box-img,
  section.services-section .swiper-slide .item .service-card .box-img img,
  section.services-section .swiper-slide .item .service-card .box-img .img img {
    height: 27rem !important;
    min-height: 27rem !important;
    max-height: 27rem !important;
    object-fit: cover !important;
  }

  section.services-section .swiper-slide .item .service-card .content .top-content {
    bottom: 1.4rem !important;
    padding: 0 1.4rem !important;
  }

  section.services-section .swiper-slide .item .service-card .content .top-content .title {
    font-size: 1.7rem !important;
    line-height: 1.3 !important;
  }
}

/* Final polish requested */
@media (min-width: 1024px) {
  /* Reverted: keep normal flow (no overlap) */
  .services-section {
    margin-top: 0 !important;
    position: static !important;
    z-index: auto !important;
  }

  /* Services heading: prominent but not over-glowy */
  .services-section .fz-40,
  .services-section .game-type-title,
  .services-section .heading {
    color: #ffffff !important;
    text-shadow:
      0 0 20px rgba(126, 223, 251, 0.42),
      0 0 8px rgba(126, 223, 251, 0.32),
      0 2px 0 rgba(0, 0, 0, 0.28) !important;
    filter: none;
  }
}

/* News heading in pure white */
.news-section .heading,
.news-section .game-type-title,
.news-section .fz-40 {
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(126, 223, 251, 0.26);
}

/* === HOTFIX SCALE + OVERLAY FOR SERVICES === */
@media (min-width: 1024px) {
  .services-section {
    position: relative;
    padding-top: 3.2rem !important;
    padding-bottom: 2.2rem !important;
    background:
      linear-gradient(180deg, rgba(4, 29, 54, 0.30) 0%, rgba(4, 29, 54, 0.58) 100%),
      radial-gradient(920px 260px at 50% 0%, rgba(102, 206, 244, 0.24), rgba(6, 45, 70, 0) 72%),
      linear-gradient(180deg, #0a3f71 0%, #08345f 45%, #072e54 100%) !important;
  }

  .services-section .container {
    max-width: 1280px !important;
  }

  .services-section .fz-40,
  .services-section .game-type-title,
  .services-section .heading {
    font-size: 5.2rem !important;
    line-height: 1.08 !important;
    text-shadow: 0 0 36px rgba(111, 214, 247, 0.55), 0 0 12px rgba(111, 214, 247, 0.4), 0 2px 0 rgba(0, 0, 0, 0.28) !important;
    display: inline-block;
    padding: 0.4rem 1.8rem 0.6rem;
    border-radius: 1.2rem;
    box-shadow: 0 0 0 1px rgba(126, 219, 248, 0.26), 0 0 28px rgba(111, 214, 247, 0.34), inset 0 0 18px rgba(111, 214, 247, 0.08);
  }

  .services-section .el-line {
    margin-top: 1rem !important;
    margin-bottom: 1.8rem !important;
  }

  .services-section .swiper-container {
    padding-left: 7.2rem !important;
    padding-right: 7.2rem !important;
    overflow: visible !important;
  }

  /* Slide widths: leave to Swiper */

  .services-section .service-card .box-img img {
    height: 21.8rem !important;
    max-height: 21.8rem !important;
  }

  .services-section .service-card .content .top-content .title {
    font-size: 1.5rem !important;
  }

  .services-section .swiper-prev,
  .services-section .swiper-next {
    top: 57% !important;
    width: 4.4rem !important;
    height: 4.4rem !important;
  }

  .services-section .swiper-prev { left: 0.8rem !important; }
  .services-section .swiper-next { right: 0.8rem !important; }
}

html,
body {
  background:
    radial-gradient(1200px 520px at 50% 180px, rgba(103, 198, 232, 0.11), rgba(10, 39, 64, 0) 70%),
    radial-gradient(900px 420px at 15% 40%, rgba(103, 198, 232, 0.07), rgba(10, 39, 64, 0) 60%),
    linear-gradient(180deg, rgba(10, 39, 64, 0.97), rgba(5, 19, 31, 0.99));
  color: var(--ww-dim-text);
}

/* Add subtle “section glow” bands like the design */
.news-section,
.gallery-section,
.why-choose-us,
.services-section,
.explore-destinations-section {
  position: relative;
}

.news-section::before,
.gallery-section::before,
.why-choose-us::before {
  content: "";
  position: absolute;
  inset: -40px 0;
  pointer-events: none;
  background: radial-gradient(900px 260px at 50% 30%, rgba(103, 198, 232, 0.12), rgba(0, 0, 0, 0) 65%);
  opacity: 0.9;
}


/* Make the “card text” brighter like mock */
.news-section .item,
.why-choose-us .item,
.events-section .events-plan .item,
.tour-details-sidebar .box,
.gallery-section .item,
.service-card,
.tour-card {
  color: #fff;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .heading,
body .title {
  color: #fff;
}

/* Section headings like “TIN TỨC / HÌNH ẢNH” */
.news-section .heading,
.gallery-section .heading,
.why-choose-us .heading,
.news-section h2,
.gallery-section h2,
.why-choose-us h2 {
  color: #ffffff !important;
  letter-spacing: 0.08em;
  text-shadow: 0 0 22px rgba(103, 198, 232, 0.22);
}

a {
  color: inherit;
}

a:hover,
a:focus {
  color: var(--ww-dim-accent);
}

/* Icons: convert to cyan + pop */
.why-choose-us .item .icon,
.why-choose-us .item .icon *,
.service-card .content .bot-content .info-list li .ic,
.tour-card .content .bot-content .info-list li .ic,
.el-info-list li .icon {
  color: var(--ww-dim-accent) !important;
  filter: drop-shadow(0 0 10px rgba(103, 198, 232, 0.22));
}

/* Buttons that were explicitly “white” */
.btn-white,
.btn-white--brounded,
.btn-white--brounded:hover {
  background: var(--ww-dim-surface-soft) !important;
  border-color: var(--ww-dim-border) !important;
  color: var(--ww-dim-text) !important;
}

.btn-white:hover,
.btn-white:focus {
  background: var(--ww-dim-accent) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Unified button style to match design language */
.btn,
.btn-primary,
.btn-yellow,
.btn-blue,
.wpcf7-submit,
.booking-btn .booking-link {
  border: 1px solid rgba(103, 198, 232, 0.65) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(103, 198, 232, 0.15), 0 0 18px rgba(103, 198, 232, 0.3) !important;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-yellow:hover,
.btn-blue:hover,
.wpcf7-submit:hover,
.booking-btn .booking-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(103, 198, 232, 0.45) !important;
}

/* Primary surfaces */
.header,
.header.fixed {
  background-color: var(--ww-dim-surface) !important;
  color: var(--ww-dim-text);
}

/* Header typography: enforce white where design needs high contrast */
.header .wrapper,
.header .top-content,
.header .top-content *,
.header .menu .menu-item > a,
.header .call-box .call .content .text,
.header .call-box .call .content .number,
.header .booking-btn .booking-link .txt,
.header .language .language-active,
.header .language .language-active .arrow,
.header .language .language-list .language-item a,
.header .language .language-list .language-item label {
  color: #ffffff !important;
}

/* Keep secondary labels a little softer but still readable */
.header .top-content .text,
.header .call-box .call .content .text {
  color: rgba(230, 241, 255, 0.86) !important;
}

/* Header separators and nav structure */
.header .top-content,
.header .logo-box,
.header .call-box,
.header .call-box .call,
.header .menu .menu-item:not(:last-child) {
  border-color: rgba(103, 198, 232, 0.2) !important;
}

/* Social and utility icons in header */
.header .el-social li a {
  color: #ffffff !important;
  border: 1px solid rgba(103, 198, 232, 0.38);
  box-shadow: 0 0 14px rgba(103, 198, 232, 0.2);
}

.header .el-social li a:hover {
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(103, 198, 232, 0.34);
}

/* Active / hover nav color */
.header .menu .menu-item:hover > a,
.header .menu .menu-item.menu-item-current > a,
.header .menu .menu-item.current-menu-item > a,
.header .language .language-list .language-item:hover a {
  color: var(--ww-dim-accent) !important;
}

/* Arrow controls (slider nav) */
.swiper-prev,
.swiper-next,
.news-section .swiper-prev,
.news-section .swiper-next,
.gallery-section .swiper-prev,
.gallery-section .swiper-next {
  background: rgba(12, 49, 76, 0.9) !important;
  border: 1px solid rgba(103, 198, 232, 0.55) !important;
  color: #d9f4ff !important;
  box-shadow: 0 0 0 1px rgba(103, 198, 232, 0.2), 0 0 16px rgba(103, 198, 232, 0.28) !important;
}

.swiper-prev:hover,
.swiper-next:hover {
  background: var(--ww-dim-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(103, 198, 232, 0.45) !important;
}

/* Why-choose icons tuned to design */
.why-choose-us .item .icon,
.why-choose-us .item .icon i,
.why-choose-us .item .icon img {
  color: #7bd4f1 !important;
  opacity: 1 !important;
}

.why-choose-us .item .icon img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(23%) saturate(990%) hue-rotate(159deg) brightness(98%) contrast(91%);
}

/* Menus / flyouts use a slightly different surface */
.header .language .language-list,
.header .menu .menu-item.has-dropdown .nav-sub,
.header .mobile-nav-inner {
  background: var(--ww-dim-surface-soft) !important;
  color: var(--ww-dim-text);
}

/* Borders that were #ccc / #ddd */
.header,
.header.fixed,
.header .logo-box,
.header .language .language-list .language-item:not(:last-child),
.header .mobile-nav-inner .menu-item,
.header .mobile-nav-inner .call-box,
.footer .copyright,
.service-card .content .bot-content {
  border-color: var(--ww-dim-border) !important;
}

/* Neon card treatment (matches screenshot) */
.news-section .item,
.why-choose-us .item,
.events-section .events-plan .item,
.tour-details-sidebar .box,
.list-descriptions .dd-item,
.gallery-section .item,
.service-card,
.tour-card {
  background: linear-gradient(180deg, var(--ww-dim-card-2), var(--ww-dim-card)) !important;
  border: 1px solid rgba(103, 198, 232, 0.45) !important;
  border-radius: 12px;
  box-shadow: var(--ww-dim-glow-neon) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.news-section .item:hover,
.why-choose-us .item:hover,
.events-section .events-plan .item:hover,
.gallery-section .item:hover,
.service-card:hover,
.tour-card:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 198, 232, 0.6) !important;
  box-shadow: var(--ww-dim-glow-neon) !important;
}

/* Gallery images: subtle outline glow */
.gallery-section img,
.gallery-section .box-img,
.gallery-section .item img {
  border-radius: 10px;
}

.gallery-section .item,
.gallery-section .box-img,
.gallery-section .img {
  box-shadow: var(--ww-dim-glow-neon) !important;
}

/* Make text inside news cards readable */
.news-section .item .title,
.news-section .item h3,
.news-section .item h4,
.news-section .item a {
  color: rgba(255, 255, 255, 0.92) !important;
}

.news-section .item p,
.news-section .item .desc,
.news-section .item .excerpt {
  color: rgba(230, 241, 255, 0.78) !important;
}

/* Accent replacements */
.cta-action .list-action a,
#back-to-top,
.header .toggle-btn,
.header .el-social li a:hover,
.header .el-social li a,
.btn,
.btn-primary,
.btn-yellow,
.wpcf7-submit.btn-yellow,
.service-card .content .top-content .btn-group .book-btn,
.decor-left.blue {
  background: var(--ww-dim-accent) !important;
}

.cta-action .list-action a::after,
#back-to-top::after {
  background: var(--ww-dim-accent-soft) !important;
}

.header .menu .menu-item:hover > a,
.header .menu .menu-item.menu-item-current > a,
.header .menu .menu-item.has-dropdown .nav-sub li:hover a,
.header .menu .menu-item.has-dropdown .nav-sub li.active a,
.header .mobile-nav-inner .menu li.active > a,
.header .mobile-nav-inner .menu li:hover > a,
.header .mobile-nav-inner .menu .icon-dropdown,
.el-info-list li:hover a,
.service-card .content .top-content .price,
.service-card .content .bot-content .info-list li .ic {
  color: var(--ww-dim-accent) !important;
}

/* Convert every yellow accent in legacy CSS to blue accent */
.btn:hover,
.btn:after,
.btn-yellow--brounded,
.header .booking-btn:after,
.tour-card .content .top-content .btn-group .book-btn:hover,
.tour-card .content .top-content .btn-group .book-btn.active,
.tour-details-sidebar .box .head,
.video-slider .gallery .play-btn:hover,
.booking-banner-section .watch-now .play-btn:hover,
.service-card .content .top-content .btn-group .book-btn:hover,
.service-card .content .top-content .btn-group .book-btn.active {
  background: var(--ww-dim-accent) !important;
  border-color: var(--ww-dim-accent) !important;
}

.tour-details .tour-details-slider .thumbs-wrap .thumbs .swiper-slide-thumb-active::after {
  border-color: var(--ww-dim-accent) !important;
}

.btn-2,
[class*="btn-2"] {
  color: var(--ww-dim-accent) !important;
}

.video-slider .gallery .play-btn:hover:after,
.booking-banner-section .watch-now .play-btn:hover:after {
  background: var(--ww-dim-accent-soft) !important;
}

/* Replace white decorative bars / blocks */
.decor-left.white,
.btn-2:after {
  background: var(--ww-dim-surface) !important;
}

/* Inputs */
input,
textarea,
select,
.form-control {
  background: #0a2740 !important;
  border-color: var(--ww-dim-border) !important;
  color: var(--ww-dim-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: #90abc1 !important;
}

/* Force any remaining explicit black text to dim palette */
[style*="color: #000"],
[style*="color:#000"],
[style*="color: black"],
[style*="color:black"] {
  color: var(--ww-dim-text) !important;
}

/* Dropdowns / flyouts */
.header .language .language-list,
.header .menu .menu-item.has-dropdown .nav-sub {
  background: var(--ww-dim-surface-soft) !important;
  box-shadow: 0 1.6rem 5rem rgba(0, 0, 0, 0.35) !important;
}

/* Any inline-styled white bg from page builder content */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: rgb(255, 255, 255)"],
[style*="background-color: rgb(255, 255, 255)"] {
  background-color: var(--ww-dim-surface-soft) !important;
}

/* Footer tuning */
.footer {
  background: #0b2d48 !important;
  color: var(--ww-dim-text);
}

.footer .copyright,
.el-info-list li {
  color: var(--ww-dim-text-soft) !important;
}

/* =========================
   FINAL DESIGN MATCH PASS
   Apply dark design palette section-by-section
   ========================= */

/* Global section backgrounds (match right-side mock) */
.explore-destinations-section,
.services-section,
.news-section,
.gallery-section,
.why-choose-us-section,
.booking-banner-section,
.events-section,
.about-intro-section,
.faqs-section,
.contact-us-section {
  background: linear-gradient(180deg, #082a45 0%, #07253d 100%) !important;
}

/* Heading system */
.explore-destinations-section .heading,
.services-section .heading,
.news-section .heading,
.gallery-section .heading,
.why-choose-us-section .heading,
.booking-banner-section .heading,
.events-section .heading,
.about-intro-section .heading,
.faqs-section .heading {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(103, 198, 232, 0.25);
}

/* Body copy clarity across sections */
.explore-destinations-section p,
.services-section p,
.news-section p,
.gallery-section p,
.why-choose-us-section p,
.booking-banner-section p,
.events-section p,
.about-intro-section p,
.faqs-section p,
.contact-us-section p,
.explore-destinations-section li,
.services-section li,
.news-section li,
.gallery-section li,
.why-choose-us-section li,
.booking-banner-section li,
.events-section li,
.about-intro-section li,
.faqs-section li {
  color: #ffffff !important;
}

/* Why choose section card + icon style exactly in dark mode spirit */
.why-choose-us-section .item {
  background: rgba(9, 39, 61, 0.72) !important;
  border: 1px solid rgba(103, 198, 232, 0.44) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px rgba(103, 198, 232, 0.22), 0 0 20px rgba(103, 198, 232, 0.2) !important;
}

.why-choose-us-section .item .title {
  color: #ffffff !important;
}

.why-choose-us-section .item .description {
  color: rgba(225, 238, 251, 0.86) !important;
}

.why-choose-us-section .wrap-title .icon img,
.why-choose-us-section .item .icon img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(48%) saturate(602%) hue-rotate(166deg) brightness(101%) contrast(95%) drop-shadow(0 0 8px rgba(103, 198, 232, 0.25));
}

/* News list items + gallery tiles — per-card only (not .news-main wrapper) */
.news-section .item,
.gallery-section .item {
  background: rgba(8, 33, 53, 0.68) !important;
  border: 1px solid rgba(103, 198, 232, 0.48) !important;
  box-shadow: 0 0 0 1px rgba(103, 198, 232, 0.22), 0 0 22px rgba(103, 198, 232, 0.24) !important;
}

.news-section .news-main .title,
.news-section .item .title,
.news-section .item a {
  color: #ffffff !important;
}

/* Service tabs / chips */
.services-section .service-card .content .top-content .title,
.services-section .service-card .content .top-content .subtitle {
  color: #ffffff !important;
}

/* Buttons and CTA consistency */
.btn,
.btn-primary,
.btn-blue,
.btn-yellow,
.btn-white,
.wpcf7-submit,
.booking-banner-section .watch-now .play-btn,
.header .booking-btn .booking-link {
  background: #0f3f61 !important;
  border: 1px solid rgba(103, 198, 232, 0.62) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(103, 198, 232, 0.18), 0 0 20px rgba(103, 198, 232, 0.3) !important;
}

.btn:hover,
.btn-primary:hover,
.btn-blue:hover,
.btn-yellow:hover,
.btn-white:hover,
.wpcf7-submit:hover,
.booking-banner-section .watch-now .play-btn:hover,
.header .booking-btn .booking-link:hover {
  background: var(--ww-dim-accent) !important;
  box-shadow: 0 0 28px rgba(103, 198, 232, 0.46) !important;
  color: #ffffff !important;
}

/* Slider arrows across sections */
.swiper-prev,
.swiper-next,
.news-section .swiper-prev,
.news-section .swiper-next,
.gallery-section .swiper-prev,
.gallery-section .swiper-next,
.services-section .swiper-prev,
.services-section .swiper-next {
  background: #0f3f61 !important;
  border: 1px solid rgba(103, 198, 232, 0.62) !important;
  color: #dff6ff !important;
  box-shadow: 0 0 0 1px rgba(103, 198, 232, 0.2), 0 0 18px rgba(103, 198, 232, 0.26) !important;
}

.swiper-prev:hover,
.swiper-next:hover {
  background: var(--ww-dim-accent) !important;
  color: #ffffff !important;
}

/* Footer final dark match */
.footer {
  background: #071f33 !important;
}

/* =========================
   USER TWEAK PASS
   - remove white badge background (CSS approach)
   - add padding
   - yellow icons
   - equal height boxes
   ========================= */

/* Destination badges: try to remove white canvas without replacing source files */
.explore-destinations-section .lists {
  padding-top: 1.2rem;
  padding-bottom: 2.4rem;
}

.explore-destinations-section .lists .item {
  padding-left: 1rem;
  padding-right: 1rem;
}

.explore-destinations-section .lists .item .image img {
  background: transparent !important;
  height: 250px;
  object-fit: cover;
}

/* Why choose: equal cards + better spacing */
.why-choose-us-section [class*="col-"] {
  display: flex;
}

.why-choose-us-section .item {
  width: 100%;
  min-height: 19rem;
  margin-top: 2.2rem !important;
  padding: 2rem 2.2rem !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.why-choose-us-section .wrap-title {
  margin-bottom: 1rem;
}

.why-choose-us-section .item .description {
  margin-top: 0.6rem;
  line-height: 1.55;
}

/* Why choose icon -> yellow like design */
.why-choose-us-section .wrap-title .icon img,
.why-choose-us-section .item .icon img {
  filter: brightness(0) saturate(100%) invert(80%) sepia(53%) saturate(1059%) hue-rotate(358deg) brightness(101%) contrast(93%) drop-shadow(0 0 7px rgba(226, 183, 28, 0.32)) !important;
}

.why-choose-us-section .wrap-title .icon,
.why-choose-us-section .item .icon,
.why-choose-us-section .wrap-title .icon i,
.why-choose-us-section .item .icon i {
  color: #e2b71c !important;
}

/* Heading white: Kham pha / Dich vu / Tin tuc and similar section titles */
.game-type-title,
.section-head .heading,
.section-head .title,
.explore-destinations-section .heading,
.services-section .heading,
.news-section .heading,
.gallery-section .heading,
.why-choose-us-section .heading,
.booking-banner-section .heading {
  color: #ffffff !important;
}

/* News layout cleanup */
.news-section .news-main,
.news-section .swiper-slide {
  height: 100%;
}

.news-section .news-main {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}

.news-section .news-main .box-img {
  width: 100%;
}

.news-section .news-main .box-img img {
  width: 100%;
  height: 34rem !important;
  object-fit: cover;
  display: block;
}

.news-section .news-main .date,
.news-section .news-main .title,
.news-section .news-main .description,
.news-section .news-main .desc {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

.news-section .news-main .title {
  min-height: 7.2rem;
  line-height: 1.4;
  margin-bottom: 1.4rem;
}

/* =========================
   NEWS + SERVICES LAYOUT FIX
   ========================= */

/* Section spacing and heading presence */
.services-section,
.news-section {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Services section: remove extra dark gap and keep compact like design */
.services-section {
  padding-top: 2.4rem !important;
  padding-bottom: 1.4rem !important;
}

.services-section .container {
  padding-bottom: 0 !important;
}

.services-section .slide-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.services-section .swiper-container,
.services-section .swiper-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.services-section .heading,
.news-section .heading,
.services-section .game-type-title,
.news-section .game-type-title {
  color: #ffffff !important;
  margin-bottom: 2.4rem !important;
}

/* Make heading pop more */
.services-section .heading,
.services-section .game-type-title,
.news-section .heading,
.news-section .game-type-title {
  text-shadow: 0 0 20px rgba(103, 198, 232, 0.32), 0 0 4px rgba(255, 255, 255, 0.3);
  letter-spacing: 0.04em;
}

/* Keep swiper rows aligned */
.services-section .swiper-wrapper,
.news-section .swiper-wrapper {
  align-items: stretch;
}

.services-section .swiper-slide,
.news-section .swiper-slide {
  height: auto;
}

/* Service cards: equal height and stronger visual hierarchy */
.services-section .service-card {
  height: 100%;
  min-height: 26rem;
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid rgba(103, 198, 232, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(103, 198, 232, 0.22),
    0 -12px 26px -16px rgba(103, 198, 232, 0.32),
    0 14px 28px -16px rgba(103, 198, 232, 0.34) !important;
}

.services-section .service-card .box-img img {
  width: 100%;
  height: 24rem !important;
  max-height: 24rem !important;
  object-fit: cover;
}

.services-section .service-card .content .top-content {
  bottom: 1.2rem !important;
  transform: none !important;
  padding: 0 1rem;
}

.services-section .service-card .content .top-content .title {
  font-size: 1.6rem !important;
  line-height: 1.35;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
}

/* News cards: same heights, clean typography — wrapper stays neutral (shadow per slide) */
.news-section .news-main {
  min-height: 44rem;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.news-section .news-main .box-img img {
  height: 28rem !important;
}

.news-section .news-main .title {
  font-size: 2rem;
}

.news-section .news-main .date {
  font-size: 1.2rem;
  color: rgba(197, 223, 243, 0.9) !important;
}

/* Arrows: center vertically and keep prominent */
.services-section .swiper-prev,
.services-section .swiper-next,
.news-section .swiper-prev,
.news-section .swiper-next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4.8rem !important;
  height: 4.8rem !important;
}

/* Keep white logo even on fixed header */
.header .logo-box .logo .logo-white {
  display: block !important;
}

.header .logo-box .logo .logo {
  display: none !important;
}

.header.fixed .logo-box .logo .logo-white {
  display: block !important;
}

.header.fixed .logo-box .logo .logo {
  display: none !important;
}

/* Why-choose boxes: force equal height */
.why-choose-us-section .row {
  align-items: stretch;
}

.why-choose-us-section [class*="col-"] {
  display: flex;
}

.why-choose-us-section .item {
  height: auto !important;
  min-height: 28rem !important;
  max-height: none !important;
  overflow: visible !important;
}

.why-choose-us-section .item .description {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* Equal-height boxes on desktop only */
@media (min-width: 992px) {
  .why-choose-us-section .row {
    align-items: stretch;
  }

  .why-choose-us-section [class*="col-"] {
    display: flex;
  }

  .why-choose-us-section .item {
    width: 100%;
    height: 100%;
    min-height: 28rem !important;
  }
}

/* News slider: glow/shadow on each slide only — never on .news-main / .slide-content */
.news-section .news-main {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: unset !important;
  padding: 0 !important;
  overflow: visible !important;
}

.news-section .news-main .slide-content,
.news-section .news-main .swiper-container,
.news-section .news-main .swiper-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.news-section .swiper-slide {
  background: rgba(8, 33, 53, 0.72) !important;
  border: 1px solid rgba(129, 216, 246, 0.55) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden;
  height: auto !important;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

.news-section .swiper-slide:hover {
  border-color: rgba(169, 234, 255, 0.9) !important;
  box-shadow:
    0 0 0 1px rgba(103, 198, 232, 0.45),
    0 -16px 34px -18px rgba(103, 198, 232, 0.44),
    0 20px 40px -18px rgba(103, 198, 232, 0.56),
    0 14px 26px -20px rgba(0, 0, 0, 0.36) !important;
}

.news-section .swiper-slide .box-img img {
  border-radius: 0 !important;
}

/* Explore destinations: 5 items per row on desktop */
@media (min-width: 1200px) {
  .explore-destinations-section .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1.2rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .explore-destinations-section .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* White-background badge cleanup (CSS-only approximation) */
.explore-destinations-section .lists .item .image {
  isolation: isolate;
  background: transparent !important;
}

@media (max-width: 767px) {
  .explore-destinations-section .lists .item .image {
    height: auto !important;
    min-height: 0 !important;
  }

  .explore-destinations-section .lists .item .image img {
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: contain !important;
  }
}

/* === FINAL OVERRIDE: SERVICES SECTION VISUAL MATCH === */
.services-section {
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(103, 198, 232, 0.18), rgba(7, 39, 61, 0) 70%),
    linear-gradient(180deg, #0a3552 0%, #082f4a 42%, #072a42 100%) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.services-section .fz-40,
.services-section .game-type-title,
.services-section .heading {
  color: #ffffff !important;
  text-shadow: 0 0 24px rgba(103, 198, 232, 0.42), 0 2px 0 rgba(0, 0, 0, 0.25) !important;
  letter-spacing: 0.03em;
  font-weight: 800 !important;
}

.services-section .el-line img {
  filter: brightness(1.25) drop-shadow(0 0 10px rgba(103, 198, 232, 0.45));
}

.services-section .slide-content {
  padding-top: 0.8rem !important;
  padding-bottom: 0 !important;
}

/* Arrow: default subtle, hover pops strongly */
.services-section .swiper-prev,
.services-section .swiper-next {
  background: rgba(11, 52, 80, 0.9) !important;
  border: 1px solid rgba(114, 213, 245, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(103, 198, 232, 0.2), 0 0 14px rgba(103, 198, 232, 0.24) !important;
}

.services-section .swiper-prev .icon,
.services-section .swiper-next .icon {
  color: #dff7ff !important;
  font-size: 1.8rem;
}

.services-section .swiper-prev:hover,
.services-section .swiper-next:hover {
  background: #6ecfee !important;
  border-color: #a8ebff !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 0 0 2px rgba(168, 235, 255, 0.55), 0 0 28px rgba(114, 213, 245, 0.72) !important;
}

.services-section .swiper-prev:hover .icon,
.services-section .swiper-next:hover .icon {
  color: #ffffff !important;
}

/* === PIXEL MATCH FINAL: SERVICES BLOCK === */
.services-section {
  padding-top: 1.2rem !important;
  padding-bottom: 0.6rem !important;
}

.services-section .container {
  max-width: 1240px;
}

.services-section .text-center {
  margin-bottom: 0.6rem;
}

.services-section .fz-40,
.services-section .game-type-title,
.services-section .heading {
  font-size: 4.6rem !important;
  line-height: 1.12 !important;
}

.services-section .el-line {
  margin-top: 0.8rem !important;
  margin-bottom: 1.2rem !important;
}

.services-section .slide-content {
  margin-top: 0.2rem !important;
}

.services-section .swiper-container {
  padding-left: 5.8rem !important;
  padding-right: 5.8rem !important;
}

.services-section .swiper-slide .item {
  border-radius: 12px;
  overflow: hidden;
}

.services-section .service-card {
  min-height: unset !important;
  border: 1px solid rgba(111, 203, 237, 0.72) !important;
  box-shadow: 0 0 0 2px rgba(103, 198, 232, 0.22), 0 0 24px rgba(103, 198, 232, 0.36) !important;
}

.services-section .service-card .box-img img {
  height: 20.2rem !important;
  max-height: 20.2rem !important;
}

.services-section .service-card .content .top-content {
  bottom: 0.9rem !important;
}

.services-section .service-card .content .top-content .title {
  font-size: 1.45rem !important;
  letter-spacing: 0.01em;
}

.services-section .swiper-prev,
.services-section .swiper-next {
  width: 4.2rem !important;
  height: 4.2rem !important;
  top: 58% !important;
}

.services-section .swiper-prev {
  left: 1.2rem !important;
}

.services-section .swiper-next {
  right: 1.2rem !important;
}

/* Explore destinations main heading -> white */
.explore-destinations-section h2,
.explore-destinations-section .fz-40,
.explore-destinations-section .title,
.explore-destinations-section .heading {
  color: #ffffff !important;
}

/* === DESIGN LOCK: SERVICES SECTION (match reference) === */
@media (min-width: 1024px) {
  .services-section {
    padding-top: 1rem !important;
    padding-bottom: 0.2rem !important;
  }

  .services-section .container {
    max-width: 1160px !important;
  }

  .services-section .text-center {
    margin-bottom: 0.2rem !important;
  }

  .services-section .fz-40,
  .services-section .game-type-title,
  .services-section .heading {
    font-size: 4.4rem !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    color: #eaf8ff !important;
    text-shadow:
      0 0 30px rgba(108, 207, 242, 0.48),
      0 0 10px rgba(108, 207, 242, 0.4),
      0 2px 0 rgba(0, 0, 0, 0.28) !important;
  }

  .services-section .el-line {
    margin-top: 0.6rem !important;
    margin-bottom: 1rem !important;
  }

  .services-section .el-line img {
    filter: brightness(1.35) saturate(1.08) drop-shadow(0 0 14px rgba(108, 207, 242, 0.56));
  }

  .services-section .slide-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Stop showing clipped half-cards on sides */
  .services-section .swiper-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .services-section .swiper-wrapper {
    align-items: stretch !important;
  }

  /* Slide widths: leave to Swiper */

  .services-section .service-card {
    border-radius: 10px !important;
    border: 1px solid rgba(129, 216, 246, 0.68) !important;
    box-shadow: 0 0 0 1px rgba(103, 198, 232, 0.28), 0 0 20px rgba(103, 198, 232, 0.36) !important;
  }

  .services-section .service-card .box-img img {
    height: 17.8rem !important;
    max-height: 17.8rem !important;
  }

  .services-section .service-card .content .top-content .title {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }

  .services-section .swiper-prev,
  .services-section .swiper-next {
    width: 4rem !important;
    height: 4rem !important;
    top: 58% !important;
    z-index: 20 !important;
  }

  .services-section .swiper-prev {
    left: -5.2rem !important;
  }

  .services-section .swiper-next {
    right: -5.2rem !important;
  }
}

/* ===== RESET SERVICES LAYOUT TO ORIGINAL LOOK ===== */
@media (min-width: 1024px) {
  section.services-section,
  section.services-section.pb-6.-mt-5.overflow-hidden {
    margin-top: -7rem !important;
    z-index: 4 !important;
    padding-top: 0 !important;
    padding-bottom: 2.2rem !important;
    overflow: visible !important;
  }

  /* Carousel stays in theme .container like other sections (no full-bleed overrides). */

  section.services-section .text-center {
    margin-bottom: 0.9rem !important;
  }

  section.services-section .fz-40,
  section.services-section .game-type-title,
  section.services-section .heading {
    font-size: 4.2rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    text-shadow:
      0 0 28px rgba(108, 207, 242, 0.42),
      0 0 10px rgba(108, 207, 242, 0.35),
      0 2px 0 rgba(0, 0, 0, 0.28) !important;
  }

  section.services-section .el-line {
    margin-top: 0.8rem !important;
    margin-bottom: 1rem !important;
  }

  section.services-section .slide-content {
    position: relative !important;
    isolation: isolate !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Same horizontal rhythm as .news-section — arrows use main.css offsets (-10rem) */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  section.services-section .swiper-container,
  section.services-section .swiper-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  section.services-section .swiper-container {
    position: relative !important;
    z-index: 1 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  /* widths / gutters come from Swiper JS — do not override with !important */

  section.services-section .swiper-slide {
    height: auto !important;
  }

  section.services-section .swiper-slide .item .service-card {
    height: auto !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(129, 216, 246, 0.55) !important;
    box-shadow:
      0 0 0 1px rgba(103, 198, 232, 0.26),
      0 -12px 28px -17px rgba(103, 198, 232, 0.34),
      0 14px 30px -17px rgba(103, 198, 232, 0.36) !important;
    transition:
      box-shadow 0.35s ease,
      border-color 0.35s ease,
      transform 0.35s ease !important;
  }

  section.services-section .swiper-slide .item .service-card:hover {
    border-color: rgba(175, 236, 255, 0.92) !important;
    box-shadow:
      0 0 0 2px rgba(103, 198, 232, 0.55),
      0 -18px 38px -18px rgba(103, 198, 232, 0.52),
      0 22px 42px -18px rgba(103, 198, 232, 0.58),
      0 -10px 22px -22px rgba(48, 168, 213, 0.22),
      0 14px 34px -22px rgba(0, 0, 0, 0.42) !important;
    transform: unset;
  }

  section.services-section .swiper-slide .item .service-card .box-img {
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  section.services-section .swiper-slide .item .service-card .box-img,
  section.services-section .swiper-slide .item .service-card .box-img img {
    height: 24rem !important;
    min-height: 24rem !important;
    max-height: 24rem !important;
    object-fit: cover !important;
  }

  section.services-section .swiper-slide .item .service-card .content .top-content {
    bottom: -3rem !important;
    padding: 0 !important;
  }

  section.services-section .swiper-slide .item .service-card .content .top-content .title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
  }

  /* Restore original hover interaction */
  section.services-section .swiper-slide .item .service-card:hover .content .top-content {
    bottom: 50% !important;
    transform: translateY(50%) !important;
  }

  section.services-section .swiper-prev,
  section.services-section .swiper-next {
    width: 5.25rem !important;
    height: 5.25rem !important;
    font-size: 1.85rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    pointer-events: auto !important;
  }

  section.services-section .swiper-prev .icon,
  section.services-section .swiper-next .icon {
    font-size: inherit !important;
  }

  /* Align with news slider (.swiper-prev / .swiper-next in main.css: ±10rem) */
  section.services-section .swiper-prev {
    left: -10rem !important;
  }

  section.services-section .swiper-next {
    right: -10rem !important;
  }
}

/* ===== Contact + Service popup in brand blue tone ===== */
.contact-us .content,
.popup-booking .form-wrap,
.popup-booking .step-one,
.popup-booking .step-two {
  background: linear-gradient(180deg, #0c3555 0%, #082e4c 100%) !important;
  color: #e7f5ff !important;
  border: 1px solid rgba(103, 198, 232, 0.38) !important;
  box-shadow: 0 0 0 1px rgba(103, 198, 232, 0.2), 0 0 24px rgba(103, 198, 232, 0.2) !important;
}

/* Popup header in brand yellow */
.popup-booking .game-name-title {
  background: #e2b71c;
  color: #fff;
}

/* Remove one inner frame to avoid double-border feel */
.popup-booking .step-one,
.popup-booking .step-two {
  border: none !important;
  box-shadow: none !important;
}

.contact-us .content .location-detail .location-name,
.contact-us .content .location-detail .location-address,
.contact-us .content .location-detail .location-phone,
.contact-us .content .location-detail a,
.contact-us .content p,
.contact-us .content li,
.popup-booking .description,
.popup-booking .note .description,
.popup-booking .paxs-max,
.popup-booking .price-range,
.popup-booking .locations,
.popup-booking .game-duration,
.popup-booking .game-count,
.popup-booking .game-duration label,
.popup-booking .locations label,
.popup-booking .game-count label,
.popup-booking .note label,
.popup-booking .custom-radio > label,
.popup-booking .custom-checkbox > label,
.popup-booking .custom-radio > span,
.popup-booking .custom-checkbox > span {
  color: #e7f5ff !important;
}

.contact-us .my-tabs .tabs-nav li {
  background: #0e3b5d !important;
  border: 1px solid rgba(103, 198, 232, 0.35) !important;
  color: #dff4ff !important;
}

.contact-us .my-tabs .tabs-nav li.active {
  background: #12486f !important;
  color: #67c6e8 !important;
}

/* Keep one active cue only (background), remove extra cyan underline */
.contact-us .my-tabs .tabs-nav li:after {
  display: none;
}

.popup-booking input,
.popup-booking select,
.popup-booking textarea {
  color: #e7f5ff;
  background: #0a2f4b;
  border-color: rgba(103, 198, 232, 0.35);
}

/* Loading states */
.our-tour #overlay {
  background: rgba(4, 24, 40, 0.72);
}

.our-tour .spinner {
  border: 4px rgba(103, 198, 232, 0.28) solid;
  border-top: 4px #67c6e8 solid;
}

.text-updating {
  color: #bdeaff;
}

/* Full-page loader in brand blue tone */
#loader-container {
  background:
    radial-gradient(900px 420px at 50% 35%, rgba(103, 198, 232, 0.16), rgba(10, 39, 64, 0) 70%),
    linear-gradient(180deg, #082a45 0%, #07253d 100%);
}

#loader-container .loader:after {
  border-top: 2px solid #67c6e8;
  border-right: 2px solid #67c6e8;
  box-shadow: 0 0 20px rgba(103, 198, 232, 0.38);
}

/* Social icons: default yellow, hover blue */
.el-social li a,
.footer .el-social li a,
.header .el-social li a {
  background: #e2b71c !important;
  border-color: #e2b71c !important;
  color: #0b2d48 !important;
}

.el-social li a:hover,
.footer .el-social li a:hover,
.header .el-social li a:hover {
  background: #e2b71c !important;
  border-color: #e2b71c !important;
  color: #0b2d48 !important;
  box-shadow: 0 0 16px rgba(226, 183, 28, 0.42) !important;
}

/* Pagination dots in deeper blue for better clarity */
.swiper-pagination .swiper-pagination-bullet {
  background: rgba(13, 75, 116, 0.82);
}

.swiper-pagination .swiper-pagination-bullet-active {
  background: #e2b71c !important;
  box-shadow: 0 0 10px rgba(226, 183, 28, 0.45) !important;
}

/* Language dropdown: yellow hover */
.header .language .language-list .language-item a:hover,
.header .language .language-list .language-item:hover a,
.header .language .language-list .language-item:hover label {
  background: #e2b71c;
  color: #0b2d48;
}