/* ============================================================
   regna-nav.css — thanh nav ngang tĩnh, dựng lại theo đúng nav
   đang chạy trên regna.ai (dải đỏ #b90a2e + thanh xám #323232,
   font Geomanist 15px, logo 200x27).

   Hành vi: ở đầu trang hiện nav ngang này và ẨN header pill của
   Framer. Cuộn xuống thì ngược lại — ẩn nav, hiện pill Framer.

   Tạm BỎ search / account / minicart theo yêu cầu.
   Muốn bỏ hẳn: xoá file này + regna-nav.js + 2 dòng <link>/<script>
   trong index.html, trang về đúng bản Framer gốc.
   ============================================================ */
@font-face{font-family:'Geomanist';src:url('../assets/fonts/Geomanist-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geomanist';src:url('../assets/fonts/Geomanist-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}

#regna-topnav{position:fixed;top:0;left:0;right:0;z-index:100;
  font-family:'Geomanist',system-ui,sans-serif;
  transition:opacity .3s ease,transform .3s ease}
#regna-topnav.rn-hidden{opacity:0;transform:translateY(-14px);pointer-events:none}

/* dải đỏ trên */
.rn-strip{background:#b90a2e;height:38px;display:flex;align-items:center;
  justify-content:flex-end;gap:22px;padding:0 40px}
.rn-strip a{display:flex;align-items:center;color:#fff;opacity:.95;transition:opacity .2s}
.rn-strip a:hover{opacity:1}
.rn-strip svg{width:17px;height:17px;fill:currentColor}

/* thanh chính */
.rn-bar{background:#323232;height:76px;display:flex;align-items:center;
  padding:0 40px;gap:40px}
.rn-logo{flex:0 0 auto;display:block}
.rn-logo img{width:200px;height:27px;display:block}
.rn-menu{flex:1;display:flex;align-items:center;justify-content:center;gap:26px}
.rn-menu a{color:#fff;font-size:15px;font-weight:400;line-height:1;
  text-transform:capitalize;text-decoration:none;padding:8px 6px;
  white-space:nowrap;opacity:.92;transition:opacity .2s}
.rn-menu a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
/* ---- cụm hành động bên phải: search / account / cart (link thật sang Magento) ---- */
.rn-actions{flex:0 0 200px;display:flex;align-items:center;justify-content:flex-end;gap:6px;position:relative}
.rn-act{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;
  color:#fff;cursor:pointer;border-radius:50%;opacity:.92;transition:opacity .2s,background .2s;position:relative;text-decoration:none}
.rn-act,.rn-act:link,.rn-act:visited,.rn-act:hover,.rn-act:active,.rn-act:focus{color:#fff !important;text-decoration:none !important}
.rn-act:hover{opacity:1;background:rgba(255,255,255,.08)}
.rn-act span{display:inline-flex}
.rn-ic-close{display:none !important}
.rn-search-open .rn-ic-open{display:none !important}
.rn-search-open .rn-ic-close{display:inline-flex !important}
button.rn-act{padding:0;box-sizing:border-box;font:inherit;-webkit-appearance:none;appearance:none}
.rn-act svg{width:22px;height:22px;flex:none;fill:currentColor}
.rn-badge[hidden]{display:none !important}
.rn-badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#b90a2e;color:#fff;font-size:11px;font-weight:500;line-height:18px;text-align:center}
.rn-search{position:absolute;right:138px;top:50%;transform:translateY(-50%);display:flex;align-items:center;
  width:0;overflow:hidden;opacity:0;transition:width .25s ease,opacity .2s ease;background:#fff;border-radius:22px;height:40px}
.rn-search-open .rn-search{width:min(320px,calc(100vw - 200px));opacity:1}
.rn-search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:0 4px 0 16px;font:inherit;font-size:15px;color:#222}
.rn-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.rn-search button{border:0;background:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:#323232;cursor:pointer}
.rn-search button{padding:0;flex:none;-webkit-appearance:none;appearance:none}
.rn-search button svg{width:20px;height:20px;flex:none;fill:currentColor}
.rn-act,.rn-act:focus,.rn-act:active,.rn-act:focus-visible{background:none !important;border:0 !important;box-shadow:none !important}
.rn-act:hover{background:rgba(255,255,255,.08) !important}
.rn-search-open .rn-act-search,.rn-search-open .rn-act-search:focus{background:rgba(255,255,255,.14) !important}
.rn-act svg,.rn-act span svg{fill:#fff !important}
.rn-act:focus{outline:none}
.rn-act:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rn-search button:focus{outline:none}

/* container pill của Framer = div bao ngoài [Navbar] (không dùng tên "Default" vì Framer đặt tên đó cho nhiều layer khác) */
/* ẩn pill khi đang ở đầu trang (thanh nav ngang đang hiện); !important vì Framer đặt opacity inline */
body:not(.rn-scrolled) div:has(> [data-framer-name] > [data-framer-name="Navbar"]){opacity:0 !important;
  pointer-events:none !important;transition:opacity .3s ease,top .3s ease !important}
body.rn-scrolled div:has(> [data-framer-name] > [data-framer-name="Navbar"]){opacity:1 !important;
  transition:opacity .3s ease,top .3s ease !important}

/* đẩy nội dung xuống cho khỏi bị nav che */
body{padding-top:0}

@media (max-width:1199px){
  .rn-bar{padding:0 24px;gap:24px}
  .rn-menu{gap:16px}
  .rn-menu a{font-size:14px}
  .rn-spacer{display:none}
  .rn-strip{padding:0 24px}
}
@media (max-width:809px){
  /* mobile: thanh gọn logo + 3 icon; pill Framer nằm ngay dưới khi ở đầu trang, cuộn thì thanh ẩn và pill trượt lên */
  .rn-strip,.rn-menu{display:none}
  .rn-bar{height:56px;padding:0 12px 0 16px;gap:8px}
  .rn-logo img{width:126px;height:17px}
  .rn-actions{flex:1 1 auto}
  .rn-act{width:38px;height:38px}
  .rn-search{right:132px;height:36px}
  .rn-search-open .rn-search{width:calc(100vw - 150px)}
  .rn-search-open .rn-logo{visibility:hidden}
  body:not(.rn-scrolled) div:has(> [data-framer-name] > [data-framer-name="Navbar"]){opacity:1 !important;pointer-events:auto !important;top:56px !important}
  body.rn-scrolled div:has(> [data-framer-name] > [data-framer-name="Navbar"]){top:0 !important}
  /* ở đầu trang: pill chỉ giữ nút Menu (logo đã có trên thanh gọn), dồn sang phải thẳng dưới cụm icon */
  body:not(.rn-scrolled) div:has(> [data-framer-name] > [data-framer-name="Navbar"]) > [data-framer-name]{
    justify-content:flex-end !important;padding:8px 12px 0 0 !important;transition:padding .3s ease}
  body:not(.rn-scrolled) div:has(> [data-framer-name] > [data-framer-name="Navbar"]) > [data-framer-name] > :not([data-framer-name="Navbar"]){display:none !important}
}

/* Pill menu (scrolled state): Framer lays its links out as rows of 2 (3 rows = 6 slots). With the
   full 7-item menu (regna-nav.js clones a 7th slot) show one item per line instead, so nothing
   overflows the box. */
[data-framer-name="Nav Menu"],
[data-framer-name="Nav Menu"] > div{height:auto !important}
[data-framer-name="Nav Menu"] [data-framer-name="Row"]{flex-direction:column !important;align-items:flex-start !important;width:100% !important;height:auto !important}
[data-framer-name="Nav Menu"] [data-framer-name="Row"] > *{width:auto !important}