/* ============================================================
   responsive.css — Nam Dương  ·  Mobile-first breakpoint overrides

   Cascade strategy (desktop-down):
     LG  ≤ 991px  — collapsed nav, tablet landscape
     MD  ≤ 767px  — tablet portrait
     SM  ≤ 575px  — phone landscape / iPhone XR (414px)
     XS  ≤ 479px  — iPhone SE (375px), narrow phones

   Rules in each block ONLY override what changes from the
   previous (larger) breakpoint — no unnecessary repetition.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   LG — ≤ 991px  (tablet landscape · collapsed nav breakpoint)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Design tokens ── */
  :root {
    --header-height: 64px;
    --container-pad: 1.25rem;
  }

  /* ──────────────────────────────────────────────────────
     HEADER
     padding = (--header-height 64px − 2px border − 24px burger) / 2 = 19px
     so the actual element height exactly matches the CSS variable.
  ────────────────────────────────────────────────────── */
  #header {
    padding: 19px 0;
    background-color: var(--color-white);
    border-top-color: transparent;
    box-shadow: none;
  }
  #header.is-sticky {
    background-color: rgba(255,255,255,.95);
    /* border-top-color: #e7191b; */
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }

  /* bg_menu wave: anchor to header bottom (header is now 64px tall) */
  .bg_menu { bottom: -50px; }

  /* Logo: shift img box so logo visually sits above the wave */
  #header .logo img { padding-bottom: 28px; }

  /* Burger to the right; logo stays absolute-centred */
  .menu-header { justify-content: flex-end; }

  /* Collapse desktop nav panels */
  .header-nav--left,
  .header-nav--right { display: none; }
  .search_icon_header { display: none; }

  /* ── Burger button ── */
  #header .burgerbutton {
    display: flex;
    position: relative;
    z-index: 10;
    width: 34px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
  }
  .burgerbutton span {
    position: absolute;
    left: 0; right: 0;
    height: 4px; width: 100%;
    background: #cc0000;
    border-radius: 2px;
    transform: rotate(0deg);
    transition: 0.5s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .burgerbutton span:nth-child(1) { top: 0; }
  .burgerbutton span:nth-child(2) { top: 44%; width: 60%; }
  .burgerbutton span:nth-child(3) { bottom: 0; }
  /* Burger → X when open */
  .burgerbutton.open span:nth-child(1) { top: 10px;    transform: rotate(-45deg); }
  .burgerbutton.open span:nth-child(2) { width: 0;     opacity: 0; }
  .burgerbutton.open span:nth-child(3) { bottom: 10px; transform: rotate(45deg); }

  /* ── Mobile drawer (DOM sibling to #header) ── */
  #mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: -320px; bottom: 0;
    width: min(240px, 72vw); /* max 72vw — leaves ≥28% of screen as tappable overlay */
    background: linear-gradient(180deg, var(--color-wine) 0%, var(--color-orange) 100%);
    z-index: var(--z-drawer);
    padding: calc(var(--header-height) + 1.5rem) 1.5rem 2rem;
    overflow-y: auto;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
  }
  #mobile-drawer.show { right: 0; }

  /* Drawer menu items */
  #mobile-drawer .main_menu {
    flex-direction: column; align-items: flex-start; gap: 0; width: 100%;
  }
  #mobile-drawer .main_menu > .menu-item {
    width: 100%; border-bottom: 1px solid rgba(255,255,255,.15);
  }
  #mobile-drawer .main_menu > .menu-item > a {
    color: rgba(255,255,255,.9);
    font-size: 1.1rem; padding: 0.95rem 0.5rem;
    border-radius: 0; display: flex;
    justify-content: space-between; align-items: center;
    text-transform: uppercase;
  }
  #mobile-drawer .main_menu > .menu-item > a:hover,
  #mobile-drawer .main_menu > .menu-item.current-menu-item > a {
    color: var(--color-white); background: none;
  }
  #mobile-drawer .main_menu > .menu-item > a::after { display: none; }

  /* Dropdown trigger: pointer cursor + open-state highlight */
  #mobile-drawer .menu-item-has-children > a { cursor: pointer; }
  #mobile-drawer .menu-item-has-children.open > a {
    color: #fff;
    background: rgba(255,255,255,.15);
    border-radius: 6px;
  }
  /* Nav-arrow icon: brighten on open */
  #mobile-drawer .menu-item-has-children.open > a .nav-arrow {
    color: #ffd0d0;
    transform: rotate(180deg);
  }

  /* Accordion sub-menu */
  #mobile-drawer .sub-menu {
    display: none; position: static;
    background: rgba(0,0,0,.15); border: none; border-radius: 0;
    padding: 0.25rem 0 0.25rem 1rem; box-shadow: none;
  }
  #mobile-drawer .menu-item-has-children.open > .sub-menu { display: block; }
  #mobile-drawer .sub-menu .menu-item a {
    color: rgba(255,255,255,.8); font-size: 0.875rem; padding: 0.6rem 0.5rem;
  }
  #mobile-drawer .sub-menu .menu-item a:hover { background: none; color: var(--color-white); }
  #mobile-drawer .wpml-ls-item a { padding: 0.75rem 0; }
  #mobile-drawer .wpml-ls-flag  { width: 28px; }
  /* Chevron arrow rotates on accordion open */
  #mobile-drawer .nav-arrow { transition: transform 0.25s ease; display: inline-block; }

  /* ──────────────────────────────────────────────────────
     BANNER & SECTION BACKGROUNDS
  ────────────────────────────────────────────────────── */
  section.banner_slider img,
  .banner-slide-item img { object-fit: cover; object-position: center; }

  .background_def { background-size: cover; background-position: center center; }

  /* ──────────────────────────────────────────────────────
     FOOTER — fullscreen on all mobile widths
     fullPage.js controls section height (100vh); this
     ensures the inner content box fills it and is centred.
  ────────────────────────────────────────────────────── */
  /* address_footer stacks as block on tablet, not flex row */
  .address_footer { display: inline-block; }
  .footer_div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 100svh = small viewport height (excludes dynamic browser chrome) */
    min-height: 100vh;          /* fallback */
    min-height: 100svh;
    padding: var(--header-height) 0 40px;
  }

  /* ──────────────────────────────────────────────────────
     CARD GRIDS
  ────────────────────────────────────────────────────── */
  .card-grid    { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--2 { grid-template-columns: 1fr 1fr; }

  /* ──────────────────────────────────────────────────────
     DETAIL PAGE LAYOUTS
  ────────────────────────────────────────────────────── */
  /* Inner-page banner always starts below the fixed header */
  .page-banner { margin-top: var(--header-height); }
  .product-detail        { grid-template-columns: 1fr; gap: 2rem; }
  .recipe-detail__layout { grid-template-columns: 1fr; }
  .recipe-detail__sidebar { position: static; order: 999; padding: var(--space-4); border-radius: var(--radius-sm); }
  .news-detail__layout   { grid-template-columns: 1fr; }
  .news-detail__sidebar,
  #news-sidebar          { position: static; }
  .news-sidebar__item-img { width: 90px; height: 68px; }

  /* ──────────────────────────────────────────────────────
     ABOUT — TIMELINE
  ────────────────────────────────────────────────────── */
  .timeline::before { left: 24px; transform: none; }
  .timeline-item,
  .timeline-item:nth-child(even) {
    flex-direction: column; padding-left: 3rem; position: relative;
  }
  .timeline-item__dot     { left: 24px; transform: translateX(-50%); }
  .timeline-item__content { width: 100%; text-align: left !important; margin-left: 0 !important; }
  .timeline-item__img     { margin-left: 0 !important; }

  /* ──────────────────────────────────────────────────────
     OTHER COMPONENT GRIDS
  ────────────────────────────────────────────────────── */
  .core-values-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-block    { grid-template-columns: 1fr; gap: 2rem; }
  .contact-layout   { grid-template-columns: 1fr; }

  /* ──────────────────────────────────────────────────────
     ANIMATIONS
     fullPage.js is active on all widths but elements may
     not have fired their onLeave animation yet — ensure
     they are always readable.
  ────────────────────────────────────────────────────── */
  .is-animated { opacity: 1 !important; }

  /* ──────────────────────────────────────────────────────
     HOMEPAGE SECTIONS
  ────────────────────────────────────────────────────── */

  /* Page 2 — Introduce
     IMPORTANT: overflow-x: hidden on the *section* (not on
     .border_img) prevents the horizontal scrollbar caused by
     ::before at left: -28px, while keeping ::before visible.
     Setting overflow: hidden on .border_img itself would clip
     the absolutely-positioned pseudo-element — that is wrong. */
  /* Top padding clears the fixed header; bottom keeps breathing room */
  /* padding: extra breathing room beyond the headerH already set in main.css */
  section.introduce_home { padding-top: 36px; padding-bottom: 60px; overflow-x: hidden; }
  .cont_introduce_home .border_img { width: 100%; }
  /* Hide decorative absolute images that overflow at this width */
  .cont_introduce_home .border_img::after { display: none; }
  .cont_introduce_home .border_img::before { display: none; }
  .cont_introduce_home .group_cont_intro_home { padding: 20px 20px 20px 20px !important; }

  /* Page 3 — Products */
  .pd_sec_img_left, .pd_sec_img_right { display: none; }

  /* Page 4 — Recipes */
  section.recipe_home { padding: 36px 0 36px; }
  .recipe_home .group_cont_recipe img { width: 250px; }
  [data-anchor="page4"] { background-position: -780px 0 !important; }

  /* Page 5 — News */
  section.news_home { padding: 8px 0 0; }
  .list_news .items_news_box { width: 50%; margin-bottom: 15px; }
  .list_news .items_news_box:nth-child(3),
  .list_news .items_news_box:last-child { margin-bottom: 0; }

  /* ── Product carousel ── */
  section.product_home { padding: 20px 0 30px; }
  .item_pd_home img { height: 200px; }
  .product_home .slick-arrow { width: 60px; height: 45px; }
  .product_home .slick-prev::before,
  .product_home .slick-next::before { width: 60px; height: 45px; }

  /* ── News items ── */
  .thumb_item_post_new { height: 240px !important; }
  .cont_item_post_new { padding: 0 20px; }

  /* ── Section titles ── */
  .title_group h4,
  .title_group h1 { font-size: 28px; line-height: 36px; }

  /* ── Banner nav: scale circles down for tablets ── */
  section.banner_slider .slick-nav-wrap { bottom: 28px; }
  section.banner_slider .slick-nav { gap: 8px; }
  section.banner_slider .slick-nav .slick-prev,
  section.banner_slider .slick-nav .slick-next { width: 30px; height: 30px; }
  section.banner_slider .slick-nav .slick-prev::before,
  section.banner_slider .slick-nav .slick-next::before { width: 12px; height: 12px; }

  /* Page 2: hide absolute corner decorations that overflow at tablet width */
  .cont_introduce_home .group_cont_intro_home::before,
  .cont_introduce_home .group_cont_intro_home::after { display: none; }

  /* Page 3: scale the container top-offset down from 140px desktop */
  #sec-page3 .container { padding-top: 80px; }

  /* Page 5: tighter thumbnail height */
  /* section.news_home .thumb_item_post_new { height: 450px !important; } */

  /* Page 2: CTA button pull out of absolute flow at tablet width */
  .cont_introduce_home a.btn-style.btn_hook {
    position: static;
    display: block;
    width: fit-content;
    margin: 16px 0 0 auto;
  }
}


/* ══════════════════════════════════════════════════════════
   TABLET PORTRAIT — 768 – 991px in portrait orientation
   (iPad mini 768×1024, iPad 810×1080, etc.)
   Supplements the LG block above with portrait-specific tweaks
   where the tall narrow viewport needs different treatment.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {

  /* Drawer narrower in portrait so overlay area is generous */
  #mobile-drawer { width: min(260px, 68vw); }

  /* Intro: let the image column breathe vertically */
  section.introduce_home { padding-top: 28px; padding-bottom: 48px; }
  .cont_introduce_home .border_img { max-width: min(320px, 80%); margin: 0 auto 16px; }

  /* Product: taller viewport means we can show slightly bigger images */
  .item_pd_home img { height: 220px; }

  /* News: 2-column at this width — keep border between columns */
  .items_news_box:not(:last-child) { border-right: .5px solid rgba(0,0,0,.3); }
  .thumb_item_post_new { height: clamp(130px, 14vh, 200px) !important; }

  /* Recipe: more room for the image */
  .recipe_home .group_cont_recipe img { width: 260px; }

  /* Page 3: moderate top offset in portrait */
  #sec-page3 .container { padding-top: 60px; }

  /* Product page: stack sidebar above grid */
  .col-left-pd { flex: 0 0 100%; max-width: 100%; padding-right: 0; margin-bottom: 20px; }
  .col-right-pd { flex: 0 0 100%; max-width: 100%; padding-left: 0; }
  ul.products.columns-3 li.product { width: 47%; margin: 0 1.5% 60px; }
  .img_left_product_page, .img_right_product_page { display: none; }
}


/* ══════════════════════════════════════════════════════════
   MD — ≤ 767px  (tablet portrait · iPhone XR landscape)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Design tokens ── */
  :root {
    --header-height:  60px;
    --text-3xl:       1.875rem;   /* 30px */
    --text-2xl:       1.5rem;     /* 24px */
    --text-xl:        1.25rem;    /* 20px */
    --container-pad:  1rem;
  }

  /* ── Typography ── */
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  .section-heading { margin-bottom: 2rem; }
  .section-heading__title { font-size: 1.5rem; }

  /* ── Page banner: flexible height on tablet portrait ── */
  .page-banner {
    height: auto;
    min-height: 200px;
  }
  .page-banner__title { font-size: 1.5rem; }

  /* ── Header ── */
  /* padding = (60px − 2px border − 24px burger) / 2 = 17px — header matches --header-height */
  #header { padding: 17px 0; }
  /* Logo: properly centred within the fixed header — no risk of clipping at viewport top */
  #header .logo { top: 50% !important; transform: translate(-50%, -50%) !important; }
  #header .logo img { height: 48px !important; width: 64px !important; padding-bottom: 0; }
  .bg_menu { display: none; }

  /* ── Card grids ── */
  .card-grid    { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .product-card__body { padding: 0.875rem; }
  .product-card__name { font-size: 1rem; }

  /* ── About ── */
  .core-values-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .about-page section { padding: 3rem 0; }

  /* ── Recipe sidebar: accordion hint ── */
  .recipe-detail__sidebar h3 { cursor: pointer; user-select: none; }
  .recipe-detail__sidebar h3::after { content: " ▾"; font-size: 0.875rem; }

  /* ── Homepage: introduce ── */
  section.introduce_home { padding-top: 20px; padding-bottom: 60px; overflow-x: hidden; }
  .cont_introduce_home .a.btn-style.btn_hook { position: static; margin-top: 20px; right: auto; bottom: auto; }

  /* ── Homepage: recipes ── */
  .recipe_home .group_cont_recipe img { width: 200px; }
  .recipe_home .content br { content: " "; }

  /* ── Homepage: news ── */
  .list_news .items_news_box { width: 50%; margin-bottom: 15px; float: left; }

  /* ── Homepage: product slider ── */
  .slider_product_home button { display: none; }

  /* ── Footer: stack all items ── */
  .def_footer .contact ul,
  .social_footer ul { display: block; }
  .def_footer .contact ul li,
  .social_footer ul li { width: 100%; text-align: center !important; padding: initial; }
  .social_menu li { display: inline-block; }
  .def_footer .contact ul li:not(:last-child) { border: none; }
  /* Ensure span doesn’t overflow on narrow screens */
  .def_footer span { width: 100% !important; display: block; }
  .def_footer p,
  .def_footer a,
  .def_footer span { text-align: center; display: block; }

  /* ── Pagination ── */
  .pagination { gap: 0.25rem; flex-wrap: wrap; }
  .pagination__btn { min-width: 34px; height: 34px; font-size: 0.8125rem; }

  /* ── Category tabs ── */
  .category-tabs { gap: 0.5rem; }
  .category-tab  { padding: 0.375rem 1rem; font-size: 0.8125rem; }

  /* ── Search overlay ── */
  #search-close { top: 1rem; right: 1rem; font-size: 1.75rem; }
  .search-overlay__input { font-size: 1.5rem; }

  /* ── Contact map ── */
  .contact-map iframe { height: 260px; }

  /* ── News detail ── */
  .news-detail__title { font-size: 1.25rem; }
  .news-sidebar__item-img { width: 80px; height: 60px; }

  /* ── Floating action buttons: hide at same breakpoint as bg_menu ── */
  /* bg_menu is hidden at ≤767px; icons too small/cramped without the wave context */
  .group_icon_fixed_page { display: none; }

  [data-anchor="page2"] .container {
    padding: 0 !important;
  }

  /* ── Product carousel ── */
  section.product_home { padding: 16px 0 20px; }
  .item_pd_home img { height: 160px; }
  .product_home .slick-arrow { display: none; }

  /* ── News items ── */
  .thumb_item_post_new { height: 200px !important; }
  .cont_item_post_new { padding: 0 12px; }
  .cont_item_post_new p.content_post { height: auto; max-height: none; }

  /* ── Section titles ── */
  .title_group h4,
  .title_group h1 { font-size: 24px; line-height: 30px; }

  /* ── Banner nav: compact on small tablet/large phone ── */
  section.banner_slider .slick-nav-wrap { bottom: 20px; }
  section.banner_slider .slick-nav { gap: 6px; }
  section.banner_slider .slick-nav .slick-prev,
  section.banner_slider .slick-nav .slick-next { width: 26px; height: 26px; }
  section.banner_slider .slick-nav .slick-prev::before,
  section.banner_slider .slick-nav .slick-next::before { width: 10px; height: 10px; }
  section.banner_slider .slick-dots li button::before { font-size: 10px; }

  /* Page 2: CTA button — pull out of absolute flow */
  .cont_introduce_home a.btn-style.btn_hook {
    position: static;
    display: block;
    width: fit-content;
    margin: 16px auto 0;
  }

  /* Page 3: reduce container top-offset */
  #sec-page3 .container { padding-top: 40px; }

  /* Page 5: remove side border when items wrap in 2-col slick */
  .items_news_box:not(:last-child) { border-right: none; }
  /* section.news_home .thumb_item_post_new { height: clamp(90px, 12vh, 150px) !important; } */

  /* ──────────────────────────────────────────────────────
     INNER PAGES — mobile-specific layout fixes
  ────────────────────────────────────────────────────── */

  /* Products listing: stack sidebar above grid */
  .col-left-pd  { flex: 0 0 100%; max-width: 100%; padding-right: 0;  margin-bottom: 20px; }
  .col-right-pd { flex: 0 0 100%; max-width: 100%; padding-left:  0; }
  ul.products.columns-3 li.product { width: 47%; margin: 0 1.5% 60px; }

  /* Contact page: allow icon boxes to wrap into rows */
  .group_icon_box_contact { flex-wrap: wrap; justify-content: center; gap: 14px; margin: 24px 0 36px; }
  .group_icon_box_contact .item_icon_box { margin: 0; }

  /* Recruitment: scrollable jobs table on narrow screens */
  .table_recrui { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  }

/* ─────────────────────────────────────────────────────
   fullPage.js RESPONSIVE MODE (triggered when width < 992px)

   Strategy:
     • Push #fullpage down by header-height via margin-top so NO
       per-section padding is needed to clear the fixed header.
     • Each section = exactly (100svh - header-height): fills the
       visible area below the header with zero internal padding.
     • overflow-y: auto on sections lets scrolling happen inside
       a panel if content is taller than the viewport.
───────────────────────────────────────────────────── */

body.fp-responsive #fullpage {
  height: auto    !important;
  overflow: visible !important;
  /* Single offset here replaces padding-top on every fp-section */
  margin-top: var(--header-height);
}

/* Every section = visible screen height (no padding, no header overlap) */
body.fp-responsive .fp-section {
  height: calc(100vh  - var(--header-height)) !important;  /* fallback */
  height: calc(100svh - var(--header-height)) !important;  /* iOS Safari */
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  transform: none !important;
}

/* fp-table / fp-tableCell: normal block flow */
body.fp-responsive .fp-table {
  display: block !important;
  height: auto    !important;
  transform: none !important;
}
body.fp-responsive .fp-tableCell {
  display:  block   !important;
  height:   100%    !important;
  overflow: visible !important;
  transform: none   !important;
}

/* Inner sections fill their fp-section parent (already correct height) */
body.fp-responsive #sec-page1 section.banner_slider,
body.fp-responsive #sec-page2 section.sec_gr_def,
body.fp-responsive #sec-page3 section.product_home,
body.fp-responsive #sec-page4 section.recipe_home,
body.fp-responsive #sec-page5 section.news_home {
  height:     100% !important;
  max-height: 100% !important;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Banner stays strictly clipped — no scroll bar on the slide image */
body.fp-responsive #sec-page1 section.banner_slider { overflow: hidden !important; }

/* Hide fullPage sidebar nav dots — meaningless without snap-scroll */
body.fp-responsive #fp-nav { display: none !important; }

/* ── Ensure animated elements are always visible on natural scroll ──
   onLeave/afterLoad don't fire in fp-responsive mode so .is-animated
   elements would stay at opacity:0 forever without this override.    */
body.fp-responsive .is-animated {
  opacity:   1 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto;
}

/* News slider: guarantee no sub-element is hidden by leftover styles */
body.fp-responsive #sec-page5 .cont_news_home { visibility: visible !important; }
body.fp-responsive #sec-page5 .list_news,
body.fp-responsive #sec-page5 .slick-list,
body.fp-responsive #sec-page5 .slick-track { display: block !important; overflow: visible; }
body.fp-responsive #sec-page5 .slick-slide  { display: block !important; float: left; }


/* ══════════════════════════════════════════════════════════
   SM — ≤ 575px  (phone landscape · iPhone XR portrait 414px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {

  /* ── Design tokens ── */
  :root {
    --header-height: 56px;
    --container-pad: 0.875rem;
  }

  /* ── Header: padding = (56px − 2px border − 24px burger) / 2 = 15px ── */
  #header { padding: 15px 0; }
  #header .logo img { height: 30px; width: auto; padding-bottom: 0; }

  /* (floating icons already hidden at MD ≤767px — no override needed here) */

  /* Drawer: narrower on small phones — ~75% of screen width max */
  #mobile-drawer { width: min(230px, 76vw); }

  /* ── Banner: use calc() so header offset is respected on phones too ── */
  section.banner_slider {
    height: calc(100vh  - var(--header-height));   /* fallback */
    height: calc(100svh - var(--header-height));   /* iOS Safari dynamic chrome */
  }
  section.banner_slider img,
  .banner-slide-item img {
    height: calc(100vh  - var(--header-height));
    height: calc(100svh - var(--header-height));
  }

  /* ── Footer fullscreen ── */
  .footer_div {
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--header-height) 0 30px;
  }

  /* ── Card grids: single column ── */
  .card-grid    { grid-template-columns: 1fr; gap: 0.75rem; }
  .card-grid--3 { grid-template-columns: 1fr; }
  .card-grid--2 { grid-template-columns: 1fr; }

  /* ── Homepage: introduce ── */
  section.introduce_home { padding-top: 4px; padding-bottom: 60px; }
  .cont_introduce_home .group_cont_intro_home { padding: 40px 20px 40px 20px !important; }
  .cont_introduce_home .content { max-height: 180px; font-size: 15px; }

  /* ── Homepage: recipes ── */
  section.recipe_home { padding: 4px 0; }
  .recipe_home .group_cont_recipe img { width: 160px; }

  /* ── Homepage: news (single column) ── */
  section.news_home { padding: 8px 0 0; }
  .list_news .items_news_box { width: 100%; float: none; }

  /* ── Product gallery ── */
  .product-detail__img-zoom-wrap { min-height: 240px; }
  .product-detail__main-img.is-zoomed { transform: none; cursor: default; }
  .product-detail__thumbs { gap: 0.5rem; justify-content: flex-start; }
  .product-detail__thumb  { width: 56px; height: 52px; }

  /* ── Product desc 2-col: stack on mobile ── */
  .product-detail__desc-wrap { flex-direction: column; gap: 0.25rem; }
  .product-detail__desc-label { width: auto; padding-top: 0; }

  /* ── Product meta-cols: stack on mobile ── */
  .product-detail__meta-cols { flex-direction: column; padding: 0; border-top: 1px dashed #d7d7d7; border-bottom: 1px dashed #d7d7d7; }
  .product-detail__meta-col { padding: 12px 0; }
  .product-detail__meta-col:not(:last-child) { border-right: none; border-bottom: 1px dashed #d7d7d7; }

  /* ── Form buttons ── */
  .contact-form .btn,
  .recruitment-apply .btn { width: 100%; justify-content: center; }

  /* ── Job cards ── */
  .job-card { flex-direction: column; gap: 1rem; align-items: flex-start; }

  /* ── Recruitment sub-nav tabs: wrap to next row on small phones ── */
  section.bread_c { margin: 12px 0 28px; }
  section.bread_c ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  section.bread_c ul li { display: block; margin: 0; }
  section.bread_c li a { padding: 8px 18px; font-size: 13px; display: block; }

  /* ── Search tabs: horizontal scroll ── */
  .search-results-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .search-results-tab { flex-shrink: 0; }

  /* ── Footer policy links: smaller text ── */
  .footer_page_rule a { font-size: 0.75rem; }

  /* ── Back to top ── */
  #back-to-top { width: 38px; height: 38px; font-size: 1rem; }

  /* ── News meta ── */
  .news-detail__meta { flex-wrap: wrap; gap: 0.5rem; }

  /* ── Section heading ── */
  .section-heading__title { font-size: 1.375rem; }

  /* ── Product carousel ── */
  section.product_home { padding: 8px 0 16px; }
  .item_pd_home img { height: 130px; margin: 0 auto 20px; }

  /* ── News items ── */
  .thumb_item_post_new { height: 180px !important; }
  .cont_item_post_new { padding: 0 8px; }
  .see_more_post { margin-bottom: 16px !important; }

  /* ── Section titles ── */
  .title_group h4,
  .title_group h1 { font-size: 20px; line-height: 26px; }

  /* ── Inner page banner ── */
  .page-banner { min-height: 150px; }

  /* ── Banner nav: phone size ── */
  section.banner_slider .slick-nav-wrap { bottom: 16px; }
  section.banner_slider .slick-nav { gap: 5px; }
  section.banner_slider .slick-nav .slick-prev,
  section.banner_slider .slick-nav .slick-next { width: 22px; height: 22px; border-width: 1.5px; }
  section.banner_slider .slick-nav .slick-prev::before,
  section.banner_slider .slick-nav .slick-next::before { width: 9px; height: 9px; }
  section.banner_slider .slick-dots li { width: 14px; height: 14px; margin: 0 2px; }
  section.banner_slider .slick-dots li button::before { font-size: 9px; }

  /* Page 2: fully stacked layout — hide decorative overflow elements */
  .cont_introduce_home .group_cont_intro_home::before,
  .cont_introduce_home .group_cont_intro_home::after { display: none; }

  /* Page 3: minimal top offset for phones */
  #sec-page3 .container { padding-top: 16px; }

  /* Page 4: tighter recipe image */
  .recipe_home .group_cont_recipe img { width: 140px; }

  /* Page 5: single-column slick — no divider border */
  .items_news_box:not(:last-child) { border-right: none; }
  /* section.news_home .thumb_item_post_new { height: clamp(80px, 11vh, 130px) !important; } */
  .cont_news_home .title_group h4 { margin-bottom: 12px; }

  /* Product page: single column on small screens */
  ul.products.columns-3 li.product { width: 100%; margin: 0 0 60px; }
}


/* ══════════════════════════════════════════════════════════
   XS — ≤ 479px  (iPhone SE 375px · narrow phones)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 479px) {

  /* ── Design tokens ── */
  :root {
    --header-height: 52px;
    --text-3xl:      1.5rem;    /* 24px */
    --text-2xl:      1.25rem;   /* 20px */
    --container-pad: 0.75rem;
  }

  /* ── Header: padding = (52px − 2px border − 24px burger) / 2 = 13px ── */
  #header { padding: 13px 0; }
  #header .logo img { height: 26px; width: auto; padding-bottom: 0; }

  /* Drawer: narrow on very small phones — full-width is overwhelming */
  #mobile-drawer { width: min(210px, 82vw); right: -220px; }
  #mobile-drawer.show { right: 0; }

  /* ── Homepage: introduce — very compact ── */
  section.introduce_home { padding-top: 4px; padding-bottom: 50px; }
  .cont_introduce_home .group_cont_intro_home { padding: 30px 15px 30px 15px !important; }
  .cont_introduce_home .content { font-size: 14px; max-height: 160px; }
  .cont_introduce_home a.btn-style.btn_hook {
    font-size: 13px;
    padding: 10px 35px 10px 18px;
    bottom: 20px !important;;
  }

  /* ── Product card: horizontal mini layout ── */
  .product-card {
    flex-direction: row;
    align-items: center;
  }
  .product-card__img-wrap {
    width: 90px; min-width: 90px;
    aspect-ratio: 1;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }

  /* ── Core values: single column ── */
  .core-values-grid { grid-template-columns: 1fr; }

  /* ── Timeline: flush left ── */
  .timeline-item,
  .timeline-item:nth-child(even) { padding-left: 2.5rem; }

  /* ── Pagination: hide ellipsis ── */
  .pagination__btn.is-ellipsis { display: none; }

  /* ── Article body ── */
  .article-content { font-size: 0.9375rem; }

  /* ── Section padding ── */
  .home-products-section,
  .home-recipes-section,
  .home-news-section { padding: 2rem 0; }
  .about-page section { padding: 2rem 0; }
  .product-detail,
  .recipe-detail,
  .news-detail { padding: 2rem 0; }

  /* ── Language toggle: accessible via footer on very narrow ── */
  .lang-toggle { display: none; }
  
  [data-anchor="page2"] .container {
    padding: 0 !important;
  }

  /* ── Product carousel ── */
  .item_pd_home img { height: 110px; }

  /* ── News items ── */
  .thumb_item_post_new { height: 150px !important; }

  /* ── Section titles ── */
  .title_group h4,
  .title_group h1 { font-size: 18px; line-height: 22px; }
  .title_group h4::after { width: 80px; }

  /* ── Inner page banner ── */
  .page-banner { min-height: 120px; }

  /* ── Banner nav: very small circles on SE-class phones ── */
  section.banner_slider .slick-nav-wrap { bottom: 10px; }
  section.banner_slider .slick-nav { gap: 4px; }
  section.banner_slider .slick-nav .slick-prev,
  section.banner_slider .slick-nav .slick-next { width: 18px; height: 18px; border-width: 1px; }
  section.banner_slider .slick-nav .slick-prev::before,
  section.banner_slider .slick-nav .slick-next::before { width: 7px; height: 7px; }
  section.banner_slider .slick-dots li { width: 12px; height: 12px; margin: 0 1px; }
  section.banner_slider .slick-dots li button::before { font-size: 8px; }

  /* Page 3: no extra top offset on very small phones */
  #sec-page3 .container { padding-top: 8px; }

  /* Page 5: minimum thumbnail */
  /* section.news_home .thumb_item_post_new { height: clamp(70px, 10vh, 110px) !important; } */

  /* Contact: single-column icon boxes on very small phones */
  .group_icon_box_contact { gap: 12px; }
  .group_icon_box_contact .item_icon_box { width: 100%; max-width: 260px; margin: 0 auto; }

  #main-content section.page_products.page_products {
    margin-top:0;
    padding: 0;
  }
}


/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */
@media print {
  #header,
  footer,
  #back-to-top,
  .floating-hotline,
  .group_icon_fixed_page,
  .search-overlay,
  .category-tabs,
  .pagination,
  .related-section { display: none !important; }

  body { color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: none; }
  .article-content { max-width: 100%; }

  .product-detail,
  .recipe-detail__layout,
  .news-detail__layout { grid-template-columns: 1fr; }
}


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


/* ══════════════════════════════════════════════════════════
   LANDSCAPE PHONES — height ≤ 480px (any width)
   Handles iPhone / Android in landscape where vertical space
   is very limited. Sections must fit the viewport and start
   below the (shorter) header.
   ══════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 480px) {

  /* ── Slimmer header in landscape ── */
  :root { --header-height: 46px; }

  #header { padding: 4px 0; }
  #header .logo img { height: 72px; padding-bottom: 0; }

  /* ── Banner: subtract slim landscape header from svh ── */
  section.banner_slider {
    height: calc(100vh  - var(--header-height));   /* fallback */
    height: calc(100svh - var(--header-height));
    min-height: unset;
  }
  section.banner_slider img,
  .banner-slide-item img {
    height: calc(100vh  - var(--header-height));
    height: calc(100svh - var(--header-height));
    min-height: unset;
  }

  /* ── Homepage sections: breathing room only —
     fullPage.js paddingTop handles header clearance ── */
  section.introduce_home { padding: 8px 0 1rem; overflow-x: hidden; }
  section.recipe_home    { padding: 8px 0 1rem; }
  section.news_home      { padding: 8px 0 0; }

  /* ── Inner-page banner ── */
  .page-banner {
    margin-top: var(--header-height);
    min-height: 100px;
    height: auto;
  }

  /* ── Footer ── */
  .footer_div {
    min-height: 100svh;
    padding: var(--header-height) 0 1rem;
  }

  /* ── Card grids: 2-col fits landscape ── */
  .card-grid    { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }

  /* ── Drawer: half-width in landscape so content is still visible
     IMPORTANT: right must equal -(width + buffer) so the closed drawer
     is fully off-screen. LG block left right:-320px but landscape width
     is 50vw which can exceed 320px on wide phones. ── */
  #mobile-drawer {
    width: min(50vw, 360px); min-width: 220px;
    right: calc(-1 * min(50vw, 360px) - 2px);  /* fully off-screen */
  }
  #mobile-drawer.show { right: 0; }

  /* ── Floating icons & back-to-top: remove when space is critical ── */
  .group_icon_fixed_page { display: none; }
  #back-to-top { width: 32px; height: 32px; font-size: 0.875rem; }

  /* ── Product carousel ── */
  section.product_home { padding: 4px 0 8px; }
  .item_pd_home img { height: 90px; }

  /* ── Recipes ── */
  .recipe_home .group_cont_recipe img { width: 120px; }

  /* ── News items ── */
  .thumb_item_post_new { height: 120px !important; }

  /* ── Section titles ── */
  .title_group h4,
  .title_group h1 { font-size: 16px; line-height: 20px; }

  /* ── Banner nav: landscape compact ── */
  section.banner_slider .slick-nav-wrap { bottom: 8px; }
  section.banner_slider .slick-nav { gap: 5px; }
  section.banner_slider .slick-nav .slick-prev,
  section.banner_slider .slick-nav .slick-next { width: 20px; height: 20px; }
  section.banner_slider .slick-nav .slick-prev::before,
  section.banner_slider .slick-nav .slick-next::before { width: 8px; height: 8px; }
  section.banner_slider .slick-dots li { width: 12px; height: 12px; }
  section.banner_slider .slick-dots li button::before { font-size: 8px; }

  /* Page 3: no top padding in landscape — space is already very tight */
  #sec-page3 .container { padding-top: 6px; }

  /* Page 5: landscape-height thumbnail —
     within this query's max-height:480px ceiling, 9vh never reached the
     old 60px floor (9% of 480 = 43.2px), so the thumbnail was always
     pinned to the floor and looked flattened. Raise the floor so the
     clamp actually reflects the viewport instead of being a dead range. */
  /* section.news_home .thumb_item_post_new { height: clamp(120px, 20vh, 160px) !important; } */
  .cont_news_home .title_group h4 { margin-bottom: 6px; }
}


/* ══════════════════════════════════════════════════════════
   DARK MODE  (honour system preference)
   ══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  /* Only apply dark mode if the page does NOT have a
     data-theme="light" attribute set by the app shell. */
  :root:not([data-theme="light"]) {
    --color-white:  #1c1c1e;
    --color-light:  #2c2c2e;
    --color-border: #3a3a3c;
    --color-body:   #e0e0e0;
    --color-dark:   #f2f2f7;
    --color-muted:  #afafaf;
  }

  :root:not([data-theme="light"]) #header {
    background: #1c1c1e;
    border-top-color: #b01010;
  }

  :root:not([data-theme="light"]) #header .sub-menu {
    background: #2c2c2e;
    border-color: #3a3a3c;
  }

  :root:not([data-theme="light"]) .product-card,
  :root:not([data-theme="light"]) .news-card {
    background: #2c2c2e;
    border-color: #3a3a3c;
  }

  :root:not([data-theme="light"]) .form-control {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #f2f2f7;
  }

  :root:not([data-theme="light"]) .category-tab {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #e0e0e0;
  }

  :root:not([data-theme="light"]) .timeline-item__content {
    background: #2c2c2e;
    border-color: #3a3a3c;
  }

  :root:not([data-theme="light"]) .content_slider_item_intro {
    background-color: #2c2c2e;
    background-image: none;
  }

  :root:not([data-theme="light"]) .recipe-detail__sidebar {
    background: #2c2c2e;
  }
}

/* ══════════════════════════════════════════════════════════
   Timeline — Responsive
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Single column: line & dot shift to left edge */
  .group_timeline .years_timeline::before { left: 20px; transform: none; }
  .group_timeline .years_timeline .year_timeline { padding: 25px 0 25px 48px; }
  .group_timeline .years_timeline .year_timeline::before { left: 20px; top: 29px; transform: translateX(-50%); }
  .year_timeline:nth-child(odd)  .events,
  .year_timeline:nth-child(even) .events {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }
  li.year_timeline:nth-child(odd)  .bg_date::after,
  li.year_timeline:nth-child(odd)  .bg_date::before,
  li.year_timeline:nth-child(even) .bg_date::after,
  li.year_timeline:nth-child(even) .bg_date::before { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Core Values Slider — Responsive
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .img_slider_item_intro { width: 75%; }
  /* Bring slick nav arrows inside the slider so they stay on-screen */
  .group_slider .slick-prev { left: 6px; }
  .group_slider .slick-next { right: 6px; }
  .def_footer .contact ul li,
  .social_footer ul li { width: 100%; text-align: center !important; padding: initial; }
}
@media (max-width: 767px) {
  .group_slider { height: auto; }
  .item_slide_intro_page { height: 280px; }
  .img_slider_item_intro { width: 100%; }
  .img_slider_item_intro img { height: 280px; }
  .content_slider_item_intro { width: 200px; padding: 20px 18px 30px; bottom: 0; }
  h4.title_slider_item_intro { font-size: 20px; margin-bottom: 8px; }
  .cont_slider_item_intro { font-size: 13px; }
  section.slider_introduc_page { padding: 60px 0 70px; }
  .img_left_slider_introduc { display: none; }
}

@media (max-width: 479px) {
  .item_slide_intro_page { height: 220px; }
  .img_slider_item_intro img { height: 220px; }
  .content_slider_item_intro { width: 160px; padding: 16px 14px 24px; }
  h4.title_slider_item_intro { font-size: 17px; }
  .cont_slider_item_intro { font-size: 12px; }
}


/* ══════════════════════════════════════════════════════════
   Team page — Responsive
   ══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .thumb_team img { height: 220px; }
}
@media (max-width: 479px) {
  .team-grid { grid-template-columns: 1fr; gap: 14px; }
  .group_content_team { flex-direction: column; }
  .icon_cont_team_group { margin-right: 0; margin-bottom: 15px; }
}

/* ══════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  section.news_home .thumb_item_post_new {
    min-height: 350px;
}
  body.home [data-anchor="page2"] .sec_gr_def,
  body.home [data-anchor="page5"] .sec_gr_def.news_home,
  body.home [data-anchor="page4"] .sec_gr_def.recipe_home,
  body.home [data-anchor="page3"] .sec_gr_def.product_home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
  }

  body.home [data-anchor="page2"] .sec_gr_def,
  body.home [data-anchor="page4"] .sec_gr_def.recipe_home {
    transform: translateY(calc(var(--header-height) - 20px));
  }

  body.home [data-anchor="page3"] .sec_gr_def.product_home {
    transform: translateY(calc(var(--header-height) - 45px));
  }
}

@media (min-width: 1105px) {
  body.home [data-anchor="page2"] .sec_gr_def,
  body.home [data-anchor="page4"] .sec_gr_def.recipe_home {
    transform: translateY(calc(var(--header-height) - 25px));
  }
  body.home [data-anchor="page3"] .sec_gr_def.product_home {
    transform: translateY(calc(var(--header-height) - 55px));
  }
}

/* Banner slide img height/position is unified in index.html's inline
   <style> block (calc(100dvh - var(--banner-overhang)), no transform) so
   it applies identically at every desktop width. The per-breakpoint
   !important translateY/height overrides that used to live here at
   1125/1180/1280/1500px silently fought that formula (since !important
   always wins regardless of source order or dvh math) and were the
   direct cause of the banner gap-above/gap-below bugs — removed. */

@media (min-width: 1180px) {
  body.home [data-anchor="page2"] .sec_gr_def,
  body.home [data-anchor="page4"] .sec_gr_def.recipe_home {
    transform: translateY(calc(var(--header-height) - 30px));
  }
  body.home [data-anchor="page3"] .sec_gr_def.product_home {
    transform: translateY(calc(var(--header-height) - 60px));
  }
}

@media (min-width: 1205px) {
  body.home [data-anchor="page3"] .sec_gr_def.product_home > div.container {
    position: absolute;
    z-index: 10;
  }
}

@media (min-width: 1500px) {
  body.home [data-anchor="page2"] .sec_gr_def,
  body.home [data-anchor="page4"] .sec_gr_def.recipe_home {
    transform: translateY(calc(var(--header-height) - 35px));
  }
  body.home [data-anchor="page3"] .sec_gr_def.product_home {
    transform: translateY(calc(var(--header-height) - 70px));
  }
  body.home [data-anchor="page1"] section.banner_slider div.cont_banner_slider img {
    height: calc(100vh - var(--banner-overhang) + 70px) !important;
    height: calc(100dvh - var(--banner-overhang) + 70px) !important;
  }
}

@media (orientation: landscape) and (width = 667px) and (height = 375px),
(orientation: landscape) and (width = 932px) and (height = 430px) {
  body.fp-responsive #sec-page1 .banner-slide-item img,
  body.fp-responsive #sec-page1 section.banner_slider img {
    height: calc(100dvh - var(--banner-overhang)) !important;
  }
}
@media (orientation: landscape) and (width = 932px) and (height = 430px) {
  body.fp-responsive #sec-page1 section.banner_slider div.cont_banner_slider img {
    object-fit: cover !important;
    object-position: center !important;
  }
}