@import "tailwindcss";

:root {
  --card: rgb(244 238 222 / 0.08);
  --ring: #c8a46a;
  --input: #343a2f;
  --muted: rgb(244 238 222 / 0.08);
  --accent: rgb(200 164 106 / 0.18);
  --border: rgb(215 199 157 / 0.22);
  --radius: 0.25rem;
  --chart-1: #c8a46a;
  --chart-2: #8d9276;
  --chart-3: #66715b;
  --chart-4: #b9a889;
  --chart-5: #d6c9aa;
  --popover: #23271f;
  --primary: #c8a46a;
  --secondary-accent: #8d9276;
  --tertiary-accent: #d6c9aa;
  --sidebar: #1a1d18;
  --font-mono: IBM Plex Mono, monospace;
  --font-sans: var(--font-noto-sans), system-ui, sans-serif;
  --secondary: rgb(244 238 222 / 0.12);
  --background: #121510;
  --font-serif: var(--font-noto-serif), Georgia, "Times New Roman", serif;
  --foreground: #f0eadc;
  --ink-on-light: #1c2419;
  --ink-on-light-muted: #51604a;
  --destructive: #d85a42;
  --shadow-blur: 5px;
  --shadow-color: hsl(95 16% 8%);
  --sidebar-ring: #c8a46a;
  --shadow-spread: 0px;
  --shadow-opacity: 0.12;
  --sidebar-accent: #d6c9aa;
  --sidebar-border: #d6c9aa;
  --card-foreground: #f4eedf;
  --shadow-offset-x: 2px;
  --shadow-offset-y: 3px;
  --sidebar-primary: #c8a46a;
  --muted-foreground: #c8c0ad;
  --accent-foreground: #f4eedf;
  --popover-foreground: #f4eedf;
  --primary-foreground: #171a14;
  --sidebar-foreground: #4a3f35;
  --secondary-foreground: #f4eedf;
  --destructive-foreground: #ffffff;
  --sidebar-accent-foreground: #4a3f35;
  --sidebar-primary-foreground: #171a14;
  --tour-ink: #f8f2e5;
  --tour-jade: #8d9276;
  --tour-jade-soft: #32382f;
  --tour-gold: #c8a46a;
  --tour-gold-light: #e0cf9f;
  --tour-coral: #c8a46a;
  --tour-coral-soft: #3a3328;
  --tour-teal: #8d9276;
  --tour-teal-soft: #2b332b;
  --tour-purple: #8d9276;
  --tour-purple-soft: #32382f;
  --tour-wood: #171a14;
  --tour-glass: rgb(26 30 23 / 0.76);
  --tour-shadow: 0 28px 90px rgb(0 0 0 / 0.34);
  --surface-glass: rgb(244 238 222 / 0.075);
  --surface-glass-strong: rgb(244 238 222 / 0.13);
  --surface-band: rgb(244 238 222 / 0.035);
  --surface-border: rgb(215 199 157 / 0.20);
  --surface-shadow: 0 24px 72px rgb(0 0 0 / 0.26);
  --accent-gradient: linear-gradient(135deg, #c8a46a 0%, #8d9276 100%);
  --hero-gradient: linear-gradient(135deg, #f8f2e5 0%, #d6c9aa 100%);
  --neon-glow: none;
}

.dark {
  --card: #2b2f25;
  --ring: #c8a46a;
  --input: #343a2f;
  --muted: #2b2f25;
  --accent: #383a2f;
  --border: #444535;
  --popover: #23271f;
  --primary: #c8a46a;
  --sidebar: #1a1d18;
  --secondary: #343a2f;
  --background: #121510;
  --foreground: #f0eadc;
  --muted-foreground: #c8c0ad;
  --primary-foreground: #171a14;
  --tour-ink: #f8f2e5;
  --tour-jade: #8d9276;
  --tour-gold: #c8a46a;
  --tour-gold-light: #e0cf9f;
  --tour-wood: #171a14;
  --tour-glass: rgb(26 30 23 / 0.82);
}

@theme inline {
  --color-card: var(--card);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-border: var(--border);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-popover: var(--popover);
  --color-primary: var(--primary);
  --color-sidebar: var(--sidebar);
  --color-font-mono: var(--font-mono);
  --color-font-sans: var(--font-sans);
  --color-secondary: var(--secondary);
  --color-background: var(--background);
  --color-font-serif: var(--font-serif);
  --color-foreground: var(--foreground);
  --color-destructive: var(--destructive);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-border: var(--sidebar-border);
  --color-card-foreground: var(--card-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent-foreground: var(--accent-foreground);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary-foreground: var(--primary-foreground);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgb(200 164 106 / 0.12), transparent 32rem),
    radial-gradient(circle at 88% 22%, rgb(141 146 118 / 0.12), transparent 30rem),
    linear-gradient(135deg, rgb(18 21 16), rgb(28 32 25) 54%, rgb(15 17 13)),
    var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  overflow-x: hidden;
  position: relative;
}

body::before,
body::after,
.public-page::before,
.public-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    linear-gradient(90deg, rgb(215 199 157 / 0.028) 1px, transparent 1px),
    linear-gradient(180deg, rgb(215 199 157 / 0.02) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(180deg, black, transparent 82%);
  opacity: 0.42;
}

body::after {
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgb(18 21 16 / 0.34) 100%);
  mix-blend-mode: multiply;
}

body:has(.landing-page) {
  overflow-y: auto;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.font-display-vn {
  font-family: var(--font-sans);
}

.tour-welcome {
  --card: #fffcf5;
  --primary: #9d7d42;
  --background: #f5f1e6;
  --foreground: #4a3f35;
  --muted-foreground: #7d6b56;
  --tour-ink: #1d2b22;
  --tour-jade: #315f50;
  --tour-gold: #9d7d42;
  --tour-gold-light: #e8cfaa;
  --tour-wood: #3a2f27;
}

.public-page {
  position: relative;
  isolation: isolate;
  --background: #f3f7f0;
  --foreground: #24463a;
  --muted-foreground: #61766b;
  --primary: #8e5f0b;
  --primary-foreground: #fff8e8;
  --tour-ink: #0e3427;
  --tour-jade: #245f4b;
  --tour-jade-soft: #dceadd;
  --tour-gold: #8e5f0b;
  --tour-gold-light: #d6b468;
  --tour-wood: #0f2f25;
  --surface-glass: rgb(255 255 255 / 0.72);
  --surface-glass-strong: rgb(255 255 255 / 0.92);
  --surface-band: rgb(222 236 222 / 0.68);
  --surface-border: rgb(25 76 55 / 0.16);
  --surface-shadow: 0 24px 70px rgb(23 73 50 / 0.13);
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0.94) 0%, rgb(243 247 240 / 0.94) 44%, rgb(227 239 224 / 0.98) 100%),
    var(--background);
  color: var(--foreground);
}

.public-page::before,
.public-page::after {
  z-index: 0;
}

.public-page > * {
  position: relative;
  z-index: 1;
}

.public-page::before {
  background:
    linear-gradient(112deg, rgb(255 255 255 / 0.82) 0%, transparent 30%, rgb(182 222 188 / 0.18) 62%, transparent 100%),
    repeating-linear-gradient(90deg, rgb(30 84 58 / 0.045) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgb(169 111 18 / 0.032) 0 1px, transparent 1px 84px);
  background-size: 180% 100%, 84px 84px, 84px 84px;
  filter: none;
  opacity: 0.9;
  animation: public-ambient-pan 18s ease-in-out infinite alternate;
}

.public-page::after {
  background:
    linear-gradient(180deg, transparent 0%, rgb(244 248 239 / 0.36) 58%, rgb(244 248 239 / 0.86) 100%),
    linear-gradient(90deg, rgb(255 255 255 / 0.5), transparent 28%, transparent 72%, rgb(255 255 255 / 0.38));
  opacity: 0.84;
  backdrop-filter: none;
}

.public-page h1,
.public-page h2,
.public-page h3 {
  overflow-wrap: break-word;
  text-wrap: balance;
  word-break: normal;
}

/* Tiêu đề hiển thị dùng serif trang trọng + tracking âm để có sức nặng thị giác. */
.public-page h1,
.public-page h2 {
  font-family: var(--font-serif);
  letter-spacing: -0.018em;
  font-feature-settings: "liga" 1, "kern" 1;
}

.public-display {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
}

.public-display-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

.public-page p,
.public-page dd {
  overflow-wrap: break-word;
}

.public-heading-safe {
  display: block;
  line-height: 1.1;
  padding-block: 0.04em 0.12em;
  text-wrap: balance;
}

.public-hero-inner::before,
.public-hero-inner::after {
  content: none; /* gỡ đường hairline trang trí (đè lên nút CTA) */
  position: absolute;
  pointer-events: none;
}

.public-hero-inner::before {
  inset: 7rem auto auto -2rem;
  width: min(42rem, 80vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(142 95 11 / 0.42), transparent);
  transform-origin: left;
}

.public-hero-inner::after {
  inset: auto auto 4.8rem 1rem;
  width: min(34rem, 72vw);
  height: 1px;
  background: linear-gradient(90deg, rgb(14 52 39 / 0.5), rgb(214 180 104 / 0.36), transparent);
}

.public-hero-title {
  max-width: min(15ch, 100%);
}

.public-subpage-hero {
  min-height: min(760px, calc(100dvh - 72px));
}

.public-subpage-hero--compact {
  min-height: auto;
}

.public-subpage-hero-image {
  opacity: 0.62;
  filter: saturate(1.08) contrast(1.05) brightness(1.02);
}

.public-subpage-hero::before,
.public-subpage-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.public-subpage-hero::before {
  z-index: 1;
  background:
    radial-gradient(ellipse at 24% 48%, rgb(243 247 240 / 0.98) 0%, rgb(243 247 240 / 0.88) 36%, rgb(243 247 240 / 0.48) 58%, transparent 78%),
    linear-gradient(90deg, rgb(243 247 240 / 0.98) 0%, rgb(243 247 240 / 0.9) 40%, rgb(243 247 240 / 0.36) 72%, rgb(243 247 240 / 0.12) 100%),
    linear-gradient(180deg, rgb(243 247 240 / 0.18), rgb(243 247 240 / 0.96) 100%);
}

.public-subpage-hero::after {
  z-index: 2;
  inset: auto 0 0 0;
  height: 44%;
  background: linear-gradient(180deg, transparent, rgb(243 247 240 / 0.98));
}

.public-subpage-hero-content {
  position: relative;
  z-index: 3;
}

.public-hero-photo {
  min-height: min(34rem, 58vh);
}

.public-subpage-title {
  max-width: min(14ch, 100%);
}

.public-subpage-copy {
  max-width: 58ch;
  text-wrap: pretty;
}

.public-hero-rule {
  position: relative;
}

.public-hero-rule::before,
.public-hero-rule::after {
  content: "";
  position: absolute;
  left: 0;
  height: 1px;
  pointer-events: none;
}

.public-hero-rule::before {
  top: -2.2rem;
  width: min(42rem, 86vw);
  background: linear-gradient(90deg, transparent, rgb(142 95 11 / 0.42), transparent);
  transform-origin: left;
}

.public-hero-rule::after {
  bottom: -2.2rem;
  width: min(30rem, 70vw);
  background: linear-gradient(90deg, rgb(14 52 39 / 0.42), rgb(214 180 104 / 0.34), transparent);
  transform-origin: left;
}

.public-image-stage {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(25 76 55 / 0.16);
  background: rgb(255 255 255 / 0.34);
  box-shadow:
    0 34px 100px rgb(23 73 50 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.76);
  transform-style: preserve-3d;
  transition:
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease;
}

.public-image-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent 42%),
    linear-gradient(180deg, transparent 58%, rgb(14 52 39 / 0.18));
  pointer-events: none;
}

.public-image-stage::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 2;
  border-radius: inherit;
  border: 1px solid rgb(255 255 255 / 0.28);
  background:
    linear-gradient(120deg, rgb(255 255 255 / 0.22), transparent 32%, transparent 68%, rgb(255 255 255 / 0.1)),
    radial-gradient(circle at 26% 18%, rgb(214 180 104 / 0.18), transparent 28%);
  opacity: 0.72;
  pointer-events: none;
  transition:
    opacity 360ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-image-stage:hover {
  transform: translateY(-6px) rotateX(0.6deg) rotateY(-0.8deg);
  border-color: rgb(169 111 18 / 0.28);
  box-shadow:
    0 42px 116px rgb(23 73 50 / 0.24),
    0 0 0 1px rgb(214 180 104 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.84);
}

.public-image-stage:hover::after {
  opacity: 0.94;
  transform: translateX(1.2%);
}

.public-image-stage img,
.public-card img,
.public-media img {
  filter: saturate(1.08) contrast(1.05);
}

.public-tour-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.public-tour-feature,
.public-tour-preview {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--surface-border);
  background: rgb(14 52 39 / 0.12);
  box-shadow:
    0 26px 78px rgb(37 75 54 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.2);
  isolation: isolate;
}

.public-tour-feature {
  min-height: clamp(25rem, 48vw, 32rem);
  z-index: 2;
}

.public-tour-preview {
  min-height: 17rem;
}

.public-tour-side {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .public-tour-showcase {
    grid-template-columns: minmax(13rem, 0.78fr) minmax(24rem, 1.45fr) minmax(13rem, 0.78fr);
    gap: 0;
  }

  .public-tour-feature {
    min-height: 30rem;
    transform: translateZ(0);
  }

  .public-tour-side-left {
    transform: translateX(1.5rem) rotate(-2.4deg);
  }

  .public-tour-side-right {
    transform: translateX(-1.5rem) rotate(2.2deg);
  }

  .public-tour-side-right .public-tour-preview + .public-tour-preview {
    margin-top: -1.25rem;
    transform: rotate(-3.4deg) translateX(0.75rem);
  }
}

@media (max-width: 899px) {
  .public-tour-feature,
  .public-tour-preview {
    min-height: 20rem;
  }
}

.public-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border-radius: 999px;
  border: 1px solid rgb(25 76 55 / 0.14);
  background: rgb(255 255 255 / 0.76);
  padding: 0.72rem 0.95rem;
  color: var(--tour-ink);
  font-size: 0.86rem;
  font-weight: 750;
  box-shadow:
    0 14px 34px rgb(37 75 54 / 0.08),
    inset 0 1px 0 rgb(255 255 255 / 0.86);
}

.public-chip svg {
  color: var(--primary);
}

.public-soft-list {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--surface-border);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.82), rgb(248 252 246 / 0.66)),
    var(--surface-glass);
  box-shadow:
    0 22px 60px rgb(37 75 54 / 0.1),
    inset 0 1px 0 rgb(255 255 255 / 0.88);
}

@media (max-width: 640px) {
  .public-subpage-hero-image {
    opacity: 0.44;
  }

  .public-subpage-hero::before {
    background:
      linear-gradient(180deg, rgb(243 247 240 / 0.84) 0%, rgb(243 247 240 / 0.78) 52%, rgb(243 247 240 / 0.96) 100%),
      linear-gradient(90deg, rgb(243 247 240 / 0.94), rgb(243 247 240 / 0.64));
  }
}

@media (max-width: 520px) {
  .public-page h1,
  .public-page h2,
  .public-page h3,
  .public-page p {
    max-width: 100%;
    text-wrap: normal;
  }

  .public-header nav > a:first-child {
    max-width: calc(100vw - 6rem);
  }

  .public-page .public-rise,
  .public-page .public-hero-inner > div,
  .public-page section > div {
    min-width: 0;
    max-width: calc(100vw - 2rem);
  }

  .public-page .public-hero-inner {
    overflow: hidden;
  }

  .public-page .public-heading-safe {
    font-size: clamp(1.85rem, 8.7vw, 2.35rem);
    line-height: 1.12;
  }

  .public-page .public-hero-title {
    max-width: min(10.4ch, 100%);
    font-size: clamp(2.55rem, 12vw, 3.1rem);
  }

  .public-page .public-subpage-title {
    max-width: min(11ch, 100%);
    font-size: clamp(2.2rem, 10.5vw, 3rem);
  }

  .tour-welcome .welcome-title-plaque {
    width: min(94vw, 25rem);
    padding-inline: 1rem;
  }

  .tour-welcome .welcome-title-plaque h1 {
    max-width: 16ch;
    font-size: clamp(1.62rem, 6.9vw, 2rem);
    line-height: 1.08;
  }

  .tour-welcome .welcome-title-plaque p {
    max-width: 38ch;
    font-size: 0.72rem;
    line-height: 1.45;
  }
}

.public-header {
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(250 253 248 / 0.74)),
    linear-gradient(90deg, transparent, rgb(214 180 104 / 0.08), transparent);
}

.public-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -18%;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent);
  opacity: 0;
  transform: skewX(-18deg);
  pointer-events: none;
}

.public-logo-mark {
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms ease,
    border-color 280ms ease;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.92),
    0 10px 24px rgb(37 75 54 / 0.08);
}

.public-logo-mark:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgb(142 95 11 / 0.28);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.96),
    0 14px 34px rgb(37 75 54 / 0.14);
}

.public-nav-link {
  position: relative;
  padding-block: 0.4rem;
}

.public-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms ease;
}

.public-nav-link:hover::after,
.public-nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.public-header-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.public-header-cta::before {
  content: "";
  position: absolute;
  inset: -35% auto -35% -45%;
  z-index: -1;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgb(255 248 232 / 0.3), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition:
    opacity 220ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-header-cta:hover::before {
  opacity: 1;
  transform: translateX(420%) skewX(-18deg);
}

.public-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  background: var(--surface-glass);
  box-shadow:
    var(--surface-shadow),
    inset 0 1px 0 rgb(255 255 255 / 0.88);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
  will-change: transform;
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 280ms ease,
    background-color 280ms ease;
}

.public-panel::before,
.public-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(169 111 18 / 0.74), rgb(46 107 85 / 0.42), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-panel::after,
.public-card::after {
  content: "";
  position: absolute;
  inset: -28% auto -28% -46%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.58), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.public-panel:hover {
  transform: translateY(-5px);
  border-color: rgb(169 111 18 / 0.34);
  background: var(--surface-glass-strong);
  box-shadow:
    0 30px 84px rgb(42 86 60 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.96);
}

.public-panel:hover::before,
.public-card:hover::before {
  transform: scaleX(1);
}

.public-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.88), rgb(249 252 247 / 0.78));
  box-shadow:
    0 24px 66px rgb(37 75 54 / 0.13),
    inset 0 1px 0 rgb(255 255 255 / 0.9);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  will-change: transform;
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 280ms ease;
}

.public-card:hover {
  transform: translateY(-7px) scale(1.006);
  border-color: rgb(169 111 18 / 0.32);
  box-shadow:
    0 34px 96px rgb(37 75 54 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.96);
}

.public-card:hover img {
  transform: scale(1.045) rotate(0.18deg);
}

.public-panel svg,
.public-card svg {
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    color 260ms ease,
    filter 260ms ease;
}

.public-panel:hover svg,
.public-card:hover svg {
  transform: translateY(-1px) scale(1.08);
  filter: drop-shadow(0 8px 18px rgb(142 95 11 / 0.18));
}

.public-media {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 86px rgb(37 75 54 / 0.18),
    0 0 0 1px var(--surface-border),
    inset 0 0 0 1px rgb(255 255 255 / 0.64);
  transition:
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgb(255 255 255 / 0.28) 38%, transparent 62%),
    linear-gradient(180deg, transparent 55%, rgb(18 50 37 / 0.16) 100%);
  opacity: 0.55;
  transform: translateX(-20%);
  transition:
    opacity 360ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.public-media:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 38px 104px rgb(37 75 54 / 0.24),
    0 0 0 1px rgb(169 111 18 / 0.24),
    inset 0 0 0 1px rgb(255 255 255 / 0.72);
}

.public-media:hover::after {
  opacity: 0.72;
  transform: translateX(22%);
}

.public-kicker {
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-cta,
.public-cta-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.05rem;
  border-radius: 999px;
  padding: 0.82rem 1.22rem;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1;
  max-width: 100%;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms ease,
    background-color 240ms ease,
    box-shadow 240ms ease;
}

.public-cta {
  gap: 0.76rem;
  border: 1px solid rgb(214 180 104 / 0.42);
  background:
    linear-gradient(180deg, rgb(35 95 74), rgb(13 55 41)),
    #123a2c;
  color: #f7f0e0;
  box-shadow:
    0 18px 44px rgb(14 52 39 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    inset 0 -1px 0 rgb(0 0 0 / 0.22);
}

@media (max-width: 520px) {
  .public-cta,
  .public-cta-secondary {
    width: 100%;
    white-space: normal;
  }
}

.public-cta::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -42%;
  z-index: -1;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgb(255 248 232 / 0.36), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition:
    opacity 220ms ease,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-cta svg,
.public-cta-secondary svg {
  color: var(--tour-gold-light);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-cta:hover {
  transform: translateY(-3px);
  border-color: rgb(214 180 104 / 0.68);
  background:
    linear-gradient(180deg, rgb(42 112 86), rgb(15 63 47)),
    #173f30;
  box-shadow:
    0 24px 58px rgb(14 52 39 / 0.28),
    0 0 0 4px rgb(214 180 104 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.26);
}

.public-cta:hover::after {
  opacity: 1;
  transform: translateX(410%) skewX(-18deg);
}

.public-cta:hover svg,
.public-cta-secondary:hover svg {
  transform: translateX(2px) scale(1.06);
}

.public-cta:focus-visible,
.public-cta-secondary:focus-visible {
  outline: 2px solid rgb(224 207 159 / 0.86);
  outline-offset: 4px;
}

.public-cta:active,
.public-cta-secondary:active {
  transform: translateY(-1px) scale(0.985);
}

.public-cta-secondary {
  border: 1px solid rgb(14 52 39 / 0.18);
  background: rgb(255 255 255 / 0.82);
  color: var(--ink-on-light);
  box-shadow:
    0 14px 32px rgb(37 75 54 / 0.08),
    inset 0 1px 0 rgb(255 255 255 / 0.82);
}

.public-cta-secondary:hover {
  background: rgb(255 255 255 / 0.95);
  transform: translateY(-2px);
  border-color: rgb(142 95 11 / 0.4);
  box-shadow:
    0 18px 40px rgb(37 75 54 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.92);
}

.public-line-item {
  border-top: 1px solid var(--surface-border);
  padding-top: 0.9rem;
}

.public-gradient-text {
  color: transparent;
  background: linear-gradient(90deg, #0e3427, #8e5f0b 54%, #245f4b);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: public-gradient-flow 8s ease-in-out infinite alternate;
}

.public-shimmer::after {
  content: "";
}

.public-glow {
  box-shadow:
    0 28px 80px rgb(37 75 54 / 0.16),
    0 0 0 1px rgb(169 111 18 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.9);
}

.public-hover-lift {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-hover-lift:hover {
  transform: translateY(-2px);
}

.public-map-frame {
  min-height: 28rem;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.88), rgb(245 250 242 / 0.76)),
    var(--surface-glass);
}

.public-map-frame iframe {
  display: block;
  min-height: 28rem;
  filter: saturate(0.94) contrast(1.03) sepia(0.06);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.8),
    0 24px 62px rgb(37 75 54 / 0.12);
  transition:
    filter 420ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-map-frame:hover iframe {
  filter: saturate(1.08) contrast(1.05) sepia(0);
  transform: scale(1.006);
}

.public-back-to-top {
  --scroll-progress: 0%;
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: max(1rem, env(safe-area-inset-right)) !important;
  bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  z-index: 80 !important;
  display: inline-grid;
  place-items: center;
  width: 3.65rem;
  height: 3.65rem;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--primary-foreground);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 1rem, 0) scale(0.86);
  transform-origin: center;
  transition:
    opacity 280ms ease,
    visibility 280ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.public-back-to-top[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.public-back-to-top-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    conic-gradient(from -90deg, rgb(214 180 104) var(--scroll-progress), rgb(142 95 11 / 0.36) 0),
    linear-gradient(135deg, #e6cf82 0%, #8e5f0b 48%, #f4d98c 100%);
  box-shadow:
    0 18px 42px rgb(14 52 39 / 0.3),
    0 0 0 1px rgb(255 255 255 / 0.72),
    inset 0 1px 0 rgb(255 255 255 / 0.62);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 320ms ease;
}

.public-back-to-top-core {
  position: relative;
  display: inline-flex;
  height: 3.18rem;
  width: 3.18rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgb(255 248 232 / 0.24);
  background:
    radial-gradient(circle at 32% 20%, rgb(255 255 255 / 0.16), transparent 28%),
    linear-gradient(145deg, #1f6a50 0%, #0f4a37 48%, #073124 100%);
  padding: 0;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    inset 0 -1px 0 rgb(0 0 0 / 0.22);
}

.public-back-to-top-core::before {
  content: "";
  position: absolute;
  inset: -42% auto -42% -44%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgb(255 248 232 / 0.4), transparent);
  opacity: 0;
  transform: skewX(-18deg);
  transition:
    opacity 220ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.public-back-to-top:hover,
.public-back-to-top:focus-visible {
  transform: translate3d(0, -5px, 0) scale(1.025);
}

.public-back-to-top:hover .public-back-to-top-ring,
.public-back-to-top:focus-visible .public-back-to-top-ring {
  filter: saturate(1.08) brightness(1.03);
  transform: scale(1.04);
  box-shadow:
    0 24px 66px rgb(14 52 39 / 0.32),
    0 0 0 4px rgb(214 180 104 / 0.14),
    0 0 0 1px rgb(255 255 255 / 0.76);
}

.public-back-to-top:hover .public-back-to-top-core::before,
.public-back-to-top:focus-visible .public-back-to-top-core::before {
  opacity: 1;
  transform: translateX(410%) skewX(-18deg);
}

.public-back-to-top:focus-visible {
  outline: 2px solid rgb(224 207 159 / 0.9);
  outline-offset: 6px;
}

.public-back-to-top svg {
  flex: 0 0 auto;
  color: #ffffff;
  filter: drop-shadow(0 5px 14px rgb(0 0 0 / 0.22));
}

@media (min-width: 640px) {
  .public-back-to-top {
    right: max(1.6rem, env(safe-area-inset-right)) !important;
    bottom: max(1.6rem, env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .public-header {
    animation: public-header-drop 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .public-header::after {
    animation: public-header-glint 7s ease-in-out 1.2s infinite;
  }

  .public-logo-mark {
    animation: public-logo-breathe 4.8s ease-in-out infinite;
  }

  .public-header-cta,
  .public-cta {
    animation: public-cta-breathe 4.2s ease-in-out infinite;
  }

  .public-hero-inner::before {
    animation: public-line-draw 980ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  }

  .public-hero-inner::after {
    animation: public-line-draw 1100ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
  }

  .public-subpage-hero-image {
    animation: public-photo-breathe 12s ease-in-out infinite alternate;
  }

  .public-hero-inner .public-image-stage {
    animation: public-stage-float 7.2s ease-in-out 900ms infinite alternate;
  }

  .public-hero-rule::before {
    animation: public-line-draw 980ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  }

  .public-hero-rule::after {
    animation: public-line-draw 1100ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
  }

  .public-page > section {
    animation: public-section-reveal both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }

  .public-rise,
  .public-slide-up,
  .public-fade-in,
  .public-bounce-in,
  .public-scale-in,
  .public-rotate-in {
    animation: public-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .public-stagger-item {
    animation: public-stagger-reveal both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }

  .public-card:nth-child(2n).public-stagger-item,
  .public-panel:nth-child(2n).public-stagger-item {
    animation-range: entry 0% cover 30%;
  }

  .public-panel:hover::after,
  .public-card:hover::after {
    animation: public-sheen 820ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .public-back-to-top[data-visible="true"] {
    animation: public-back-to-top-float 4.8s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes public-section-reveal {
  from {
    opacity: 0.72;
    transform: translateY(36px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes public-header-drop {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes public-header-glint {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  68% {
    opacity: 0.62;
  }
  82% {
    opacity: 0;
    transform: translateX(760%) skewX(-18deg);
  }
}

@keyframes public-logo-breathe {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.92),
      0 10px 24px rgb(37 75 54 / 0.08);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.98),
      0 16px 34px rgb(142 95 11 / 0.14);
  }
}

@keyframes public-cta-breathe {
  0%,
  100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.08) brightness(1.03);
  }
}

@keyframes public-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes public-stagger-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes public-ambient-pan {
  from {
    background-position: 0% 0%, 0 0, 0 0;
  }
  to {
    background-position: 100% 0%, 84px 0, 0 84px;
  }
}

@keyframes public-gradient-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes public-line-draw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes public-sheen {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  18% {
    opacity: 0.86;
  }
  100% {
    opacity: 0;
    transform: translateX(420%) skewX(-18deg);
  }
}

@keyframes public-photo-breathe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.035);
  }
}

@keyframes public-stage-float {
  from {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: translate3d(0, -10px, 0) rotateX(0.4deg) rotateY(-0.55deg);
  }
}

@keyframes public-back-to-top-float {
  0%,
  100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.08) brightness(1.03);
  }
}

/* Lớp nhiễu hạt phim cố định — tạo chiều sâu, chất liệu cao cấp cho nền tối. */
.site-grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Dải tên di tích chạy ngang — gợi bề dày hệ thống di sản. Một dải/trang. */
.heritage-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
}

.heritage-marquee-track {
  display: inline-flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: no-preference) {
  .heritage-marquee-track {
    animation: heritage-marquee 42s linear infinite;
  }

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

@keyframes heritage-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}