/* MNC Header v1 — namespaced so it cannot restyle Slider Revolution or Chaty. */
:root {
    --mnc-v1-gold: #fcbe00;
    --mnc-v1-gold-dark: #e5ac00;
    --mnc-v1-gold-soft: #fff7d6;
    --mnc-v1-navy: #1a1a2e;
    --mnc-v1-navy-2: #16213e;
    --mnc-v1-blue: #0068c9;
    --mnc-v1-text: #333e48;
    --mnc-v1-muted: #6b7280;
    --mnc-v1-border: #e5e7eb;
    --mnc-v1-shadow: 0 12px 35px rgba(15, 15, 26, .18);
    --mnc-v1-font-thai: 'IBM Plex Sans Thai', system-ui, sans-serif;
    --mnc-v1-font-en: 'Inter', system-ui, sans-serif;
}

.mnc-v1,
.mnc-v1 * { box-sizing: border-box; }
.mnc-v1 a { text-decoration: none; }
.mnc-v1 button,
.mnc-v1 input { font: inherit; }
.mnc-v1-container { width: min(1240px, calc(100% - 32px)); margin: 0 auto; }
.mnc-v1 .screen-reader-text,
.mnc-v1 .screen-reader-text:focus { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Top bar */
.mnc-v1-topbar { position: relative; z-index: 1004; color: rgba(255,255,255,.84); background: linear-gradient(90deg, var(--mnc-v1-navy), var(--mnc-v1-navy-2), var(--mnc-v1-navy)); font: 400 12px/1.4 var(--mnc-v1-font-thai); }
.mnc-v1-topbar__inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mnc-v1-topbar__contact,
.mnc-v1-topbar__meta { display: flex; align-items: center; gap: 18px; }
.mnc-v1-topbar a { color: rgba(255,255,255,.84); transition: color .18s ease; }
.mnc-v1-topbar a:hover,
.mnc-v1-topbar a:focus-visible { color: var(--mnc-v1-gold); }
.mnc-v1-topbar__contact a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mnc-v1-topbar__contact span { color: var(--mnc-v1-gold); }
.mnc-v1-topbar__meta > a { display: inline-flex; min-width: 24px; min-height: 24px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.28); border-radius: 5px; font: 600 11px/1 var(--mnc-v1-font-en); }

/* Main header */
.mnc-v1-main { position: relative; z-index: 1003; background: #fff; border-bottom: 1px solid #f0f0f0; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.mnc-v1-main__inner { min-height: 74px; display: flex; align-items: center; gap: 24px; }
.mnc-v1-logo { display: inline-flex; align-items: center; flex: 0 0 auto; width: 180px; }
.mnc-v1-logo img { display: block; width: 180px; height: 48px; object-fit: contain; object-position: left center; }
.mnc-v1-search { position: relative; flex: 1 1 460px; max-width: 520px; margin-left: auto; }
.mnc-v1-search input { display: block; width: 100%; height: 42px; padding: 0 52px 0 18px; color: var(--mnc-v1-text); background: #f9fafb; border: 2px solid var(--mnc-v1-border); border-radius: 999px; outline: 0; font-size: 13px; }
.mnc-v1-search input:focus { border-color: var(--mnc-v1-gold); background: #fff; box-shadow: 0 0 0 3px rgba(252,190,0,.16); }
.mnc-v1-search button { position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: var(--mnc-v1-navy); background: var(--mnc-v1-gold); cursor: pointer; font: 700 22px/1 var(--mnc-v1-font-en); }
.mnc-v1-search button:hover { background: var(--mnc-v1-gold-dark); }
.mnc-v1-actions { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.mnc-v1-action { position: relative; display: inline-flex; min-width: 52px; min-height: 48px; padding: 5px 8px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--mnc-v1-navy); border-radius: 7px; }
.mnc-v1-action:hover,
.mnc-v1-action:focus-visible { background: #f9fafb; color: var(--mnc-v1-blue); }
.mnc-v1-action > span { font: 22px/1 var(--mnc-v1-font-en); }
.mnc-v1-action small { color: var(--mnc-v1-muted); font: 500 10px/1.1 var(--mnc-v1-font-en); }
.mnc-v1-cart b { position: absolute; top: 2px; right: 3px; display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 50%; color: var(--mnc-v1-navy); background: var(--mnc-v1-gold); font: 700 9px/1 var(--mnc-v1-font-en); }
.mnc-v1-phone { display: inline-flex; align-items: center; gap: 7px; margin-left: 7px; padding: 11px 15px; border-radius: 999px; color: var(--mnc-v1-navy); background: var(--mnc-v1-gold); font: 600 13px/1 var(--mnc-v1-font-en); white-space: nowrap; }
.mnc-v1-phone:hover,
.mnc-v1-phone:focus-visible { color: var(--mnc-v1-navy); background: var(--mnc-v1-gold-dark); }
.mnc-v1-menu-toggle { display: none; width: 42px; height: 42px; padding: 9px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.mnc-v1-menu-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--mnc-v1-navy); }

/* Desktop nav and menus */
.mnc-v1-nav { position: relative; z-index: 1002; color: #fff; background: var(--mnc-v1-navy); font-family: var(--mnc-v1-font-thai); }
.mnc-v1-nav__inner { display: flex; align-items: stretch; min-height: 50px; }
.mnc-v1-products-trigger,
.mnc-v1-nav-cta { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.mnc-v1-products-trigger { gap: 8px; padding: 0 20px; color: var(--mnc-v1-navy); background: var(--mnc-v1-gold); font-size: 13px; font-weight: 600; }
.mnc-v1-products-trigger:hover { color: var(--mnc-v1-navy); background: var(--mnc-v1-gold-dark); }
.mnc-v1-menu { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.mnc-v1-menu > li { position: relative; display: flex; align-items: stretch; }
.mnc-v1-menu > li > a { display: inline-flex; align-items: center; gap: 5px; padding: 0 17px; color: rgba(255,255,255,.92); border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; white-space: nowrap; }
.mnc-v1-menu > li > a:hover,
.mnc-v1-menu > li > a:focus-visible,
.mnc-v1-menu > li.current-menu-item > a { color: var(--mnc-v1-gold); border-bottom-color: var(--mnc-v1-gold); }
.mnc-v1-nav-cta { gap: 8px; margin: 8px 0 8px auto; padding: 0 17px; border-radius: 999px; color: var(--mnc-v1-navy); background: var(--mnc-v1-gold); font-size: 12px; font-weight: 600; }
.mnc-v1-nav-cta:hover,
.mnc-v1-nav-cta:focus-visible { color: var(--mnc-v1-navy); background: var(--mnc-v1-gold-dark); }
.mnc-v1-mega,
.mnc-v1-dropdown { position: absolute; top: 100%; left: 0; visibility: hidden; opacity: 0; transform: translateY(7px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; background: #fff; border-top: 3px solid var(--mnc-v1-gold); box-shadow: var(--mnc-v1-shadow); }
.mnc-v1-has-mega:hover > .mnc-v1-mega,
.mnc-v1-has-mega:focus-within > .mnc-v1-mega,
.mnc-v1-menu > li:hover > .mnc-v1-dropdown,
.mnc-v1-menu > li:focus-within > .mnc-v1-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }
.mnc-v1-mega { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 28px; width: min(1080px, calc(100vw - 32px)); padding: 28px; }
.mnc-v1-mega > div { min-width: 0; }
.mnc-v1-mega h3 { margin: 0 0 11px; padding: 0 0 9px; color: var(--mnc-v1-navy); border-bottom: 2px solid var(--mnc-v1-gold); font-size: 13px; font-weight: 700; }
.mnc-v1-mega > div > a { display: flex; align-items: center; gap: 7px; padding: 6px 8px; color: var(--mnc-v1-text); border-radius: 4px; font-size: 13px; }
.mnc-v1-mega > div > a:hover,
.mnc-v1-mega > div > a:focus-visible { color: var(--mnc-v1-navy); background: var(--mnc-v1-gold-soft); }
.mnc-v1-mega em { padding: 2px 6px; border-radius: 999px; color: #fff; background: #e53935; font-size: 9px; font-style: normal; }
.mnc-v1-mega__brands { padding: 16px; border-radius: 7px; background: #f8fafc; }
.mnc-v1-mega__brands p { margin: -4px 0 14px; color: var(--mnc-v1-muted); font-size: 12px; line-height: 1.5; }
.mnc-v1-mega__brands > div { display: flex; flex-wrap: wrap; gap: 7px; }
.mnc-v1-mega__brands b { padding: 6px 8px; border: 1px solid var(--mnc-v1-border); border-radius: 4px; color: var(--mnc-v1-text); background: #fff; font: 600 11px/1.2 var(--mnc-v1-font-en); }
.mnc-v1-dropdown { min-width: 220px; padding: 9px 0; border-radius: 0 0 7px 7px; }
.mnc-v1-dropdown a { display: block; padding: 9px 18px; color: var(--mnc-v1-text); font-size: 13px; }
.mnc-v1-dropdown a:hover,
.mnc-v1-dropdown a:focus-visible { color: var(--mnc-v1-navy); background: var(--mnc-v1-gold-soft); }

/* Mobile drawer */
.mnc-v1-mobile[hidden] { display: none; }
.mnc-v1-mobile { position: fixed; inset: 0; z-index: 1100; }
.mnc-v1-mobile__backdrop { position: absolute; inset: 0; background: rgba(15,15,26,.58); }
.mnc-v1-mobile__panel { position: relative; width: min(340px, 88vw); height: 100%; padding: 20px; overflow-y: auto; background: #fff; box-shadow: 10px 0 30px rgba(0,0,0,.2); animation: mnc-v1-slide-in .2s ease-out; font-family: var(--mnc-v1-font-thai); }
@keyframes mnc-v1-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.mnc-v1-mobile__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--mnc-v1-border); }
.mnc-v1-mobile__head img { width: 150px; height: 40px; object-fit: contain; object-position: left center; }
.mnc-v1-mobile__head button { width: 34px; height: 34px; padding: 0; border: 0; color: var(--mnc-v1-muted); background: transparent; cursor: pointer; font-size: 27px; line-height: 1; }
.mnc-v1-mobile__search { position: relative; margin: 19px 0 10px; }
.mnc-v1-mobile__search input { width: 100%; height: 40px; padding: 0 42px 0 14px; border: 1px solid var(--mnc-v1-border); border-radius: 999px; outline: 0; font-size: 13px; }
.mnc-v1-mobile__search input:focus { border-color: var(--mnc-v1-gold); }
.mnc-v1-mobile__search button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--mnc-v1-gold); cursor: pointer; }
.mnc-v1-mobile__link,
.mnc-v1-mobile__accordion { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 13px 0; border: 0; border-bottom: 1px solid #f0f0f0; color: var(--mnc-v1-text); background: transparent; text-align: left; font-size: 14px; font-weight: 500; }
.mnc-v1-mobile__link:hover,
.mnc-v1-mobile__accordion:hover { color: var(--mnc-v1-blue); }
.mnc-v1-mobile__accordion { cursor: pointer; }
.mnc-v1-mobile__accordion span { color: var(--mnc-v1-muted); font-size: 20px; font-weight: 400; }
.mnc-v1-mobile__sub[hidden] { display: none; }
.mnc-v1-mobile__sub { padding: 4px 0 6px 14px; border-bottom: 1px solid #f0f0f0; }
.mnc-v1-mobile__sub a { display: block; padding: 8px 0; color: var(--mnc-v1-muted); font-size: 13px; }
.mnc-v1-mobile__sub a:hover { color: var(--mnc-v1-blue); }
.mnc-v1-mobile__cta { display: flex; align-items: center; justify-content: center; margin-top: 20px; padding: 12px 16px; border-radius: 999px; color: var(--mnc-v1-navy); background: var(--mnc-v1-gold); font-size: 14px; font-weight: 600; }
html.mnc-v1-menu-open { overflow: hidden; }

/* The header is inside the theme's #page wrapper. A scroll class avoids the
 * sticky-containing-block limitation and keeps the CTA visible while the
 * topbar naturally scrolls away. */
@media (min-width: 769px) {
    .mnc-v1.is-fixed { padding-top: 124px; }
    .mnc-v1.is-fixed .mnc-v1-main { position: fixed; top: 0; left: 0; right: 0; }
    .mnc-v1.is-fixed .mnc-v1-nav { position: fixed; top: 74px; left: 0; right: 0; }
    .admin-bar .mnc-v1.is-fixed .mnc-v1-main { top: 32px; }
    .admin-bar .mnc-v1.is-fixed .mnc-v1-nav { top: 106px; }
}

@media (max-width: 1120px) {
    .mnc-v1-main__inner { gap: 12px; }
    .mnc-v1-menu > li > a { padding-left: 10px; padding-right: 10px; }
    .mnc-v1-phone { padding-left: 11px; padding-right: 11px; }
}
@media (max-width: 900px) {
    .mnc-v1-topbar__contact { gap: 10px; }
    .mnc-v1-topbar__contact a:last-child,
    .mnc-v1-topbar__meta > span { display: none; }
    .mnc-v1-search { max-width: 360px; }
    .mnc-v1-action { min-width: 42px; padding-left: 4px; padding-right: 4px; }
    .mnc-v1-action small { display: none; }
    .mnc-v1-phone span:last-child { display: none; }
}
@media (max-width: 768px) {
    .mnc-v1-topbar { display: none; }
    .mnc-v1-main__inner { min-height: 62px; width: min(100% - 24px, 1240px); gap: 8px; }
    .mnc-v1-logo { width: 150px; }
    .mnc-v1-logo img { width: 150px; height: 40px; }
    .mnc-v1-search,
    .mnc-v1-nav,
    .mnc-v1-action,
    .mnc-v1-phone { display: none; }
    .mnc-v1-actions { margin-left: auto; }
    .mnc-v1-menu-toggle { display: block; }
}
@media (max-width: 380px) {
    .mnc-v1-logo { width: 132px; }
    .mnc-v1-logo img { width: 132px; }
}

/* v1.1 fixes: search field and LINE Office */
.mnc-v1-main__inner{display:flex!important;align-items:center!important;gap:20px!important}
.mnc-v1-search{display:flex!important;align-items:center!important;position:relative!important;flex:1 1 auto!important;width:auto!important;min-width:260px!important;max-width:none!important;margin:0!important}
.mnc-v1-search input[type="search"]{box-sizing:border-box!important;display:block!important;flex:1 1 auto!important;width:100%!important;min-width:0!important;height:42px!important;padding:0 54px 0 18px!important}
.mnc-v1-search button{z-index:2!important;flex:0 0 34px!important}
.mnc-v1-topbar__meta .mnc-v1-line-office{min-width:auto!important;width:auto!important;padding:0 10px!important;gap:5px!important;color:#fff!important}
.mnc-v1-topbar__meta .mnc-v1-line-office::before{content:"LINE Office";font-size:11px}
@media(max-width:1120px){.mnc-v1-main__inner{gap:12px!important}.mnc-v1-search{min-width:220px!important}}
@media(max-width:900px){.mnc-v1-search{max-width:none!important}.mnc-v1-topbar__meta .mnc-v1-line-office::before{content:"LINE"}}
