/* ============================================================
   Hoàng Sao — theme components

   Theme-only. Anything a widget also needs lives in core.css (which is mirrored
   into the plugin); putting a chrome rule there would ship the header's CSS to
   the Elementor editor for no reason.

   Depends on: hoangsao-tokens, hoangsao-core.
   ============================================================ */

/* ============================================================
   UTILITY BAR
   ============================================================ */
.hs-ubar{
  background:var(--hs-deep);
  border-bottom:1px solid var(--hs-line);
  font-size:12.5px;
  color:var(--hs-muted);
}
.hs-ubar__in{
  display:flex;
  align-items:center;
  gap:24px;
  /* Fixed height, and the media query below is why that is safe. */
  height:calc(var(--hs-ubar-h) - 1px);
}
.hs-ubar b{color:var(--hs-accent)}
.hs-ubar__hotline{margin-left:auto;white-space:nowrap}
.hs-ubar__hotline:hover b{color:var(--hs-accent-2)}

@media(max-width:820px){
  /* The four items wrap inside the fixed-height strip — measured scrollHeight
     65px inside a 38px box at 390px, so the text spilled out of its own bar.
     Over the home hero photo that is very visible. Only the hotline survives;
     the other three claims are repeated by the trust strip on the home page. */
  .hs-ubar__item:not(.hs-ubar__hotline){display:none}
  .hs-ubar__hotline{margin-left:0}
}

/* ============================================================
   NAV
   ============================================================ */
.hs-nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(14,15,17,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hs-line);
  transition:background var(--hs-t-slow) ease,border-color var(--hs-t-slow) ease;
}
.hs-nav__in{
  display:flex;
  align-items:center;
  gap:30px;
  height:calc(var(--hs-nav-h) - 1px);
}
@media(prefers-reduced-motion:reduce){
  .hs-nav{transition:none}
}

/* ---- Logo ---- */
.hs-logo,
.custom-logo-link{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.hs-logo__word{font-weight:800;font-size:22px;white-space:nowrap}
/* The typographic fallback mark: a sun disc. Used whenever Site Identity has no
   logo file, which it WILL NOT on swap day — the old logo lived in a Most-only
   theme mod this theme cannot read. See hoangsao_logo(). */
.hs-logo__mark{
  width:26px;height:26px;flex:0 0 26px;
  border-radius:999px;
  background:radial-gradient(circle at 35% 35%,var(--hs-accent-2),var(--hs-accent) 60%,#a8410c);
}
/* Height cap on an uploaded logo. Uncapped, a 1212px-wide PNG renders at its
   natural size and pushes the nav and the tools off screen. */
.custom-logo{height:44px;width:auto;max-width:none}
@media(max-width:820px){
  .custom-logo{height:34px}
  .hs-logo__word{font-size:19px}
}

/* ---- Menu ---- */
.hs-nav__menu{min-width:0}
.hs-menu{
  display:flex;
  gap:24px;
  margin:0;
  padding:0;
  list-style:none;
  font-weight:600;
  font-size:15px;
}
.hs-menu > li{position:relative;padding:26px 0}
.hs-menu > li > a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#e9e7e2;
}
.hs-menu > li > a:hover,
.hs-menu > li.current-menu-item > a,
.hs-menu > li.current-menu-parent > a,
.hs-menu > li.current-menu-ancestor > a{color:var(--hs-accent)}

/* Dropdown. WordPress emits .sub-menu for children. */
.hs-menu .sub-menu{
  position:absolute;
  top:100%;
  left:-18px;
  min-width:250px;
  margin:0;
  padding:10px;
  list-style:none;
  background:var(--hs-card);
  border:1px solid var(--hs-line);
  border-radius:14px;
  box-shadow:var(--hs-shadow-pop);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.hs-menu > li:hover > .sub-menu,
.hs-menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.hs-menu .sub-menu a{
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:9px;
  font-weight:500;
  font-size:14px;
  color:var(--hs-muted);
}
.hs-menu .sub-menu a:hover{background:var(--hs-elev);color:var(--hs-text)}

/* ---- Dropdown caret ----
   An inline SVG from hoangsao_nav_caret(), stroked with currentColor so it turns
   amber along with the label. Font Awesome is only enqueued when Elementor has not
   already done it, and the navigation must not depend on that. */
.hs-caret{flex:none;opacity:.7;transition:transform .18s ease}
.hs-menu > li:hover > a .hs-caret,
.hs-menu > li:focus-within > a .hs-caret{opacity:1;transform:rotate(180deg)}

/* ---- Group label inside a dropdown ----
   The prototype's `.lbl` — "Phụ kiện" and "Chính sách", neither of which is a page
   on this site (`/danh-muc-san-pham/phu-kien/` is a 404). Rendered as a <span> by
   hoangsao_nav_label_markup() so it is not focusable and not announced as a link. */
.hs-drop__lbl{
  display:block;
  padding:8px 12px 4px;
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hs-accent);
}

/* The prototype's `.divider`, as a ::before on the item's own <li> rather than a
   separate element — one node, and it cannot end up orphaned from what it divides.
   OPT-IN via a second class rather than "every label that is not first": the
   prototype draws exactly one rule, above "Chính sách", and none above "Phụ kiện".
   Letting CSS infer it would have added a second. */
.hs-menu .sub-menu > li.hs-nav-divide::before{
  content:"";
  display:block;
  height:1px;
  margin:8px 6px;
  background:var(--hs-line);
}

/* Third level: indent rather than a second flyout, which on a 250px panel would
   open off the edge of the viewport at the right-hand end of the nav. */
.hs-menu .sub-menu .sub-menu{
  position:static;
  opacity:1;
  visibility:visible;
  transform:none;
  box-shadow:none;
  border:0;
  background:none;
  padding:0 0 0 14px;
  min-width:0;
}
.hs-menu .sub-menu .sub-menu a{font-size:13px}

/* ---- Tools ---- */
.hs-nav__tools{margin-left:auto;display:flex;align-items:center;gap:12px}
.hs-search{
  display:flex;
  align-items:center;
  gap:8px;
  width:200px;
  padding:9px 14px;
  background:var(--hs-elev);
  border:1px solid var(--hs-line);
  border-radius:999px;
  color:var(--hs-muted);
}
.hs-search input{
  width:100%;
  min-width:0;
  background:none;
  border:0;
  outline:0;
  color:var(--hs-text);
  font-family:var(--hs-font);
  font-size:14px;
}
.hs-iconbtn{
  position:relative;
  display:grid;
  place-items:center;
  width:42px;height:42px;
  flex:0 0 42px;
  border:1px solid var(--hs-line);
  border-radius:999px;
  color:var(--hs-text);
}
.hs-iconbtn:hover{border-color:var(--hs-accent);color:var(--hs-accent)}
.hs-iconbtn__count{
  position:absolute;
  top:-4px;right:-4px;
  min-width:20px;height:20px;
  padding:0 5px;
  border-radius:999px;
  background:var(--hs-accent);
  color:var(--hs-accent-ink);
  font-size:11px;
  font-weight:800;
  line-height:20px;
  text-align:center;
}
.hs-burger{
  display:none;
  border:0;
  background:none;
  color:var(--hs-text);
  font-size:22px;
  cursor:pointer;
}

@media(max-width:980px){
  .hs-search{display:none}
}
@media(max-width:820px){
  .hs-nav__menu{display:none}
  .hs-burger{display:block}
  /* Mobile drawer. Dropdowns stay expanded so every level is reachable —
     a hover-to-open flyout is unusable on touch. */
  .hs-nav.is-open .hs-nav__menu{
    display:block;
    position:absolute;
    top:100%;
    left:0;right:0;
    max-height:78vh;
    overflow:auto;
    padding:10px 18px 20px;
    background:var(--hs-card);
    border-top:1px solid var(--hs-line);
  }
  .hs-nav.is-open .hs-menu{display:block}
  .hs-nav.is-open .hs-menu > li{padding:6px 0}
  .hs-nav.is-open .hs-menu .sub-menu{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:0;
    background:none;
    padding:2px 0 6px 14px;
    min-width:0;
  }
}

/* ============================================================
   HOME HERO — the chrome sits OVER a full-viewport slider

   The hero was previously 100vh but began BELOW the utility bar and the nav, so
   114px of it hung under the fold: measured at 1440x900 the hero bottom landed
   at 1014px, the primary CTA was clipped by 15px and the slider dots were
   entirely off screen at 984px. A slider whose pagination you cannot see does
   not read as a slider at all.

   Two halves to the fix: the hero cancels the chrome with a negative margin so
   its box starts at y=0, and the chrome goes transparent over the photo.
   ============================================================ */
.hs-home-hero .hs-ubar{
  position:relative;
  /* Needs a z-index: the ubar precedes the hero in the DOM, so without one the
     hero's own background paints over its text. */
  z-index:61;
  background:transparent;
  border-bottom-color:rgba(244,242,238,.16);
  color:#e8e4dd;
}
.hs-home-hero .hs-nav{
  background:transparent;
  border-bottom-color:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
/* Past the hero the nav needs its surface back, or it becomes unreadable type
   floating over product photography. Toggled by site.js. */
.hs-home-hero .hs-nav.is-solid{
  background:rgba(14,15,17,.92);
  border-bottom-color:var(--hs-line);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.hs-home-hero .hs-hero{
  margin-top:calc(-1 * var(--hs-chrome-h));
  /* vh first as the fallback, then dvh. On iOS `vh` is the height with the URL
     bar HIDDEN, so a 100vh hero is taller than the screen on first paint and the
     CTA sits under the toolbar — the same clipping bug in a different disguise. */
  height:100vh;
  height:100dvh;
  min-height:560px;
}

/* Legibility scrim behind the chrome. A slide's own top gradient is not enough
   to guarantee white nav labels over a bright frame. z-index 3 puts it above
   the slides but below the arrows and dots. */
.hs-home-hero .hs-hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:calc(var(--hs-chrome-h) + 90px);
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.82),rgba(8,9,10,.45) 55%,transparent);
}

/* ============================================================
   PAGE HERO
   ============================================================ */
.hs-pagehero{
  position:relative;
  padding:120px 0 70px;
  border-bottom:1px solid var(--hs-line);
  overflow:hidden;
}
.hs-pagehero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.28;
  background:var(--hs-hero-img,linear-gradient(120deg,var(--hs-card),var(--hs-bg))) center/cover;
}
.hs-pagehero > *{position:relative;z-index:1}
/*
 * Matches `prototype/assets/site.css` line 101: `clamp(36px, 6vw, 64px)`.
 *
 * This was clamp(28px, 4.6vw, 46px), which caps at 46px — so on every inner page
 * the h1 rendered 18px smaller than the design. Measured at a 1425px viewport
 * across six pages (setup-clb, ban-bida-rasson, sponsors, about-us, booking, team)
 * it was 46px against the prototype's 64px, and the page hero came out ~80px
 * shorter as a result. The home hero and the product title were unaffected because
 * they use different rules, which is why it was easy to miss.
 */
.hs-pagehero__title{font-size:clamp(36px,6vw,64px);font-weight:800;line-height:1.3;margin:10px 0 0;text-wrap:balance}
.hs-pagehero p{color:var(--hs-muted);max-width:640px;margin-top:14px}
/* A post title is a sentence, not a one-word display statement, so it gets a
   smaller scale and a line-height that clears Vietnamese stacked diacritics
   (marks sit both above and below the same letter, e.g. ộ ế ữ). */
.hs-pagehero--post{padding:100px 0 56px}

.hs-crumbs{color:var(--hs-muted);font-size:13px;margin-bottom:14px}
.hs-crumbs a:hover{color:var(--hs-accent)}

/* ============================================================
   PROSE
   ============================================================ */
.hs-prose{
  /* The measure goes on the CONTAINER, never on its children. Declared per
     child (`> p, > ul, > h3 …`) it silently misses anything off the list — h2
     was off it once, and headings then ended 182px further right than every
     paragraph, which reads as the body copy being sunken in. */
  max-width:66ch;
  margin-inline:0;
  color:var(--hs-dim);
}
.hs-prose > * + *{margin-top:1.15em}
.hs-prose h2{font-size:clamp(22px,3vw,28px);color:var(--hs-text);margin-top:1.8em;font-weight:800;line-height:1.2}
.hs-prose h3{font-size:19px;color:var(--hs-accent);margin-top:1.5em;font-weight:700}
.hs-prose a{color:var(--hs-accent);text-decoration:underline;text-underline-offset:3px}
.hs-prose a:hover{color:var(--hs-accent-2)}
.hs-prose ul,.hs-prose ol{padding-left:22px}
.hs-prose li + li{margin-top:.5em}
.hs-prose img{border-radius:14px;border:1px solid var(--hs-line)}
.hs-prose figcaption{color:var(--hs-muted);font-size:13px;margin-top:10px;text-align:center}
.hs-prose blockquote{
  margin:1.6em 0;
  padding:18px 22px;
  border-left:3px solid var(--hs-accent);
  border-radius:0 12px 12px 0;
  background:var(--hs-surface);
  color:var(--hs-text);
  font-size:17px;
}
.hs-prose blockquote p{margin:0}
.hs-prose table{width:100%;border-collapse:collapse}
.hs-prose th,.hs-prose td{padding:13px 16px;border-bottom:1px solid var(--hs-line);text-align:left}
.hs-prose th{color:var(--hs-muted);font-weight:600;font-size:14px}

/* ============================================================
   POST CARDS / NEWS GRID
   ============================================================ */
.hs-newsgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.hs-pcard{
  display:flex;
  flex-direction:column;
  background:var(--hs-card);
  border:1px solid var(--hs-line);
  border-radius:16px;
  overflow:hidden;
  transition:border-color var(--hs-t),transform var(--hs-t);
}
.hs-pcard:hover{border-color:#3a3f45;transform:translateY(-4px)}
.hs-pcard__thumb{display:block;height:220px;flex:0 0 220px;background:#0c0d0e;overflow:hidden}
.hs-pcard__thumb img{width:100%;height:100%;object-fit:cover}
.hs-pcard__body{display:flex;flex-direction:column;flex:1;padding:18px}
.hs-pcard__cat{
  color:var(--hs-accent);
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hs-pcard__title{font-size:18px;font-weight:800;line-height:1.3;margin:10px 0 8px}
.hs-pcard__title a:hover{color:var(--hs-accent)}
.hs-pcard__meta{color:var(--hs-muted);font-size:12.5px;margin-top:auto}

@media(max-width:1000px){
  .hs-newsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .hs-newsgrid{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   PAGINATION / EMPTY / 404
   ============================================================ */
.hs-section .navigation.pagination{margin-top:40px}
.hs-section .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hs-section .page-numbers{
  display:grid;
  place-items:center;
  min-width:42px;height:42px;
  padding:0 12px;
  border:1px solid var(--hs-line);
  border-radius:999px;
  color:var(--hs-muted);
  font-weight:600;
  font-size:14px;
}
.hs-section .page-numbers:hover{border-color:var(--hs-accent);color:var(--hs-accent)}
.hs-section .page-numbers.current{
  background:var(--hs-accent);
  border-color:var(--hs-accent);
  color:var(--hs-accent-ink);
}

.hs-empty{
  background:var(--hs-surface);
  border:1px solid var(--hs-line);
  border-radius:16px;
  padding:34px;
  text-align:center;
  color:var(--hs-muted);
}
.hs-404{max-width:640px}
.hs-404 p{color:var(--hs-muted);margin-top:14px}
.hs-404__search{margin:26px 0}
.hs-404__search .hs-search{display:flex;width:100%;max-width:420px}
.hs-404__acts{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.hs-footer{
  background:var(--hs-deep);
  border-top:1px solid var(--hs-line);
  padding:72px 0 30px;
}
.hs-footcta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:42px;
  border-bottom:1px solid var(--hs-line);
}
.hs-footcta__t{flex:1 1 380px;min-width:0}
.hs-footcta p{color:var(--hs-muted);font-size:14.5px;margin-top:8px;max-width:520px}

.hs-footgrid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:34px;
  padding:46px 0;
}
.hs-footgrid__about,
.hs-footgrid__addr{color:var(--hs-muted);font-size:14px;margin-top:14px}
.hs-footgrid__addr{font-size:13px;margin-top:10px}
.hs-footgrid__addr a:hover{color:var(--hs-accent)}
.hs-footgrid__h{
  font-weight:700;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hs-accent);
  margin:0 0 16px;
}
.hs-footmenu{list-style:none;margin:0;padding:0}
.hs-footmenu a{display:block;padding:6px 0;color:var(--hs-muted);font-size:14px}
.hs-footmenu a:hover{color:var(--hs-text)}

.hs-socials{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.hs-socials__btn{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  border:1px solid var(--hs-line);
  border-radius:999px;
  color:var(--hs-text);
}
.hs-socials__btn:hover{border-color:var(--hs-accent);color:var(--hs-accent)}

.hs-footbottom{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid var(--hs-line);
  color:var(--hs-muted);
  font-size:13px;
}

@media(max-width:1000px){
  /* minmax(0,1fr), never a bare 1fr. A bare 1fr is minmax(auto,1fr), so the
     track cannot shrink below its widest item's min-content: the brand column
     carries the logo image and the address line, and at 390px its min-content
     crushed the other track to 49px and the grid STILL overflowed — a 407px
     document in a 390px viewport, i.e. a horizontal scrollbar on every page.
     Because it was in the footer it looked like a stray element, not a layout
     bug, and went unnoticed. */
  .hs-footgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:560px){
  .hs-footgrid{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* ============================================================
   FLOATING CONTACT DOCK
   ============================================================ */
.hs-dock{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hs-dock__btn{
  position:relative;
  display:grid;
  place-items:center;
  width:54px;height:54px;
  border-radius:999px;
  color:#fff;
  font-size:20px;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  transition:transform var(--hs-t);
}
.hs-dock__btn:hover{transform:translateY(-3px)}
.hs-dock__btn--zalo{background:#0068ff}
.hs-dock__btn--tel{background:var(--hs-felt)}
.hs-dock__btn::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid currentColor;
  opacity:.35;
  animation:hs-pulse 2s ease-out infinite;
}
.hs-dock__tip{
  position:absolute;
  right:64px;
  top:50%;
  transform:translateY(-50%);
  padding:6px 12px;
  background:var(--hs-card);
  border:1px solid var(--hs-line);
  border-radius:8px;
  color:var(--hs-text);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--hs-t);
}
.hs-dock__btn:hover .hs-dock__tip{opacity:1}
@keyframes hs-pulse{
  0%{transform:scale(.9);opacity:.5}
  100%{transform:scale(1.25);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hs-dock__btn::before{animation:none}
  .hs-dock__btn{transition:none}
}
@media(max-width:560px){
  .hs-dock{right:12px;bottom:12px}
  .hs-dock__btn{width:48px;height:48px;font-size:18px}
  .hs-dock__tip{display:none}
}