/* ==========================================================================
   makxim.vn — giao diện theo phong cách Makxim ProChef
   Lớp đè lên CSS cũ (bootstrap + style.css + mobiles.css), không đổi markup/ID.
   Be Vietnam Pro · nền sáng ấm · nút bo tròn · điểm nhấn cam ember
   ========================================================================== */

:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-2: #f5f5f4;
  --surface-3: #eeedeb;
  --ink: #0c0a09;
  --ink-2: #292524;
  --text: #1c1917;
  --text-2: #44403c;
  --muted: #57534e;
  --subtle: #78716c;
  --border: #e7e5e4;
  --border-strong: #d6d3d1;

  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-soft: #fff1e8;
  --accent-glow: #ff6a1a;
  --success: #15803d;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 2px rgb(28 25 23 / 0.06);
  --shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 8px 24px -8px rgb(28 25 23 / 0.12);
  --shadow-lg: 0 24px 60px -20px rgb(28 25 23 / 0.28);
  --ring: 0 0 0 3px rgb(194 65 12 / 0.28);

  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --container: 1240px;
  --gutter: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
/* Bootstrap 3 đặt html 10px — đưa về 16px để các giá trị rem đúng tỉ lệ */
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body, input, button, option, textarea, label, legend, select { font-family: var(--font); color: var(--text); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--ink); letter-spacing: -0.02em; }
a { color: inherit; transition: color 0.2s; }
a:hover, a:focus { color: var(--accent); text-decoration: none; }
::selection { background: #fed7aa; color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

.container { width: 100% !important; max-width: var(--container); padding-left: var(--gutter); padding-right: var(--gutter); }
/* Clearfix của bootstrap biến thành phần tử thừa trong flex/grid */
.header > .container::before, .header > .container::after, .nav-hori > .container::before, .nav-hori > .container::after,
.nav-inside::before, .nav-inside::after, .pc-trust .grid::before, .pc-trust .grid::after, .nav-top::before, .nav-top::after { display: none; }

/* ---------- Buttons (dùng chung) ---------- */
.read_more a, .btn-primary, .product-form .btn-order, .btn.buy_now, .box_load .item_load {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  background: var(--ink); color: #fff !important; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0;
  box-shadow: none; transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.read_more a:hover, .btn-primary:hover, .product-form .btn-order:hover { background: var(--ink-2); box-shadow: 0 8px 20px -8px rgb(12 10 9 / 0.5); color: #fff; }
.read_more a:active, .btn-primary:active { transform: scale(0.98); }
.read_more a::after { display: none; }
.read_more a { padding-right: 26px; }

/* ---------- Thanh trên cùng (announce) ---------- */
.navbar-top { background: var(--ink); color: #e7e5e4; font-size: 0.8125rem; }
.navbar-top .nav-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.navbar-top .nav-top > li { display: block; }
.navbar-top .slogan { color: #e7e5e4; font-size: 0.8125rem; font-weight: 500; line-height: 36px; letter-spacing: 0; }
.navbar-top .nav-top > li > a { color: #e7e5e4; padding: 0; line-height: 36px; font-weight: 500; }
.navbar-top .nav-top > li > a:hover { color: #fff; }
.navbar-top .dropdown-menu.support { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px !important; margin-top: 0; }
.support li { background-image: none; padding-left: 0; height: auto; margin-bottom: 8px; }
.support li p { font-weight: 600; color: var(--ink); font-size: 0.875rem; line-height: 1.4; }
.support li p span { color: var(--accent); font-size: 0.9375rem; }

/* ---------- Header ---------- */
.header {
  background: rgb(250 250 249 / 0.92); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.header > .container { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.header .logo { float: none; margin: 0; flex-shrink: 0; }
.header .logo img { height: 44px; width: auto; }
.header .box-search { float: none; margin: 0 0 0 12px; flex: 1; max-width: 520px; }
.box-search input[type=text] {
  float: none; width: 100%; height: 46px; padding: 0 52px 0 20px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); font-size: 0.9375rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.box-search input[type=text]:hover { border-color: var(--subtle); }
.box-search input[type=text]:focus { border-color: var(--accent); box-shadow: var(--ring); }
.box-search a.btns {
  width: 38px; height: 38px; top: 4px; right: 4px; margin: 0; border-radius: 999px; background: var(--ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center;
}
.box-search a.btns:hover { background-color: var(--ink-2); }
#boxsearch { position: absolute; left: 0; right: 0; top: 100%; z-index: 9999; }
.wrap-suggestion { top: 8px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow-x: hidden; }
.wrap-suggestion:before, .wrap-suggestion:after { display: none; }
.wrap-suggestion li { border-bottom: 1px solid var(--border); padding-left: 6px; }
.wrap-suggestion li a { color: var(--ink); }
.wrap-suggestion li a h3 { color: var(--ink); font-weight: 500; }
.wrap-suggestion li a span.price, .wrap-suggestion li a h6 { color: var(--accent); }

#services-header { float: none; margin: 0 0 0 auto; }
#services-header .item {
  display: inline-flex; align-items: center; gap: 8px; height: auto; padding: 8px 16px; border-radius: 999px; font-size: 0.875rem; color: var(--muted);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230c0a09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat 14px center;
  padding-left: 40px;
}
#services-header .item:hover { background-color: var(--surface-2); }
#services-header .item strong { color: var(--ink); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.header .cart { float: none; margin: 0; line-height: 1; }
.header .cart a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 0.875rem;
}
.header .cart a:hover { background: var(--ink-2); color: #fff; }
.header .cart i { color: #fff; font-size: 16px; margin: 0; }
.header .cart .lblCart {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 0.75rem; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
}

/* ---------- Thanh menu ngang ---------- */
.nav-hori { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 900; }
.nav-hori > .container { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.nav-hori .main-menu { float: none; width: 224px; flex-shrink: 0; }
.title-main-menu {
  height: 44px; line-height: 44px; padding: 0 36px 0 44px; border-radius: 999px; background: var(--ink); color: #fff; white-space: nowrap;
  font-size: 0.875rem; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.title-main-menu > i { line-height: 44px; height: 44px; width: 44px; text-align: center; }
.title-main-menu > i:first-of-type { left: 6px; font-size: 17px; }
.title-main-menu > i:last-of-type { position: absolute; right: 6px; top: 0; float: none; }
.parent-menu {
  top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 8px; min-height: 0; width: 280px;
}
.main-menu::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.parent-menu > li { height: auto; border: 0; border-radius: 12px; }
.parent-menu > li:hover { background: var(--surface-2); border: 0; }
.parent-menu a.root { line-height: 1.3; padding: 12px 36px 12px 14px; font-size: 0.9375rem; font-weight: 600; text-transform: none; color: var(--ink); }
.parent-menu a.root i { top: 50%; transform: translateY(-50%); right: 14px; font-size: 16px; color: var(--subtle); }
.parent-menu > li:hover > a { color: var(--accent); font-weight: 600; }
.sub-menu {
  left: calc(100% + 8px); top: -9px; width: 280px; min-height: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.parent-menu > li { position: relative; }
.sub-menu > li > a { text-transform: none; font-size: 0.9375rem; font-weight: 600; color: var(--ink); padding: 8px 10px; margin: 0; border-radius: 10px; }
.sub-menu > li > a:hover { background: var(--surface-2); color: var(--accent); }
.sub-menu > li > ul > li > a { padding: 6px 10px; color: var(--muted); font-size: 0.875rem; }

.nav-hori .nav-inside { margin: 0; flex: 1; display: flex; align-items: center; border: 0; min-width: 0; }
.nav-hori #dot { display: none; }
.nav-center { float: none; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0; width: 100%; }
.nav-center > li > a {
  color: var(--text-2); padding: 8px 6px; line-height: 1.4; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; text-transform: none; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.nav-center > li > a:hover, .nav-center > li:hover > a { background: var(--surface-2); color: var(--ink); }
.nav-center > li > ul {
  top: calc(100% + 6px); width: 260px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.nav-center > li::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.nav-center > li > ul > li { border: 0; }
.nav-center > li > ul > li > a { padding: 9px 12px; border-radius: 10px; font-size: 0.9rem; color: var(--text-2); }
.nav-center > li > ul > li > a:hover { background: var(--surface-2); color: var(--ink); }
@media (min-width: 1025px) and (max-width: 1240px) {
  .nav-hori .main-menu { width: 200px; }
  .title-main-menu { padding-right: 36px; }
  .nav-hori > .container { gap: 8px; }
  .nav-center > li > a { padding: 8px 5px; font-size: 0.75rem; }
  .header .box-search { max-width: 400px; }
}

/* ---------- Slider trang chủ ---------- */
#sync1 { max-width: var(--container); margin: 24px auto 0 !important; padding: 0 var(--gutter); }
#sync1 .owl-stage-outer { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
#sync1 img { width: 100%; }
#sync1 .owl-dots { position: static; display: flex; justify-content: center; gap: 4px; margin-top: 12px !important; }
#sync1.mgb15 { margin-bottom: 0 !important; }
.owl-theme .owl-dots .owl-dot span { width: 8px; height: 8px; margin: 4px; background: var(--border-strong); transition: width 0.3s var(--ease), background-color 0.3s; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { width: 24px; background: var(--ink); }
.owl-theme .owl-nav [class*='owl-'] {
  width: 44px; height: 44px; line-height: 44px; padding: 0 !important; margin: 0 4px; border-radius: 999px !important; background: var(--surface) !important;
  border: 1px solid var(--border-strong); color: var(--ink) !important; font-size: 18px; box-shadow: var(--shadow-sm);
}
.owl-theme .owl-nav [class*='owl-']:hover { border-color: var(--ink); }

/* ---------- Dải cam kết (thêm bằng markup tĩnh) ---------- */
.pc-trust { margin-top: clamp(20px, 3vw, 32px); border-block: 1px solid var(--border); background: var(--surface); }
.pc-trust .grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.pc-trust .item { display: flex; align-items: center; gap: 14px; padding: 22px 20px; }
.pc-trust .item + .item { border-left: 1px solid var(--border); }
.pc-trust .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink); flex-shrink: 0; font-size: 18px; }
.pc-trust b { display: block; font-size: 0.9375rem; color: var(--ink); line-height: 1.35; }
.pc-trust span { font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 900px) {
  .pc-trust .grid { grid-template-columns: repeat(2, 1fr); }
  .pc-trust .item:nth-child(3) { border-left: 0; }
  .pc-trust .item:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 520px) { .pc-trust .item { flex-direction: column; align-items: flex-start; padding: 16px 14px; gap: 10px; } .pc-trust .ico { width: 36px; height: 36px; } .pc-trust b { font-size: 0.875rem; } }

/* Ảnh sản phẩm nền trắng hòa vào khung xám ấm */
.product2 .thumb img, .product-km .thumb img, .product-hero-img img, .owl-carousel-pro-lq .thumb img, .product-pager img { mix-blend-mode: multiply; }

/* ---------- Tiêu đề khu vực ---------- */
.titleHome {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: -0.03em; line-height: 1.15;
  margin-bottom: clamp(18px, 2.5vw, 28px);
}
.titleHome::before {
  content: 'Sản phẩm'; display: block; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.titleHome.hasBorder { padding-bottom: 0; }
.titleHome.hasBorder::after { display: none; }
.heading span, .heading-main, .sub-heading { font-family: var(--font); color: var(--ink); letter-spacing: -0.02em; }
.heading span { font-size: 1.5rem; }
.heading-main { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; margin: 8px 0 20px; }
.sub-heading { text-transform: none; font-size: 1.25rem; font-weight: 700; }
.sub-heading .icon-news { display: none; }

/* ---------- Khu vực sản phẩm trang chủ: thẻ dọc 4 cột ---------- */
.box-pro-km-bg, .box-pro-km-bg:nth-child(2n) { background: transparent; padding: clamp(40px, 5vw, 64px) 0 0; }
.box-pro-km-bg > .titleHome { max-width: var(--container); margin-left: auto; margin-right: auto; padding: 0 var(--gutter); text-align: left; }
.box-pro-km-bg .container { background: transparent; padding-top: 0; }
.box-pro-km { position: relative; }
.box-pro-km .owl-stage { display: flex; }
.box-pro-km .owl-item { display: flex; }
.box-pro-km .owl-stage-outer { padding: 4px 0 8px; }
.box-pro-km .product-km {
  position: relative; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.box-pro-km .product-km:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.box-pro-km .product-km > [class*='col-'] { float: none; width: 100%; padding: 0 !important; margin: 0 !important; }
.box-pro-km .product-km > [class*='col-']:last-child { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px !important; }
.product-km .thumb { border-radius: 0; background: linear-gradient(180deg, #f7f6f5, #efeeec); overflow: hidden; padding-bottom: 92%; }
.product-km .thumb img { max-width: 86%; max-height: 88%; transition: transform 0.6s var(--ease); }
.product-km:hover .thumb img { transform: scale(1.04); }
.box-pro-km .product-km h3 { font-size: 0.9375rem; line-height: 1.4; text-transform: none; font-weight: 600; margin: 0 0 8px; }
.box-pro-km .product-km h3 a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.box-pro-km .product-km h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.box-pro-km .product-km h3 a:hover { color: var(--accent); }
.box-pro-km .summary { margin: 0 0 10px !important; }
.summary li { padding: 2px 0 2px 22px; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; background: none !important; }
.summary li:nth-child(n + 3) { display: none; }
.summary li:before {
  top: 6px; left: 2px; width: 13px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
}
.box-pro-km .read_more { margin: auto 0 0; }
.box-pro-km .read_more a { min-height: 0; padding: 0; background: none; color: var(--accent) !important; font-size: 0.8125rem; font-weight: 700; box-shadow: none; }
.box-pro-km .read_more a::after { display: inline-block; content: '→'; position: static; width: auto; height: auto; background: none; margin-left: 2px; }
.box-pro-km .owl-nav { position: absolute; top: -66px; right: 0; margin: 0; display: flex; gap: 6px; }
.box-pro-km .owl-nav [class*='owl-'] { position: static !important; margin: 0; }
.box-pro-km .owl-dots { display: none; }
@media (max-width: 767px) {
  .box-pro-km .owl-nav { display: none; }
  .box-pro-km .product-km > [class*='col-']:last-child { padding: 10px 12px 12px !important; }
  .box-pro-km .product-km h3 { font-size: 0.8125rem; }
  .box-pro-km .summary { display: none; }
}

/* ---------- Về chúng tôi ---------- */
.about-home { padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 32px); }
.about-home .titleHome::before { content: 'Về Makxim'; }
.about-sumary {
  color: var(--text-2); font-size: 1rem; line-height: 1.7; text-align: left !important;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px);
}
.about-sumary h2, .about-sumary h3, .about-sumary h4 { color: var(--ink); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.about-sumary .row > [class*='col-'] > *:first-child, .about-sumary > div > div { }
.about-home .read_more { margin-bottom: 8px; }
.slide-banner { margin-top: clamp(16px, 3vw, 32px); }
/* Ảnh banner nhiều tỉ lệ khác nhau: đặt trong khung vuông đều nhau */
.slide-banner a { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); }
.slide-banner a img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s var(--ease); }
.slide-banner a:hover img { transform: scale(1.03); }
.slide-banner .owl-nav { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
.slide-banner .owl-dots { margin-top: 12px; }

/* ---------- Tin tức ---------- */
.news-item {
  height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s;
}
.news-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
/* Ảnh đại diện tin tức: hình vuông */
.news-item .thumb, .footer .news-item .thumb { height: auto !important; aspect-ratio: 1 / 1; width: 100%; background: var(--surface-2); }
.news-item .thumb a { display: block; height: 100%; }
.news-item .thumb img { transition: transform 0.6s var(--ease); }
.news-item:hover .thumb img { transform: scale(1.04); }
.news-item { display: flex; flex-direction: column; }
.news-item .content { display: flex; flex-direction: column; flex: 1; background: var(--surface); padding: 16px 18px 18px; }
.news-item h3 { margin: 0 0 8px !important; }
.news-item h3 a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-item a.alink { margin-top: auto; }
.news-item h3, .news-item h3 a { font-size: 1.0625rem !important; line-height: 1.4; font-weight: 700 !important; color: var(--ink); }
.news-item h3 a:hover { color: var(--accent); }
.news-item p { color: var(--muted); font-size: 0.875rem; text-align: left; margin-bottom: 10px; }
.news-item a.alink { color: var(--accent); font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 2px; }
.news-item a.alink:hover { color: var(--accent-hover); }
.row:has(> .col-sm-4 > .news-item) { display: flex; flex-wrap: wrap; }
.row:has(> .col-sm-4 > .news-item)::before, .row:has(> .col-sm-4 > .news-item)::after { display: none; }
.row:has(> .col-sm-4 > .news-item) > .col-sm-4 { min-width: 0; }
/* 2 cột trên điện thoại, 3 cột từ tablet; trang Tin tức 4 cột trên desktop */
.row:has(> .col-sm-4 > .news-item) > .col-sm-4 { width: 50%; margin-bottom: 16px !important; }
@media (min-width: 768px) { .row:has(> .col-sm-4 > .news-item) > .col-sm-4 { width: 33.3333%; margin-bottom: 24px !important; } }
@media (min-width: 992px) { #main > .row:has(> .col-sm-4 > .news-item) > .col-sm-4 { width: 25%; } }
@media (max-width: 767px) {
  .row:has(> .col-sm-4 > .news-item) { margin-left: -6px; margin-right: -6px; }
  .row:has(> .col-sm-4 > .news-item) > .col-sm-4 { padding-left: 6px; padding-right: 6px; }
  .news-item .content { padding: 12px; }
  .news-item h3, .news-item h3 a { font-size: 0.875rem !important; }
  .news-item p { display: none; }
}

/* ---------- Footer ---------- */
.footer { margin-top: clamp(40px, 5vw, 64px); box-shadow: none; border: 0; color: var(--text); }
.new-footer { background: transparent; padding: 0 0 clamp(28px, 4vw, 48px); }
.new-footer .sub-heading { margin-bottom: 20px; }
.new-footer p { color: var(--muted); }
.box-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 56px 0 24px; font-size: 0.9375rem; }
.box-footer * { color: var(--muted); }
.box-footer strong, .box-footer b, .box-footer h1, .box-footer h2, .box-footer h3, .box-footer h4, .footer-title span { color: var(--ink); }
.box-footer a:hover { color: var(--ink); }
.box-footer img { max-width: 100%; height: auto; }
.footer-title { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 14px; }
.footer-menu > li { margin-bottom: 10px; }
.footer-menu > li > a { color: var(--muted); }
.footer-menu > li > a:hover { color: var(--ink); }
.copy { background: var(--surface); border-top: 0; color: var(--subtle); font-size: 0.8125rem; padding: 0 0 28px; text-align: left; }
.copy .container > p { padding-top: 22px; border-top: 1px solid var(--border); }

/* ---------- Nút liên hệ nổi ---------- */
.hotineBottom, .btn-zalo, .btn-mess { position: fixed; right: 20px; left: auto; z-index: 999; width: 56px; height: 56px; padding: 0; border-radius: 50%; box-shadow: 0 10px 24px -8px rgb(12 10 9 / 0.45); transition: transform 0.2s var(--ease); }
.hotineBottom:hover, .btn-zalo:hover, .btn-mess:hover { transform: scale(1.06); }
.hotineBottom { bottom: 20px; background: var(--accent); display: grid; place-items: center; isolation: isolate; }
.hotineBottom::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: pc-pulse 2.2s ease-out infinite; z-index: -1; }
@keyframes pc-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.7); opacity: 0; } }
.hotineBottom span {
  display: block; width: 56px; height: 56px; padding: 0; font-size: 0; line-height: 0; color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center;
}
.btn-zalo { bottom: 88px; background: #0068ff; }
.btn-mess { bottom: 156px; background: linear-gradient(45deg, #0a7cff, #a033ff 60%, #ff5c87); }
.btn-zalo a, .btn-mess a { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
/* Ảnh icon cũ là ô vuông nền trắng: ẩn đi, vẽ lại như ProChef */
.btn-zalo img, .btn-mess img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.btn-zalo a::before { content: 'Zalo'; color: #fff; font-weight: 800; font-size: 0.8125rem; letter-spacing: -0.02em; }
.btn-mess a::before {
  content: ''; width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E") no-repeat center;
}
@media (max-width: 600px) {
  .hotineBottom, .btn-zalo, .btn-mess { right: 12px; width: 46px; height: 46px; }
  .hotineBottom span { width: 46px; height: 46px; }
  .hotineBottom { bottom: 12px; } .btn-zalo { bottom: 66px; } .btn-mess { bottom: 120px; }
  .btn-zalo img, .btn-mess img { width: 28px; height: 28px; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { background: transparent; padding: clamp(20px, 3vw, 32px) 0 8px; margin-bottom: 12px; font-size: 0.8125rem; color: var(--subtle); }
.breadcrumb a, .breadcrumb > li { color: var(--subtle); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb > li + li:before { content: '›'; color: var(--border-strong); padding: 0 8px; font-size: 1rem; }

/* ---------- Trang danh mục ---------- */
#pnPro > .col-xs-12 > .content-post { color: var(--muted); font-size: 1rem; max-width: 900px; margin-bottom: 24px !important; }
.box-filter { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.box-filter-title { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.box-filter .filter-item { margin: 0 8px 8px 0; }
.box-filter .filter-item .filter-item-title {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 34px 0 16px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); font-size: 0.875rem; font-weight: 500; transition: border-color 0.2s;
}
.box-filter .filter-item .filter-item-title:hover { border-color: var(--ink); }
.box-filter .filter-item .filter-item-title::before { top: 18px; right: 14px; border-top-color: var(--muted); }
.filter-item-value { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; overflow: hidden; }
.filter-item-value > li a { border: 0; border-radius: 10px; color: var(--text-2); }
.filter-item-value > li a:hover { background-color: var(--surface-2); color: var(--ink); }
.box-filter-curent a, .box-filter-curent a.remove-filter { border-radius: 999px; padding: 6px 30px 6px 14px; background-color: var(--ink); }
.box-filter-curent a.remove-filter { background-color: var(--accent); }

.ul-cat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ul-cat > li > a {
  margin: 0; min-height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 0.875rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.ul-cat > li > a:hover { color: var(--ink); border-color: var(--border-strong); }
.ul-cat > li.active > a { background: var(--ink); border-color: var(--ink); color: #fff; }

.orderby { padding: 0; background: transparent; margin-top: 10px; }
.sorter-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); font-size: 0.875rem; font-weight: 500;
}
.sorter-btn:after { border-top-color: var(--muted); }
.sort-by { top: 52px; width: 200px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.sort-by a { height: auto; line-height: 1.4; padding: 10px 12px; border: 0; border-radius: 10px; color: var(--text-2); }
.sort-by a:hover { background: var(--surface-2); color: var(--ink); }
.sort-by a.check { color: var(--accent); font-weight: 600; }
.orderby a { padding: 10px 12px; }

/* Lưới sản phẩm */
#pnPro { display: flex; flex-wrap: wrap; }
#pnPro::before, #pnPro::after { display: none; }
#pnPro > .col-xs-12 { width: 100%; }
#pnPro > .col-sm-3 { float: none; display: flex; padding-left: 12px !important; padding-right: 12px !important; margin-bottom: 24px !important; }
.product2 {
  display: flex; flex-direction: column; width: 100%; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.product2:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.product2 .thumb { height: auto; aspect-ratio: 1 / 0.92; margin: 0; background: linear-gradient(180deg, #f7f6f5, #efeeec); overflow: hidden; }
.product2 .thumb img { max-width: 84%; max-height: 84%; transition: transform 0.6s var(--ease); }
.product2:hover .thumb img { transform: scale(1.04); }
.product2 .p-hover { display: none !important; }
.product2 h3 { height: auto; min-height: 2.8em; margin: 18px 18px 6px; line-height: 1.4; }
.product2 h3 a { font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product2:hover h3 a { color: var(--ink); }
.product2 h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.product2 > .clearfix { margin-top: auto; padding: 0 18px 20px; }
.product2 .p-price { float: none; height: auto; display: grid; gap: 2px; }
.product2 .p-price > span:first-child { font-size: 0.75rem !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.product2 .p-price .p-curent-price { font-family: var(--font); font-size: 1.1875rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin: 0; font-variant-numeric: tabular-nums; }
.product2 .p-price .p-old-price { font-size: 0.8125rem; color: var(--subtle); height: auto; }
p.discout { top: 14px; left: 14px; right: auto; }
p.discout .icon-saleoff { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--accent); }
p.discout .icon-saleoff sub { padding: 0; font-size: 0.75rem; font-weight: 700; line-height: 1; bottom: 0; }
@media (max-width: 767px) {
  .ul-cat { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .ul-cat::-webkit-scrollbar { display: none; }
  .ul-cat > li > a { white-space: nowrap; }
  #pnPro > .col-sm-3 { padding-left: 6px !important; padding-right: 6px !important; margin-bottom: 12px !important; }
  .product2, .product { height: auto; }
  .product2 h3 { margin: 12px 12px 4px; }
  .product2 h3 a { font-size: 0.875rem; }
  .product2 > .clearfix { padding: 0 12px 14px; }
  .product2 .p-price .p-curent-price { font-size: 1rem; }
}

/* Phân trang */
.page-nummber { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; }
.page-nummber a {
  margin: 0 !important; min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font-size: 0.875rem; font-weight: 600; color: var(--text-2);
}
.page-nummber a:hover { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.page-nummber a.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Trang chi tiết sản phẩm ---------- */
div.pro-detailt { background: transparent; }
div.pro-detailt h1 { font-size: clamp(1.625rem, 3vw, 2.375rem); line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 24px; }
/* Ảnh chi tiết nằm trong bx-viewport (có transform) nên không hòa nền được: dùng nền trắng */
.product-hero-img { border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; overflow: hidden; }
.product-hero-img .bx-wrapper { border: 0; background: transparent; margin: 0; box-shadow: none; }
.product-hero-img .bx-wrapper img { max-height: 440px !important; }
.bx-wrapper, .bx-viewport { max-height: 480px; }
.product-hero-img .bx-wrapper .bx-viewport { background: transparent; border: 0; box-shadow: none; left: 0; }
.product-hero-img .bx-controls a {
  width: 44px; height: 44px; display: grid !important; place-items: center; border-radius: 999px; background: var(--surface) !important; box-shadow: var(--shadow);
}
.bx-wrapper .bx-controls-direction a { z-index: 5; }
.product-hero-img .sale, p.discout { z-index: 5; }
.product-hero-img .bx-controls a.bx-prev { left: 12px; } .product-hero-img .bx-controls a.bx-next { right: 12px; }
.product-hero-img .bx-controls i { font-size: 22px !important; }
.product-hero-img .sale { top: 16px; left: 16px; right: auto; width: auto; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent); font-size: 0.8125rem; }
.product-pager li { border: 2px solid transparent; border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.product-pager li:hover { border-color: var(--ink); }
.product-pager .bx-wrapper { background: transparent; box-shadow: none; }

.product-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.product-form input[type=text], #form-support input[type=text] {
  min-height: 48px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); font-size: 0.9375rem;
}
.product-form input[type=text]:focus { border-color: var(--accent); box-shadow: var(--ring); }
.product-form .btn-order { width: 100%; }

.prodt-r { display: grid; gap: 0; }
.prodt-r-info { color: var(--muted); font-size: 0.875rem; }
.prodt-r-info b { color: var(--ink); }
.box-price { padding-bottom: 8px; }
.box-price .price > span:first-child { font-size: 0.75rem !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle) !important; }
.price span { font-size: 2rem; color: var(--ink); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price1 span { color: var(--subtle); font-size: 1.0625rem; text-decoration-color: var(--subtle); }
.address-map {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px 0 40px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.address-map:before { left: 14px; top: 50%; transform: translateY(-50%); }
.address-map:hover { border-color: var(--ink); }
ul.shipping { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
ul.shipping li { padding: 13px 16px 13px 44px; background: none !important; color: var(--text-2); font-size: 0.9375rem; }
ul.shipping li + li { border-top: 1px solid var(--border); }
ul.shipping li b { color: var(--ink); font-weight: 600; }
ul.shipping li:before {
  top: 16px; left: 16px; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
}
.tt-km { background: var(--accent-soft); border: 1px solid #fed7aa; border-radius: var(--radius); padding: 14px 16px; color: var(--text-2); }
.tt-km .km { background: none; padding-left: 0; }
.tt-km .km strong { color: var(--accent-hover); margin-right: 4px; }
.tt-km .km strong::before { content: '🎁 '; }

/* Nút Zalo / Thêm vào giỏ (markup có style inline nên cần !important) */
.prodt-r .chatngay > div, .prodt-r .themgiohang > div, #form-buy2 .chatngay > div, #form-buy2 .themgiohang > div {
  display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 12px !important; padding: 0 16px !important;
  border-radius: 999px !important; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.prodt-r .chatngay > div, #form-buy2 .chatngay > div { background: var(--surface) !important; border: 1px solid var(--border-strong); }
.prodt-r .chatngay > div:hover { border-color: #0068ff; }
.prodt-r .chatngay a, .prodt-r .chatngay p, .prodt-r .chatngay i { color: #0068ff !important; }
.prodt-r .themgiohang > div, #form-buy2 .themgiohang > div { background: var(--ink) !important; border: 1px solid var(--ink); }
.prodt-r .themgiohang > div:hover { background: var(--ink-2) !important; box-shadow: 0 8px 20px -8px rgb(12 10 9 / 0.5); }
.prodt-r .chatngay p, .prodt-r .themgiohang p { font-weight: 600; font-size: 0.9375rem !important; }
.prodt-r .chatngay i, .prodt-r .themgiohang i { margin-right: 8px; }
.prodt-r .chatngay a { display: block; }
.area_order .buy_now {
  float: none; width: 100%; min-height: 60px; padding: 10px 24px; flex-direction: column; gap: 2px; border-radius: 999px; text-transform: none; font-size: 1.0625rem; font-weight: 700;
  background: var(--accent) !important;
}
.area_order .buy_now:hover { background: var(--accent-hover) !important; box-shadow: 0 10px 24px -10px rgb(194 65 12 / 0.7); }
.area_order span { font-size: 0.75rem; opacity: 0.85; color: #fff; }
.callorder { font-size: 0.8125rem; color: var(--muted); }
.callorder a { color: var(--ink); font-weight: 700; }

.pro-detailt .heading { margin-top: clamp(32px, 5vw, 56px); padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.pro-detailt .heading span { font-size: 1.375rem; }
.content-post { color: var(--text-2); }
.content-post a { color: var(--accent) !important; }
.content-post table { border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.content-post table > tbody > tr > td, .content-post table > tbody > tr > th { border: 0 !important; border-bottom: 1px solid var(--border) !important; padding: 12px 14px !important; }
.content-post table tr:nth-child(odd) td { background: var(--surface-2); }
.content-post img { border-radius: var(--radius); }

.share-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; border: 0; }
.share-buttons strong { color: var(--ink); font-size: 0.875rem; }
.share-buttons a, .share-buttons a.buttons-tw, .share-buttons a.buttons-pt {
  margin: 0; padding: 0 16px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 0.8125rem; font-weight: 600;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.share-buttons a:hover { opacity: 1; border-color: var(--ink); color: var(--ink); }

/* Sản phẩm liên quan */
.owl-carousel-pro-lq .product { height: auto; margin: 0; padding: 0 0 18px; background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius-lg); text-align: left; transition: box-shadow 0.3s, border-color 0.3s; }
.owl-carousel-pro-lq .product:hover { border-color: var(--border-strong) !important; box-shadow: var(--shadow); }
.owl-carousel-pro-lq .product .thumb { height: auto; padding-bottom: 92%; margin-bottom: 14px; background: linear-gradient(180deg, #f7f6f5, #efeeec); border-radius: 0; }
.owl-carousel-pro-lq .product strong { padding: 0 16px; font-size: 0.9375rem; line-height: 1.4; max-height: 2.8em; }
.owl-carousel-pro-lq .product strong a { color: var(--ink); }
.owl-carousel-pro-lq .row-price { padding: 0 16px; }
.owl-carousel-pro-lq .row-price > span:first-child { display: block; margin: 0; text-decoration: none; font-size: 0.6875rem !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.owl-carousel-pro-lq .row-price b { font-size: 1.0625rem; color: var(--ink); }
.owl-carousel-pro-lq.owl-theme .owl-nav { position: absolute; top: -64px; right: 0; margin: 0; display: flex; gap: 6px; }
.owl-carousel-pro-lq.owl-theme .owl-nav [class*='owl-'] { position: static; margin: 0; }
.pro-detailt h3.heading { margin-bottom: 24px; }

/* ---------- Trang tin tức ---------- */
.detail-post .title-post h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.2; letter-spacing: -0.03em; }
.detail-post .title-post strong { color: var(--muted); font-weight: 500; font-size: 1.0625rem; }
.detail-post .content-post { max-width: 820px; font-size: 1.0625rem; }

/* ---------- Form, bảng, panel (giỏ hàng, liên hệ, mua nhanh) ---------- */
.form-control {
  height: auto; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface);
  font-size: 1rem; color: var(--text); box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s;
}
textarea.form-control { min-height: 110px; line-height: 1.5; }
.form-control:hover { border-color: var(--subtle); }
.form-control:focus { border-color: var(--accent); box-shadow: var(--ring); }
.form-control.input-sm { min-height: 44px; padding: 8px 14px; font-size: 0.875rem; }
.form-group > label, .control-label { font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
select.form-control, .drl {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.btn { border-radius: 999px; font-weight: 600; }
.btn-success, .btn-cart, .btn-flag.btn-primary {
  min-height: 48px; padding: 0 26px; border: 1px solid transparent; background: var(--accent); color: #fff;
}
.btn-success:hover, .btn-success:focus { background: var(--accent-hover); color: #fff; box-shadow: 0 10px 24px -10px rgb(194 65 12 / 0.7); }
.btn-default { min-height: 48px; padding: 0 22px; background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); }
.btn-default:hover { background: var(--surface); border-color: var(--ink); }
.panel { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; background: var(--surface); }
.panel-info > .panel-heading, .panel-heading { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--border); padding: 16px 20px; font-weight: 700; }
.panel-body { padding: 20px; }
.table-checkout, .checking-form .table { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--border) !important; }
.table > thead > tr > th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 0.8125rem; border-bottom: 1px solid var(--border); padding: 12px 16px; }
.table > tbody > tr > td { padding: 14px 16px; vertical-align: middle; }
.alert { border-radius: 12px; font-size: 0.875rem !important; padding: 10px 14px; }
.alert-warning { background: #fefce8; border-color: #fde68a; color: #854d0e; }
.textcart { color: var(--muted); font-size: 1.0625rem; padding: 32px 0; }
.box_load { width: auto; height: auto; margin: 24px auto; background: none; font-size: 0.9375rem; }
.box_load .item_load { display: inline-flex; width: auto; height: auto; min-height: 48px; line-height: 1; }
.item_load span { display: inline; font-size: 0.9375rem; color: #fdba74; margin-left: 4px; }
.checkbox label { font-size: 0.9375rem; }
.fancybox-slide > div, .fancybox-content { border-radius: var(--radius-lg); }

/* ---------- Mobile (≤1024px) ---------- */
@media (max-width: 1024px) {
  .header { background: rgb(250 250 249 / 0.94); border-bottom: 1px solid var(--border); padding: 0; top: 0; }
  .header > .container { min-height: 64px; gap: 12px; padding-left: 64px; position: relative; }
  .header .logo { width: auto; margin: 0; }
  .header .logo img { height: 36px; }
  .head-fix { height: 64px; }
  #nav-icon4 { top: 50%; left: 20px; width: 24px; height: 18px; margin-top: -9px; }
  #nav-icon4 span { background: var(--ink); height: 2px; border-radius: 2px; }
  #nav-icon4 span:nth-child(2) { top: 8px; } #nav-icon4 span:nth-child(3) { top: 16px; }
  #nav-icon4.open span:nth-child(3) { top: 17px; }
  .header .cart { position: static; margin-left: auto; }
  .header .cart a { min-height: 42px; padding: 0 16px; }
  .header .cart i { color: #fff; font-size: 16px !important; }
  .nav-mobile { background: var(--bg); padding: 12px var(--gutter) 4px; }
  .box-search-mobile { margin: 0; padding: 0; }
  .box-search-mobile input[type=text] {
    height: 46px; padding: 0 56px 0 18px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font-size: 1rem;
  }
  .box-search-mobile a.btnS { top: 4px; right: 4px; width: 38px; height: 38px; line-height: 38px; border-radius: 999px; background: var(--ink); }
  .navbar-nav-mobile {
    top: 64px; width: 320px; max-width: 88vw; /* script.js trượt menu tới left:-320px */ background: var(--surface); padding: 8px 20px 80px; box-shadow: var(--shadow-lg); overflow-y: auto;
  }
  .navbar-nav-mobile > li { border-bottom: 1px solid var(--border); }
  .navbar-nav-mobile > li > a { padding: 16px 40px 16px 4px; text-transform: none; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
  .navbar-nav-mobile > li > i { color: var(--subtle); height: 56px; line-height: 56px; }
  .mobile-dropdown { background: transparent; padding-bottom: 8px; }
  .mobile-dropdown a { border: 0; padding: 10px 4px 10px 16px; color: var(--muted); font-size: 0.9375rem; }
  #sync1 { margin-top: 12px !important; }
  #sync1 .owl-stage-outer { border-radius: var(--radius-lg); }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .header > .container { padding-left: 56px; }
  #nav-icon4 { left: 16px; }
  .header .cart .cart-text { display: none; }
  .header .cart a { padding: 0 12px 0 14px; gap: 6px; }
  .heading-main { font-size: 1.375rem; }
}

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

/* ==========================================================================
   Phần 2 — các khu dựng bởi js/prochef.js
   ========================================================================== */
.pc-section:empty { display: none; }
.pc-section { padding-top: clamp(40px, 5vw, 64px); }
.pc-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(18px, 2.5vw, 28px); }
.pc-head > div { display: grid; gap: 8px; max-width: 680px; }
.pc-head > .pc-lead { max-width: 380px; text-align: right; }
@media (max-width: 767px) { .pc-head > .pc-lead { display: none; } }
.pc-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0; }
.pc-head .pc-lead { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--muted); line-height: 1.55; margin: 0; }
.eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.pc-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 0.9375rem; }
.pc-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Ngành hàng: 3 cột, nền màu nhạt theo ngành — ảnh nền trắng hòa vào màu, không còn khoảng trắng/đen thừa */
.pc-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pc-cat {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; min-height: 220px; overflow: hidden; isolation: isolate;
  background: var(--tint, var(--surface-2)); border: 0; border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pc-cat::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgb(255 255 255 / 0.55); z-index: -1; }
.pc-cat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px var(--tint-ink, #000); }
.pc-cat .pc-cover { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pc-cat .pc-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 22px 0 20px 22px; min-width: 0; }
.pc-cat .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--tint-ink); font-size: 17px; box-shadow: var(--shadow-sm); margin-bottom: 4px; }
.pc-cat h3 { font-size: 1.125rem; line-height: 1.25; margin: 0; color: var(--ink); letter-spacing: -0.02em; }
.pc-cat p { margin: 0; font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-cat .pc-subs { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 2px; }
.pc-cat .pc-subs a { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); padding: 1px 0; }
.pc-cat .pc-subs a::before { content: '›'; margin-right: 6px; color: var(--tint-ink); font-weight: 700; }
.pc-cat .pc-subs a:hover { color: var(--tint-ink); }
.pc-cat .pc-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--tint-ink); }
.pc-cat:hover .pc-go i { transform: translateX(3px); }
.pc-cat .pc-go i { transition: transform 0.2s var(--ease); }
.pc-cat .pc-art { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px 14px 14px 4px; }
.pc-cat .pc-art img { width: 100%; height: 100%; max-height: 196px; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.5s var(--ease); }
.pc-cat:hover .pc-art img { transform: scale(1.06); }
@media (max-width: 1024px) { .pc-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .pc-cats { gap: 10px; }
  .pc-cat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; border-radius: var(--radius); }
  .pc-cat::after { width: 140px; height: 140px; right: -30px; bottom: auto; top: -40px; }
  .pc-cat .pc-art { order: -1; height: 112px; padding: 12px 12px 0; }
  .pc-cat .pc-art img { max-height: 100px; }
  .pc-cat .pc-copy { padding: 10px 14px 14px; gap: 4px; }
  .pc-cat .ico, .pc-cat p, .pc-cat .pc-subs { display: none; }
  .pc-cat h3 { font-size: 0.875rem; }
  .pc-cat .pc-go { font-size: 0.75rem; padding-top: 2px; }
}

/* Tab ngành hàng */
.pc-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin-bottom: 24px; }
.pc-tabs::-webkit-scrollbar { display: none; }
.pc-tabs [role=tab] {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-weight: 600; font-size: 0.875rem; white-space: nowrap; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.pc-tabs [role=tab] i { color: var(--subtle); }
.pc-tabs [role=tab]:hover { color: var(--ink); border-color: var(--border-strong); }
.pc-tabs [role=tab][aria-selected=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pc-tabs [role=tab][aria-selected=true] i { color: #fdba74; }
@media (max-width: 767px) { .pc-tabs { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); } }

/* Lưới thẻ sản phẩm */
.pc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; min-height: 200px; }
.pc-grid-sm { min-height: 0; }
@media (max-width: 1024px) { .pc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .pc-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
.pc-card {
  position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pc-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.pc-card .pc-media { display: block; aspect-ratio: 1 / 0.92; background: linear-gradient(180deg, #f7f6f5, #efeeec); overflow: hidden; }
.pc-card .pc-media img { width: 100%; height: 100%; object-fit: contain; padding: 6% 10%; mix-blend-mode: multiply; transition: transform 0.6s var(--ease); }
.pc-card:hover .pc-media img { transform: scale(1.04); }
.pc-card .badge-off { position: absolute; top: 12px; left: 12px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; }
.pc-card .pc-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; }
.pc-card h3 { margin: 0; font-size: 0.9375rem; line-height: 1.4; font-weight: 600; }
.pc-card h3 a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-card h3 a::after { content: ''; position: absolute; inset: 0; }
.pc-card .pc-price { margin-top: auto; display: grid; gap: 2px; font-size: inherit; }
.pc-card .pc-price .lbl { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.pc-card .pc-price .now { font-size: 1.125rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pc-card .pc-price .was { font-size: 0.8125rem; color: var(--subtle); text-decoration: line-through; }
@media (max-width: 767px) { .pc-card .pc-body { padding: 12px; } .pc-card h3 { font-size: 0.8125rem; } .pc-card .pc-price .now { font-size: 1rem; } }
.pc-skel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 0 0 18px; overflow: hidden; }
.pc-skel i { display: block; aspect-ratio: 1 / 0.92; margin-bottom: 16px; }
.pc-skel b { display: block; height: 12px; margin: 0 18px 10px; border-radius: 6px; }
.pc-skel b + b { width: 45%; }
.pc-skel i, .pc-skel b { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: pc-shimmer 1.2s linear infinite; }
@keyframes pc-shimmer { to { background-position: -200% 0; } }
.pc-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.pc-empty a { color: var(--accent); font-weight: 600; }

/* Menu danh mục: icon ngành */
.parent-menu a.root .mx-ico { position: static; transform: none; display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; background: var(--surface-2); color: var(--ink); font-size: 14px; }
.parent-menu > li:hover a.root .mx-ico { background: var(--surface); color: var(--accent); }
.parent-menu a.root { display: flex; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.parent-menu { width: 300px; }
.nav-hori.is-scrolled { box-shadow: 0 8px 24px -16px rgb(28 25 23 / 0.35); border-bottom-color: transparent; }

/* Hiệu ứng hiện dần (chỉ khi JS chạy) */
.pc-js .pc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); }
.pc-js .pc-reveal.is-in { opacity: 1; transform: none; }
.pc-js .pc-cat.pc-reveal.is-in:hover, .pc-js .pc-card.pc-reveal.is-in:hover { transform: translateY(-4px); transition-delay: 0ms; }

/* Mobile: thanh điều hướng dưới */
.pc-tabbar { display: none; }
@media (max-width: 1024px) {
  .pc-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
  }
  .pc-tabbar a, .pc-tabbar button {
    position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; border-radius: 12px;
    color: var(--muted); font-size: 0.6875rem; font-weight: 600; line-height: 1.2;
  }
  .pc-tabbar i { font-size: 19px; color: var(--ink); height: 22px; line-height: 22px; }
  .pc-tabbar .zl { display: grid; place-items: center; height: 22px; padding: 0 5px; border-radius: 6px; background: #0068ff; color: #fff; font-size: 0.625rem; font-weight: 800; }
  .pc-tabbar .call i { display: grid; place-items: center; text-align: center; width: 40px; height: 40px; line-height: 1; margin-top: -18px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 8px 18px -6px rgb(194 65 12 / 0.7); }
  .pc-tabbar [aria-current=page], .pc-tabbar [aria-current=page] i { color: var(--accent); }
  .pc-tabbar em { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.625rem; font-style: normal; font-weight: 700; display: grid; place-items: center; }
  body.has-tabbar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.has-tabbar .hotineBottom, body.has-tabbar .btn-zalo { display: none; }
  body.has-tabbar .btn-mess { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.has-buybar .btn-mess { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .pc-buybar {
    position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 999; display: flex; align-items: center; gap: 12px;
    padding: 10px var(--gutter); background: rgb(255 255 255 / 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border);
    transform: translateY(120%); transition: transform 0.3s var(--ease); pointer-events: none;
  }
  .pc-buybar.is-on { transform: none; pointer-events: auto; }
  .pc-buybar .meta { flex: 1; min-width: 0; }
  .pc-buybar .meta b { display: block; font-size: 0.8125rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pc-buybar .meta span { font-weight: 700; color: var(--ink); font-size: 1rem; }
  .pc-buybar .pc-buy { min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; }
}
@media (min-width: 1025px) { .pc-buybar { display: none; } }

/* Về chúng tôi: thu gọn khối chữ dài, mở bằng nút "Đọc thêm" */
.pc-js .about-sumary.is-clamped { max-height: 340px; overflow: hidden; position: relative; }
.pc-js .about-sumary.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgb(255 255 255 / 0), #fff 85%); pointer-events: none; }
.about-home .col-sm-12.mgb30 { margin-bottom: 0 !important; }
.about-home .read_more { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.about-home .read_more a.pc-more { background: var(--surface); color: var(--ink) !important; border: 1px solid var(--border-strong); }
.about-home .read_more a.pc-more:hover { border-color: var(--ink); box-shadow: none; }
.slide-banner { margin-bottom: 0; }
.owl-carousel-brand.mgb30 { margin-bottom: 0 !important; }
.slide-banner .owl-dots { margin-top: 10px !important; }

/* Danh mục: bộ lọc gọn một hàng */
.box-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius); }
.box-filter::before, .box-filter::after { display: none; }
.box-filter-title { margin: 0 6px 0 4px; display: inline-flex; align-items: center; gap: 8px; }
.box-filter-title::before { content: '\f0b0'; font-family: FontAwesome; color: var(--accent); font-weight: 400; }
.box-filter .filter-item { float: none; margin: 0; }
#dFill.mgb20 { margin-bottom: 16px !important; }
.box-filter-curent { margin-top: 10px; }
.breadcrumb { padding-bottom: 0; margin-bottom: 8px; }
@media (max-width: 667px) { .box-filter .filter-item { width: auto; margin: 0; } .box-filter-title { width: 100%; } }

/* Bớt khoảng trống trước khu Tin mới */
.footer { margin-top: 24px; }
.about-home + .footer, .about-home { padding-bottom: 8px; }

/* Menu ngang: mũi tên cho nút có menu con, mở bằng hover, bàn phím hoặc bấm */
.nav-center > li.has-sub > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-center > li.has-sub > a::after {
  content: ''; width: 6px; height: 6px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: 0.6; transition: transform 0.2s var(--ease);
}
.nav-center > li.has-sub:hover > a::after, .nav-center > li.is-open > a::after { transform: rotate(225deg); margin-top: 3px; }
.nav-center > li:focus-within > ul, .nav-center > li.is-open > ul { display: block; }
.nav-center > li.is-open > a { background: var(--surface-2); color: var(--ink); }
.nav-center > li > ul { z-index: 1000; }
.nav-center > li:last-child > ul { right: 0; left: auto; }

/* Nút "Thêm" chứa các mục không đủ chỗ */
.nav-center > li.pc-more-li > ul { right: 0; left: auto; width: 280px; max-height: 70vh; overflow-y: auto; }
.pc-more-li > ul > li > ul { position: static; display: block; width: auto; padding: 0 0 4px 12px; border: 0; box-shadow: none; background: none; }
.pc-more-li > ul > li > ul > li { border: 0; }
.pc-more-li > ul > li > ul > li > a { display: block; padding: 6px 12px; font-size: 0.8125rem; color: var(--muted); border-radius: 8px; }
.pc-more-li > ul > li > ul > li > a:hover { background: var(--surface-2); color: var(--ink); }
.pc-more-li > ul > li.has-sub > a::after { display: none; }
.pc-more-li > ul > li > a { font-weight: 600; }

/* Desktop: hàng logo/tìm kiếm/giỏ hàng + thanh menu luôn dính trên đầu khi cuộn */
@media (min-width: 1025px) {
  :root { --hdr-h: 76px; }
  html { scroll-padding-top: calc(var(--hdr-h) + 72px); }
  .header { position: sticky; top: 0; z-index: 905; height: var(--hdr-h); }
  .header > .container { min-height: var(--hdr-h); height: var(--hdr-h); }
  .nav-hori { top: var(--hdr-h); z-index: 900; }
  .header.is-scrolled { background: rgb(250 250 249 / 0.97); }
  #boxsearch { z-index: 910; }
}