/* =============================================================================
   THANG MÁY TÂM AN — HỆ THIẾT KẾ WEBSITE
   Bản viết lại 08/2026.

   Giữ NGUYÊN toàn bộ tên class của bản cũ, nên mọi trang PHP đổi diện mạo
   mà không phải sửa một dòng code nào.

   Hướng thiết kế: nền vôi đá sáng, xanh đen làm khối nhấn, cam thương hiệu
   chỉ dùng cho hành động. Bo góc rất nhỏ, đường kẻ mảnh, số liệu dùng font
   mono — cả site đọc như hồ sơ kỹ thuật của một nhà thầu, không như trang
   thương mại điện tử.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Be+Vietnam+Pro:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* ===== NỀN: xám khói trung tính, không ngả vàng ===== */
  --paper:      #FFFFFF;   /* nền sáng: trắng thật, không ngả xám */
  --stone:      #F0F0EE;   /* chỉ dùng cho ô nền phụ bên trong thẻ */
  --stone-hi:   #E2E2DE;
  --white:      #FFFFFF;

  /* ===== KHỐI TỐI: đen ánh xanh, dùng làm điểm tương phản mạnh ===== */
  --shaft:      #06080B;   /* nền tối: gần như đen tuyệt đối */
  --shaft-2:    #10151B;
  --shaft-3:    #1C232C;

  /* ===== CHỮ ===== */
  --ink:        #06080B;
  --body-text:  #333B43;
  --muted:      #6B747D;
  --on-dark:    #FFFFFF;
  --on-dark-2:  #A9B3BD;

  /* ===== ĐƯỜNG KẺ ===== */
  --rule:       #D3D3CD;
  --rule-2:     #06080B;             /* đường kẻ đậm cho khối cần nhấn */
  --rule-dark:  rgba(255,255,255,.16);

  /* ===== MÀU NHẤN — mặc định là cam thương hiệu =====
     Các trang giải pháp ghi đè bộ biến này bằng lớp .theme-* để mỗi trang
     có một sắc riêng, tránh nhìn nhầm trang nọ sang trang kia. */
  --accent:      #FF4D00;            /* bão hoà hơn để nổi trên cả nền trắng lẫn đen */
  --accent-hi:   #FF7A2E;
  --accent-ink:  #B83A00;
  --accent-soft: #FFE9DC;
  --accent-on:   #FFFFFF;   /* màu chữ đặt trên nền accent */

  /* Giữ tên cũ để không phá các style nội tuyến đang có trong PHP */
  --ember:      var(--accent);
  --ember-hi:   var(--accent-hi);
  --ember-ink:  var(--accent-ink);
  --ember-soft: var(--accent-soft);

  --ok:         #067A4E;
  --no:         #C0242A;
  --zalo:       #0068FF;

  --font-display:'Archivo','Be Vietnam Pro',system-ui,sans-serif;
  --font-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --r:6px; --r-lg:14px; --r-xl:20px;
  /* Đổ bóng nhiều lớp: một lớp sát viền cho cạnh rõ, một lớp xa cho chiều sâu */
  --shadow-sm:0 1px 2px rgba(11,13,16,.05), 0 1px 3px rgba(11,13,16,.05);
  --shadow-md:0 1px 2px rgba(11,13,16,.05), 0 12px 28px -12px rgba(11,13,16,.22);
  --shadow-lg:0 2px 4px rgba(11,13,16,.06), 0 30px 64px -24px rgba(11,13,16,.38);
  --shadow-img:0 2px 6px rgba(11,13,16,.08), 0 24px 56px -22px rgba(11,13,16,.34);
  --transition:all .2s ease;

  /* Tên biến cũ trong PHP */
  --primary:#0B0D10; --secondary:#151A20; --accent-hover:#FF7A2E;
  --gold:#C43F00; --gold-light:#FFEDE2; --bg-light:#F4F4F2; --bg-white:#FFFFFF;
  --text-dark:#0B0D10; --text-muted:#737B84; --border-color:#D7D7D1;
  --card:#FFFFFF; --card-hi:#E8E8E4; --line:#D7D7D1; --line-hi:#C4C4BD;
  --heading:#0B0D10; --steel:#737B84; --abyss:#0B0D10; --ember-deep:#C43F00;
  --radius:14px; --radius-sm:6px;
}

/* =============================================================================
   BỘ MÀU THEO CHỦ ĐỀ — mỗi trang giải pháp một sắc
   Đặt lớp .theme-* lên thẻ bao ngoài cùng của trang.
   ========================================================================== */
.theme-ember   { --accent:#FF4D00; --accent-hi:#FF7A2E; --accent-ink:#B83A00; --accent-soft:#FFE9DC; --accent-on:#FFFFFF; }
.theme-azure   { --accent:#0047FF; --accent-hi:#4A85FF; --accent-ink:#0038C7; --accent-soft:#E4EBFF; --accent-on:#FFFFFF; }
.theme-jade    { --accent:#009E6E; --accent-hi:#20C994; --accent-ink:#00764F; --accent-soft:#DFF6EE; --accent-on:#FFFFFF; }
.theme-violet  { --accent:#6D28D9; --accent-hi:#8B4DF0; --accent-ink:#54209F; --accent-soft:#F0E9FE; --accent-on:#FFFFFF; }
.theme-crimson { --accent:#E10E49; --accent-hi:#F5386B; --accent-ink:#AE0837; --accent-soft:#FFE8EE; --accent-on:#FFFFFF; }

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--paper); color:var(--body-text);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink);letter-spacing:-.022em;line-height:1.16;font-weight:700}

/* =========================================================================
   1. THANH THÔNG TIN + HEADER
   ========================================================================= */
.topbar{background:var(--shaft);color:var(--on-dark-2);font-size:13px;border-bottom:1px solid var(--rule-dark)}
.topbar-content{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:9px 0;flex-wrap:wrap}
.topbar a{color:var(--on-dark)}
.topbar a:hover{color:var(--accent-hi)}

header{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:100}
.header-main{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 0}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.025em}
.logo img{height:38px;width:auto}
.logo span{color:var(--accent-ink);font-size:10.5px;letter-spacing:.2em;font-weight:700}

.nav-menu{display:flex;align-items:center;gap:0}
.nav-menu a{
  font-size:14.5px;font-weight:600;color:var(--body-text);padding:9px 13px;
  white-space:nowrap;transition:var(--transition);position:relative;letter-spacing:-.005em;
}
.nav-menu a:hover{color:var(--ink)}
.nav-menu a.active{color:var(--ink)}
.nav-menu a.active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;background:var(--accent);
}

.header-cta{
  display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:var(--r);font-family:var(--font-mono);font-weight:700;
  font-size:14.5px;letter-spacing:-.03em;white-space:nowrap;transition:var(--transition);
}
.header-cta:hover{background:var(--accent);color:var(--accent-on)}
.mobile-menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:1px solid var(--rule);border-radius:var(--r);cursor:pointer;padding:0 11px}
.mobile-menu-toggle span{display:block;height:2px;background:var(--ink);transition:var(--transition)}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================================
   2. NÚT
   ========================================================================= */
.btn-cta,.btn-view-all,.btn-outline,.btn-contact-submit,.btn-side-submit,
.btn-submit-calc,.pd-submit,.portfolio-action-btn,.article-bottom-cta a{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:800;font-size:15.5px;letter-spacing:-.01em;
  padding:14px 28px;border-radius:var(--r);border:0;cursor:pointer;transition:var(--transition);
}
.btn-cta,.btn-submit-calc,.pd-submit,.btn-contact-submit,.btn-side-submit{background:var(--accent);color:var(--accent-on)}
.btn-cta:hover,.btn-submit-calc:hover,.pd-submit:hover,.btn-contact-submit:hover,.btn-side-submit:hover{background:var(--accent-hi)}
.btn-outline{background:transparent;border:1px solid currentColor;color:var(--on-dark)}
.btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-view-all,.portfolio-action-btn{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-view-all:hover,.portfolio-action-btn:hover{background:var(--ink);color:var(--paper)}

/* =========================================================================
   3. HERO SLIDER TRANG CHỦ
   ========================================================================= */
.hero-slider-section{background:var(--shaft)}
.heroSwiper{width:100%}
.swiper-slide{
  min-height:clamp(430px,54vw,600px);display:flex;align-items:center;
  background-size:cover;background-position:center;position:relative;
}
.slide-content{position:relative;z-index:2;max-width:730px;padding:60px 24px}
.slide-badge{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:22px;
}
.slide-badge::before{content:"";width:26px;height:2px;background:var(--accent)}
.swiper-slide h1{
  font-size:clamp(31px,4.6vw,54px);color:var(--on-dark);line-height:1.05;letter-spacing:-.035em;
  text-wrap:balance;
}
.highlight-text{color:var(--accent-hi);display:block;font-size:.62em;margin-top:12px;letter-spacing:-.02em}
.swiper-slide p{color:var(--on-dark-2);font-size:17px;margin-top:20px;max-width:560px}
.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.swiper-pagination{position:absolute;bottom:26px!important;z-index:5}
.swiper-pagination-bullet{background:var(--on-dark);opacity:.35;width:26px;height:3px;border-radius:0;transition:var(--transition)}
.swiper-pagination-bullet-active{background:var(--accent);opacity:1}

/* Dải số liệu chồng lên hero */
.stats-bar-overlap{
  display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);
  border:1px solid var(--rule);border-radius:var(--r-lg);margin-top:-42px;position:relative;z-index:10;
  box-shadow:var(--shadow-md);overflow:hidden;
}
.stat-item{padding:24px 26px;border-right:1px solid var(--rule)}
.stat-item:last-child{border-right:0}
.stat-item h3{font-family:var(--font-mono);font-size:22px;color:var(--ink);letter-spacing:-.04em;margin-bottom:5px;font-weight:700}
.stat-item p{font-size:13.5px;color:var(--muted);line-height:1.45}

/* =========================================================================
   4. TIÊU ĐỀ KHỐI
   ========================================================================= */
.section-title-box,.commitment-title-box{max-width:760px;margin-bottom:38px}
.section-title-box h2,.commitment-title-box h2{font-size:clamp(26px,3.3vw,38px);text-wrap:balance}
.section-title-box p,.commitment-title-box p{margin-top:13px;font-size:16.5px;color:var(--body-text)}
.commitment-tag,.tech-tag,.tech-tag-badge,.calc-badge,.article-cat-badge,
.product-cat-tag,.project-meta-badge,.location-badge{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px;
}
.commitment-tag::before,.calc-badge::before{content:"";width:26px;height:2px;background:var(--accent)}
.article-cat-badge,.product-cat-tag,.project-meta-badge,.location-badge{
  background:var(--white);border:1px solid var(--rule);padding:4px 11px;border-radius:100px;margin:0;letter-spacing:.08em;
}

/* =========================================================================
   5. LƯỚI SẢN PHẨM
   ========================================================================= */
.product-grid,.product-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-card,.product-box{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:var(--transition);
}
.product-card:hover,.product-box:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.img-box,.product-img-display{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone-hi)}
.img-box img,.product-img-display img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .img-box img{transform:scale(1.035)}
.product-info,.product-body{padding:20px;display:flex;flex-direction:column;flex-grow:1}
.product-info h3,.product-body h3{font-size:17px;line-height:1.26;margin-bottom:14px}
.product-info h3 a,.product-body h3 a{color:var(--ink)}
.product-subtitle{font-size:14.5px;color:var(--muted);margin-bottom:14px}

/* Bảng thông số trong thẻ sản phẩm */
.tech-spec-table{margin-bottom:16px;font-size:13.5px}
.tech-spec-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule)}
.tech-spec-row:first-child{border-top:1px solid var(--rule)}
.tech-spec-row span:first-child,.spec-label,.pd-spec-label{color:var(--muted)}
.tech-spec-row span:last-child,.spec-value,.pd-spec-value{
  font-family:var(--font-mono);font-weight:700;color:var(--ink);letter-spacing:-.03em;
  text-align:right;font-variant-numeric:tabular-nums;
}
.tech-spec-empty,.pd-spec-empty{text-align:center;color:var(--muted);padding:10px 0;font-size:13px}

/* =========================================================================
   6. KHỐI CAM KẾT
   ========================================================================= */
.commitment-section{background:var(--stone);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:70px 0}
.commitment-grid,.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.commitment-card,.why-card,.info-card,.vm-card{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px 24px;transition:var(--transition);
}
.commitment-card:hover,.why-card:hover{box-shadow:var(--shadow-md)}
.commitment-card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.commitment-icon-box,.vm-icon,.contact-info-icon{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);border:1px solid var(--rule);border-radius:var(--r);font-size:20px;flex:none;
}
.commitment-num{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-ink)}
.commitment-card h4,.why-card h4,.vm-card h3{font-size:16.5px;margin-bottom:9px;line-height:1.3}
.commitment-card p,.why-card p,.vm-card p{font-size:14.5px;line-height:1.55;color:var(--body-text)}

/* =========================================================================
   7. KHỐI TÍNH DỰ TOÁN
   ========================================================================= */
.calculator-box{background:var(--shaft);border-radius:var(--r-lg);overflow:hidden;margin:70px 0;box-shadow:var(--shadow-lg)}
.calc-grid{display:grid;grid-template-columns:1fr 1.05fr}
.calc-info{padding:46px 42px;color:var(--on-dark-2)}
.calc-info h2{color:var(--on-dark);font-size:clamp(24px,2.8vw,32px)}
.calc-info p{margin-top:15px;font-size:16px}
.calc-form{padding:38px 42px 42px;background:var(--shaft-2);border-left:1px solid var(--rule-dark)}
.form-row-grid,.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.form-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.form-group-single{margin-top:0}
.p-input,.side-input,.pd-input,.form-input,.form-textarea{
  width:100%;padding:14px 15px;margin-bottom:11px;border-radius:var(--r);
  border:1px solid var(--rule);background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:16px;transition:var(--transition);
}
.p-input::placeholder,.side-input::placeholder,.pd-input::placeholder,.form-input::placeholder{color:#9AA3AB}
.p-input:focus,.side-input:focus,.pd-input:focus,.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--accent)}
.form-textarea{min-height:120px;resize:vertical}
.form-label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.req{color:var(--no)}
/* Ô nhập nằm trên nền tối */
.calc-form .p-input,.calc-form .p-select,.side-widget-form .side-input{
  background:rgba(255,255,255,.07);border-color:var(--rule-dark);color:var(--on-dark);
}
.calc-form .p-input::placeholder,.side-widget-form .side-input::placeholder{color:#8494A0}
.calc-form .p-select option{background:var(--shaft-2);color:var(--on-dark)}
.btn-submit-calc{width:100%;padding:17px;margin-top:6px}

/* =========================================================================
   8. BANNER ĐẦU TRANG PHỤ
   ========================================================================= */
.page-banner,.product-banner,.contact-hero-banner,.article-header-banner,
.project-hero-banner,.product-detail-banner,.project-detail-header,.tech-banner{
  background:var(--shaft);color:var(--on-dark-2);padding:58px 0;border-bottom:1px solid var(--rule-dark);
}
.page-banner h1,.product-banner h1,.contact-hero-banner h1,.article-header-banner h1,
.project-hero-banner h1,.product-detail-banner h1,.tech-banner h1{
  color:var(--on-dark);font-size:clamp(28px,3.6vw,42px);text-wrap:balance;
}
.page-banner p,.product-banner p,.contact-hero-banner p,.project-hero-banner p,.tech-banner p{margin-top:13px;font-size:16.5px;max-width:680px}
.breadcrumb{font-size:13.5px;color:var(--muted);padding:18px 0}
.breadcrumb a{color:var(--body-text)}
.breadcrumb a:hover{color:var(--accent-ink)}

/* =========================================================================
   9. BỘ LỌC DANH MỤC
   ========================================================================= */
.filter-container,.cat-filter-bar{display:flex;gap:9px;flex-wrap:wrap;padding:26px 0;border-bottom:1px solid var(--rule);margin-bottom:34px}
.filter-btn{
  padding:9px 18px;border:1px solid var(--rule);border-radius:100px;background:var(--white);
  font-size:14.5px;font-weight:600;color:var(--body-text);transition:var(--transition);
}
.filter-btn:hover{border-color:var(--ink);color:var(--ink)}
.filter-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* =========================================================================
   10. DỰ ÁN / TIN TỨC
   ========================================================================= */
.featured-projects-grid,.portfolio-grid,.article-stream{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.home-project-card,.featured-card,.article-item-card{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;
}
.home-project-card:hover,.featured-card:hover,.article-item-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.home-project-img,.featured-img-box,.portfolio-img-wrapper,.article-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--stone-hi)}
.home-project-img img,.featured-img-box img,.portfolio-img-wrapper img,.article-thumb img{width:100%;height:100%;object-fit:cover}
.featured-content,.portfolio-body{padding:22px}
.portfolio-title,.project-title,.article-main-title{font-size:19px;line-height:1.28;margin-bottom:10px}
.portfolio-summary,.project-summary-text{font-size:15px;color:var(--body-text);line-height:1.55}
.article-meta,.article-meta-bar,.related-item-date{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);letter-spacing:-.01em}
.article-detail-layout,.project-body-grid,.tech-container,.contact-grid,.pd-layout{
  display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start;padding:54px 0;
}
.article-featured-image,.project-featured-image{border-radius:var(--r-lg);overflow:hidden;margin-bottom:28px;border:1px solid var(--rule)}
.article-body-content,.article-body,.main-content{font-size:17.5px;max-width:760px}
.article-body-content h2,.article-body h2{font-size:clamp(23px,2.8vw,30px);margin:36px 0 14px}
.article-body-content h3,.article-body h3{font-size:19.5px;margin:26px 0 9px}
.article-body-content p,.article-body p{margin-bottom:16px}
.article-body-content ul,.article-body ul{margin:0 0 18px 20px;list-style:disc;display:grid;gap:9px}
.article-body-content li::marker{color:var(--accent)}
.article-body-content img{border-radius:var(--r-lg);margin:22px 0;border:1px solid var(--rule)}
.article-body-content blockquote,.tech-takeaway-box{
  border-left:3px solid var(--accent);background:var(--accent-soft);padding:20px 24px;margin:24px 0;border-radius:0 var(--r) var(--r) 0;color:var(--ink);
}
.article-bottom-cta,.project-bottom-cta{
  background:var(--stone);border:1px solid var(--rule);border-radius:var(--r-lg);padding:32px;margin-top:40px;text-align:center;
}

/* Cột phụ */
.article-sidebar,.tech-sidebar{display:grid;gap:20px;position:sticky;top:96px}
.sidebar-box,.sidebar-widget-card,.side-widget,.info-card{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px;
}
.sidebar-title,.sidebar-widget-title,.side-widget-title,.contact-card-title,.pd-summary-title,.pd-optgroup-title{
  font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--ink);
  letter-spacing:.02em;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.side-widget-title-sm{font-size:13.5px;font-weight:700;color:var(--muted);margin-bottom:10px}
.side-divider{height:1px;background:var(--rule);margin:18px 0}
.related-projects-list,.related-item-block{display:grid;gap:14px}
.related-project-item,.related-item-link{
  display:block;padding-bottom:14px;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink);font-weight:600;line-height:1.4;
}
.related-project-item:hover,.related-item-link:hover{color:var(--accent-ink)}

/* Thẻ hotline kỹ sư — dùng nền tối để nổi trong cột phụ */
.hotline-engineer-card,.tech-hotline-card,.footer-hotline-box{
  background:var(--shaft);color:var(--on-dark-2);border-radius:var(--r-lg);padding:24px;border:0;
}
.hotline-engineer-card h4,.tech-hotline-card h4{color:var(--on-dark);font-size:16px;margin-bottom:10px}
.hotline-link{
  display:block;font-family:var(--font-mono);font-size:23px;font-weight:700;color:var(--accent-hi);
  letter-spacing:-.04em;margin-top:8px;
}
.side-widget-form{background:var(--shaft);border-radius:var(--r-lg);padding:24px;border:0}
.side-widget-form .side-widget-title{color:var(--on-dark);border-bottom-color:var(--rule-dark)}
.btn-side-submit{width:100%;padding:15px}

/* =========================================================================
   11. TRANG GIỚI THIỆU
   ========================================================================= */
.about-story-grid,.vision-mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:60px 0}
.vision-mission-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.about-img-box{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule)}
.about-experience-badge{
  position:absolute;left:0;bottom:0;background:var(--accent);color:var(--accent-on);
  padding:18px 24px;font-family:var(--font-display);font-weight:800;font-size:17px;
}
.cert-badge,.footer-cert-badges span{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  padding:7px 14px;border:1px solid var(--rule);border-radius:100px;background:var(--white);color:var(--ink);
}

/* =========================================================================
   12. TRANG LIÊN HỆ
   ========================================================================= */
.contact-info-list{display:grid;gap:18px}
.contact-info-item{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.contact-info-item strong{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.contact-info-item span,.contact-info-item a{font-size:15px;color:var(--body-text)}
.contact-form-body{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:32px}
.contact-process-box{background:var(--stone);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px;margin-top:24px}
.contact-alert{padding:15px 18px;border-radius:var(--r);margin:24px 0;font-size:15px}
.alert-success{background:#E7F5EC;border-left:3px solid var(--ok);color:#0F5132}
.alert-error{background:#FBE9E7;border-left:3px solid var(--no);color:#7F1D1D}

/* =========================================================================
   13. CHI TIẾT SẢN PHẨM
   ========================================================================= */
.pd-title{font-size:clamp(26px,3.2vw,36px);margin-bottom:14px}
.pd-desc{font-size:17px;color:var(--body-text);margin-bottom:26px}
.pd-media{display:grid;gap:14px}
.pd-stage{position:relative;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--stone-hi);aspect-ratio:4/3}
.pd-stage img,.pd-stage video{width:100%;height:100%;object-fit:cover}
.pd-stage-caption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 18px 13px;
  background:linear-gradient(to top,rgba(14,26,36,.85),transparent);color:var(--on-dark);font-size:13.5px;font-weight:600;
}
.pd-thumbs-wrap{position:relative}
.pd-thumbs{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:4px}
.pd-thumbs::-webkit-scrollbar{height:4px}
.pd-thumbs::-webkit-scrollbar-thumb{background:var(--rule);border-radius:2px}
.pd-thumbs img,.pd-thumb-blank{
  width:88px;height:70px;object-fit:cover;border-radius:var(--r);border:1px solid var(--rule);
  cursor:pointer;flex:none;transition:var(--transition);background:var(--stone-hi);
}
.pd-thumbs img:hover,.pd-thumbs img.active{border-color:var(--accent);border-width:2px}
.pd-thumb-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;
  background:var(--white);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow-sm);z-index:3;
}
.pd-thumb-nav.prev{left:-8px}
.pd-thumb-nav.next{right:-8px}
.pd-thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;pointer-events:none}

.pd-specs-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px;margin-top:28px}
.pd-spec-table{width:100%;border-collapse:collapse;font-size:15px}
.pd-spec-table tr{border-bottom:1px solid var(--rule)}
.pd-spec-table td{padding:11px 0}
.pd-spec-table tr.is-group td{
  font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;padding-top:20px;border-bottom:1px solid var(--ink);
}
.pd-spec-table .pd-spec-value{text-align:right}

/* Chọn nội thất cabin */
.pd-config{background:var(--stone);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px;margin-top:28px}
.pd-config-head{margin-bottom:20px}
.pd-optgroup{margin-bottom:24px}
.pd-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.pd-swatch{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--white);cursor:pointer;transition:var(--transition)}
.pd-swatch:hover{border-color:var(--ink)}
.pd-swatch.picked{border-color:var(--accent);border-width:2px}
.pd-swatch-img,.pd-swatch-blank{aspect-ratio:1/1;object-fit:cover;width:100%;background:var(--stone-hi)}
.pd-swatch-body{padding:9px 10px}
.pd-swatch-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.pd-swatch-note{font-size:11.5px;color:var(--muted);margin-top:2px}

.pd-right{position:sticky;top:96px;display:grid;gap:20px}
.pd-quote{background:var(--shaft);border-radius:var(--r-lg);padding:28px;color:var(--on-dark-2)}
.pd-quote .pd-summary-title{color:var(--on-dark);border-bottom-color:var(--rule-dark)}
.pd-summary{font-size:14.5px;line-height:1.6}
.pd-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd-quote .pd-input{background:rgba(255,255,255,.07);border-color:var(--rule-dark);color:var(--on-dark)}
.pd-quote .pd-input::placeholder{color:#8494A0}
.pd-submit{width:100%;padding:16px}

/* =========================================================================
   14. CHÂN TRANG
   ========================================================================= */
footer{background:var(--shaft);color:var(--on-dark-2);padding:58px 0 0;margin-top:80px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:44px}
.footer-title{
  font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--on-dark);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;
}
.footer-links{display:grid;gap:11px}
.footer-links a{color:var(--on-dark-2);font-size:14.5px}
.footer-links a:hover{color:var(--accent-hi)}
.footer-hotline-box{background:rgba(255,255,255,.05);border:1px solid var(--rule-dark)}
.footer-cert-badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.footer-cert-badges span{background:rgba(255,255,255,.06);border-color:var(--rule-dark);color:var(--on-dark);font-size:12px}
.footer-bottom{border-top:1px solid var(--rule-dark);padding:22px 0;font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* =========================================================================
   15. NÚT NỔI GỌI / ZALO
   ========================================================================= */
.floating-contact{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:11px;z-index:99}
.btn-float{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;box-shadow:var(--shadow-md);transition:var(--transition);
}
.btn-float:hover{transform:scale(1.07)}
.btn-float-phone{background:var(--accent);color:var(--accent-on);animation:pulse-phone 2.4s infinite}
.btn-float-zalo{background:var(--zalo);color:#fff}
@keyframes pulse-phone{
  0%,100%{box-shadow:0 0 0 0 rgba(255,101,0,.42),var(--shadow-md)}
  50%{box-shadow:0 0 0 13px rgba(255,101,0,0),var(--shadow-md)}
}

.empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:16px}

/* =========================================================================
   16. RESPONSIVE
   ========================================================================= */
@media (max-width:1100px){
  .article-detail-layout,.project-body-grid,.tech-container,.contact-grid,.pd-layout{grid-template-columns:1fr;gap:36px}
  .article-sidebar,.tech-sidebar,.pd-right{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:1180px){
  .nav-menu{
    position:fixed;top:0;right:-100%;width:min(300px,82vw);height:100vh;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:88px 20px 20px;
    box-shadow:-12px 0 40px rgba(14,26,36,.16);transition:right .28s ease;z-index:99;
  }
  .nav-menu.active{right:0}
  .nav-menu a{padding:15px 12px;border-bottom:1px solid var(--rule);border-radius:0;font-size:16px}
  .nav-menu a.active::after{left:12px;right:auto;width:20px;bottom:10px}
  .mobile-menu-toggle{display:flex;position:relative;z-index:100}
  .product-grid,.product-list-grid,.featured-projects-grid,.portfolio-grid,.article-stream{grid-template-columns:repeat(2,1fr)}
  .commitment-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
  .stats-bar-overlap{grid-template-columns:1fr 1fr;margin-top:-26px}
  .stat-item:nth-child(2n){border-right:0}
  .stat-item:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .calc-grid{grid-template-columns:1fr}
  .calc-form{border-left:0;border-top:1px solid var(--rule-dark)}
  .about-story-grid{grid-template-columns:1fr;gap:28px}
  .vision-mission-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .container{padding:0 18px}
  .topbar-content{justify-content:center;font-size:12px;gap:10px}
  .topbar-content > div:first-child{display:none}
  .calc-info,.calc-form{padding:30px 22px}
  .calculator-box{margin:44px 0}
  .commitment-section{padding:48px 0}
  .product-grid,.product-list-grid,.featured-projects-grid,.portfolio-grid,.article-stream{grid-template-columns:1fr;gap:16px}
  .commitment-grid,.why-grid{grid-template-columns:1fr}
  .form-row-grid,.form-row-2,.form-row-3,.pd-form-row{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions a{width:100%}
  .slide-content{padding:44px 18px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .article-body-content,.article-body,.main-content{font-size:16.5px}
  .floating-contact{bottom:16px;right:16px}
  .btn-float{width:48px;height:48px}
  .stats-bar-overlap{margin-top:0;border-radius:0;border-left:0;border-right:0}
  .page-banner,.product-banner,.contact-hero-banner,.article-header-banner,
  .project-hero-banner,.product-detail-banner,.tech-banner{padding:40px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* =========================================================================
   17. BỔ SUNG CHO CHÂN TRANG (markup dùng li + span.icon)
   ========================================================================= */
footer .contact-info-list li{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start;font-size:14px;line-height:1.55}
footer .contact-info-list .icon{font-size:15px;opacity:.75;line-height:1.5}
footer .contact-info-list strong{color:var(--on-dark);font-weight:600}
.footer-hotline-box{margin-top:18px;padding:18px 20px;border-radius:var(--r-lg)}
.footer-hotline-box small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;color:var(--on-dark-2);margin-bottom:7px}
.footer-hotline-box a{
  font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--accent-hi);
  letter-spacing:-.045em;display:inline-block;
}
.footer-links a{display:inline-block}
footer .footer-grid > div > p{font-size:14.5px;line-height:1.65}

/* =========================================================================
   18. KHỐI MẪU THANG MÁY TRÊN PAGE ADS
   Dùng chung class với landing.css, đặt ở đây để trang nào của website
   cũng nhúng lại được khối này.
   ========================================================================= */
.showcase-hero{
  display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin-bottom:22px;
}
.showcase-hero .sh-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--stone-hi)}
.showcase-hero .sh-img img{width:100%;height:100%;object-fit:cover}
.sh-count{
  position:absolute;left:14px;bottom:14px;background:rgba(14,26,36,.86);color:var(--on-dark);
  padding:6px 13px;border-radius:100px;font-size:12px;font-weight:600;
}
.showcase-hero .sh-body{padding:32px 30px;display:flex;flex-direction:column}
.showcase-hero h3{font-size:24px;line-height:1.2;margin-bottom:8px}
.sh-lead{font-size:15.5px;color:var(--body-text);margin-bottom:20px}
.sh-strip{display:flex;gap:8px;margin-top:auto;padding-top:18px}
.sh-strip img{width:74px;height:60px;object-fit:cover;border-radius:var(--r);border:1px solid var(--rule);flex:none}
.select-highlight{border-color:var(--accent)!important;background:var(--accent-soft)!important}

/* =============================================================================
   19. TRANG CHỦ — BỐ CỤC "GIẾNG THANG"
   Sáu tầng nội dung, số hiệu tầng chạy dọc lề trái như bảng hiển thị trong
   cabin. Đây là điểm nhận dạng của trang, mọi thứ khác giữ im lặng.
   ========================================================================== */

/* --- Hero --- */
.hp-hero{background:var(--paper);border-bottom:1px solid var(--rule);position:relative}
/* Trang chủ cố ý dùng hero NỀN SÁNG, ngược hẳn với các trang giải pháp dùng
   hero nền tối — nhìn là biết đang ở trang chủ hay trang giải pháp. */
.hp-hero::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
}
.hp-hero-in{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1fr .88fr;gap:56px;align-items:center;min-height:min(70vh,560px);
}
.hp-hero-text{padding:56px 0}
.hp-eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:24px;
}
.hp-eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}
.hp-hero h1{font-size:clamp(33px,4.8vw,58px);line-height:1.03;letter-spacing:-.04em;text-wrap:balance}
.hp-hero-text > p{margin-top:22px;font-size:17.5px;max-width:540px}
.hp-hero-act{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap}
.hp-call{display:block;line-height:1.2}
.hp-call small{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}
.hp-call b{font-family:var(--font-mono);font-size:25px;font-weight:700;color:var(--ink);letter-spacing:-.05em}
.hp-hero-img{align-self:stretch;overflow:hidden;background:var(--stone-hi);border-left:1px solid var(--rule)}
.hp-hero-img img{width:100%;height:100%;object-fit:cover;min-height:340px}

/* --- Dải bốn con số --- */
.hp-rail{background:var(--shaft);color:var(--on-dark-2);border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)}
.hp-rail-in{display:grid;grid-template-columns:repeat(4,1fr)}
.hp-rail-in > div{padding:22px 28px 22px 0;border-right:1px solid var(--rule-dark)}
.hp-rail-in > div:not(:first-child){padding-left:28px}
.hp-rail-in > div:last-child{border-right:0;padding-right:0}
.hp-rail-in b{
  font-family:var(--font-mono);font-size:29px;font-weight:700;color:var(--on-dark);
  letter-spacing:-.055em;display:block;line-height:1;
}
.hp-rail-in b i{font-family:var(--font-body);font-style:normal;font-size:14px;font-weight:600;color:var(--accent-hi);margin-left:3px;letter-spacing:0}
.hp-rail-in span{font-size:13px;display:block;margin-top:8px;line-height:1.4}

/* --- Giếng thang: đường trục + số tầng --- */
.hp-shaft{position:relative}
.hp-floor{display:grid;grid-template-columns:96px 1fr;gap:0;padding:72px 0;border-bottom:1px solid var(--rule)}
.hp-floor:last-child{border-bottom:0}
.hp-floor-no{position:relative}
.hp-floor-no::before{        /* đường trục dọc chạy suốt tầng */
  content:"";position:absolute;left:15px;top:0;bottom:-72px;width:1px;background:var(--rule);
}
.hp-floor:last-child .hp-floor-no::before{bottom:0}
.hp-floor-no span{
  position:sticky;top:110px;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:2px;background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:-.04em;
}
.hp-floor-body{min-width:0;padding-left:8px}

.hp-head{max-width:780px;margin-bottom:34px;position:relative}
.hp-head h2{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.035em;text-wrap:balance}
.hp-head p{margin-top:14px;font-size:17px}
.hp-more{
  display:inline-block;margin-top:16px;font-size:15px;font-weight:700;color:var(--accent-ink);
  border-bottom:1px solid currentColor;padding-bottom:2px;
}

/* --- Tầng 01: ba tình huống nhà --- */
.hp-sit{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.hp-sit-card{padding:28px 26px 26px;border-right:1px solid var(--rule);display:flex;flex-direction:column}
.hp-sit-card:last-child{border-right:0}
.hp-sit-n{
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-ink);
  display:block;margin-bottom:14px;
}
.hp-sit-card h3{font-size:20px;letter-spacing:-.028em;margin-bottom:8px}
.hp-sit-q{font-size:14.5px;color:var(--muted);font-style:italic;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.hp-sit-a{font-size:15px;line-height:1.6;flex-grow:1}
.hp-sit-go{
  display:inline-block;margin-top:20px;font-size:14.5px;font-weight:700;color:var(--accent-ink);
  align-self:flex-start;border-bottom:1px solid transparent;padding-bottom:2px;transition:var(--transition);
}
.hp-sit-go:hover{border-bottom-color:currentColor}

/* --- Tầng 03: lưới sản phẩm --- */
.hp-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hp-prod{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column}
.hp-prod:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.hp-prod-img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone-hi)}
.hp-prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hp-prod:hover .hp-prod-img img{transform:scale(1.035)}
.hp-prod-body{padding:20px;display:flex;flex-direction:column;flex-grow:1}
.hp-prod-cat{
  display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);
  border:1px solid var(--rule);padding:3px 10px;border-radius:100px;margin-bottom:11px;
}
.hp-prod h3{font-size:17px;line-height:1.26;margin-bottom:14px}
.hp-prod h3 a{color:var(--ink)}
.hp-prod-spec{font-size:13.5px;margin-top:auto}
.hp-prod-spec > div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule)}
.hp-prod-spec > div:first-child{border-top:1px solid var(--rule)}
.hp-prod-spec dt{color:var(--muted)}
.hp-prod-spec dd{font-family:var(--font-mono);font-weight:700;color:var(--ink);letter-spacing:-.03em;text-align:right}

/* --- Tầng 05: công trình --- */
.hp-proj{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hp-proj-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;transition:var(--transition);display:block}
.hp-proj-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.hp-proj-img{aspect-ratio:16/11;overflow:hidden;background:var(--stone-hi)}
.hp-proj-img img{width:100%;height:100%;object-fit:cover}
.hp-proj-body{padding:20px}
.hp-proj-body h3{font-size:17.5px;line-height:1.28;margin-bottom:8px}
.hp-proj-body p{font-size:14.5px;color:var(--body-text);line-height:1.55}
.hp-empty{
  background:var(--stone);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:30px 32px;max-width:760px;
}
.hp-empty p{font-size:16px;margin-bottom:12px}
.hp-empty p:last-child{margin-bottom:0}
.hp-empty strong{color:var(--ink)}
.hp-empty a{color:var(--accent-ink);font-weight:700;font-family:var(--font-mono);letter-spacing:-.03em}

/* --- Tầng 06: vì sao rẻ + thừa nhận điểm yếu --- */
.hp-why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.hp-why > div{padding:24px 26px 24px 0;border-right:1px solid var(--rule)}
.hp-why > div:not(:first-child){padding-left:26px}
.hp-why > div:last-child{border-right:0;padding-right:0}
.hp-why b{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.024em;display:block;margin-bottom:9px}
.hp-why p{font-size:14.5px;line-height:1.58}

.hp-honest{
  background:var(--shaft);color:var(--on-dark-2);border-radius:var(--r-lg);
  padding:34px 36px;margin-top:34px;
}
.hp-honest h3{color:var(--on-dark);font-size:20px;margin-bottom:14px;letter-spacing:-.026em}
.hp-honest p{font-size:16px;margin-bottom:14px}
.hp-honest p:last-of-type{margin-bottom:0}
.hp-legal{
  display:grid;grid-template-columns:auto auto 1fr;gap:26px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--rule-dark);font-size:13.5px;
}
.hp-legal b{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;font-family:var(--font-body);
}
.hp-legal span{color:var(--on-dark)}

/* --- Khối dự toán cuối trang --- */
.hp-cta{background:var(--stone);border-top:1px solid var(--rule);padding:70px 0}
.hp-cta-in{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:start}
.hp-cta-text h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.035em;text-wrap:balance}
.hp-cta-text > p{margin-top:15px;font-size:17px;max-width:520px}
.hp-cta-list{margin-top:26px;display:grid;gap:11px}
.hp-cta-list li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:15.5px;color:var(--ink)}
.hp-cta-list li::before{content:"";width:9px;height:9px;margin-top:8px;background:var(--accent);clip-path:polygon(0 0,100% 50%,0 100%)}
.hp-form{background:var(--shaft);border-radius:var(--r-lg);padding:30px 28px 26px;box-shadow:var(--shadow-lg)}
.hp-form h3{color:var(--on-dark);font-size:21px;margin-bottom:20px;letter-spacing:-.026em}
.hp-form .p-input{background:rgba(255,255,255,.07);border-color:var(--rule-dark);color:var(--on-dark)}
.hp-form .p-input::placeholder{color:#8494A0}
.hp-form select.p-input option{background:var(--shaft-2);color:var(--on-dark)}
.hp-form-note{margin-top:14px;font-size:13.5px;color:var(--on-dark-2);text-align:center}
.hp-form-note a{color:var(--accent-hi);font-weight:700}
.sr{position:absolute;left:-9999px}

/* --- Responsive --- */
@media (max-width:1000px){
  .hp-hero-in{grid-template-columns:1fr;gap:0;min-height:0}
  .hp-hero-text{padding:40px 0 34px}
  .hp-hero-img{border-left:0;border-top:1px solid var(--rule);margin:0 -24px}
  .hp-hero-img img{min-height:0;aspect-ratio:16/9}
  .hp-rail-in{grid-template-columns:1fr 1fr}
  .hp-rail-in > div{padding:18px 20px 18px 0}
  .hp-rail-in > div:nth-child(2n){border-right:0;padding-left:20px;padding-right:0}
  .hp-rail-in > div:nth-child(-n+2){border-bottom:1px solid var(--rule-dark)}
  .hp-sit{grid-template-columns:1fr}
  .hp-sit-card{border-right:0;border-bottom:1px solid var(--rule)}
  .hp-sit-card:last-child{border-bottom:0}
  .hp-prod-grid,.hp-proj{grid-template-columns:repeat(2,1fr)}
  .hp-why{grid-template-columns:1fr}
  .hp-why > div{border-right:0;border-bottom:1px solid var(--rule);padding:20px 0}
  .hp-why > div:not(:first-child){padding-left:0}
  .hp-why > div:last-child{border-bottom:0}
  .hp-cta-in{grid-template-columns:1fr;gap:34px}
  .hp-legal{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
  .hp-floor{grid-template-columns:1fr;padding:44px 0}
  .hp-floor-no::before{display:none}
  .hp-floor-no span{position:static;margin-bottom:16px}
  .hp-floor-body{padding-left:0}
  .hp-prod-grid,.hp-proj{grid-template-columns:1fr;gap:16px}
  .hp-hero-act{gap:18px}
  .hp-hero-act .btn-cta{width:100%}
  .hp-honest,.hp-empty{padding:24px 22px}
  .hp-cta{padding:46px 0}
  .hp-form{padding:24px 20px}
}

/* =============================================================================
   20. TRANG SẢN PHẨM
   ========================================================================== */
.sp-top{background:var(--paper);border-bottom:1px solid var(--rule);padding-bottom:0}
.sp-crumb{font-size:13.5px;color:var(--muted);padding:20px 0 0}
.sp-crumb a{color:var(--body-text)}
.sp-crumb a:hover{color:var(--accent-ink)}
.sp-crumb span{margin:0 7px;opacity:.5}
.sp-top-grid{display:grid;grid-template-columns:1fr .78fr;gap:52px;align-items:start;padding:32px 0 40px}
.sp-top-grid h1{font-size:clamp(28px,3.8vw,44px);letter-spacing:-.038em;text-wrap:balance}
.sp-lead{margin-top:16px;font-size:17.5px;max-width:560px}
.sp-best{margin-top:14px;font-size:15.5px;color:var(--body-text);max-width:560px}
.sp-best strong{color:var(--ink)}

/* Dải thông số của công nghệ, đặt cạnh tiêu đề */
.sp-spec-rail{border-top:1px solid var(--ink);background:var(--white);border-radius:0 0 var(--r-lg) var(--r-lg)}
.sp-spec-rail > div{display:flex;justify-content:space-between;gap:18px;padding:11px 16px;border-bottom:1px solid var(--rule);font-size:14px}
.sp-spec-rail > div:last-child{border-bottom:0}
.sp-spec-rail dt{color:var(--muted);flex:none}
.sp-spec-rail dd{color:var(--ink);text-align:right}
.sp-spec-rail dd.num{font-family:var(--font-mono);font-weight:700;letter-spacing:-.03em}
.sp-spec-rail.wide{display:grid;grid-template-columns:repeat(2,1fr);margin-top:22px;border:1px solid var(--rule);border-top:1px solid var(--ink);border-radius:var(--r-lg)}
.sp-spec-rail.wide > div:nth-child(odd){border-right:1px solid var(--rule)}

/* Hàng chuyển danh mục — kiểu tab kẻ chân, không phải nút bo tròn */
.sp-tabs{display:flex;gap:0;overflow-x:auto}
.sp-tabs a{
  padding:14px 22px;font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent;transition:var(--transition);
}
.sp-tabs a:first-child{padding-left:0}
.sp-tabs a:hover{color:var(--ink)}
.sp-tabs a.on{color:var(--ink);border-bottom-color:var(--accent)}

.sp-group{padding:56px 0;border-bottom:1px solid var(--rule)}
.sp-group:last-child{border-bottom:0}
.sp-group-head{max-width:820px;margin-bottom:34px}
.sp-group-head h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.034em}
.sp-group-head > p{margin-top:12px;font-size:16.5px}

@media (max-width:1000px){
  .sp-top-grid{grid-template-columns:1fr;gap:28px;padding:26px 0 32px}
  .sp-spec-rail{border-radius:var(--r-lg);border:1px solid var(--rule);border-top:1px solid var(--ink)}
}
@media (max-width:640px){
  .sp-spec-rail.wide{grid-template-columns:1fr}
  .sp-spec-rail.wide > div:nth-child(odd){border-right:0}
  .sp-tabs a{padding:12px 16px;font-size:14.5px}
  .sp-group{padding:36px 0}
}

/* --- Tầng 06: quy trình 5 bước + cam kết --- */
.hp-steps{counter-reset:hs;border-top:1px solid var(--ink)}
.hp-steps li{
  display:grid;grid-template-columns:52px 1fr 160px;gap:24px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--rule);
}
.hp-steps li::before{
  counter-increment:hs;content:"0" counter(hs);
  font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent-ink);padding-top:3px;
}
.hp-steps b{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.026em;display:block;margin-bottom:6px}
.hp-steps p{font-size:15px;line-height:1.58;max-width:620px}
.hp-step-cost{
  font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--ink);
  letter-spacing:-.03em;text-align:right;padding-top:4px;
}
.hp-commit{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:36px;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.hp-commit > div{padding:24px 26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hp-commit > div:nth-child(2n){border-right:0}
.hp-commit > div:nth-last-child(-n+2){border-bottom:0}
.hp-commit b{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.024em;display:block;margin-bottom:8px}
.hp-commit span{font-size:14.5px;line-height:1.58;display:block}

@media (max-width:820px){
  .hp-steps li{grid-template-columns:44px 1fr;gap:16px}
  .hp-step-cost{grid-column:2;text-align:left;padding-top:8px;color:var(--accent-ink)}
  .hp-commit{grid-template-columns:1fr}
  .hp-commit > div{border-right:0}
  .hp-commit > div:nth-last-child(2){border-bottom:1px solid var(--rule)}
}

/* =============================================================================
   21. TRANG CÔNG TRÌNH / GÓC KỸ THUẬT
   ========================================================================== */
.du-hero{
  display:grid;grid-template-columns:1.1fr 1fr;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin:44px 0 0;
}
.du-hero-img{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--stone-hi)}
.du-hero-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.du-hero:hover .du-hero-img img{transform:scale(1.03)}
.du-hero-body{padding:36px 34px;display:flex;flex-direction:column;justify-content:center}
.du-hero-body h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.032em;margin-bottom:12px;line-height:1.18}
.du-hero-body p{font-size:16px;line-height:1.6;margin-bottom:20px}
.du-hero-body .hp-prod-cat{align-self:flex-start}

.du-list{padding:56px 0}
.du-list-title{font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.du-row{
  display:grid;grid-template-columns:150px 1fr 40px;gap:24px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule);transition:var(--transition);
}
.du-row:hover{background:var(--stone);padding-left:12px;padding-right:12px}
.du-row-img{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--stone-hi)}
.du-row-img img{width:100%;height:100%;object-fit:cover}
.du-row-body h3{font-size:18px;letter-spacing:-.026em;line-height:1.3;margin-bottom:7px}
.du-row-body p{font-size:14.5px;line-height:1.55;color:var(--body-text)}
.du-row-go{font-size:20px;color:var(--muted);text-align:right;transition:var(--transition)}
.du-row:hover .du-row-go{color:var(--accent);transform:translateX(3px)}

/* Danh sách bài kỹ thuật: đánh số, không dùng ảnh */
.tt-list{list-style:none}
.tt-list a{
  display:grid;grid-template-columns:56px 1fr 40px;gap:20px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule);transition:var(--transition);
}
.tt-list a:hover{background:var(--stone);padding-left:12px;padding-right:12px}
.tt-no{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent-ink)}
.tt-body b{display:block;font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.028em;line-height:1.3;margin-bottom:6px}
.tt-body em{font-style:normal;font-size:14.5px;color:var(--body-text);line-height:1.55}
.tt-list a:hover .du-row-go{color:var(--accent);transform:translateX(3px)}

/* =============================================================================
   22. TRANG CHI TIẾT (công trình / bài viết)
   ========================================================================== */
.rd-layout{display:grid;grid-template-columns:1fr 330px;gap:52px;align-items:start;padding:28px 0 60px}
.rd-main{min-width:0}
.rd-head{max-width:760px;margin-bottom:30px}
.rd-head h1{font-size:clamp(29px,3.8vw,44px);letter-spacing:-.038em;text-wrap:balance;margin-top:4px}
.rd-sum{margin-top:18px;font-size:18.5px;line-height:1.55;color:var(--body-text)}
.rd-meta{margin-top:18px;font-family:var(--font-mono);font-size:13px;color:var(--muted);padding-top:16px;border-top:1px solid var(--rule)}
.rd-fig{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);margin-bottom:34px}
.rd-fig img{width:100%;height:auto}
.rd-body{max-width:720px}

.rd-end{background:var(--stone);border:1px solid var(--rule);border-radius:var(--r-lg);padding:30px 32px;margin-top:44px;max-width:760px}
.rd-end h3{font-size:21px;letter-spacing:-.028em;margin-bottom:10px}
.rd-end p{font-size:16px;margin-bottom:20px}
.rd-end-act{display:flex;gap:11px;flex-wrap:wrap}

.rd-side{display:grid;gap:20px;position:sticky;top:96px}
.rd-call{background:var(--shaft);border-radius:var(--r-lg);padding:26px;color:var(--on-dark-2)}
.rd-call small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:8px}
.rd-call > a{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--accent-hi);letter-spacing:-.05em;display:block}
.rd-call p{font-size:14px;margin-top:12px;line-height:1.55}
.rd-zalo{display:block;text-align:center;background:var(--zalo);color:#fff;padding:12px;border-radius:var(--r);font-weight:700;font-size:14.5px;margin-top:16px}
.rd-rel{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px}
.rd-rel h4{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.rd-rel a{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.4;padding:11px 0;border-bottom:1px solid var(--rule)}
.rd-rel a:last-child{border-bottom:0;padding-bottom:0}
.rd-rel a:hover{color:var(--accent-ink)}
.rd-form h3{font-size:19px}

/* =============================================================================
   23. TRANG LIÊN HỆ
   ========================================================================== */
.lh-layout{display:grid;grid-template-columns:1fr 350px;gap:48px;align-items:start;padding:44px 0 70px}
.lh-form-wrap{min-width:0}
.lh-form{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:34px 32px}
.lh-form h2{font-size:clamp(22px,2.6vw,29px);letter-spacing:-.03em;margin-bottom:26px}
.lh-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:block;margin-bottom:16px}
.fld > span{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.fld > span i{color:var(--no);font-style:normal}
.fld .p-input{margin-bottom:0}
.lh-note{font-size:13px;color:var(--muted);text-align:center;margin-top:14px}

.lh-side{display:grid;gap:20px;position:sticky;top:96px}
.lh-info,.lh-steps{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px}
.lh-info h3,.lh-steps h3{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.lh-info dl > div{padding:11px 0;border-bottom:1px solid var(--rule)}
.lh-info dl > div:last-child{border-bottom:0;padding-bottom:0}
.lh-info dt{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:4px}
.lh-info dd{font-size:14.5px;color:var(--ink);line-height:1.5}
.lh-info dd.num{font-family:var(--font-mono);font-weight:700;letter-spacing:-.03em}
.lh-info dd a{color:var(--accent-ink)}
.lh-steps ol{margin-left:18px;display:grid;gap:10px;font-size:14.5px;color:var(--ink)}
.lh-steps li::marker{color:var(--accent);font-weight:700}

@media (max-width:1000px){
  .rd-layout,.lh-layout{grid-template-columns:1fr;gap:36px}
  .rd-side,.lh-side{position:static}
  .du-hero{grid-template-columns:1fr}
  .du-hero-body{padding:26px 24px}
}
@media (max-width:640px){
  .du-row{grid-template-columns:96px 1fr;gap:16px}
  .du-row-go{display:none}
  .tt-list a{grid-template-columns:40px 1fr;gap:14px}
  .tt-body b{font-size:17px}
  .du-list{padding:36px 0}
  .lh-row{grid-template-columns:1fr;gap:0}
  .lh-form{padding:24px 20px}
  .rd-end{padding:24px 22px}
  .rd-end-act a{width:100%}
}

/* --- Mục menu có menu con (Page Ads) --- */
.nav-drop{position:relative}
.nav-drop > a{display:inline-flex;align-items:center;gap:7px}
.nav-drop > a svg{opacity:.55;transition:transform .2s ease}
.nav-drop:hover > a svg{transform:rotate(180deg);opacity:1}
.nav-drop-menu{
  position:absolute;top:100%;left:0;min-width:250px;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:120;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-menu a{
  display:block;padding:11px 14px;border-radius:var(--r);font-size:14.5px;font-weight:600;
  color:var(--body-text);white-space:nowrap;
}
.nav-drop-menu a:hover{background:var(--stone);color:var(--ink)}
.nav-drop-menu a.on{color:var(--ink);background:var(--accent-soft)}

@media (max-width:1180px){
  /* Trên mobile menu con luôn mở, thụt lề vào — không ai bấm giữ để xổ menu */
  .nav-drop{display:block}
  .nav-drop > a{width:100%;justify-content:space-between;border-bottom:1px solid var(--rule)}
  .nav-drop > a svg{display:none}
  .nav-drop-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;padding:0;min-width:0;background:transparent;
  }
  .nav-drop-menu a{
    padding:13px 12px 13px 26px;border-bottom:1px solid var(--rule);border-radius:0;
    font-size:15px;position:relative;
  }
  .nav-drop-menu a::before{
    content:"";position:absolute;left:12px;top:50%;width:6px;height:1px;background:var(--accent);
  }
}

/* =============================================================================
   24. CHI TIẾT SẢN PHẨM
   ========================================================================== */
.pdx-layout{display:grid;grid-template-columns:1fr 360px;gap:52px;align-items:start;padding:24px 0 70px}
.pdx-main{min-width:0}

/* Thư viện ảnh */
.pdx-gallery{margin-bottom:34px}
.pdx-stage{
  position:relative;aspect-ratio:16/11;border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;background:var(--stone-hi);
}
.pdx-stage img,.pdx-stage video,.pdx-stage iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.pdx-count{
  position:absolute;right:14px;bottom:14px;background:rgba(14,26,36,.86);color:var(--on-dark);
  padding:5px 12px;border-radius:100px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:-.02em;
}
.pdx-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.pdx-thumbs::-webkit-scrollbar{height:4px}
.pdx-thumbs::-webkit-scrollbar-thumb{background:var(--rule);border-radius:2px}
.pdx-thumb{
  position:relative;width:96px;height:74px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--stone-hi);
  transition:var(--transition);
}
.pdx-thumb img{width:100%;height:100%;object-fit:cover}
.pdx-thumb-blank{display:block;width:100%;height:100%;background:var(--stone-hi)}
.pdx-thumb:hover{border-color:var(--ink)}
.pdx-thumb.on{border-color:var(--accent);border-width:2px}
.pdx-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(14,26,36,.42);color:#fff;font-size:16px;
}

/* Tên + mô tả */
.pdx-head{max-width:760px;margin-bottom:26px}
.pdx-head h1{font-size:clamp(27px,3.5vw,40px);letter-spacing:-.038em;text-wrap:balance;margin-top:4px}
.pdx-desc{margin-top:16px;font-size:17.5px;line-height:1.58}

/* Bốn số đo then chốt */
.pdx-key{
  display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);
  border-top:2px solid var(--ink);border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--white);margin-bottom:22px;
}
.pdx-key > div{padding:20px 22px;border-right:1px solid var(--rule)}
.pdx-key > div:last-child{border-right:0}
.pdx-key b{
  display:block;font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--ink);
  letter-spacing:-.045em;line-height:1.2;margin-bottom:6px;
}
.pdx-key span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700}

.pdx-std{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.pdx-std span{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--white);border:1px solid var(--rule);padding:8px 14px;border-radius:100px;
}
.pdx-std i{font-style:normal;font-size:14px}

.pdx-sec-head{margin-bottom:24px;max-width:720px}
.pdx-sec-head h2{font-size:clamp(22px,2.7vw,30px);letter-spacing:-.032em}
.pdx-sec-head p{margin-top:11px;font-size:16px}

/* Phối nội thất */
.pdx-config{background:var(--stone);border:1px solid var(--rule);border-radius:var(--r-lg);padding:32px 30px;margin-bottom:40px}
.pdx-group{margin-bottom:28px}
.pdx-group:last-child{margin-bottom:0}
.pdx-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--rule)}
.pdx-group-head h3{font-size:15px;letter-spacing:.02em;font-weight:800}
.pdx-group-pick{font-size:13.5px;color:var(--muted);font-family:var(--font-mono);letter-spacing:-.02em}
.pdx-group-pick.has{color:var(--accent-ink);font-weight:700}
.pdx-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:12px}
.pdx-swatch{
  padding:0;cursor:pointer;text-align:left;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;transition:var(--transition);
}
.pdx-swatch:hover{border-color:var(--ink);transform:translateY(-2px)}
.pdx-swatch.on{border-color:var(--accent);border-width:2px;box-shadow:0 0 0 3px var(--accent-soft)}
.pdx-swatch img,.pdx-swatch-blank{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--stone-hi)}
.pdx-swatch-body{display:block;padding:10px 11px}
.pdx-swatch-body b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.32}
.pdx-swatch-body em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35}

/* Bảng thông số */
.pdx-specs{margin-bottom:40px}
.pdx-spec-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.pdx-spec-table tr{border-bottom:1px solid var(--rule)}
.pdx-spec-table tr:last-child{border-bottom:0}
.pdx-spec-table th{text-align:left;font-weight:500;color:var(--body-text);font-size:15px;padding:12px 14px}
.pdx-spec-table td{
  text-align:right;padding:12px 18px;font-family:var(--font-mono);font-weight:700;
  color:var(--ink);font-size:14.5px;letter-spacing:-.03em;white-space:nowrap;
}
.pdx-spec-table tr.grp{background:var(--stone)}
.pdx-spec-table tr.grp th{
  font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;padding-top:15px;padding-bottom:15px;
}
.pdx-others{padding-top:12px}

/* Cột báo giá dính theo cuộn */
.pdx-side{display:grid;gap:18px;position:sticky;top:96px}
.pdx-quote{background:var(--shaft);border-radius:var(--r-lg);padding:30px 28px 26px;box-shadow:var(--shadow-lg)}
.pdx-quote h2{color:var(--on-dark);font-size:21px;letter-spacing:-.026em}
.pdx-quote-sub{font-size:14px;color:var(--on-dark-2);margin-top:9px;margin-bottom:20px}
.pdx-quote .p-input{background:rgba(255,255,255,.07);border-color:var(--rule-dark);color:var(--on-dark)}
.pdx-quote .p-input::placeholder{color:#8494A0}
.pdx-quote select.p-input option{background:var(--shaft-2);color:var(--on-dark)}
.pdx-picked{background:rgba(255,255,255,.06);border-left:2px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin-bottom:16px}
.pdx-picked small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:10px}
.pdx-picked ul{display:grid;gap:7px}
.pdx-picked li{display:flex;justify-content:space-between;gap:12px;font-size:13px;align-items:baseline}
.pdx-picked li span{color:var(--on-dark-2)}
.pdx-picked li b{color:var(--on-dark);text-align:right;font-weight:600}
.pdx-side-note{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:22px}
.pdx-side-note b{display:block;font-family:var(--font-display);font-size:15.5px;color:var(--ink);letter-spacing:-.022em;margin-bottom:8px}
.pdx-side-note p{font-size:14px;line-height:1.55;margin-bottom:12px}
.pdx-side-note a{font-size:14.5px;font-weight:700;color:var(--accent-ink);border-bottom:1px solid currentColor;padding-bottom:2px}

@media (max-width:1100px){
  .pdx-layout{grid-template-columns:1fr;gap:36px}
  .pdx-side{position:static}
}
@media (max-width:820px){
  .pdx-key{grid-template-columns:1fr 1fr;border-radius:var(--r-lg)}
  .pdx-key > div:nth-child(2n){border-right:0}
  .pdx-key > div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
@media (max-width:640px){
  .pdx-stage{aspect-ratio:4/3;border-radius:var(--r)}
  .pdx-thumb{width:76px;height:60px}
  .pdx-config{padding:22px 18px}
  .pdx-swatches{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  .pdx-spec-table th{font-size:14px;padding:11px 12px}
  .pdx-spec-table td{padding:11px 12px;font-size:13.5px;white-space:normal}
  .pdx-quote{padding:24px 20px}
}

/* =============================================================================
   25. GIAO DIỆN DẪN DẮT BẰNG ẢNH — BẢN CHỈNH 08/2026

   Vì sao phải chỉnh: thang máy gia đình là một món nội thất, khách chọn nó
   như chọn tủ bếp hay cầu thang, không phải như chọn máy bơm. Bản trước thiên
   về hồ sơ kỹ thuật: đường kẻ mảnh, số liệu mono, gần như không có ảnh. Đọc
   thì đủ thông tin nhưng nhìn thì giống bản vẽ hơn là một website hoàn thiện.

   Bản này đưa ảnh thật lên làm nhân vật chính, giữ nguyên toàn bộ thông tin
   kỹ thuật ở phía dưới.
   ========================================================================== */

/* ---------- Phần đầu trang chủ: ảnh lớn, chữ đặt cạnh ---------------------- */
.hp-hero{background:var(--paper);border-bottom:0;padding-bottom:0}
.hp-hero::before{display:none}
.hp-hero-in{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  max-width:1320px;padding:0;min-height:0;
}
.hp-hero-text{padding:80px 60px 80px max(24px,calc((100vw - 1320px)/2 + 24px))}
.hp-hero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.hp-hero-text > p{margin-top:24px;font-size:18px;line-height:1.65;max-width:520px}

.hp-hero-img{
  position:relative;border-left:0;background:var(--stone-hi);
  min-height:clamp(360px,52vw,620px);overflow:hidden;
}
.hp-hero-img img{width:100%;height:100%;object-fit:cover;min-height:0}
/* Lớp chuyển sắc mỏng ở mép trái để ảnh hoà vào nền chữ, không cắt cứng */
.hp-hero-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right, var(--paper) 0%, rgba(244,244,242,0) 16%);
}

/* Thẻ nổi trên ảnh: một con số, đặt đè lên mép ảnh */
.hp-hero-float{
  position:absolute;left:-56px;bottom:56px;z-index:3;
  background:var(--white);border-radius:var(--r-lg);padding:22px 26px;
  box-shadow:var(--shadow-lg);min-width:230px;
}
.hp-hero-float small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.hp-hero-float b{display:block;font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--ink);letter-spacing:-.05em;line-height:1}
.hp-hero-float span{display:block;font-size:13px;color:var(--muted);margin-top:8px}

/* ---------- Dải ảnh công trình chạy ngang -------------------------------- */
.hp-strip{background:var(--shaft);padding:0;overflow:hidden;border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)}
.hp-strip-head{
  max-width:1200px;margin:0 auto;padding:52px 24px 26px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.hp-strip-head h2{color:var(--on-dark);font-size:clamp(24px,3vw,34px);letter-spacing:-.028em;font-weight:700}
.hp-strip-head p{color:var(--on-dark-2);margin-top:10px;font-size:16px;max-width:520px}
.hp-strip-head a{color:var(--accent-hi);font-weight:700;font-size:15px;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
.hp-strip-rail{display:flex;gap:14px;padding:0 24px 52px;overflow-x:auto;scroll-snap-type:x mandatory}
.hp-strip-rail::-webkit-scrollbar{height:6px}
.hp-strip-rail::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.hp-strip-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px}
.hp-strip-item{
  flex:none;width:clamp(210px,24vw,290px);aspect-ratio:3/4;border-radius:var(--r-lg);
  overflow:hidden;position:relative;scroll-snap-align:start;background:var(--shaft-2);
}
.hp-strip-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.hp-strip-item:hover img{transform:scale(1.06)}
.hp-strip-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:38px 16px 15px;
  background:linear-gradient(to top,rgba(11,13,16,.88),transparent);
  color:var(--on-dark);font-size:13.5px;font-weight:600;line-height:1.4;
}

/* ---------- Thẻ: mềm hơn, ảnh nổi hơn ------------------------------------ */
.hp-prod,.hp-proj-card,.lp-prod,.product-card,.product-box,
.commitment-card,.why-card,.info-card,.sidebar-box,.tpl-load article{
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.hp-prod:hover,.hp-proj-card:hover,.lp-prod:hover,.product-card:hover{
  box-shadow:var(--shadow-md);transform:translateY(-4px);
}
.hp-prod-img,.hp-proj-img,.lp-prod-img,.img-box{overflow:hidden}
.hp-prod-img img,.hp-proj-img img,.lp-prod-img img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.hp-prod:hover .hp-prod-img img,
.hp-proj-card:hover .hp-proj-img img,
.lp-prod:hover .lp-prod-img img{transform:scale(1.05)}

/* Ảnh trong bài viết và hình vẽ: bo góc và bóng nhẹ cho có chiều sâu */
.ta-figbox,.rd-fig,.article-featured-image,.about-img-box{
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}

/* ---------- Nút bấm: mềm và có chiều sâu --------------------------------- */
.btn-cta,.lp-submit,.lp-btn-main,.hp-form .btn-cta,.pdx-quote .btn-cta{
  border-radius:var(--r);box-shadow:0 1px 2px rgba(11,13,16,.12);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-cta:hover,.lp-submit:hover,.lp-btn-main:hover{
  transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(11,13,16,.4);
}
.header-cta{border-radius:100px}

/* ---------- Ô nhập: mềm hơn ---------------------------------------------- */
.p-input,.lp-input,.lp-select,.side-input,.pd-input,.form-input,.form-textarea,.in{
  border-radius:var(--r);
}

/* ---------- Tiêu đề khối: nhẹ tay hơn ------------------------------------ */
.hp-head h2,.lp-sec-head h2,.sp-top-grid h1,.pdx-head h1,.rd-head h1{
  letter-spacing:-.025em;font-weight:700;
}
.hp-head p,.lp-sec-head p{font-size:17px;line-height:1.65}

@media (max-width:1000px){
  .hp-hero-in{grid-template-columns:1fr}
  .hp-hero-text{padding:44px 24px 36px}
  .hp-hero-img{min-height:0;aspect-ratio:4/3;margin:0}
  .hp-hero-img::after{background:linear-gradient(to bottom, var(--paper) 0%, rgba(244,244,242,0) 14%)}
  .hp-hero-float{position:static;margin:-40px 24px 0;box-shadow:var(--shadow-md)}
}
@media (max-width:640px){
  body{font-size:16.5px;line-height:1.68}
  .hp-strip-head{padding:40px 18px 22px}
  .hp-strip-rail{padding:0 18px 40px;gap:11px}
  .hp-strip-item{width:66vw}
}

/* ---------- Phần đầu các trang phụ: ảnh nền tối, chữ sáng --------------- */
.sp-top.has-photo{background:var(--shaft);position:relative;overflow:hidden;isolation:isolate;border-bottom:3px solid var(--accent)}
.sp-top-photo{position:absolute;inset:0;z-index:-2}
.sp-top-photo img{width:100%;height:100%;object-fit:cover;opacity:.34}
.sp-top.has-photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(11,13,16,.95) 0%, rgba(11,13,16,.82) 46%, rgba(11,13,16,.45) 100%);
}
.sp-top.has-photo .sp-crumb{color:var(--on-dark-2)}
.sp-top.has-photo .sp-crumb a{color:var(--on-dark)}
.sp-top.has-photo .sp-top-grid h1{color:var(--on-dark)}
.sp-top.has-photo .sp-lead,.sp-top.has-photo .sp-best{color:var(--on-dark-2)}
.sp-top.has-photo .sp-best strong{color:var(--on-dark)}
.sp-top.has-photo .sp-spec-rail{
  background:rgba(255,255,255,.06);border:1px solid var(--rule-dark);
  border-top:2px solid var(--accent);border-radius:var(--r-lg);backdrop-filter:blur(6px);
}
.sp-top.has-photo .sp-spec-rail > div{border-bottom-color:var(--rule-dark)}
.sp-top.has-photo .sp-spec-rail dt{color:var(--on-dark-2)}
.sp-top.has-photo .sp-spec-rail dd{color:var(--on-dark)}
.sp-top.has-photo .sp-tabs a{color:var(--on-dark-2)}
.sp-top.has-photo .sp-tabs a:hover{color:var(--on-dark)}
.sp-top.has-photo .sp-tabs a.on{color:var(--on-dark);border-bottom-color:var(--accent)}
.sp-top.has-photo .sp-top-grid{padding:38px 0 46px}

/* =============================================================================
   26. NGÔN NGỮ KHỐI KIỂU TRANG BÁN HÀNG — BẢN CHỈNH 08/2026

   Đối chiếu với các website thang máy đang chạy quảng cáo tốt tại Việt Nam,
   khác biệt lớn nhất không nằm ở màu mà ở NHỊP TRANG:
     - Tiêu đề khối in hoa, căn giữa, có gạch nhấn dưới
     - Mỗi khối một hàng icon hoặc một lưới ảnh, ít khối chỉ có chữ
     - Bằng chứng xã hội dày: dự án, cảm nhận khách, báo chí
     - Nút hành động nổi thường trực ở góc màn hình
   Bản trước thiên về tối giản kiểu tạp chí nên đọc thì sạch nhưng nhìn
   thưa và ít sức thuyết phục với khách Việt.
   ========================================================================== */

/* ---------- Tiêu đề khối: in hoa, căn giữa, gạch nhấn ------------------- */
.sec-head{text-align:center;max-width:820px;margin:0 auto 44px}
.sec-kicker{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px;
}
.sec-head h2{
  font-family:var(--font-display);font-size:clamp(24px,3.1vw,36px);font-weight:800;
  color:var(--ink);letter-spacing:.01em;text-transform:uppercase;line-height:1.24;
}
.sec-head h2 em{font-style:normal;color:var(--accent-ink)}
.sec-head .bar{
  display:block;width:64px;height:3px;background:var(--accent);
  margin:18px auto 0;border-radius:2px;
}
.sec-head p{margin-top:18px;font-size:17px;line-height:1.7;color:var(--body-text)}
.sec-head.on-dark h2{color:var(--on-dark)}
.sec-head.on-dark p{color:var(--on-dark-2)}
.sec-head.on-dark .sec-kicker{color:var(--accent-hi)}

.sec{padding:74px 0}
.sec.tint{background:var(--stone)}
.sec.dark{background:var(--shaft);color:var(--on-dark-2)}

/* ---------- Hàng icon cam kết ------------------------------------------- */
.icon-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.icon-card{
  background:var(--white);border-radius:var(--r-lg);padding:32px 26px;text-align:center;
  box-shadow:var(--shadow-sm);transition:var(--transition);border:1px solid var(--rule);
}
.icon-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.icon-card .ic{
  width:60px;height:60px;margin:0 auto 18px;border-radius:50%;
  background:var(--accent-soft);display:flex;align-items:center;justify-content:center;
  color:var(--accent-ink);
}
.icon-card .ic svg{width:28px;height:28px}
.icon-card h3{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em}
.icon-card p{font-size:14.5px;line-height:1.6;color:var(--body-text)}
.sec.dark .icon-card{background:rgba(255,255,255,.05);border-color:var(--rule-dark)}
.sec.dark .icon-card h3{color:var(--on-dark)}
.sec.dark .icon-card p{color:var(--on-dark-2)}
.sec.dark .icon-card .ic{background:rgba(255,255,255,.08);color:var(--accent-hi)}

/* ---------- Danh sách tích xanh ----------------------------------------- */
.check-list{display:grid;gap:15px;margin-top:26px}
.check-list li{display:grid;grid-template-columns:26px 1fr;gap:13px;font-size:16.5px;line-height:1.6;color:var(--ink)}
.check-list li::before{
  content:"";width:22px;height:22px;margin-top:3px;border-radius:50%;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/16px no-repeat,
        linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ---------- Lưới ba lựa chọn giải pháp ---------------------------------- */
.pick3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pick3 a{
  display:block;background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:var(--transition);border:1px solid var(--rule);
}
.pick3 a:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.pick3 .im{aspect-ratio:4/3;overflow:hidden;background:var(--stone-hi);position:relative}
.pick3 .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pick3 a:hover .im img{transform:scale(1.06)}
.pick3 .bd{padding:24px 24px 26px;text-align:center}
.pick3 h3{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.015em;margin-bottom:10px}
.pick3 p{font-size:14.5px;line-height:1.6;color:var(--body-text);margin-bottom:18px}
.pick3 .go{
  display:inline-block;font-size:14px;font-weight:700;color:var(--accent-ink);
  border:1px solid var(--accent);border-radius:100px;padding:9px 22px;transition:var(--transition);
}
.pick3 a:hover .go{background:var(--accent);color:var(--accent-on)}

/* ---------- Tab chuyển loại thang --------------------------------------- */
.tabs-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.tabs-nav button{
  font-family:var(--font-display);font-size:15px;font-weight:700;cursor:pointer;
  padding:13px 28px;border-radius:100px;border:1px solid var(--rule);
  background:var(--white);color:var(--body-text);transition:var(--transition);
}
.tabs-nav button:hover{border-color:var(--ink);color:var(--ink)}
.tabs-nav button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-on);box-shadow:0 6px 18px -6px var(--accent)}
.tab-panel{display:none}
.tab-panel.on{display:block;animation:tabin .3s ease}
@keyframes tabin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tab-body{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.tab-body .im{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3;background:var(--stone-hi)}
.tab-body .im img{width:100%;height:100%;object-fit:cover}
.tab-body h3{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);font-weight:800;color:var(--ink);margin-bottom:14px;letter-spacing:-.018em}
.tab-body > div > p{font-size:16.5px;line-height:1.7}
.tab-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.tab-facts > div{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start}
.tab-facts .ic{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.tab-facts .ic svg{width:19px;height:19px}
.tab-facts b{display:block;font-size:14px;color:var(--ink);font-weight:700;margin-bottom:3px}
.tab-facts span{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---------- Lưới dự án --------------------------------------------------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj-cell{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--stone-hi);display:block}
.proj-cell img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.proj-cell:hover img{transform:scale(1.07)}
.proj-cell figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 20px 18px;
  background:linear-gradient(to top,rgba(11,13,16,.9),transparent);
  color:#fff;font-family:var(--font-display);font-size:16.5px;font-weight:700;letter-spacing:-.01em;
}

/* ---------- Cảm nhận khách hàng ----------------------------------------- */
.testi{
  background:var(--white);border-radius:var(--r-xl);padding:44px 46px;
  box-shadow:var(--shadow-md);max-width:900px;margin:0 auto;position:relative;
}
.testi::before{
  content:"“";position:absolute;top:6px;left:30px;font-family:var(--font-display);
  font-size:110px;line-height:1;color:var(--accent);opacity:.16;
}
.testi p{font-size:19px;line-height:1.72;color:var(--ink);position:relative;z-index:2}
.testi footer{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.testi .av{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--stone-hi);flex:none}
.testi b{display:block;font-family:var(--font-display);font-size:16px;color:var(--ink);font-weight:800}
.testi small{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}

/* ---------- Tin tức ------------------------------------------------------ */
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.news-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--rule);transition:var(--transition);display:flex;flex-direction:column}
.news-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.news-card .im{aspect-ratio:16/10;overflow:hidden;background:var(--stone-hi)}
.news-card .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.news-card:hover .im img{transform:scale(1.05)}
.news-card .bd{padding:20px;display:flex;flex-direction:column;flex-grow:1}
.news-card h3{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);line-height:1.4;letter-spacing:-.012em;margin-bottom:10px}
.news-card p{font-size:14px;line-height:1.6;color:var(--muted)}

/* ---------- Nút hành động nổi ------------------------------------------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:120;display:grid;gap:11px}
.fab a{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px -6px rgba(11,13,16,.5);transition:var(--transition);color:#fff;
}
.fab a:hover{transform:scale(1.08)}
.fab svg{width:25px;height:25px}
.fab .call{background:var(--accent);color:var(--accent-on);animation:fab-ring 2.6s infinite}
.fab .zalo{background:#0068FF}
.fab .quote{background:var(--ink);width:auto;border-radius:100px;padding:0 20px;font-weight:700;font-size:14px;gap:8px}
@keyframes fab-ring{
  0%,100%{box-shadow:0 0 0 0 rgba(255,90,0,.5),0 6px 20px -6px rgba(11,13,16,.5)}
  50%{box-shadow:0 0 0 14px rgba(255,90,0,0),0 6px 20px -6px rgba(11,13,16,.5)}
}

@media (max-width:1000px){
  .icon-row{grid-template-columns:1fr 1fr}
  .pick3,.proj-grid{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr 1fr}
  .tab-body{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .sec{padding:50px 0}
  .sec-head{margin-bottom:32px}
  .icon-row,.pick3,.proj-grid,.news-grid{grid-template-columns:1fr;gap:16px}
  .tab-facts{grid-template-columns:1fr}
  .testi{padding:30px 24px}
  .testi p{font-size:17px}
  .tabs-nav button{padding:11px 18px;font-size:14px}
  .fab{right:12px;bottom:12px;gap:9px}
  .fab a{width:48px;height:48px}
  .fab .quote{display:none}
}

/* =============================================================================
   27. NHỊP SÁNG – TỐI XEN KẼ

   Bản trước dùng hai sắc xám gần giống nhau (#F4F4F2 và #E8E8E4) để phân khối,
   chênh lệch chỉ vài phần trăm nên mắt gần như không thấy ranh giới — trang
   trông phẳng lì. Bản này cho các khối xen kẽ trắng thật và đen thật.

   Mọi thành phần bên trong khối tối đều có biến thể riêng ở dưới, không để
   thẻ trắng nằm trên nền đen kiểu vá víu.
   ========================================================================== */

.sec.tint{background:var(--shaft);color:var(--on-dark-2)}
.sec.dark{background:var(--shaft);color:var(--on-dark-2)}

/* Vạch cam mảnh phân định mỗi lần chuyển sáng ↔ tối */
.sec.tint,.sec.dark{
  border-top:3px solid var(--accent);border-bottom:3px solid var(--accent);
  position:relative;
}

/* ---------- Tiêu đề khối trên nền tối ------------------------------------ */
.sec.tint .sec-head h2,.sec.dark .sec-head h2{color:var(--on-dark)}
.sec.tint .sec-head p,.sec.dark .sec-head p{color:var(--on-dark-2)}
.sec.tint .sec-kicker,.sec.dark .sec-kicker{color:var(--accent-hi)}

/* ---------- Thẻ icon ------------------------------------------------------ */
.sec.tint .icon-card,.sec.dark .icon-card{
  background:var(--shaft-2);border-color:var(--rule-dark);box-shadow:none;
}
.sec.tint .icon-card:hover,.sec.dark .icon-card:hover{
  border-color:var(--accent);box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
}
.sec.tint .icon-card h3,.sec.dark .icon-card h3{color:var(--on-dark)}
.sec.tint .icon-card p,.sec.dark .icon-card p{color:var(--on-dark-2)}
.sec.tint .icon-card .ic,.sec.dark .icon-card .ic{background:rgba(255,255,255,.08);color:var(--accent-hi)}

/* ---------- Lưới ba giải pháp -------------------------------------------- */
.sec.tint .pick3 a,.sec.dark .pick3 a{background:var(--shaft-2);border-color:var(--rule-dark)}
.sec.tint .pick3 h3,.sec.dark .pick3 h3{color:var(--on-dark)}
.sec.tint .pick3 p,.sec.dark .pick3 p{color:var(--on-dark-2)}
.sec.tint .pick3 .go,.sec.dark .pick3 .go{color:var(--accent-hi);border-color:var(--accent)}

/* ---------- Tab công nghệ ------------------------------------------------- */
.sec.tint .tabs-nav button,.sec.dark .tabs-nav button{
  background:transparent;border-color:var(--rule-dark);color:var(--on-dark-2);
}
.sec.tint .tabs-nav button:hover,.sec.dark .tabs-nav button:hover{color:var(--on-dark);border-color:var(--on-dark-2)}
.sec.tint .tabs-nav button.on,.sec.dark .tabs-nav button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.sec.tint .tab-body h3,.sec.dark .tab-body h3{color:var(--on-dark)}
.sec.tint .tab-body p,.sec.dark .tab-body p{color:var(--on-dark-2)}
.sec.tint .tab-facts .ic,.sec.dark .tab-facts .ic{background:rgba(255,255,255,.08);color:var(--accent-hi)}
.sec.tint .tab-facts b,.sec.dark .tab-facts b{color:var(--on-dark)}
.sec.tint .tab-facts span,.sec.dark .tab-facts span{color:var(--on-dark-2)}

/* ---------- Bảng giá trên nền tối ---------------------------------------- */
.sec.tint .lp-price-table,.sec.dark .lp-price-table{background:var(--shaft-2);border-color:var(--rule-dark)}
.sec.tint .lp-price-table thead th,.sec.dark .lp-price-table thead th{
  background:rgba(255,255,255,.05);color:var(--on-dark-2);border-bottom-color:var(--accent);
}
.sec.tint .lp-price-table th,.sec.dark .lp-price-table th,
.sec.tint .lp-price-table td,.sec.dark .lp-price-table td{border-bottom-color:var(--rule-dark)}
.sec.tint .lp-price-table tbody th,.sec.dark .lp-price-table tbody th{color:var(--on-dark)}
.sec.tint .lp-price-table tbody th small,.sec.dark .lp-price-table tbody th small{color:var(--on-dark-2)}
.sec.tint .lp-price-table td,.sec.dark .lp-price-table td{color:var(--on-dark)}
.sec.tint .lp-price-table tr.best th,.sec.dark .lp-price-table tr.best th,
.sec.tint .lp-price-table tr.best td,.sec.dark .lp-price-table tr.best td{background:rgba(255,77,0,.12)}
.sec.tint .lp-price-table tr.best td,.sec.dark .lp-price-table tr.best td{color:var(--accent-hi)}
.sec.tint .lp-badge,.sec.dark .lp-badge{background:transparent;color:var(--accent-hi);border-color:var(--accent)}
.sec.tint .lp-price-group h3,.sec.dark .lp-price-group h3{color:var(--on-dark)}
.sec.tint .lp-price-group h3::after,.sec.dark .lp-price-group h3::after{background:var(--rule-dark)}
.sec.tint .lp-price-group .gsub,.sec.dark .lp-price-group .gsub{color:var(--on-dark-2)}
.sec.tint .lp-price-foot,.sec.dark .lp-price-foot{color:var(--on-dark-2)}
.sec.tint .lp-price-foot a,.sec.dark .lp-price-foot a{color:var(--accent-hi)}

/* ---------- Gồm / chưa gồm ----------------------------------------------- */
.sec.tint .lp-two,.sec.dark .lp-two{border-color:var(--rule-dark)}
.sec.tint .lp-box,.sec.dark .lp-box{background:var(--shaft-2)}
.sec.tint .lp-box + .lp-box,.sec.dark .lp-box + .lp-box{background:rgba(255,255,255,.035);border-left-color:var(--rule-dark)}
.sec.tint .lp-box h3,.sec.dark .lp-box h3{color:var(--on-dark)}
.sec.tint .lp-box li,.sec.dark .lp-box li{color:var(--on-dark-2)}
.sec.tint .lp-box .after,.sec.dark .lp-box .after{color:var(--muted)}
.sec.tint .lp-box.yes li::before,.sec.dark .lp-box.yes li::before{color:#35D08A}
.sec.tint .lp-box.no li::before,.sec.dark .lp-box.no li::before{color:#FF7C72}

/* ---------- Quy trình ----------------------------------------------------- */
.sec.tint .hp-steps,.sec.dark .hp-steps{border-top-color:var(--accent)}
.sec.tint .hp-steps li,.sec.dark .hp-steps li{border-bottom-color:var(--rule-dark)}
.sec.tint .hp-steps b,.sec.dark .hp-steps b{color:var(--on-dark)}
.sec.tint .hp-steps p,.sec.dark .hp-steps p{color:var(--on-dark-2)}
.sec.tint .hp-steps li::before,.sec.dark .hp-steps li::before{color:var(--accent-hi)}
.sec.tint .hp-step-cost,.sec.dark .hp-step-cost{color:var(--accent-hi)}

/* ---------- Tin tức & dự án ----------------------------------------------- */
.sec.tint .news-card,.sec.dark .news-card{background:var(--shaft-2);border-color:var(--rule-dark);box-shadow:none}
.sec.tint .news-card:hover,.sec.dark .news-card:hover{border-color:var(--accent)}
.sec.tint .news-card h3,.sec.dark .news-card h3{color:var(--on-dark)}
.sec.tint .news-card p,.sec.dark .news-card p{color:var(--on-dark-2)}
.sec.tint .proj-cell,.sec.dark .proj-cell{background:var(--shaft-2)}
.sec.tint .btn-view-all,.sec.dark .btn-view-all{border-color:var(--on-dark);color:var(--on-dark)}
.sec.tint .btn-view-all:hover,.sec.dark .btn-view-all:hover{background:var(--on-dark);color:var(--ink)}
.sec.tint .check-list li,.sec.dark .check-list li{color:var(--on-dark-2)}
.sec.tint .testi,.sec.dark .testi{background:var(--shaft-2);box-shadow:none;border:1px solid var(--rule-dark)}
.sec.tint .testi p,.sec.dark .testi p{color:var(--on-dark)}
.sec.tint .testi b,.sec.dark .testi b{color:var(--on-dark)}
.sec.tint .testi footer,.sec.dark .testi footer{border-top-color:var(--rule-dark)}
.sec.tint .ta-figbox,.sec.dark .ta-figbox{background:var(--shaft-2);border-color:var(--rule-dark);color:var(--on-dark)}

/* ---------- Khối sáng: nhấn mạnh hơn -------------------------------------- */
.sec .icon-card,.sec .pick3 a,.sec .news-card{border-width:1px;border-color:var(--rule)}
.sec .icon-card:hover,.sec .pick3 a:hover,.sec .news-card:hover{border-color:var(--ink)}
.lp-price-table thead th{background:var(--ink);color:var(--white);border-bottom:0}
.lp-price-table tbody th{border-bottom-color:var(--rule)}
.hp-steps{border-top:3px solid var(--ink)}

/* Chữ đậm hơn cho tiêu đề: tăng độ tương phản thị giác */
.sec-head h2{font-weight:800;letter-spacing:.015em}