/* =========================================================
   Bep Hong - Malloca Gas Product Detail
   File: bephong-malloca-gas-detail.css
   Scope: .bph-mg26
   Structure: Overview -> Features -> Specs
   ========================================================= */

.bph-mg26{margin:0;width:100%;--bph-mg-red:var(--bph-c-price);--bph-mg-red-dark:var(--bph-c-price);--bph-mg-gold:var(--bph-ink, var(--bph-c-on-brand));--bph-mg-malloca:var(--bph-c-brand);--bph-mg-text:var(--bph-c-text);--bph-mg-muted:var(--bph-c-muted);--bph-mg-line:var(--bph-c-border);--bph-mg-soft:var(--bph-c-surface);--bph-mg-white:var(--bph-c-surface);--bph-mg-radius:18px;--bph-mg-shadow:0 10px 28px color-mix(in srgb, var(--bph-c-text) 5.5%, transparent);color:var(--bph-mg-text);font-family:"Be Vietnam Pro",Arial,sans-serif;line-height:1.65;container-type:inline-size;container-name:bph-mg26;}
.bph-mg26,.bph-mg26 *{box-sizing:border-box;}
.bph-mg26 img{max-width:100%;}
.bph-mg26 h2,.bph-mg26 h3,.bph-mg26 p{margin-top:0;}
.bph-mg26 section{margin:0;}

/* 2. TỔNG QUAN */
.bph-mg26__overview{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:28px;align-items:center;padding:20px;border:0;border-radius:0;background:var(--bph-mg-soft);}
.bph-mg26__overview-media{min-width:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px;border-radius:18px;background:var(--bph-c-surface);
  --bph-ink: var(--bph-c-text);}
.bph-mg26__overview-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;}
.bph-mg26__overview-content{min-width:0;}
.bph-mg26__eyebrow{display:inline-flex;align-items:center;min-height:29px;margin:0 0 10px;padding:5px 11px;border:1px solid var(--bph-c-border);border-radius:999px;background:var(--bph-c-surface);color:var(--bph-mg-malloca);font-size:12px;line-height:1;font-weight:800;letter-spacing:.055em;text-transform:uppercase;
  --bph-ink: var(--bph-c-text);}
.bph-mg26__overview-content>h2{margin:0 0 16px;color:var(--bph-c-text);font-size:clamp(25px,2.5cqw,34px);line-height:1.18;font-weight:850;letter-spacing:-.025em;}
.bph-mg26__overview-content>h3{margin:0 0 10px;color:var(--bph-c-text);font-size:18px;line-height:1.45;font-weight:800;}
.bph-mg26__overview-content>p{margin:0;color:var(--bph-c-text);font-size:14.5px;line-height:1.75;}
.bph-mg26__quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;}
.bph-mg26__quick-card{min-width:0;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;min-height:88px;padding:12px 14px;border:1px solid var(--bph-mg-line);border-radius:14px;background:var(--bph-c-surface);
  --bph-ink: var(--bph-c-text);}
.bph-mg26__quick-card>img{display:block;width:42px;height:42px;object-fit:contain;}
.bph-mg26__quick-card strong{display:block;margin:0 0 3px;color:var(--bph-c-text);font-size:14px;line-height:1.35;font-weight:800;}
.bph-mg26__quick-card span{display:block;color:var(--bph-mg-muted);font-size:12.5px;line-height:1.45;}

/* TIÊU ĐỀ CHUNG */
.bph-mg26__section-head{max-width:780px;margin:0 auto 20px;text-align:center;}
.bph-mg26__section-kicker{display:inline-block;margin:0 0 6px;color:var(--bph-mg-red);font-size:12px;line-height:1.2;font-weight:850;letter-spacing:.085em;text-transform:uppercase;}
.bph-mg26__section-head h2{margin:0;color:var(--bph-c-text);font-size:clamp(24px,2.35cqw,32px);line-height:1.2;font-weight:850;letter-spacing:-.02em;}
.bph-mg26__section-head p{margin:8px 0 0;color:var(--bph-mg-muted);font-size:14px;line-height:1.65;}

/* 3. ĐẶC ĐIỂM NỔI BẬT */
.bph-mg26__features{padding:20px;border:0;border-top:1px solid var(--bph-c-border);border-radius:0;background:var(--bph-mg-soft);}
.bph-mg26__feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.bph-mg26__feature-card{min-width:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);overflow:hidden;border:1px solid var(--bph-mg-line);border-radius:16px;background:var(--bph-c-surface);box-shadow:var(--bph-mg-shadow);
  --bph-ink: var(--bph-c-text);}
.bph-mg26__feature-media{min-width:0;min-height:190px;display:flex;align-items:center;justify-content:center;padding:12px;background:var(--bph-mg-soft);}
.bph-mg26__feature-media img{display:block;width:100%;height:100%;max-height:220px;object-fit:contain;object-position:center;}
.bph-mg26__feature-content{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:18px;}
.bph-mg26__feature-content h3{margin:0 0 7px;color:var(--bph-c-text);font-size:17px;line-height:1.4;font-weight:850;}
.bph-mg26__feature-content p{margin:0;color:var(--bph-mg-muted);font-size:13.5px;line-height:1.65;}

/* 4. THÔNG SỐ KỸ THUẬT */
.bph-mg26__specs{padding:20px;border:0;border-top:1px solid var(--bph-c-border);border-radius:0;background:var(--bph-mg-soft);}
.bph-mg26__specs-card{max-width:980px;margin:0 auto;overflow:hidden;border:1px solid var(--bph-mg-line);border-radius:16px;background:var(--bph-c-surface);
  --bph-ink: var(--bph-c-text);}
.bph-mg26__specs-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.bph-mg26__specs-table th,.bph-mg26__specs-table td{padding:13px 16px;border-bottom:1px solid var(--bph-c-border);vertical-align:top;text-align:left;font-size:14px;line-height:1.55;}
.bph-mg26__specs-table th{width:34%;color:var(--bph-c-text);font-weight:800;background:var(--bph-mg-soft);}
.bph-mg26__specs-table td{color:var(--bph-c-text);background:var(--bph-c-surface);
  --bph-ink: var(--bph-c-text);}
.bph-mg26__specs-table tr:last-child th,.bph-mg26__specs-table tr:last-child td{border-bottom:0;}


/* THÔNG SỐ 2 CỘT TRÊN DESKTOP */
.bph-mg26__specs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1180px;margin:0 auto;}
.bph-mg26__specs-grid .bph-mg26__specs-card{max-width:none;width:100%;margin:0;}
.bph-mg26__specs-grid .bph-mg26__specs-table th{width:42%;}

/* RESPONSIVE THEO COMPONENT */
@container bph-mg26 (max-width:980px){
  .bph-mg26__specs-grid{grid-template-columns:1fr;}
  .bph-mg26__overview{grid-template-columns:1fr;gap:22px;}
  .bph-mg26__overview-media{max-width:620px;width:100%;margin:0 auto;}
  .bph-mg26__feature-grid{grid-template-columns:1fr;}
  .bph-mg26__feature-card{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}
}

@container bph-mg26 (max-width:680px){
.bph-mg26__overview,.bph-mg26__features,.bph-mg26__specs{padding:12px;border-radius:0;}
  .bph-mg26__overview-media{padding:10px;border-radius:14px;}
  .bph-mg26__overview-content>h2{font-size:25px;}
  .bph-mg26__quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .bph-mg26__quick-card{min-height:72px;}
  .bph-mg26__section-head{margin-bottom:16px;text-align:left;}
  .bph-mg26__section-head h2{font-size:23px;}
  .bph-mg26__feature-card{grid-template-columns:1fr;}
  .bph-mg26__feature-media{min-height:0;aspect-ratio:2/1;}
  .bph-mg26__feature-content{padding:15px;}
  .bph-mg26__specs-table,.bph-mg26__specs-table tbody,.bph-mg26__specs-table tr,.bph-mg26__specs-table th,.bph-mg26__specs-table td{display:block;width:100%;}
  .bph-mg26__specs-table tr{padding:11px 14px;border-bottom:1px solid var(--bph-c-border);}
  .bph-mg26__specs-table tr:last-child{border-bottom:0;}
  .bph-mg26__specs-table th,.bph-mg26__specs-table td{padding:0;border:0;background:transparent;}
  .bph-mg26__specs-table th{margin-bottom:3px;color:var(--bph-c-text);font-size:13px;}
  .bph-mg26__specs-table td{color:var(--bph-mg-muted);font-size:13.5px;}
}

@container bph-mg26 (max-width:430px){
.bph-mg26__overview,.bph-mg26__features,.bph-mg26__specs{padding:9px;border-radius:0;}
  .bph-mg26__overview-content>h2{font-size:23px;}
  .bph-mg26__overview-content>h3{font-size:16px;}
  .bph-mg26__overview-content>p{font-size:13.5px;}
  .bph-mg26__quick-card{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:10px 11px;}
  .bph-mg26__quick-card>img{width:36px;height:36px;}
  .bph-mg26__feature-content h3{font-size:15.5px;}
  .bph-mg26__feature-content p{font-size:13px;}
}

/* ===== END bephong-malloca-gas-detail.css ===== */


/* V5 - Compact spacing: giảm khoảng trống giữa nội dung và viền khung */
@container bph-mg26 (max-width:680px){
  .bph-mg26__overview{gap:16px;}
  .bph-mg26__feature-grid{gap:12px;}
  .bph-mg26__specs-grid{gap:12px;}
}
@container bph-mg26 (max-width:430px){
  .bph-mg26__overview{gap:14px;}
  .bph-mg26__feature-grid{gap:10px;}
  .bph-mg26__specs-grid{gap:10px;}
}
/* ===== END V5 Compact spacing ===== */


/* V20 - PC rộng theo bố cục mockup đã chốt
   - Ảnh vẫn vuông 1:1
   - Hai cột cân đối gần 44/56 như mockup
   - Khung ảnh không co theo nội dung và cũng không phình quá mức
   - Nội dung bên phải căn giữa theo chiều dọc
   - Laptop / tablet / mobile giữ nguyên */
@container bph-mg26 (min-width:1400px){
  .bph-mg26__overview{
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:48px;
    align-items:center;
    padding:34px 42px;
  }

  .bph-mg26__overview-media{
    width:min(100%,620px);
    aspect-ratio:1/1;
    height:auto;
    min-width:0;
    max-width:620px;
    min-height:0;
    justify-self:center;
    align-self:center;
    padding:18px;
  }

  .bph-mg26__overview-media img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }

  .bph-mg26__overview-content{
    width:100%;
    min-width:0;
    max-width:760px;
    justify-self:start;
    align-self:center;
  }

  .bph-mg26__quick-grid{
    gap:16px;
    margin-top:22px;
  }

  .bph-mg26__quick-card{
    min-height:96px;
    padding:14px 16px;
  }
}
/* ===== END V20 Wide PC mockup balance ===== */


/* V24 - Khung vàng chung:
   wrapper ngoài (bephong-product-detail.css) xử lý padding = 0.
   .bph-mg26 không còn dùng margin âm để bù padding. */
@supports not selector(:has(*)) {
  .bph-mg26 {
    margin: -26px;
    width: calc(100% + 52px);
  }
}
/* ===== END V24 Khung vàng chung ===== */


/* FINAL - Mobile compact theo mockup */
@container bph-mg26 (max-width:430px){
  .bph-mg26__quick-card{
    grid-template-columns:34px minmax(0,1fr);
    gap:8px;
    padding:9px;
  }
  .bph-mg26__quick-card>img{
    width:32px;
    height:32px;
  }
  .bph-mg26__quick-card strong{
    font-size:12.5px;
  }
  .bph-mg26__quick-card span{
    font-size:11.5px;
    line-height:1.35;
  }
}
@container bph-mg26 (max-width:350px){
  .bph-mg26__quick-grid{
    grid-template-columns:1fr;
  }
}
/* ===== END MALLOCA DETAIL FINAL ===== */