:root {
  color-scheme: only light;
  --navy: #f8f2e9;
  --navy-2: #fffaf4;
  --ivory: #16213a;
  --rose: #cb3149;
  --red: #bd2941;
  --red-hover: #982039;
  --gold: #d5ae63;
  --muted: #655f59;
  --focus: #9b2440;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --rail-clearance: 232px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--navy); color: var(--ivory); font-family: "Be Vietnam Pro", Arial, sans-serif; font-weight: 500; }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(128deg, rgba(203,49,73,.065), transparent 38%), radial-gradient(circle at 82% 4%, rgba(213,174,99,.2), transparent 31%), repeating-linear-gradient(90deg, rgba(112,82,47,.018) 0 1px, transparent 1px 6px); }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

main { width: min(1280px, calc(100% - 56px)); margin: 0 auto; padding: 24px 0 var(--rail-clearance); }

.catalog-intro { padding: 8px 0 24px; text-align: center; }
.catalog-intro__brand { color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.catalog-intro h1 { margin: 7px 0 6px; font-size: clamp(26px, 4vw, 42px); line-height: 1.12; letter-spacing: -.035em; }
.catalog-intro > p { max-width: 680px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.6; }
.catalog-package-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.catalog-package-nav a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 15px; border: 1px solid rgba(126,91,44,.4); border-radius: 999px; background: rgba(255,250,244,.72); color: var(--ivory); font-size: 12px; font-weight: 800; text-decoration: none; }
.catalog-package-nav a[aria-current="page"] { border-color: var(--red); background: var(--red); color: #fff; }

.lehoi-list { border-top: 1px solid rgba(216,182,110,.28); }
.lehoi-card { display: grid; grid-template-columns: minmax(0, 1fr) 176px; align-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(26px, 3vw, 46px) 0; border-bottom: 1px solid rgba(140,104,48,.18); }
.lehoi-card:nth-child(even) { grid-template-columns: 176px minmax(0, 1fr); }
.lehoi-card:nth-child(even) .lehoi-card__image { grid-column: 2; grid-row: 1; }
.lehoi-card:nth-child(even) .lehoi-card__copy { grid-column: 1; grid-row: 1; text-align: right; align-items: end; }
.lehoi-card__image { position: relative; isolation: isolate; width: min(100%, var(--media-display-max, 100%)); max-width: 100%; justify-self: center; padding: 0 0 16px 16px; }
.lehoi-card__image::before { content: ""; position: absolute; inset: 16px 16px 0 0; z-index: -1; background: var(--red); clip-path: polygon(0 0, 100% 0, 97% 100%, 0 96%); transition: transform 220ms var(--ease), background-color 180ms ease; }
.lehoi-card:nth-child(3n) .lehoi-card__image::before { background: var(--gold); transform: translate(-6px, 6px); }
.lehoi-card__image-link { display: block; }
.lehoi-card__image-link img { display: block; width: 100%; height: auto; border: 1px solid rgba(126,91,44,.34); background: #e8dfd4; box-shadow: 0 18px 48px rgba(46,31,25,.1); }
.lehoi-card__copy { display: flex; flex-direction: column; align-items: start; }
.lehoi-card__code { margin-bottom: 13px; color: #715027; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.lehoi-card__price {
  min-width: 156px;
  margin: 0;
  padding: 16px 20px;
  background: var(--red);
  color: #fff;
  border-radius: 12px 3px 12px 3px;
  box-shadow: 0 10px 24px rgba(152,32,57,.18);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .025em;
  text-align: center;
  transform: rotate(-1deg);
  transition: transform 180ms var(--ease), background-color 180ms ease, box-shadow 180ms ease;
}
.lehoi-card:nth-child(even) .lehoi-card__price { transform: rotate(1deg); }
.lehoi-card__zalo { min-height: 46px; margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 8px; border: 1px solid rgba(126,91,44,.5); border-radius: 11px; background: rgba(255,250,244,.82); color: var(--ivory); box-shadow: 0 8px 22px rgba(45,29,25,.07); font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .035em; text-decoration: none; transition: transform 150ms var(--ease), border-color 150ms ease, box-shadow 150ms ease; }
.lehoi-card__zalo img { display: block; width: 48px; height: auto; padding: 3px 5px; border-radius: 4px; background: #fff; }
@media (hover:hover) and (pointer:fine) {
  .lehoi-card:hover .lehoi-card__image::before { transform: translate(6px, 6px); }
  .lehoi-card:hover .lehoi-card__price { transform: rotate(0deg) translateY(-2px); background: var(--red-hover); box-shadow: 0 14px 28px rgba(152,32,57,.23); }
  .lehoi-card__zalo:hover { border-color: var(--gold); box-shadow: 0 10px 25px rgba(45,29,25,.12); transform: translateY(-1px); }
  .lehoi-contact-action:hover { border-color: #ffe7ac; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.16); }
}

.lehoi-rail { position: fixed; z-index: 50; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); width: min(860px, calc(100% - 28px)); transform: translateX(-50%); }
.lehoi-rail__bar { min-height: 66px; display: grid; grid-template-columns: 46px 1fr 44px; align-items: center; gap: 12px; padding: 8px 11px; background: rgba(255,250,244,.97); color: var(--ivory); border: 1px solid var(--gold); border-radius: 16px; box-shadow: 0 18px 42px rgba(45,29,25,.15); backdrop-filter: blur(10px); }
.lehoi-rail__seal { width: 46px; height: 46px; display: grid; place-items: center; background: var(--red); color: #fff; clip-path: polygon(12% 0, 100% 10%, 88% 100%, 0 84%); font: 800 15px/1 "Be Vietnam Pro", Arial, sans-serif; transform: rotate(-3deg); }
.lehoi-rail__bar small { display: block; margin-bottom: 3px; color: var(--red); font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.lehoi-rail__bar p { margin: 0; font-size: clamp(15px, 2vw, 19px); font-weight: 800; letter-spacing: -.015em; }
.lehoi-rail__toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--ivory); color: #fff; cursor: pointer; transition: background-color 180ms ease; }
.lehoi-rail__toggle img { transition: transform 200ms var(--ease); transform: rotate(180deg); filter: brightness(0) invert(1); }
.lehoi-rail__details { max-height: 250px; overflow: hidden; opacity: 1; transition: max-height 200ms var(--ease), opacity 160ms ease, visibility 0ms linear; }
.lehoi-rail__details > div { position: relative; isolation: isolate; overflow: hidden; margin: 0 16px -1px; padding: 13px 16px 16px; background: linear-gradient(145deg, #fffaf4 0%, #f3e5d4 100%); color: var(--ivory); border: 1px solid rgba(154,106,43,.66); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 30px rgba(45,29,25,.1); text-align: left; }
.lehoi-rail__details > div::before { content: ""; position: absolute; z-index: 3; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--rail-energy-angle, 0deg), transparent 0deg 244deg, rgba(213,174,99,.34) 260deg, #fff5c7 278deg, #d5ae63 292deg, #bd2941 308deg, transparent 332deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: rail-energy-chase 3.6s linear infinite; }
.lehoi-rail__details address { margin: 0 0 10px; display: grid; gap: 6px; font-style: normal; }
.lehoi-rail__details address a { min-height: 34px; display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 9px; border: 1px solid rgba(154,106,43,.2); border-radius: 8px; background: rgba(255,255,255,.64); color: var(--ivory); text-decoration: none; }
.lehoi-rail__details address small { color: #8a5b22; font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; }
.lehoi-rail__details address span { font-size: 11px; font-weight: 700; line-height: 1.35; }
.lehoi-rail__contacts { display: grid; gap: 6px; }
.lehoi-rail__contact { min-height: 48px; display: grid; grid-template-columns: minmax(132px, .8fr) minmax(216px, 1.2fr); align-items: center; gap: 10px; padding: 5px 6px 5px 12px; border-radius: 10px; background: var(--ivory); color: #fff; }
.lehoi-rail__contact > span { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.lehoi-rail__contact strong { color: #ffe7ac; font-size: 12px; }
.lehoi-rail__contact small { color: rgba(255,255,255,.84); font-size: 10px; font-weight: 700; }
.lehoi-rail__contact > div { display: grid; grid-template-columns: 1fr 1.18fr; gap: 6px; }
.lehoi-contact-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(213,174,99,.58); border-radius: 8px; background: #fffaf4; color: var(--ivory); font-size: 10px; font-weight: 800; line-height: 1; text-decoration: none; transform-origin: center; animation: contact-action-breathe 2.2s var(--ease) infinite; }
.lehoi-contact-action--phone > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; }
.lehoi-contact-action--zalo { animation-delay: -1.1s; }
.lehoi-contact-action--zalo img { display: block; width: 38px; height: auto; }
.lehoi-contact-action--zalo > span { font-size: 9px; }
.lehoi-rail[data-collapsed] .lehoi-rail__details { max-height: 0; opacity: 0; visibility: hidden; }
.lehoi-rail[data-collapsed] .lehoi-rail__details > div::before { animation-play-state: paused; }
.lehoi-rail[data-collapsed] .lehoi-contact-action { animation-play-state: paused; }
.lehoi-rail[data-collapsed] .lehoi-rail__toggle img { transform: rotate(0); }
.catalog-toast { position: fixed; z-index: 12000; left: 50%; bottom: max(104px, calc(84px + env(safe-area-inset-bottom))); max-width: calc(100% - 28px); transform: translate(-50%, 16px); padding: 11px 16px; border-radius: 10px; background: var(--rose); color: #fff; font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms var(--ease); }
.catalog-toast[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); }
.lehoi-card__zalo:active,
.lehoi-rail__details a:active,
.lehoi-rail__toggle:active { transform: scale(.97); }

html[data-motion-ready] .lehoi-card:not(.is-revealed) { opacity: 0; transform: translateY(6px) scale(.995); }
.lehoi-card.is-revealed { transition: opacity 190ms ease var(--reveal-delay, 0ms), transform 230ms var(--ease) var(--reveal-delay, 0ms); }

@media (max-width: 780px) {
  main { width: min(100% - 20px, 620px); padding-top: 10px; padding-bottom: var(--rail-clearance); }
  .catalog-intro { padding: 6px 8px 20px; }
  .catalog-intro h1 { font-size: clamp(25px, 8vw, 34px); }
  .catalog-intro > p { font-size: 12px; }
  .lehoi-card, .lehoi-card:nth-child(even) { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 0; }
  .lehoi-card:nth-child(even) .lehoi-card__image { order: 0; }
  .lehoi-card:nth-child(even) .lehoi-card__copy { order: 1; align-items: start; text-align: left; }
  .lehoi-card__image { align-self: center; padding: 0 0 12px 12px; }
  .lehoi-card__copy { padding-inline: 8px; }
  .lehoi-card__price { min-width: 148px; padding: 14px 18px; font-size: 17px; }
  .lehoi-rail__details > div { margin-inline: 8px; padding: 10px 10px 12px; }
  .lehoi-rail__details address { gap: 5px; }
  .lehoi-rail__details address a { grid-template-columns: 92px minmax(0, 1fr); gap: 7px; padding-inline: 8px; }
  .lehoi-rail__details address span { font-size: 10px; }
  .lehoi-rail__contact { grid-template-columns: minmax(104px, .72fr) minmax(196px, 1.28fr); gap: 6px; padding-left: 9px; }
  .lehoi-rail__contact > span { display: grid; gap: 1px; }
  .lehoi-rail__contact strong { font-size: 11px; }
  .lehoi-rail__contact small { font-size: 9px; }
  .lehoi-contact-action { padding-inline: 7px; }
  .lehoi-rail { bottom: max(10px, env(safe-area-inset-bottom)); }
  .lehoi-rail__bar { min-height: 62px; grid-template-columns: 42px 1fr 44px; gap: 9px; }
  .lehoi-rail__seal { width: 40px; height: 40px; }
  .lehoi-rail__bar p { font-size: 16px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  main { width: min(100% - 28px, 900px); padding: 8px 0 var(--rail-clearance); }
  .lehoi-card { align-items: start; gap: 24px; padding: 12px 0; }
  .lehoi-card__image-link img { width: auto; max-width: 100%; max-height: 238px; margin-inline: auto; }
  .lehoi-card__copy { padding-top: 4px; }
  .lehoi-card__code { margin-bottom: 10px; }
  .lehoi-card__price { padding-block: 13px 12px; }
  .lehoi-card__zalo { margin-top: 12px; }
  .lehoi-rail { bottom: max(5px, env(safe-area-inset-bottom)); }
  .lehoi-rail__bar { min-height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .lehoi-card { opacity: 1 !important; transform: none !important; }
  .lehoi-card__image::before, .lehoi-card__price { transform: none !important; }
  .catalog-toast { transition: opacity 120ms ease !important; transform: translate(-50%, 0) !important; }
  .lehoi-rail__details > div::before { animation: none !important; }
  .lehoi-contact-action { animation: none !important; }
}
html[data-reduced-motion] { scroll-behavior: auto; }
html[data-reduced-motion] *, html[data-reduced-motion] *::before, html[data-reduced-motion] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html[data-reduced-motion] .lehoi-card, html[data-reduced-motion] .lehoi-card__image::before, html[data-reduced-motion] .lehoi-card__price { opacity: 1 !important; transform: none !important; }
html[data-reduced-motion] .catalog-toast { transform: translate(-50%, 0) !important; }
html[data-reduced-motion] .lehoi-rail__details > div::before { animation: none !important; }
html[data-reduced-motion] .lehoi-contact-action { animation: none !important; }

@property --rail-energy-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes rail-energy-chase { to { --rail-energy-angle: 360deg; } }
@keyframes contact-action-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}