/*
Theme Name: Saola AI
Theme URI: https://saolaai.com
Author: Saola AI Team
Author URI: https://saolaai.com
Description: A modern Business/Landing page theme for Saola AI.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saolaai-theme
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-primary: #043873;
  --blue-light: #ecf7ff;
  --blue-accent: #229ad6;
  --blue-card: #63a0e9;
  --orange: #faa935;
  --check-green: #7fe094;
  --icon-cyan: #66daff;
  --text-dark: #1a1d1f;
  --text-medium: #454c52;
  --text-light: #6a6a6a;
  --gray-100: #f6f7f9;
  --gray-300: #ced2d6;
  --nav-text: #272d4e;
  --footer-bg: #f7f6ff;
  --font-main: 'Exo 2', sans-serif;
  --font-hero: 'Inter', sans-serif;
  --font-nav: 'Roboto', sans-serif;
  --font-footer: 'Space Grotesk', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  color: var(--text-dark);
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===== NAVBAR (Figma 4168-33406: px-218 py-10, gap 38px menu, 38px actions-inner, 24px before search) ===== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #ffffff;
  height: 70px;
  display: flex;
  align-items: center;
  transition: box-shadow .3s;
}

.navbar-inner {
  width: 100%;
  padding: 10px 218px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Custom logo (set via Appearance > Customize > Site Identity) */
.logo-saola-custom {
  width: 136.782px;
  height: 50px;
  display: flex;
  align-items: center;
}
.logo-saola-custom img,
.logo-saola-custom a {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-saola-img {
  width: 136.782px;
  height: 50px;
  display: block;
}

/* Logo Saola (Figma: SaolaNew-Ngang 3) — 50px height, 136.782px width, 13 parts */
.logo-saola {
  position: relative;
  width: 136.782px;
  height: 50px;
  flex-shrink: 0;
  overflow: hidden;
}

.logo-saola-part {
  position: absolute;
  display: block;
}

.logo-saola .logo-saola-part img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.logo-text {
  font-family: var(--font-nav);
  font-size: 18px;
  font-weight: 500;
  color: #272d4e;
  line-height: normal;
  white-space: nowrap;
}

/* Menu: Figma Frame 48095635 — Menu 1 x=0, Menu 2 x=99 (w=61) → gap = 38px giữa các mục */
.nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: #272d4e;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-nav);
  line-height: normal;
  transition: color .2s;
  white-space: nowrap;
  display: block;
}

.nav-links a:hover { color: var(--blue-accent); }

/* Right block: gap 24px between [Đăng nhập + Dùng thử] and search icon */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

/* Đăng nhập + Dùng thử: Figma gap-[38px] */
.nav-actions-inner {
  display: flex;
  align-items: center;
  gap: 38px;
}

/* Đăng nhập: Figma Roboto Medium 18px #272d4e */
.btn-login {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-nav);
  color: #272d4e;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s;
}

.btn-login:hover { color: var(--blue-accent); }

/* Dùng thử: Figma w-120 h-47 rounded-5 bg-#faa935 text 18px white */
.btn-primary {
  width: 120px;
  height: 47px;
  background: #faa935;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-nav);
  cursor: pointer;
  transition: background .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn-primary:hover { background: #e8981e; }

/* Search: Figma 16.002×15.999px — wrap in 40px touch target */
.search-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity .2s;
}

.search-btn .search-icon-img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.search-btn:hover { opacity: 0.7; }

/* ===== HERO (Figma frame 1919x791) ===== */
.hero {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: clamp(520px, 41.2vw, 791px);
  margin: 70px auto 0;
  overflow: hidden;
  background: var(--blue-primary);
}

.hero-bg-overlay {
  position: absolute;
  top: -111.5%;
  left: 37%;
  width: 105%;
  height: 240%;
  pointer-events: none;
  z-index: 0;
}
.hero-bg-overlay img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
}

.hero-content-wrap {
  position: absolute;
  left: 11.4%;
  top: 16.4%;
  width: 44.3%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.25vw, 24px);
  z-index: 2;
}

.hero-title {
  font-family: var(--font-hero);
  font-size: clamp(32px, 3.9vw, 75px);
  font-weight: 600;
  color: #fff;
  line-height: 1.27;
  width: 100%;
}

.hero-desc {
  font-family: var(--font-hero);
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: 300;
  color: #e5e7ea;
  line-height: 1.4;
  max-width: 100%;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: clamp(180px, 12.3vw, 236px);
  padding: clamp(12px, 0.94vw, 18px) clamp(18px, 1.35vw, 26px);
  background: #faa935;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 0 0 1px rgba(103,110,118,.16), 0 2px 5px rgba(103,110,118,.08);
}

.btn-hero:hover { background: #e8971f; }

.hero-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-dot {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
}
.hero-dot-tr {
  left: 78.6%;
  top: 13.8%;
  width: 13%;
  height: 69.9%;
}

.hero-dot-wrap-l {
  position: absolute;
  left: 56.4%;
  top: 34.7%;
  width: 28.8%;
  height: 31.6%;
  overflow: hidden;
  opacity: 0.35;
}
.hero-dot-l {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45.3%;
  height: 221%;
  transform: translate(-50%, -50%) rotate(90deg);
}

.hero-dot-br {
  left: 87.9%;
  top: 48.7%;
  width: 13%;
  height: 69.9%;
}

.hero-lightning-el {
  position: absolute;
  left: 80.5%;
  top: 13.8%;
  width: 3.4%;
  height: 14.5%;
  pointer-events: none;
  z-index: 3;
}

.hero-person-card {
  position: absolute;
  left: 58.8%;
  top: 22.4%;
  width: 14.7%;
  height: 24.7%;
  border-radius: clamp(10px, 1.04vw, 20px);
  overflow: hidden;
  box-shadow: 0 18px 52.854px rgba(16,66,122,0.4);
  z-index: 2;
}
.hero-person-card img {
  width: 118.49% !important;
  height: 124.13% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  position: relative;
  left: -18.64%;
  top: -6.47%;
}

.hero-dashboard-card {
  position: absolute;
  left: 62.7%;
  top: 31.7%;
  width: 47.3%;
  height: 53.3%;
  background: #fff;
  border-radius: clamp(10px, 1.04vw, 20px);
  overflow: hidden;
  z-index: 1;
}
.hero-dashboard-card img {
  width: 78.98% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

.hero-cart {
  position: absolute;
  left: 60.9%;
  top: 73.2%;
  width: 3.94%;
  aspect-ratio: 1;
  background: #e99c1f;
  border-radius: 50%;
  z-index: 3;
}

.hero-cart-review {
  position: absolute;
  left: 18.5%;
  top: 18.5%;
  width: 63.5%;
  height: 63.5%;
}

.hero-star-lg {
  position: absolute;
  left: 15.1%;
  top: 8.8%;
  width: 28.2%;
  height: 28.2%;
  display: block;
}
.hero-star-sm {
  position: absolute;
  left: 0.6%;
  top: 0.6%;
  width: 15.4%;
  height: 15.4%;
  display: block;
}

.hero-cart-icon-wrap {
  position: absolute;
  left: 50%;
  top: 12.5%;
  width: 75%;
  height: 75%;
  transform: translateX(-50%) scaleY(-1) rotate(180deg);
}
.hero-cart-icon-wrap img {
  width: 108.33% !important;
  height: 108.33% !important;
  max-width: none !important;
  position: absolute;
  left: -4.17%;
  top: -4.17%;
  display: block;
}

.hero-safe-badge {
  position: absolute;
  left: 90.7%;
  top: 82.6%;
  width: 5.1%;
  height: 8.7%;
  pointer-events: none;
  z-index: 3;
}

/* ===== SECTION HEADINGS (Figma: Exo Bold 48/60 tracking -0.96px, subtitle Exo Medium 20/30) ===== */
.section-header {
  text-align: center;
  margin-bottom: clamp(40px, 3.33vw, 64px);
}

.section-title {
  font-family: var(--font-main);
  font-size: clamp(26px, 2.5vw, 48px);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  letter-spacing: -0.96px;
  margin-bottom: clamp(16px, 1.25vw, 24px);
}

.section-title.white { color: #fff; }

.section-subtitle {
  font-family: var(--font-main);
  font-size: clamp(15px, 1.04vw, 20px);
  font-weight: 500;
  color: var(--text-medium);
  line-height: 1.5;
  max-width: 828px;
  margin: 0 auto;
}

.section-subtitle.light { color: #f6f7f9; }

/* ===== SOLUTIONS SECTION ===== */
.solutions {
  background: var(--blue-light);
  padding: clamp(60px, 6.25vw, 120px) 0;
  position: relative;
  overflow: hidden;
}

.solutions-union-wrap {
  position: absolute;
  top: -70.33%;
  right: 28.71%;
  bottom: -81.05%;
  left: -26.83%;
  pointer-events: none;
  z-index: 0;
}

.solutions-union-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
}

.solutions .container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(20px, 9.4vw, 180px);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.3vw, 44px);
}

.solution-card {
  background: #fff;
  border-radius: clamp(12px, 1.04vw, 20px);
  padding: clamp(16px, 1.25vw, 24px);
  box-shadow: 0 10px 0 0 #9abfdb, 0 5px 15px rgba(0,0,0,.12), 0 15px 35px rgba(103,110,118,.08);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.25vw, 24px);
  width: 100%;
}

.card-icon {
  width: 60px; height: 60px;
  background: var(--icon-cyan);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 2px 3px 14px rgba(0,0,0,.14);
  flex-shrink: 0;
}

.card-icon svg { width: 32px; height: 32px; }

/* Card title: Figma Exo Bold 20/30 */
.card-title {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 30px;
  margin-bottom: 0;
}

/* Card desc: Figma Exo Regular 16/24 */
.card-desc {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 24px;
}

.card-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 20px;
}

/* Plus icon: Figma node 4168:32775 — 20×20 composite (outer bg + inner cross) */
.core-plus {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.core-plus-bg {
  position: absolute;
  display: block;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}
/* Inner cross wrapper: inset 29.17% each side */
.core-plus-inner-wrap {
  position: absolute;
  top: 29.17%; right: 29.17%;
  bottom: 29.16%; left: 29.16%;
}
/* Inner cross expand: inset -12% (overflow) */
.core-plus-inner-expand {
  position: absolute;
  inset: -12%;
}
.core-plus-inner-expand img {
  display: block;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}

.check-icon {
  width: 20px; height: 20px;
  background: var(--check-green); /* #7fe094 */
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon-img {
  display: block;
  width: 12px !important;
  height: 10px !important;
  max-width: none !important;
}

/* Feature text: Figma Exo Medium 18/28 #1a1d1f */
.card-feature-text {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 28px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* "Nhiều tính năng khác": Figma Exo Regular 16/24 */
.card-more {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-dark);
  white-space: nowrap;
}

/* "Xem thêm" button: Figma h=42px px=16px rounded=4px Space Grotesk Bold 16px #229ad6 + 24px arrow */
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 4px;
  color: var(--blue-accent);
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-footer); /* Space Grotesk */
  text-decoration: none;
  transition: opacity .2s;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.72;
}

.btn-link img { display: block; flex-shrink: 0; }

.btn-link:hover { opacity: .75; }

.solutions .container {
  position: relative;
  z-index: 1;
}

.solutions .section-header {
  margin-bottom: 90px;
}

.card-header-block {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 91px;
}

.solutions-cta {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* CTA button: Figma w=236px px=26px py=18px rounded=8px bg=#faa935 Exo SemiBold 18/28 white gap=12px shadow */
.btn-sol-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 236px;
  padding: 18px 26px;
  background: var(--orange);
  color: #fff;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(103,110,118,.08), 0 0 0 1px rgba(103,110,118,.16), 0 1px 1px rgba(0,0,0,.12);
  transition: background .2s;
}

.btn-sol-cta img { display: block; flex-shrink: 0; }

.btn-sol-cta:hover { background: #e8981e; }

/* ===== CORE FEATURES ===== */
.core {
  background: var(--blue-primary);
  padding: clamp(60px, 6.25vw, 120px) 0;
  position: relative;
  overflow: hidden;
}

.core-ring {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-105deg);
  opacity: 0.2;
  display: block;
  max-width: none !important;
}

/* Left rings — vw-based */
.core-ring-1  { width: 35.5vw; height: 36vw;  left: -13.6vw; top:  1.8%;  }
.core-ring-2  { width: 30.5vw; height: 30.5vw; left: -10.5vw; top:  5.8%; }
.core-ring-3  { width: 26vw;   height: 25.8vw; left: -7.7vw;  top:  9.4%; }
.core-ring-4  { width: 21.9vw; height: 21.5vw; left: -5.1vw;  top: 12.7%; }
.core-ring-5  { width: 18.3vw; height: 17.8vw; left: -2.9vw;  top: 15.7%; }
.core-ring-6  { width: 15vw;   height: 14.6vw; left: -0.9vw;  top: 18.4%; }
.core-ring-7  { width: 12vw;   height: 11.7vw; left:  0.7vw;  top: 21.1%; }
.core-ring-8  { width: 9.4vw;  height: 9.1vw;  left:  2.2vw;  top: 23.5%; }
.core-ring-9  { width: 6.9vw;  height: 6.8vw;  left:  3.5vw;  top: 25.9%; }
.core-ring-10 { width: 4.6vw;  height: 4.5vw;  left:  4.7vw;  top: 28%;   }
.core-ring-11 { width: 2.4vw;  height: 2.4vw;  left:  5.8vw;  top: 30%;   }

.core-decor {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  display: block;
  max-width: none !important;
}
.core-decor-teal-person  { left: 13.1%;  top: 27%;  width: 6.4vw; height: 6.4vw; }
.core-decor-orange-dollar{ left: 4.6%;   top: 44.8%; width: 4.8vw; height: 4.8vw; }
.core-decor-pink-clock   { left: 11.7%;  top: 72.2%; width: 5.5vw; height: 5.5vw; }

.core-decor-blue-chart { right: 5.7%; top: 37.5%; width: 8vw; height: 8vw; }
.core-decor-blue-chart .core-decor-inset {
  position: absolute;
  top: -6.49%; right: -15.58%; bottom: -24.68%; left: -15.58%;
}

.core-decor-star { right: 15.2%; top: 19.5%; width: 4.9vw; height: 4.9vw; }
.core-decor-star .core-decor-inset {
  position: absolute;
  top: -10.64%; right: -25.53%; bottom: -40.43%; left: -25.53%;
}

.core-decor-inset img {
  display: block;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}
.core-decor-teal-bag { right: 14.2%; top: 72.3%; width: 4.6vw; height: 4.6vw; }

/* Right-side rings — vw-based */
.core-ring-r-1  { width: 35.5vw; height: 36vw;  left: 90.2%;  top: 43.4%; }
.core-ring-r-2  { width: 30.5vw; height: 30.5vw; left: 93.2%;  top: 47.5%; }
.core-ring-r-3  { width: 26vw;   height: 25.8vw; left: 96%;    top: 51.1%; }
.core-ring-r-4  { width: 21.9vw; height: 21.5vw; left: 98.6%;  top: 54.3%; }
.core-ring-r-5  { width: 18.3vw; height: 17.8vw; left: 100.8%; top: 57.4%; }
.core-ring-r-6  { width: 15vw;   height: 14.6vw; left: 102.8%; top: 60.1%; }
.core-ring-r-7  { width: 12vw;   height: 11.7vw; left: 104.5%; top: 62.8%; }
.core-ring-r-8  { width: 9.4vw;  height: 9.1vw;  left: 106%;   top: 65.2%; }
.core-ring-r-9  { width: 6.9vw;  height: 6.8vw;  left: 107.2%; top: 67.5%; }
.core-ring-r-10 { width: 4.6vw;  height: 4.5vw;  left: 108.4%; top: 69.7%; }
.core-ring-r-11 { width: 2.4vw;  height: 2.4vw;  left: 109.6%; top: 71.7%; }

.core > .container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

.core .section-subtitle {
  max-width: none;
}

.core-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(16px, 1.25vw, 24px);
  row-gap: clamp(20px, 1.67vw, 32px);
  margin-top: 6px;
}

.core-card {
  background: #fff;
  border-radius: clamp(12px, 1.04vw, 20px);
  padding: clamp(16px, 1.25vw, 24px);
  box-shadow: 0 5px 15px rgba(0,0,0,.12), 0 15px 35px rgba(103,110,118,.08);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.25vw, 24px);
}

/* ===== TARGET SECTION ===== */
.target {
  background: #fff;
}
.target-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(60px, 6.25vw, 120px) clamp(40px, 16.7vw, 320px) clamp(60px, 5.2vw, 100px);
}
.target-header {
  width: 100%;
  max-width: 912px;
  margin: 0 auto clamp(48px, 4.7vw, 90px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.25vw, 24px);
}
.target-header .section-title {
  margin-bottom: 0;
}
.target-header .section-subtitle {
  max-width: none;
  margin: 0;
}

/* Cards column */
.target-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.33vw, 64px);
}

/* Card wrapper (shadow + card stacked) */
.target-card-wrap {
  position: relative;
}

/* Rotated shadow behind each card */
.tcard-shadow {
  position: absolute;
  top: 14px;
  left: -8px;
  right: 16px;   /* 1280 - 8 - 16 = 1272px at reference width */
  height: 562px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 48px;
  transform: rotate(4deg);
  z-index: 0;
}
.tcard-shadow-lg {
  top: 15px;
  left: -5px;
  right: 23px;   /* 1280 - 5 - 23 = 1252 ≈ 1262px (scales with card) */
  height: 763px;
}

/* Card base */
.target-card {
  position: relative;
  border-radius: 48px;
  overflow: hidden;
  z-index: 1;
}
.target-card-hotel {
  background: #63a0e9;
  height: 576px;
}
.target-card-customer {
  background: #043873;
  height: 787px;
}

/* Card header: badge + title — absolute, % horizontal */
.tcard-header {
  position: absolute;
  left: 4.0625%;      /* 52 / 1280 */
  top: 60px;
  width: 48.046875%;  /* 615 / 1280 */
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.tcard-badge {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.tcard-badge img {
  position: absolute;
  display: block;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}
.tcard-title {
  font-family: var(--font-main);
  font-size: clamp(22px, 1.88vw, 36px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.72px;
  color: #fff;
  flex: 1;
  min-width: 0;
}

/* Separator row: line + subtitle — absolute, % horizontal */
.tcard-sep-row {
  position: absolute;
  left: 5.9375%;    /* 76 / 1280 */
  top: 118px;
  width: 53.75%;    /* 688 / 1280 */
  display: flex;
  gap: 11px;
  align-items: center;
}
/* Separator: line SVG rotated 90° → appears as vertical 1px line */
.tcard-sep {
  display: flex;
  height: 60px;
  width: 0;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
}
.tcard-sep-rotate {
  transform: rotate(90deg);
  flex: none;
}
.tcard-sep-line {
  height: 0;
  position: relative;
  width: 60px;
}
.tcard-sep-line-inner {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: 0;
}
.tcard-sep-line-inner img {
  display: block;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}
.tcard-subtitle {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fafafa;
  white-space: nowrap;
}

/* Features list — absolute, hotel card only */
.tcard-features {
  position: absolute;
  left: 4.453125%;    /* 57 / 1280 */
  top: 193px;
  width: 49.140625%;  /* 629 / 1280 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Feature row (used in both hotel + subcards) */
.tcard-feature {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 60px;
  padding: 6px 0;
  flex-shrink: 0;
  width: 100%;
}
.tcard-feature-inner {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 20px;
}
.tcard-feature-text {
  flex: 1;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #fafafa;
}

/* Plus icon composite */
.target-plus {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.target-plus-base {
  position: absolute;
  display: block;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0;
}
.target-plus-mid {
  position: absolute;
  top: 29.17%;
  right: 29.17%;
  bottom: 29.16%;
  left: 29.16%;
}
.target-plus-inner {
  position: absolute;
  inset: -12%;
}
.target-plus-inner img {
  display: block;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* Hotel card: right photo panel — % horizontal */
.tcard-photo-overlay {
  position: absolute;
  background: rgba(255, 255, 255, 0.18);
  left: 58.125%;    /* 744 / 1280 */
  top: 159px;
  width: 44.375%;   /* 568 / 1280 */
  height: 473px;
  border-radius: 24px;
}
.tcard-photo {
  position: absolute;
  left: 61.875%;      /* 792 / 1280 */
  top: 107px;
  width: 39.609375%;  /* 507 / 1280 */
  height: 473px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.tcard-photo img {
  position: absolute;
  inset: 0;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
  display: block;
}

/* Customer card: 3 subcards */
.customer-subcards {
  position: absolute;
  top: 195px;
  left: 50%;
  transform: translateX(-50%);
  width: 89.0625%;
  display: flex;
  gap: clamp(12px, 1vw, 20px);
  align-items: stretch;
}
.customer-subcard {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid #7db8ff;
  border-right: 1px solid #7db8ff;
  border-radius: 20px;
  padding: clamp(16px, 1.04vw, 20px);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.subcard-title {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: #fff;
  flex-shrink: 0;
}
.subcard-photo {
  height: 168px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.subcard-photo img {
  position: absolute;
  inset: 0;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ===== PARTNERS & CUSTOMERS ===== */
.partners {
  background: #fff;
  padding: clamp(48px, 4.2vw, 80px) 0;
  overflow: hidden;
}

.partners-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.partners-header {
  text-align: center;
  margin-bottom: clamp(32px, 2.9vw, 56px);
}

.partners-title {
  font-family: var(--font-exo);
  font-size: clamp(24px, 2.08vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0 0 12px;
}

.partners-subtitle {
  font-family: var(--font-inter);
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.partners-marquee {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.partners-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: partners-marquee 35s linear infinite;
}

.partners-track:hover {
  animation-play-state: paused;
}

@keyframes partners-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 16px 36px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  margin: 0 16px;
  background: #fff;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  min-width: 180px;
  text-decoration: none;
}

.partner-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.partner-logo-img {
  display: block !important;
  height: 52px !important;
  width: auto !important;
  max-width: 160px !important;
  max-height: 52px !important;
  object-fit: contain;
}

.partner-name {
  font-family: var(--font-exo);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ===== REGISTER / CTA ===== */
.register {
  background: var(--blue-light);
  position: relative;
  overflow: hidden;
}

.reg-deco {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.reg-deco-1 { left: -33.1%; top: -32%; width: 43.5%; height: 90.8%; }
.reg-deco-1 .reg-deco-inner {
  background: rgba(255,255,255,0.6);
  width: 81.7%; height: 81.9%;
  border-radius: 48px;
  transform: rotate(-12.81deg) skewX(4.71deg);
}
.reg-deco-2 { left: 52.4%; top: 45.7%; width: 39.9%; height: 99.1%; }
.reg-deco-2 .reg-deco-inner {
  background: rgba(79,156,249,0.11);
  width: 76.4%; height: 74.1%;
  border-radius: 48px;
  transform: rotate(-155.01deg);
}
.reg-deco-3 { left: -33.6%; top: -44.9%; width: 47.5%; height: 100.3%; }
.reg-deco-3 .reg-deco-inner {
  background: rgba(255,255,255,0.22);
  width: 73.3%; height: 76%;
  border-radius: 48px;
  transform: rotate(-23.35deg) skewX(7.59deg);
}
.reg-deco-4 { left: 51.2%; top: 54.8%; width: 36.2%; height: 88.8%; }
.reg-deco-4 .reg-deco-inner {
  background: rgba(255,255,255,0.52);
  width: 84.1%; height: 82.6%;
  border-radius: 48px;
  transform: rotate(-166.97deg);
}

.register-inner {
  position: relative;
  padding: clamp(48px, 5.2vw, 100px) clamp(40px, 9.4vw, 180px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 2.5vw, 48px);
  z-index: 1;
}

.register-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 2.4vw, 46px);
}

.register-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.register-title {
  font-size: clamp(22px, 2.5vw, 48px);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  letter-spacing: -0.96px;
}

.register-desc {
  font-size: clamp(15px, 1.04vw, 20px);
  font-weight: 500;
  color: var(--text-medium);
  line-height: 1.5;
}

.register-features {
  display: flex;
  flex-direction: column;
  gap: 46px;
}

.register-features-row {
  display: flex;
  gap: clamp(24px, 3.1vw, 60px);
}

.register-feature {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.register-feature-icon {
  width: 60px; height: 60px;
  background: var(--icon-cyan);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 2px 3px 14px rgba(0,0,0,.14);
  flex-shrink: 0;
}

.register-feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.register-feature-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 30px;
}

.register-feature-desc {
  font-size: 16px;
  color: var(--text-dark);
  line-height: 24px;
  font-weight: 400;
}

/* Form */
.register-form-wrap {
  width: clamp(340px, 26.4vw, 507px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.register-form {
  background: #fff;
  border-radius: 16px;
  padding: 32px 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,.12), 0 15px 35px rgba(103,110,118,.08);
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.form-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  color: var(--text-dark);
}

.form-title {
  font-size: clamp(20px, 1.56vw, 30px);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.27;
}

.form-subtitle {
  font-size: 16px;
  color: var(--text-dark);
  line-height: 24px;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-input {
  height: 48px;
  border: none;
  box-shadow: 0 0 0 1px #cdd1dc;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 18px;
  font-family: var(--font-main);
  color: var(--text-dark);
  outline: none;
  transition: box-shadow .2s;
  background: #fff;
  width: 100%;
}

.form-input::placeholder {
  color: #9ea5ad;
  font-family: var(--font-main);
  font-size: 18px;
  line-height: 28px;
}

.form-input:focus { box-shadow: 0 0 0 2px var(--blue-accent); }

.form-note {
  font-size: 16px;
  font-style: italic;
  color: var(--text-dark);
  line-height: 24px;
}

.form-note strong { font-weight: 600; }

.form-note-link {
  color: #1681b8;
  font-weight: 600;
  text-decoration: none;
}

.btn-form {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 26px;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  cursor: pointer;
  transition: background .2s;
  text-align: center;
  justify-content: center;
  width: 236px;
  align-self: center;
  box-shadow: 0 2px 5px rgba(103,110,118,.08), 0 0 0 1px rgba(103,110,118,.16), 0 1px 1px rgba(0,0,0,.12);
}

.btn-form:hover { background: #e8981e; }

/* ===== FAQ ===== */
.faq {
  background: #fff;
  padding: clamp(60px, 6.25vw, 120px) 0;
}

.faq-inner {
  max-width: 1034px;
  margin: 0 auto;
  padding: 0 clamp(20px, 2vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.3vw, 44px);
  align-items: center;
}

.faq-title {
  font-family: var(--font-main);
  font-size: clamp(26px, 2.5vw, 48px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.96px;
  color: var(--text-dark);
  text-align: center;
  width: 100%;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Collapsed item */
.faq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ced2d6;
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  min-height: 64px;
  transition: background .2s, border-color .2s;
}

/* Expanded item */
.faq-item.open {
  align-items: flex-start;
  gap: 24px;
  border-color: transparent;
  background: #f6f7f9;
  min-height: auto;
}

.faq-item-content {
  flex: 1;
  min-width: 0;
}

.faq-question-text {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 500;
  color: #24292e;
  line-height: 30px;
}

.faq-answer {
  display: none;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  color: #1681b8;
  line-height: 28px;
  margin-top: 16px;
}

.faq-item.open .faq-answer { display: block; }

/* Icon */
.faq-icon {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
}

.faq-icon-bg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
}

.faq-icon-symbol {
  position: absolute;
  top: 29.17%; right: 29.17%; bottom: 29.16%; left: 29.16%;
}

.faq-icon-add, .faq-icon-rem {
  position: absolute;
  inset: -11.25%;
  width: calc(100% + 22.5%) !important;
  height: calc(100% + 22.5%) !important;
  max-width: none !important;
  display: block;
}

.faq-icon-rem { display: none; }
.faq-item.open .faq-icon-add { display: none; }
.faq-item.open .faq-icon-rem { display: block; }

/* ===== PRESS / BÁO CHÍ NÓI VỀ ===== */
.press {
  background: #fff;
  padding: clamp(48px, 4.2vw, 80px) 0;
  overflow: hidden;
}

.press-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.press-title {
  font-family: var(--font-exo);
  font-size: clamp(24px, 2.08vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  text-align: center;
  margin: 0 0 clamp(32px, 2.9vw, 56px);
}

.press-marquee {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.press-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: press-marquee 40s linear infinite;
}

.press-track:hover {
  animation-play-state: paused;
}

@keyframes press-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.press-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(56px, 4.2vw, 80px);
  padding: 12px clamp(20px, 2vw, 40px);
  margin: 0 clamp(10px, 1vw, 20px);
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.3s ease, filter 0.3s ease;
  filter: grayscale(30%);
}

.press-item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.press-logo-img {
  display: block;
  height: clamp(28px, 2.5vw, 48px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* ===== NEWS / TIN TỨC ===== */
.news {
  background: #f8f9fb;
  padding: clamp(48px, 4.2vw, 80px) 0;
}

.news-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

.news-title {
  font-family: var(--font-exo);
  font-size: clamp(24px, 2.08vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  text-align: center;
  margin: 0 0 clamp(32px, 2.5vw, 48px);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 1.67vw, 32px);
}

.news-card {
  background: #fff;
  border-radius: clamp(12px, 1vw, 20px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.news-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.news-card-thumb {
  position: relative;
  width: 100%;
  padding-top: 62.5%; /* 5:8 aspect ratio */
  overflow: hidden;
}

.news-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-card:hover .news-card-img {
  transform: scale(1.05);
}

.news-card-body {
  padding: clamp(16px, 1.25vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.6vw, 12px);
  flex: 1;
}

.news-card-heading {
  font-family: var(--font-exo);
  font-size: clamp(15px, 1.04vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-excerpt {
  font-family: var(--font-inter);
  font-size: clamp(13px, 0.83vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-cta {
  text-align: center;
  margin-top: clamp(28px, 2.08vw, 40px);
}

.btn-news-more {
  display: inline-block;
  font-family: var(--font-exo);
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 600;
  color: var(--blue-primary, #2563eb);
  border: 2px solid var(--blue-primary, #2563eb);
  border-radius: 999px;
  padding: clamp(10px, 0.73vw, 14px) clamp(28px, 2.08vw, 40px);
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-news-more:hover {
  background: var(--blue-primary, #2563eb);
  color: #fff;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--footer-bg);
}

.footer-content {
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(40px, 3.1vw, 60px) clamp(24px, 4vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.footer-content-inner {
  display: flex;
  gap: clamp(40px, 7.6vw, 145px);
  align-items: flex-start;
  justify-content: center;
}

.footer-brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-logo {
  display: block;
  text-decoration: none;
  width: 136.782px;
  height: 50px;
}

.footer-tagline {
  font-family: var(--font-footer);
  font-size: 14px;
  color: #6a6a6a;
  line-height: 1.6;
  width: 285px;
}

.footer-links {
  display: flex;
  gap: clamp(32px, 5.7vw, 110px);
  flex-shrink: 0;
}

.footer-col-title {
  font-family: var(--font-footer);
  font-size: 16px;
  font-weight: 700;
  color: #060336;
  line-height: 1.72;
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}

.footer-col ul a {
  font-family: var(--font-footer);
  font-size: 14px;
  color: #444;
  text-decoration: none;
  line-height: 1.6;
  transition: color .2s;
}

.footer-col ul a:hover { color: var(--blue-accent); }

.footer-divider {
  position: absolute;
  bottom: 0;
  left: 19.5%;
  right: 19.5%;
  height: 1px;
  background: #ddd;
}

.footer-bottom {
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-copyright {
  font-family: var(--font-footer);
  font-size: 16px;
  color: #060336;
  line-height: 1.72;
}

/* ===== SOCIAL FLOATING BAR (Figma 4168:33401 — 68×344, gap 24px, fixed bottom-right) ===== */
/* Container: flex-col, gap 24px, fixed bottom-right */
.social-float {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-end;
}

/* Outer pill: 68×68, p-8px, border-radius 290px, glass bg, shadow */
.social-float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 8px;
  border-radius: 290px;
  background: var(--sf-outer-bg);
  box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.19);
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}

.social-float-btn:hover {
  transform: scale(1.08);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
}

/* Inner circle: 52×52, border-radius 60px, flex center, solid bg */
.social-float-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 60px;
  background: var(--sf-inner-bg);
  flex-shrink: 0;
  overflow: hidden;
}

.social-float-inner img {
  display: block;
  flex-shrink: 0;
}

/* SaolaAI: crop wide PNG logo (1205×340) — show only icon mark at left
   Container 29×30px, img fills height → natural w≈106px → crops to leftmost 29px */
.sf-saola-crop {
  position: relative;
  width: 29px;
  height: 30px;
  overflow: hidden;
  flex-shrink: 0;
}

.sf-saola-crop img {
  position: absolute;
  left: 0;
  top: 0;
  height: 30px !important;
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0;
}

/* ===== HAMBURGER + MOBILE MENU ===== */
/* Hamburger: hidden on desktop, visible on mobile */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

/* Mobile menu overlay: hidden by default */
.mobile-menu {
  display: none;
  position: fixed;
  top: 48px; /* navbar height on mobile */
  left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 999;
  overflow-y: auto;
}

.mobile-menu.open { display: flex; flex-direction: column; }

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 20px;
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-link,
.mobile-nav-links a {
  display: block;
  padding: 16px 0;
  font-family: var(--font-nav);
  font-size: 18px;
  font-weight: 500;
  color: var(--nav-text);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-300);
}

.mobile-nav-link:hover,
.mobile-nav-links a:hover { color: var(--blue-accent); }

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-actions .btn-login,
.mobile-nav-actions .btn-primary {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ===== SHARED BUTTONS ===== */
.btn-black {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 26px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 0 0 1px rgba(103,110,118,.16), 0 2px 5px rgba(103,110,118,.08);
}

.btn-black:hover { background: #222; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1500px) {
  /* Target: reduce padding and unlock absolute layout earlier */
  .target-container { padding: 100px 160px 90px; }
  .target-header { width: 100%; max-width: 912px; }

  .target-card-hotel,
  .target-card-customer {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 40px 40px 48px;
  }

  .tcard-header,
  .tcard-sep-row,
  .tcard-features {
    position: static;
    width: 100%;
    top: auto;
    left: auto;
  }
  .tcard-header { margin-bottom: 16px; }
  .tcard-sep-row { margin-bottom: 24px; }
  .tcard-subtitle { white-space: normal; }

  .tcard-photo-overlay { display: none; }
  .tcard-photo {
    position: static;
    width: 100%;
    height: 320px;
    margin-top: 24px;
    border-radius: 16px;
    order: 10;
  }

  .customer-subcards {
    position: static;
    transform: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
    justify-content: unset;
  }
  .customer-subcard {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .tcard-shadow { display: none; }

}

@media (max-width: 1200px) {
  .navbar-inner { padding: 10px 40px; }
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-content-wrap { width: 50%; }
}

@media (max-width: 900px) {
  .navbar-inner { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-hamburger { display: flex; align-items: center; }

  .hero {
    height: auto;
    min-height: 480px;
  }
  .hero-content-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 60px 40px 40px;
    align-items: flex-start;
    gap: 24px;
    box-sizing: border-box;
  }
  .hero-visual { display: none; }
  .core-decor { display: none; }

  .solutions-grid { grid-template-columns: 1fr; }
  .core-grid { grid-template-columns: 1fr; }

  .tcard-subtitle { white-space: normal; }
  .customer-subcards { flex-direction: column; gap: 16px; }
  .customer-subcard { width: 100%; flex: none; }

  .register-inner { flex-direction: column; }
  .register-form-wrap { width: 100%; }
  .register-features-row { flex-direction: column; }
  .form-header { white-space: normal; }
  .btn-form { width: 100%; }

  .footer-content-inner { flex-direction: column; gap: 32px; }
  .footer-links { flex-wrap: wrap; }
  .footer-divider { position: static; left: auto; right: auto; width: 100%; }
  .footer-bottom { height: auto; padding: 24px; }

  .partner-item { height: 80px; min-width: 140px; padding: 12px 24px; }
  .partner-logo-img { height: 40px !important; max-width: 120px !important; }

  .news-grid { grid-template-columns: 1fr; gap: 24px; }
  .news-inner { padding: 0 24px; }
}

/* ===== MOBILE (Figma Mobile frame 4168:33881 — 390px) ===== */
@media (max-width: 600px) {

  /* --- Navbar: 390×48px, px-20 py-8 --- */
  .navbar {
    height: 48px;
  }
  .navbar-inner {
    padding: 8px 20px;
    height: 48px;
  }
  .logo-saola {
    width: 87px;
    height: 32px;
  }
  .nav-links,
  .nav-actions { display: none; }
  .nav-hamburger { display: flex; align-items: center; }

  /* --- Hero: 390×796px, mt-48px, centered content --- */
  .hero {
    height: auto;
    min-height: 796px;
    margin-top: 48px;
    overflow: hidden;
  }
  .hero-bg-overlay {
    top: -485px;
    left: 53px;
    width: 816px;
    height: 1274px;
  }
  /* Content block: x=23, y=120, w=344, flex-col, items-center, gap-34px */
  .hero-content-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 120px 23px 0;
    align-items: center;
    gap: 34px;
    box-sizing: border-box;
  }
  /* Title: Inter SemiBold, 36px, lh-40px, text-center */
  .hero-title {
    font-size: 36px;
    line-height: 40px;
    width: 100%;
    text-align: center;
  }
  /* Description: Inter Light, 16px, lh-22px, text-center, max-w 294px */
  .hero-desc {
    font-size: 16px;
    line-height: 22px;
    max-width: 294px;
    text-align: center;
  }
  /* Button: Exo SemiBold 16px, w-244px, px-24 py-16 */
  .btn-hero {
    width: 244px;
    padding: 16px 24px;
    font-size: 16px;
    gap: 10px;
  }
  .btn-hero svg { width: 20px; height: 20px; }
  /* Featured image: show below content (relative, scaled) */
  .hero-visual {
    position: relative;
    display: block;
    width: 340px;
    margin: 60px auto 0;
    pointer-events: none;
  }
  .hero-dot-tr  { left: 141px; top: 0; width: 83px; height: 183px; }
  .hero-dot-wrap-l {
    left: 0; top: 55px;
    width: 183px; height: 83px;
  }
  .hero-dot-br  { left: 200px; top: 91px; width: 83px; height: 183px; }
  .hero-dashboard-card { left: 40px; top: 47px; width: 300px; height: 139px; border-radius: 20px; }
  .hero-dashboard-card img { width: 300px; height: 139px; }
  .hero-person-card { left: 15px; top: 22px; width: 93px; height: 65px; border-radius: 10px; }
  .hero-person-card img { width: 93px; height: 65px; }
  .hero-safe-badge { left: 218px; top: 180px; width: 32px; height: 23px; }
  .hero-cart { left: 29px; top: 155px; width: 25px; height: 25px; border-radius: 38px; }
  .hero-cart-review { left: 34px; top: 160px; width: 16px; height: 16px; }
  .hero-lightning-el { left: 153px; top: 0; width: 21px; height: 38px; }
  .hero-star-lg { display: none; }
  .hero-star-sm { display: none; }
  .core-ring { display: none; }

  /* --- Solutions section: px-20, gap-30px, single col --- */
  .solutions { padding: 60px 0 40px; }
  .solutions .container { padding: 0 20px; }
  .section-header { padding: 0 12px; }
  .section-title {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -0.52px;
  }
  .section-subtitle { font-size: 16px; line-height: 24px; }
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .solution-card {
    width: 100%;
    max-width: 348px;
    margin: 0 auto;
  }
  .solutions-cta { text-align: center; }
  .solutions-cta .btn-hero {
    width: 244px;
    padding: 16px 24px;
    font-size: 16px;
  }

  /* --- Core/Features section: single col (already done at 900px) --- */
  .core-section { padding: 60px 0; }
  .core-section .container { padding: 0 20px; }
  .core-grid { grid-template-columns: 1fr; gap: 20px; }
  .core-card { padding: 20px; }

  /* --- Target section (Giá trị): mobile layout --- */
  .target-section { padding: 60px 0; }
  .target-container { padding: 48px 16px; }
  .target-cards { gap: 32px; }
  .target-header { text-align: center; }
  .target-header .section-title { font-size: 26px; line-height: 32px; }
  .target-header .section-subtitle { font-size: 16px; }
  .target-card-hotel,
  .target-card-customer { padding: 28px 16px 36px; border-radius: 32px; }
  .tcard-title { font-size: 24px; line-height: 32px; }
  .tcard-badge { width: 36px; height: 36px; }
  .tcard-subtitle { font-size: 14px; line-height: 20px; }
  .tcard-feature-text { font-size: 14px; line-height: 20px; }
  .tcard-photo { height: 180px; margin-top: 20px; }
  /* Subcards: smaller padding on mobile */
  .customer-subcard { padding: 16px; }
  .subcard-title { font-size: 16px; line-height: 24px; }
  .subcard-photo { height: 120px; }

  /* --- Register/CTA section --- */
  .register-inner { padding: 48px 20px; gap: 32px; }
  .register-title { font-size: 22px; line-height: 30px; letter-spacing: -0.44px; }
  .register-desc { font-size: 15px; line-height: 24px; }
  .register-left .section-title { font-size: 22px; line-height: 30px; }
  .register-features-row { gap: 24px; }
  .core { padding: 60px 0; }

  /* --- FAQ --- */
  .faq-inner { padding: 0 20px; }
  .faq-title  { font-size: 26px; line-height: 32px; }
  .faq-item-content { padding: 16px 0; }

  /* --- Footer --- */
  .footer-content { padding: 40px 20px; }
  .footer-links { flex-direction: column; gap: 24px; }

  /* --- Partners section --- */
  .partners { padding: 48px 0; }
  .partners-inner { padding: 0 20px; }
  .partners-header { margin-bottom: 32px; }
  .partners-title { font-size: 24px; line-height: 30px; }
  .partners-subtitle { font-size: 15px; }
  .partner-item {
    height: 64px;
    min-width: 120px;
    padding: 10px 20px;
    margin: 0 8px;
    border-radius: 12px;
  }
  .partner-logo-img {
    height: 32px !important;
    max-width: 90px !important;
  }
  .partner-name { font-size: 14px; }

  /* --- Press section --- */
  .press { padding: 40px 0; }
  .press-inner { padding: 0 20px; }
  .press-title { font-size: 22px; margin-bottom: 24px; }
  .press-item { height: 48px; padding: 8px 14px; margin: 0 6px; }
  .press-logo-img { height: 24px; max-width: 100px; }

  /* --- News section --- */
  .news { padding: 40px 0; }
  .news-inner { padding: 0 20px; }
  .news-title { font-size: 22px; margin-bottom: 24px; }
  .news-grid { grid-template-columns: 1fr; gap: 20px; }
  .news-card-heading { font-size: 16px; }
  .news-card-excerpt { font-size: 14px; }

  /* --- Target subcards: already handled above --- */

  /* --- Solutions: fix card on narrow screens --- */
  .solution-card { max-width: 100%; }
  .solution-card-title { font-size: 20px; }

  /* --- Register form full-width --- */
  .register-form-inner { padding: 24px 16px; }
  .reg-input, .reg-select { font-size: 16px; }
  .btn-register { width: 100%; font-size: 16px; }

  /* --- Core cards --- */
  .core-card-title { font-size: 18px; }
  .core-card-desc { font-size: 14px; }

  /* --- Social float: right 16px (390-305.5-68=16.5), gap 14px --- */
  .social-float {
    right: 16px;
    bottom: 20px;
    gap: 14px;
  }
}

/* ===== PAGE TEMPLATE (page.php) ===== */

/* Hero banner — tiêu đề trang */
.page-hero {
  background: var(--blue-primary);
  padding: clamp(48px, 5.2vw, 100px) 0 clamp(40px, 4.2vw, 80px);
  margin-top: 70px;
}

.page-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Breadcrumb */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-main);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

.page-breadcrumb a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color .2s;
}

.page-breadcrumb a:hover { color: #fff; }

.page-breadcrumb-sep { color: rgba(255,255,255,0.4); }

/* Page title */
.page-hero-title {
  font-family: var(--font-main);
  font-size: clamp(28px, 3.3vw, 56px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Page subtitle/excerpt */
.page-hero-desc {
  font-family: var(--font-main);
  font-size: clamp(15px, 1.04vw, 18px);
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

/* Content body */
.page-body {
  background: #fff;
  padding: clamp(48px, 5.2vw, 96px) 0 clamp(64px, 6.25vw, 120px);
}

.page-body-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 60px);
}

/* WP editor content — typography */
.page-entry-content {
  font-family: var(--font-main);
  font-size: clamp(15px, 1.04vw, 18px);
  line-height: 1.75;
  color: var(--text-dark);
}

.page-entry-content h2 {
  font-size: clamp(22px, 2.08vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  margin: 2em 0 0.75em;
  color: var(--text-dark);
}

.page-entry-content h3 {
  font-size: clamp(18px, 1.56vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.5em 0 0.5em;
  color: var(--text-dark);
}

.page-entry-content p { margin: 0 0 1.25em; }

.page-entry-content ul,
.page-entry-content ol {
  padding-left: 1.5em;
  margin: 0 0 1.25em;
}

.page-entry-content li { margin-bottom: 0.5em; }

.page-entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1em 0;
}

.page-entry-content a {
  color: var(--blue-accent);
  text-decoration: underline;
}

.page-entry-content a:hover { color: var(--blue-primary); }

/* Placeholder — hiển thị khi trang chưa có nội dung */
.page-placeholder {
  text-align: center;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.page-placeholder-icon {
  font-size: 48px;
  line-height: 1;
}

.page-placeholder-text {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.page-placeholder-sub {
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

.page-placeholder-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 28px;
  background: var(--blue-primary);
  color: #fff;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s;
}

.page-placeholder-btn:hover { background: #032d5e; }

/* Navbar top margin cho các trang nội dung */
@media (max-width: 600px) {
  .page-hero { margin-top: 48px; }
  .page-hero-inner { gap: 12px; }
}

/* ===== POPUP ĐĂNG KÝ NHẬN TƯ VẤN ===== */
.reg-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: popup-fadein 0.3s ease;
}
.reg-popup-overlay[hidden] { display: none; }
@keyframes popup-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Popup chỉ chứa form card — dùng lại style .register-form */
.reg-popup {
  position: relative;
  animation: popup-slidein 0.35s ease;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px;
  width: 100%;
  max-width: 507px; /* đúng width form card trong Figma */
}
/* Nút CTA thay thế form ở section trang chủ */
.register-form-wrap--cta {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-form--open-popup { cursor: pointer; }
@keyframes popup-slidein {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.reg-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
}
.reg-popup-close:hover { background: rgba(255,255,255,0.32); }
.reg-popup-error {
  background: rgba(255,80,80,0.15);
  border: 1.5px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 12px;
}
.reg-popup-error[hidden] { display: none; }
.reg-popup-success {
  text-align: center;
  padding: 48px 20px;
  background: var(--register-bg, #0a1628);
  border-radius: 20px;
}
.reg-popup-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.reg-popup-success p {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  line-height: 1.7;
}
.reg-popup-success[hidden] { display: none; }