/* === Gạch Thẻ Đặc Tuynel — page-only CSS === */
:root{
    --brick:#D4391F;--brick-dark:#A82B14;
    --navy:#243558;--navy-2:#2e4470;
    --steel:#5C6B7A;--stone:#F3F1ED;
    --paper:#FFFFFF;--line:#E2DED7;--ink:#22262B;
    --pass:#1a7a3f;--pass-bg:#edf7f1;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Source Sans 3',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;}
  h1,h2,h3,h4,h5{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);line-height:1.15;}
  a{text-decoration:none;color:inherit;}
  img{display:block;max-width:100%;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 28px;}

  /* TOPBAR + HEADER */
  .topbar{background:var(--navy);color:#c8d4e8;font-size:13.5px;}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:9px 28px;flex-wrap:wrap;gap:8px;}
  .topbar .info{display:flex;gap:28px;flex-wrap:wrap;}
  .topbar .info span{display:inline-flex;align-items:center;gap:7px;}
  .topbar .worktime{color:#a8b8d0;}
  .topbar .hotline{color:#fff;font-weight:700;font-size:14px;}
  .topbar .hotline b{color:#FF8A5C;font-size:15px;}
  header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;}
  .header-inner{display:flex;align-items:center;justify-content:space-between;padding:13px 28px;}
  .logo{display:flex;align-items:center;gap:12px;}
  .logo-img{width:54px;height:54px;object-fit:contain;}
  .logo-text{font-family:'Oswald';font-size:22px;font-weight:700;color:var(--navy);letter-spacing:.03em;}
  .logo-text span{color:var(--brick);}
  .logo-sub{font-size:11px;color:var(--steel);letter-spacing:.07em;text-transform:uppercase;margin-top:1px;}
  nav ul{display:flex;gap:28px;list-style:none;}
  nav a{font-family:'Oswald';font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);padding:8px 0;border-bottom:2px solid transparent;transition:.2s;}
  nav a:hover,nav a.active{color:var(--brick);border-bottom-color:var(--brick);}
  .cta-btn{background:var(--brick);color:#fff;font-family:'Oswald';font-weight:600;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;padding:12px 26px;border-radius:2px;transition:.2s;white-space:nowrap;}
  .cta-btn:hover{background:var(--brick-dark);}

  /* ── BREADCRUMB BAR ── */
  .breadbar{background:var(--stone);border-bottom:1px solid var(--line);padding:12px 0;}
  .breadbar .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
  .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#8a9fc0;}
  .breadcrumb a{color:var(--steel);transition:.2s;}
  .breadcrumb a:hover{color:var(--brick);}
  .breadcrumb .sep{color:var(--line);}
  .breadcrumb .current{color:var(--ink);font-weight:600;}
  .share-row{display:flex;align-items:center;gap:10px;}
  .share-btn{
    font-family:'Oswald';font-size:12px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--steel);border:1.5px solid var(--line);padding:6px 14px;cursor:pointer;transition:.2s;
  }
  .share-btn:hover{border-color:var(--brick);color:var(--brick);}

  /* ── HERO SPLIT ── */
  .prod-hero{background:var(--stone);padding:0;}
  .prod-hero-inner{
    display:grid;grid-template-columns:1fr 1fr;
    min-height:520px;
  }

  /* CỘT TRÁI: GALLERY ẢNH */
  .gallery-col{position:relative;background:#000;overflow:hidden;}
  .main-img{
    width:100%;height:100%;object-fit:cover;
    transition:.4s ease;cursor:zoom-in;
    min-height:480px;
  }
  .main-img:hover{transform:scale(1.03);}

  /* badge chứng nhận nổi trên ảnh chính */
  .cert-float{
    position:absolute;top:0;right:0;
    display:flex;flex-direction:column;gap:0;
  }
  .cf-badge{
    padding:10px 16px;font-family:'Oswald';font-size:12px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px;
  }
  .cf-badge.iso{background:var(--navy);color:#fff;}
  .cf-badge.std{background:var(--brick);color:#fff;}
  .cf-badge.hq{background:#1a7a3f;color:#fff;}
  .cf-badge .cf-ico{font-size:14px;}

  /* thumbnails */
  .thumb-strip{
    position:absolute;bottom:0;left:0;right:0;
    display:flex;gap:6px;padding:12px;
    background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
  }
  .thumb{
    width:68px;height:52px;object-fit:cover;cursor:pointer;
    border:2px solid transparent;transition:.2s;opacity:.7;flex-shrink:0;
  }
  .thumb.active,.thumb:hover{border-color:#fff;opacity:1;}

  /* zoom indicator */
  .zoom-hint{
    position:absolute;bottom:68px;right:14px;
    background:rgba(0,0,0,.5);color:#fff;font-size:12px;
    padding:5px 11px;display:flex;align-items:center;gap:6px;
  }

  /* CỘT PHẢI: THÔNG TIN + CTA */
  .info-col{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;}
  .prod-cat-tag{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Oswald';font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--brick);background:rgba(212,57,31,.08);border:1px solid rgba(212,57,31,.25);
    padding:5px 13px;margin-bottom:14px;align-self:flex-start;
  }
  .info-col h1{font-size:32px;color:var(--navy);margin-bottom:8px;}
  .prod-subtitle{font-size:15px;color:var(--steel);margin-bottom:22px;text-transform:none;letter-spacing:0;font-family:'Source Sans 3';}

  /* cert badges hàng ngang */
  .cert-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
  .cert-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 13px;font-size:12.5px;font-weight:600;
  }
  .cert-pill.iso{background:rgba(36,53,88,.08);border:1px solid rgba(36,53,88,.2);color:var(--navy);}
  .cert-pill.std{background:rgba(26,122,63,.08);border:1px solid rgba(26,122,63,.3);color:var(--pass);}
  .cert-pill.hq{background:rgba(212,57,31,.07);border:1px solid rgba(212,57,31,.25);color:var(--brick);}

  /* quick spec grid */
  .quick-specs{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);margin-bottom:24px;
  }
  .qs-item{background:var(--paper);padding:14px 12px;text-align:center;}
  .qs-val{font-family:'Oswald';font-size:20px;font-weight:700;color:var(--navy);line-height:1;}
  .qs-lbl{font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.05em;margin-top:4px;line-height:1.3;}

  /* variant chọn kích thước */
  .variant-section{margin-bottom:22px;}
  .variant-label{font-family:'Oswald';font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel);margin-bottom:10px;}
  .variant-label span{color:var(--navy);font-weight:700;}
  .variant-opts{display:flex;gap:8px;flex-wrap:wrap;}
  .v-opt{
    padding:9px 18px;border:2px solid var(--line);
    font-family:'Oswald';font-size:13.5px;font-weight:500;color:var(--steel);
    cursor:pointer;transition:.15s;
  }
  .v-opt:hover{border-color:var(--navy);color:var(--navy);}
  .v-opt.active{border-color:var(--brick);color:var(--brick);background:rgba(212,57,31,.05);}

  /* CTA buttons */
  .cta-group{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
  .cta-primary{
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:var(--brick);color:#fff;font-family:'Oswald';font-weight:700;
    font-size:15px;text-transform:uppercase;letter-spacing:.05em;padding:17px 24px;transition:.2s;
  }
  .cta-primary:hover{background:var(--brick-dark);}
  .cta-secondary{
    display:flex;align-items:center;justify-content:center;gap:10px;
    border:2px solid var(--navy);color:var(--navy);font-family:'Oswald';font-weight:600;
    font-size:14px;text-transform:uppercase;letter-spacing:.04em;padding:14px 24px;transition:.2s;
  }
  .cta-secondary:hover{background:var(--navy);color:#fff;}
  .cta-note{font-size:13px;color:var(--steel);text-align:center;}
  .cta-note strong{color:var(--brick);}

  /* ── TABS ĐIỀU HƯỚNG NỘI DUNG ── */
  .content-tabs{border-bottom:2px solid var(--line);background:var(--paper);position:sticky;top:68px;z-index:50;}
  .content-tabs .wrap{display:flex;gap:0;overflow-x:auto;}
  .ctab{
    padding:18px 28px;font-family:'Oswald';font-size:14px;font-weight:500;
    text-transform:uppercase;letter-spacing:.05em;color:var(--steel);
    border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;
    flex-shrink:0;transition:.2s;margin-bottom:-2px;
  }
  .ctab:hover{color:var(--navy);}
  .ctab.active{color:var(--brick);border-bottom-color:var(--brick);}

  /* ── CONTENT SECTIONS ── */
  .content-body{padding:60px 0;}
  .content-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;}
  .section-tag{color:var(--brick);font-family:'Oswald';font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:10px;}
  .section-tag::before{content:"";width:24px;height:2px;background:var(--brick);}
  .content-sec{margin-bottom:56px;scroll-margin-top:120px;}
  .content-sec:last-child{margin-bottom:0;}
  .content-sec h2{font-size:22px;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--stone);}

  /* ── BẢNG THÔNG SỐ KỸ THUẬT ── */
  /* header quan trọng nhất — đặt nổi bật */
  .spec-hero{
    background:var(--navy);padding:24px 28px;
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:var(--navy);margin-bottom:2px;
  }
  .sh-item{padding:20px 16px;text-align:center;border-right:1px solid rgba(255,255,255,.12);}
  .sh-item:last-child{border-right:none;}
  .sh-val{font-family:'Oswald';font-size:26px;font-weight:700;color:var(--brick);line-height:1;margin-bottom:4px;}
  .sh-lbl{font-size:11.5px;color:#a8bcd4;text-transform:uppercase;letter-spacing:.05em;}

  /* bảng chi tiết */
  .spec-table{width:100%;border-collapse:collapse;border:1px solid var(--line);}
  .spec-table thead tr{background:var(--stone);}
  .spec-table th{
    padding:12px 16px;font-family:'Oswald';font-size:12.5px;text-transform:uppercase;
    letter-spacing:.07em;color:var(--navy);font-weight:600;text-align:left;
    border-bottom:2px solid var(--line);
  }
  .spec-table th:not(:first-child){text-align:center;}
  .spec-table td{
    padding:12px 16px;font-size:14.5px;border-bottom:1px solid var(--line);
    vertical-align:middle;
  }
  .spec-table td:not(:first-child){text-align:center;}
  .spec-table tr:last-child td{border-bottom:none;}
  .spec-table tr:nth-child(even) td{background:rgba(243,241,237,.4);}
  .spec-table .param{color:var(--steel);font-size:13px;}
  .spec-table .val-good{color:var(--pass);font-weight:700;font-family:'Oswald';font-size:15px;}
  .spec-table .val-num{color:var(--navy);font-weight:700;font-family:'Oswald';font-size:15px;}
  .spec-table .unit{color:var(--steel);font-size:12px;}

  /* pass badge */
  .pass-badge{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--pass-bg);border:1px solid rgba(26,122,63,.3);
    color:var(--pass);font-size:12px;font-weight:700;padding:3px 9px;
  }

  /* so sánh chủng loại */
  .compare-table{width:100%;border-collapse:collapse;border:1px solid var(--line);}
  .compare-table th{
    padding:13px 16px;background:var(--navy);color:#fff;
    font-family:'Oswald';font-size:13px;text-transform:uppercase;letter-spacing:.05em;
    text-align:center;
  }
  .compare-table th:first-child{text-align:left;background:var(--navy-2);}
  .compare-table td{
    padding:12px 16px;border-bottom:1px solid var(--line);
    font-size:14px;text-align:center;
  }
  .compare-table td:first-child{text-align:left;background:var(--stone);font-weight:600;font-size:13.5px;}
  .compare-table tr:last-child td{border-bottom:none;}
  .compare-table .highlight-col{background:rgba(212,57,31,.05);}
  .compare-table th.highlight-col{background:var(--brick);}
  .val-yes{color:var(--pass);font-size:18px;}
  .val-no{color:#bbb;font-size:18px;}

  /* ── ỨNG DỤNG THỰC TẾ ── */
  .use-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .uc-item{
    display:flex;gap:14px;align-items:flex-start;
    padding:18px 20px;background:var(--stone);border-left:3px solid var(--brick);
  }
  .uc-ico{font-size:22px;flex-shrink:0;}
  .uc-body h4{font-size:14.5px;color:var(--navy);margin-bottom:4px;text-transform:none;letter-spacing:0;}
  .uc-body p{font-size:13.5px;color:var(--steel);line-height:1.5;}

  /* ── QUY TRÌNH SẢN XUẤT (mini) ── */
  .process-mini{display:flex;gap:0;position:relative;}
  .process-mini::before{
    content:"";position:absolute;top:20px;left:20px;right:20px;
    height:2px;background:var(--line);z-index:0;
  }
  .pm-step{flex:1;text-align:center;position:relative;z-index:1;padding:0 6px;}
  .pm-dot{
    width:40px;height:40px;border-radius:50%;background:var(--paper);
    border:2.5px solid var(--line);display:flex;align-items:center;justify-content:center;
    margin:0 auto 10px;font-size:17px;position:relative;z-index:1;transition:.2s;
  }
  .pm-step.done .pm-dot{border-color:var(--brick);background:var(--brick);}
  .pm-step.done .pm-dot::after{content:"✓";color:#fff;font-size:14px;font-weight:700;}
  .pm-label{font-family:'Oswald';font-size:12px;color:var(--navy);margin-bottom:2px;}
  .pm-sub{font-size:11px;color:var(--steel);}

  /* ── GALLERY ẢNH ĐẦY ĐỦ ── */
  .full-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
  .fg-item{
    position:relative;overflow:hidden;cursor:pointer;
    aspect-ratio:1;
  }
  .fg-item img{width:100%;height:100%;object-fit:cover;transition:.4s;}
  .fg-item:hover img{transform:scale(1.08);}
  .fg-item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
  .fg-overlay{
    position:absolute;inset:0;background:rgba(36,53,88,.45);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:.25s;font-size:28px;
  }
  .fg-item:hover .fg-overlay{opacity:1;}

  /* ── SIDEBAR ── */
  .prod-sidebar{position:sticky;top:120px;display:flex;flex-direction:column;gap:18px;}

  /* card tóm tắt */
  .sb-card{border:1px solid var(--line);overflow:hidden;}
  .sb-card-head{background:var(--navy);padding:16px 20px;}
  .sb-card-head h3{font-size:15px;color:#fff;text-transform:uppercase;letter-spacing:.03em;}
  .sb-card-head p{font-size:12px;color:#8a9fc0;margin-top:3px;text-transform:none;letter-spacing:0;}
  .sb-card-body{padding:0;}
  .sb-row{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);gap:8px;}
  .sb-row:last-child{border-bottom:none;}
  .sb-lbl{font-size:12px;color:var(--steel);text-transform:uppercase;letter-spacing:.05em;font-family:'Oswald';}
  .sb-val{font-size:14px;color:var(--ink);font-weight:600;text-align:right;}
  .sb-val.pass{color:var(--pass);}

  /* cert card */
  .cert-card{border:1px solid var(--line);}
  .cert-card-head{background:var(--stone);padding:14px 18px;border-bottom:1px solid var(--line);}
  .cert-card-head h4{font-family:'Oswald';font-size:13.5px;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;}
  .cert-items{padding:14px 18px;display:flex;flex-direction:column;gap:11px;}
  .ci-item{
    display:flex;align-items:center;gap:12px;
    padding:10px 14px;border:1px solid var(--line);
  }
  .ci-ico-wrap{
    width:36px;height:36px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:18px;
  }
  .ci-iso{background:rgba(36,53,88,.08);}
  .ci-std{background:rgba(26,122,63,.08);}
  .ci-hq{background:rgba(212,57,31,.07);}
  .ci-text-name{font-family:'Oswald';font-size:13px;color:var(--navy);font-weight:700;}
  .ci-text-desc{font-size:12px;color:var(--steel);margin-top:2px;}
  .ci-check{color:var(--pass);font-size:18px;margin-left:auto;flex-shrink:0;}

  /* download catalog */
  .dl-card{background:var(--navy);padding:22px 20px;text-align:center;}
  .dl-ico{font-size:32px;margin-bottom:10px;}
  .dl-card h4{font-size:15px;color:#fff;margin-bottom:6px;text-transform:none;letter-spacing:0;}
  .dl-card p{font-size:13px;color:#a8bcd4;margin-bottom:16px;}
  .dl-btn{
    display:block;background:var(--brick);color:#fff;font-family:'Oswald';
    font-weight:600;font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;
    padding:12px;transition:.2s;
  }
  .dl-btn:hover{background:var(--brick-dark);}

  /* CTA sidebar */
  .sb-cta{background:var(--brick);padding:24px 20px;text-align:center;}
  .sb-cta h4{font-size:16px;color:#fff;margin-bottom:6px;}
  .sb-cta p{font-size:13px;color:rgba(255,255,255,.8);margin-bottom:16px;text-transform:none;letter-spacing:0;}
  .sb-cta-btn{display:block;background:#fff;color:var(--brick);font-family:'Oswald';font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;padding:13px;transition:.2s;margin-bottom:8px;}
  .sb-cta-btn:hover{background:var(--brick-dark);color:#fff;}
  .sb-cta-btn2{display:block;border:1.5px solid rgba(255,255,255,.5);color:#fff;font-family:'Oswald';font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:11px;transition:.2s;}
  .sb-cta-btn2:hover{background:rgba(255,255,255,.1);}

  /* RELATED PRODUCTS */
  .related-section{background:var(--stone);padding:64px 0;}
  .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px;}
  .rp-card{background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:.2s;}
  .rp-card:hover{box-shadow:0 12px 30px rgba(36,53,88,.1);transform:translateY(-3px);}
  .rp-img{height:160px;overflow:hidden;}
  .rp-img img{width:100%;height:100%;object-fit:cover;transition:.4s;}
  .rp-card:hover .rp-img img{transform:scale(1.06);}
  .rp-body{padding:16px 18px;}
  .rp-cat{font-size:11px;color:var(--brick);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:5px;}
  .rp-name{font-family:'Oswald';font-size:16px;color:var(--navy);margin-bottom:8px;}
  .rp-spec{font-size:13px;color:var(--steel);}
  .rp-link{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
  .rp-link a{font-family:'Oswald';font-size:12.5px;color:var(--brick);font-weight:600;text-transform:uppercase;letter-spacing:.04em;transition:.15s;}

  /* CTA BOTTOM */
  .cta-bottom{background:var(--brick);padding:56px 0;}
  .cta-bottom .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
  .cta-bottom h2{color:#fff;font-size:26px;margin-bottom:8px;}
  .cta-bottom p{color:rgba(255,255,255,.85);font-size:15.5px;}
  .btn-white{border:1.5px solid rgba(255,255,255,.7);color:#fff;font-family:'Oswald';font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.04em;padding:14px 30px;transition:.2s;}
  .btn-white:hover{background:#fff;color:var(--brick);}

  /* FOOTER */
  footer{background:#0e1829;color:#9aa6bc;padding:64px 0 0;}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08);}
  .foot-logo{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
  .foot-logo img{width:40px;height:40px;object-fit:contain;}
  .foot-logo-text{font-family:'Oswald';font-size:19px;font-weight:700;color:#fff;}
  .foot-logo-text span{color:var(--brick);}
  footer p{font-size:14px;line-height:1.7;}
  footer h4{color:#fff;font-size:14px;letter-spacing:.06em;margin-bottom:18px;text-transform:uppercase;}
  footer ul{list-style:none;display:grid;gap:11px;}
  footer ul a{font-size:14px;transition:.2s;color:#9aa6bc;}
  footer ul a:hover{color:var(--brick);}
  .foot-ci{display:flex;gap:10px;font-size:14px;margin-bottom:12px;color:#9aa6bc;}
  .foot-bottom{display:flex;justify-content:space-between;padding:22px 0;font-size:13px;flex-wrap:wrap;gap:10px;}
  .foot-bottom a{color:var(--brick);}

  /* RESPONSIVE */
  @media(max-width:1024px){
    nav{display:none;}
    .prod-hero-inner{grid-template-columns:1fr;}
    .gallery-col{min-height:340px;}
    .content-layout{grid-template-columns:1fr;}
    .prod-sidebar{position:static;}
    .spec-hero{grid-template-columns:1fr 1fr;}
    .related-grid{grid-template-columns:1fr 1fr;}
    .full-gallery{grid-template-columns:1fr 1fr;}
    .fg-item:first-child{grid-column:span 2;aspect-ratio:16/9;}
    .use-case-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .quick-specs{grid-template-columns:1fr 1fr 1fr;}
  }
  @media(max-width:640px){
    .info-col{padding:28px 24px;}
    .spec-hero{grid-template-columns:1fr 1fr;}
    .related-grid{grid-template-columns:1fr 1fr;}
    .compare-table{font-size:13px;}
    .quick-specs{grid-template-columns:1fr 1fr 1fr;}
  }