/* ice-delivery — industry pages (Bảng giá, Khu vực giao, Giao định kỳ, Chứng nhận) + home partners/zones
   + mobile sticky CTA. Buttons use --c-accent-ink (contrast rule), tap targets ≥ 44px. */

.ice-section { padding: 64px 0; }
.ice-section-alt { background: var(--c-surface, #f0f9ff); }
.ice-section-head { max-width: 680px; margin: 0 auto 32px; text-align: center; }
.ice-section-head h2, .ice-split h2 { color: var(--c-navy, #0a2d5e); font-size: clamp(24px, 3vw, 32px); margin: 6px 0 10px; }
.ice-section-head p { color: var(--c-muted, #4b5563); }
.section-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-ink, #0369a1); }
.ice-lead { font-size: 17px; color: var(--c-text, #111827); margin: 8px 0 14px; }
.ice-center { text-align: center; margin-top: 24px; color: var(--c-muted); }
.ice-center a, .ice-section a:not(.ice-btn) { color: var(--c-accent-ink, #0369a1); font-weight: 600; }

.ice-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 22px; border-radius: 999px; background: var(--c-accent-ink, #0369a1); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid transparent; transition: background .2s, transform .2s; }
@media (hover: hover) and (pointer: fine){.ice-btn:hover{ background: var(--c-accent-ink-h, #075985); transform: translateY(-1px); }}
.ice-btn-outline { background: transparent; color: var(--c-accent-ink, #0369a1) !important; border-color: currentColor; }
@media (hover: hover) and (pointer: fine){.ice-btn-outline:hover{ background: rgba(3, 105, 161, .08); }}
.ice-btn-light { background: #fff; color: var(--c-navy, #0a2d5e) !important; }
.ice-btn-ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .7); }
@media (hover: hover) and (pointer: fine){.ice-btn-ghost:hover{ background: rgba(255, 255, 255, .12); }}
.ice-btn-block { width: 100%; }

.ice-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ice-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.ice-list li { position: relative; padding-left: 26px; color: var(--c-text, #111827); }
.ice-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--c-accent-ink, #0369a1); font-weight: 800; }

/* Tables → stacked cards on phones */
.ice-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--c-border, #e0f2fe); background: #fff; }
.ice-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ice-table th { background: var(--c-navy, #0a2d5e); color: #fff; text-align: left; padding: 14px 16px; font-weight: 700; white-space: nowrap; }
.ice-table td { padding: 14px 16px; border-top: 1px solid var(--c-border, #e0f2fe); color: var(--c-text, #111827); }
.ice-table tbody tr:nth-child(even) td { background: #f8fbff; }
.ice-table a { color: var(--c-accent-ink, #0369a1); font-weight: 700; }
@media (max-width: 640px) {
  .ice-table thead { display: none; }
  .ice-table, .ice-table tbody, .ice-table tr, .ice-table td { display: block; width: 100%; }
  .ice-table tr { padding: 10px 14px; border-top: 1px solid var(--c-border, #e0f2fe); }
  .ice-table tr:first-child { border-top: 0; }
  .ice-table td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; background: none !important; }
  .ice-table td::before { content: attr(data-label); color: var(--c-muted, #4b5563); font-size: 13px; }}

.ice-notes { margin-top: 28px; }
.ice-note { background: #fff; border: 1px solid var(--c-border, #e0f2fe); border-radius: 14px; padding: 20px; }
.ice-note h3 { font-size: 16px; color: var(--c-navy, #0a2d5e); margin-bottom: 6px; }
.ice-note p { color: var(--c-muted, #4b5563); font-size: 14px; line-height: 1.6; }

.ice-zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ice-zone { background: #fff; border: 1px solid var(--c-border, #e0f2fe); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; font-size: 14px; color: var(--c-muted, #4b5563); }
.ice-zone strong { color: var(--c-navy, #0a2d5e); font-size: 16px; }
.ice-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ice-chips li { background: #fff; border: 1px solid var(--c-border, #e0f2fe); color: var(--c-navy, #0a2d5e); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; }

.ice-map { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--c-border, #e0f2fe); background: #e0f2fe; }
.ice-map iframe { display: block; width: 100%; border: 0; }
.ice-map-link { display: flex; align-items: center; justify-content: center; min-height: 44px; background: #fff; color: var(--c-accent-ink, #0369a1); font-weight: 700; text-decoration: none; }

.ice-plans { align-items: stretch; }
.ice-plan { position: relative; background: #fff; border: 1.5px solid var(--c-border, #e0f2fe); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; }
.ice-plan.is-hot { border-color: var(--c-accent-ink, #0369a1); box-shadow: 0 12px 36px rgba(3, 105, 161, .14); }
.ice-plan h3 { color: var(--c-navy, #0a2d5e); font-size: 22px; }
.ice-plan-tag { color: var(--c-muted, #4b5563); font-size: 14px; }
.ice-plan-price { font-size: 20px; font-weight: 800; color: var(--c-accent-ink, #0369a1); }
.ice-plan .ice-list { flex: 1; }
.ice-plan-badge { position: absolute; top: -12px; left: 24px; background: var(--c-accent-ink, #0369a1); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.ice-form { background: #fff; border: 1px solid var(--c-border, #e0f2fe); border-radius: 18px; padding: 24px; display: grid; gap: 14px; }
.ice-form .grid-2 { gap: 14px; }

.ice-cert { display: grid; grid-template-columns: 140px 1fr; gap: 18px; background: #fff; border: 1px solid var(--c-border, #e0f2fe); border-radius: 16px; padding: 18px; }
.ice-cert h3 { color: var(--c-navy, #0a2d5e); font-size: 17px; margin-bottom: 4px; }
.ice-cert p { color: var(--c-muted, #4b5563); font-size: 14px; line-height: 1.6; }
.ice-cert-by { color: var(--c-accent-ink, #0369a1) !important; font-weight: 600; }
.ice-cert-img { aspect-ratio: 3 / 4; border-radius: 10px; background: repeating-linear-gradient(135deg, #f0f9ff 0 12px, #e0f2fe 12px 24px); border: 1px dashed #7dd3fc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ice-cert-img span { font-size: 40px; }
.ice-cert-img small { font-size: 11px; color: var(--c-muted, #4b5563); text-align: center; }
.ice-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; }
.ice-steps li { background: #fff; border: 1px solid var(--c-border, #e0f2fe); border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--c-navy, #0a2d5e); }
.ice-steps li span { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--c-accent-ink, #0369a1); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }

.ice-cta { background: linear-gradient(135deg, #0a2d5e, #0369a1); padding: 48px 0; }
.ice-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ice-cta h2 { color: #fff; font-size: clamp(22px, 3vw, 28px); margin-bottom: 6px; }
.ice-cta p { color: rgba(255, 255, 255, .85); max-width: 560px; }
.ice-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.ice-clients { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 28px; }
.ice-client { background: #fff; border: 1px solid var(--c-border, #e0f2fe); border-radius: 14px; padding: 18px 12px; text-align: center; display: grid; gap: 4px; }
.ice-client-icon { font-size: 30px; }
.ice-client strong { color: var(--c-navy, #0a2d5e); font-size: 14px; }
.ice-client small { color: var(--c-accent-ink, #0369a1); font-weight: 700; }
.ice-review { background: #fff; border: 1px solid var(--c-border, #e0f2fe); border-radius: 16px; padding: 22px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ice-stars { color: #b45309; letter-spacing: 2px; }
.ice-review blockquote { margin: 0; color: var(--c-text, #111827); line-height: 1.65; flex: 1; }
.ice-review figcaption { color: var(--c-muted, #4b5563); font-size: 14px; }

.woo-unit { font-size: 15px; font-weight: 600; color: var(--c-muted, #4b5563); }
.woo-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.woo-pricing div { background: var(--c-surface, #f0f9ff); border-radius: 10px; padding: 10px 12px; }
.woo-pricing dt { font-size: 12px; color: var(--c-muted, #4b5563); }
.woo-pricing dd { margin: 2px 0 0; color: var(--c-navy, #0a2d5e); font-weight: 600; }

.footer-links a { display: flex; align-items: center; min-height: 32px; }
/* footer now has 6 columns (brand + 5) */
@media (min-width: 961px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.1fr 1.2fr 1.2fr; gap: 28px; }}
/* 7 menu items inside a max-width container: the default 40px gap overflows it at every width
   (logo touched the menu at 1920px) → compact spacing on all desktop widths */
@media (min-width: 1180px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 14px; }
  .nav-actions { gap: 10px; }}
@media (min-width: 1180px) and (max-width: 1300px) { .nav-links { gap: 16px; } .nav-logo-name { font-size: 14px; }}
/* Header: logo ↔ menu ↔ nút luôn cách nhau ≥ 20px (tên thương hiệu dài từng dính sát "Trang Chủ", khe = 0px).
   Khung header rộng hơn khung nội dung một chút; nếu vẫn không đủ chỗ (tên rất dài / màn hẹp) main.js gắn
   .nav-collapsed → dùng nút ☰. KHÔNG cắt chữ, KHÔNG ẩn tràn. */
@media (min-width: 1180px) {
  .site-nav .container { max-width: 1280px; gap: 20px; }
  .nav-logo-wrap, .nav-actions { flex-shrink: 0; }}
.site-nav.nav-collapsed .nav-links { display: none; }
.site-nav.nav-collapsed .nav-hamburger { display: flex; }
/* Mobile/tablet (chế độ ☰): tên dài được xuống dòng thay vì chạm nút giỏ hàng/☰; luôn có khe 12px */
@media (max-width: 1179px) {
  .site-nav .container { gap: 12px; }
  .nav-logo-wrap { min-width: 0; flex: 0 1 auto; }
  .nav-logo-text { min-width: 0; }
  .nav-logo-name { white-space: normal; line-height: 1.2; }
  .nav-logo-hex { flex-shrink: 0; }
  .nav-actions { flex-shrink: 0; }}
.site-nav.nav-collapsed .nav-logo-wrap { min-width: 0; flex: 0 1 auto; }

/* Mobile sticky CTA — hidden on desktop; body padding keeps footer/content visible above it */
.ice-sticky-cta { display: none; }
@media (max-width: 768px) {
  .ice-sticky-cta { display: grid; grid-template-columns: 1fr 1fr 1.6fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 205; background: #fff; box-shadow: 0 -6px 24px rgba(10, 45, 94, .16); padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .ice-sticky-cta a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; }
  .ice-sticky-call { background: #ecfdf5; color: #065f46; }
  .ice-sticky-zalo { background: #eff6ff; color: #1d4ed8; }
  .ice-sticky-order { background: var(--c-accent-ink, #0369a1); color: #fff; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  #ice-back-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  .eo-zalo-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  body.nav-open .ice-sticky-cta { display: none; }}

@media (max-width: 960px) {
  .ice-split { grid-template-columns: 1fr; }
  .ice-clients { grid-template-columns: repeat(3, 1fr); }
  .ice-steps { grid-template-columns: repeat(2, 1fr); }
  .woo-pricing { grid-template-columns: 1fr 1fr 1fr; }}
@media (max-width: 600px) {
  .ice-section { padding: 44px 0; }
  .ice-clients { grid-template-columns: repeat(2, 1fr); }
  .ice-steps { grid-template-columns: 1fr; }
  .ice-cert { grid-template-columns: 96px 1fr; }
  .ice-cta-actions, .ice-cta-actions .ice-btn { width: 100%; }
  .woo-pricing { grid-template-columns: 1fr; }}

/* ── Ảnh trong khung cố định (eo_theme_img): phủ kín khung, cắt giữ tỉ lệ ── */
.has-photo { position: relative; overflow: hidden; }
.has-photo > .eo-photo, .has-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.why-truck-visual.has-photo, .story-visual.has-photo, .ice-cert-img.has-photo { font-size: 0; }

/* ── Khoảng đệm chuẩn (PIPELINE.md "Khoảng đệm"): chữ cách mép thẻ/panel/bảng ≥ 24px desktop, ≥ 16px mobile ── */
:root { --pad-card: 24px; }
@media (max-width: 767px) { :root { --pad-card: 16px; }}
html body :is(.product-body, .woo-product-body, .post-body) { padding-left: var(--pad-card); padding-right: var(--pad-card); }
html body :is(.why-contact-box, .ice-client, .ice-review, .ice-note, .ice-zone, .stat-item) { padding-left: var(--pad-card); padding-right: var(--pad-card); }
html body .woo-pricing > div { padding-left: var(--pad-card); padding-right: var(--pad-card); }
html body .ice-table :is(td, th):first-child { padding-left: var(--pad-card); }
html body .ice-table :is(td, th):last-child { padding-right: var(--pad-card); }
html body .wc-block-components-radio-control-accordion-content { padding-left: var(--pad-card); padding-right: var(--pad-card); }
/* bảng giá dạng thẻ trên mobile: đệm ở từng dòng (thẻ), ô đầu/cuối không đệm riêng (không lệch hàng) */
@media (max-width: 640px) {
  html body .ice-table tr { padding-left: var(--pad-card); padding-right: var(--pad-card); }
  html body .ice-table td:is(:first-child, :last-child) { padding-left: 0; padding-right: 0; }}
/* quét padding 768/1024px: thẻ chứng nhận + khối nổi bật trang chính sách */
html body :is(.ice-cert, .highlight) { padding-left: var(--pad-card); padding-right: var(--pad-card); }
html body .policy-content .highlight { padding-left: var(--pad-card); padding-right: var(--pad-card); }

/* ── Thanh hành động dùng chung (eo-action-bar): ẩn các nút nổi/thanh cũ khi component chạy ── */
:root { --eo-ab-cta-bg: var(--c-accent-ink, #0369a1); }
html.eo-ab :is(#ice-back-top, #eo-back-top, .ice-sticky-cta, .zalo-fab, .eo-zalo-fab) { display: none !important; }
/* header desktop: CTA chính "Đặt đá" (nút đặc), số điện thoại thành nút viền */
.nav-order-btn { display: none; }
@media (min-width: 1024px) {
  .nav-order-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: var(--r-full, 999px);
    background: var(--c-accent-ink, #0369a1); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
  @media (hover: hover) and (pointer: fine){.nav-order-btn:hover{ filter: brightness(1.08); }}
  html body .nav-phone-btn { background: transparent; color: var(--c-accent-ink, #0369a1); box-shadow: inset 0 0 0 2px currentColor; }}

/* ── Mobile không tràn (PIPELINE "Mobile — không tràn, không che") ── */
:where([class*="grid"], [class*="layout"], [class*="split"]) > * { min-width: 0; }
:where(input, select, textarea, img, video, iframe, table) { max-width: 100%; }
html body .cert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 768px) { html body .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* ── Thẻ sản phẩm shop: tiêu đề ≤ 2 dòng, mô tả ≤ 2 dòng, giá + nút thẳng hàng giữa các thẻ ── */
html body .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { html body .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}
@media (max-width: 768px)  { html body .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }}
.products-grid--loop { padding: var(--sp-lg, 24px) 0; gap: 24px; display: grid; }
html body .woo-product-card { display: flex; flex-direction: column; height: 100%; }
html body .woo-product-body { display: flex; flex-direction: column; flex: 1; gap: 6px; }
html body .woo-product-body h3 { font-size: 15px; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
html body .woo-excerpt { font-size: 13px; line-height: 1.5; color: var(--c-muted, #4b5563); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .woo-price { font-size: 17px; font-weight: 800; color: var(--c-navy, #0a2d5e); display: flex; flex-wrap: wrap; column-gap: 6px; margin-top: auto; }
html body .woo-price del { font-size: 13px; font-weight: 500; color: var(--c-muted, #6b7280); }
html body .woo-add-to-cart-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; width: 100%; border: 0; border-radius: 10px;
  background: var(--c-accent-ink, #0369a1); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
@media (max-width: 480px) {
  html body .woo-product-body h3 { font-size: 14px; }
  html body .woo-excerpt { display: none; }  /* 2 cột hẹp: tên + giá + nút, gọn và thẳng hàng */
  html body .woo-price { font-size: 15px; }
  html body .woo-add-to-cart-btn { font-size: 13px; }}
html body .cert-grid .cert-card { min-width: 0; max-width: none; } /* lưới 2/4 cột: thẻ co theo cột (min-width 200px cũ làm tràn 375px) */

/* Tab sản phẩm đang chọn: subpages.css vẽ viên màu nhấn + chữ trắng, woocommerce.css (nạp sau) lại đổi chữ thành màu nhấn
   → chữ trùng màu nền, không đọc được. Chốt 1 kiểu: viên màu đậm + chữ trắng (tương phản ≥ 4.5:1). */
html body .woo-tab-btn.active { background: var(--c-accent-ink, #0369a1); color: #fff; border-bottom-color: transparent; }

/* Hero trên engine slide chung: điều hướng (chấm) nằm dưới chữ như .hero-dots cũ */
.hero-slider-wrap[data-eo-slide] > .eo-slide__nav { margin-top: 30px; }
/* slide 2–3 của hero dùng h2 (mỗi trang chỉ 1 h1) — cùng kiểu chữ với .hero h1 */
.hero .hero-h { color: #fff; font-size: clamp(32px, 5vw, 60px); line-height: 1.1; font-weight: 900; letter-spacing: -.03em; margin: 0; }
.hero .hero-h span { display: block; }
/* Header co gọn theo nấc khi khách thêm mục menu (main.js): thu khoảng cách → ẩn nút số điện thoại → ☰ */
@media (min-width: 1180px) {
  .site-nav.nav-tight .nav-links { gap: 12px; }
  .site-nav.nav-tight .nav-actions { gap: 8px; }
  .site-nav.nav-tight .container { gap: 16px; }
  .site-nav.nav-nophone .nav-phone-btn { display: none; }}