/* ============================================================
 * components.css — CSS riêng từng trang, scope theo body class.
 * style.css (base) đã copy verbatim toàn bộ site.css — file này CHỈ chứa
 * phần khác biệt của từng trang, đã loại bỏ mọi rule trùng với site.css
 * (Rule Step 8 của protocol). Không có 3 trang này (lien-he/san-pham/
 * san-pham-chi-tiet/tin-tuc/tin-tuc-chi-tiet/tuyen-dung) trong file này vì
 * bản HTML gốc của các trang đó không có <style> riêng — dùng site.css
 * base là đủ.
 * ============================================================ */

/* ---------- TRANG CHỦ (front-page.php) — scope .home ---------- */
.home .hero{position:relative;margin-top:var(--header-h);height:min(560px,calc(100vh - var(--header-h)));min-height:440px;overflow:hidden;background:var(--navy)}
.home .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s;display:flex;align-items:center}
.home .hero-slide.active{opacity:1;z-index:1}
.home .hero-slide .bg{position:absolute;inset:0}
.home .hero-slide .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,50,101,.55) 0%,rgba(6,50,101,.92) 100%)}
.home .hero-slide .container{position:relative;z-index:1}
.home .hero-content{max-width:640px;color:#fff}
.home .hero-content .kicker{color:#8FE29B}
.home .hero-content h1,.home .hero-content h2{color:#fff;margin-bottom:14px}
.home .hero-content h2{font-size:clamp(1.85rem,7vw,3.2rem);font-weight:800}
.home .hero-content h1 em,.home .hero-content h2 em{font-style:normal;color:#8FE29B}
.home .hero-content p{font-size:1rem;color:#DCE9F3;margin-bottom:22px;max-width:540px}
.home .hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.home .hero-cta .btn{flex:1 1 auto;justify-content:center}
.home .hero-dots{position:absolute;left:0;right:0;bottom:16px;z-index:2;display:flex;justify-content:center;gap:8px}
.home .hero-dots button{width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);transition:.3s}
.home .hero-dots button.active{background:#8FE29B;width:44px}
.home .hero-arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;place-items:center;backdrop-filter:blur(4px);transition:.2s}
.home .hero-arrow:hover{background:var(--green)}
.home .hero-arrow svg{width:20px;height:20px}
.home .hero-prev{left:24px}
.home .hero-next{right:24px}
.home .hero-strip{position:relative;z-index:2;background:#fff;box-shadow:var(--shadow-md);border-radius:var(--radius-lg);margin:-18px 16px 0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.home .hero-strip > div{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.home .hero-strip > div:nth-child(2n){border-right:0}
.home .hero-strip > div:nth-last-child(-n/**/+2){border-bottom:0}
.home .hero-strip .icon-box{width:40px;height:40px;border-radius:10px}
.home .hero-strip .icon-box svg{width:20px;height:20px}
.home .hero-strip strong{display:block;font:700 .86rem var(--h-font);color:var(--navy)}
.home .hero-strip span{font-size:.75rem;color:var(--gray)}
.home .about-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.home .about-img{position:relative;aspect-ratio:16/10;max-height:300px;margin-inline:auto;width:100%;border-radius:var(--radius-lg);overflow:hidden}
.home .about-img .tag{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-md)}
.home .about-img .tag b{display:block;font:800 1.5rem var(--h-font);color:var(--blue);line-height:1}
.home .about-img .tag span{font-size:.78rem;color:var(--gray)}
.home .pillars{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:14px;margin:22px 0 26px}
.home .pillar{display:flex;gap:14px;align-items:flex-start}
.home .pillar h3{font-size:1rem;margin:4px 0 4px}
.home .pillar p{font-size:.88rem;color:var(--gray);margin:0}
.home .tabs-center{display:flex;margin-bottom:26px}
.home .tabs-center .filter-tabs{margin:0 auto;max-width:100%}
.home .sol-card{position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:flex-end;color:#fff;transition:transform .3s,box-shadow .3s}
.home .sol-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.home .sol-card .bg{position:absolute;inset:0}
.home .sol-card .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,50,101,0) 25%,rgba(6,50,101,.92) 100%)}
.home .sol-card .body{position:relative;z-index:1;padding:20px}
.home .sol-card h3{color:#fff;margin:10px 0 6px}
.home .sol-card p{color:#C9DCEA;font-size:.88rem;margin:0 0 12px}
.home .sol-card .more{color:#8FE29B;font:700 .85rem var(--h-font);display:inline-flex;gap:6px;align-items:center}
.home .sol-card:hover .more svg{transform:translateX(4px)}
.home .sol-card .more svg{width:16px;height:16px;transition:.25s}
.home .why-card{padding:22px 20px}
.home .why-card .icon-box{margin-bottom:14px}
.home .why-card h3{font-size:1.02rem}
.home .why-card p{font-size:.9rem;color:var(--gray);margin:0}
.home .stats{display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:center}
.home .stat b{display:block;font:800 clamp(2rem,8vw,3.4rem)/1 var(--h-font);color:#fff}
.home .stat b i{font-style:normal;color:#8FE29B}
.home .stat span{display:block;margin-top:8px;color:#C9DCEA;font-size:.88rem}
.home .cert-slider{position:relative}
.home .cert-viewport{overflow:hidden;padding:4px 4px 8px;margin:0 -4px}
.home .cert-track{display:flex;gap:14px;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.home .cert{flex:0 0 100%;border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:#fff;transition:box-shadow .3s,transform .3s}
.home .cert:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.home .cert .frame{aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--aqua)}
.home .cert p{margin:12px 0 0;font-size:.85rem;font-weight:600;color:var(--navy);text-align:center}
.home .cert-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.home .cert-arrow{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;transition:.2s}
.home .cert-arrow:hover:not(:disabled){background:var(--blue);border-color:var(--blue);color:#fff}
.home .cert-arrow:disabled{opacity:.35;cursor:default}
.home .cert-arrow svg{width:18px;height:18px}
.home .cert-dots{display:flex;gap:8px;align-items:center}
.home .cert-dots button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.25s}
.home .cert-dots button.active{background:var(--green);width:26px;border-radius:4px}
.home .news-grid{display:grid;grid-template-columns:1fr;gap:20px}
.home .news-featured{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;color:#fff}
.home .news-featured .bg{position:absolute;inset:0}
.home .news-featured .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,50,101,0) 25%,rgba(6,50,101,.95) 100%)}
.home .news-featured .body{position:relative;z-index:1;padding:22px}
.home .news-featured h2{color:#fff;font-size:1.2rem;font-weight:700;margin:12px 0 8px}
.home .news-featured p{color:#C9DCEA;margin:0 0 8px;font-size:.92rem}
.home .news-featured .entry-meta{color:#C9DCEA}
.home .news-list{display:flex;flex-direction:column;gap:14px}
.home .news-item{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.3s}
.home .news-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.home .news-item .post-thumbnail{aspect-ratio:1/1;border-radius:8px}
.home .news-item .entry-title{font-size:.94rem;font-weight:700;margin:6px 0}
.home .news-item .entry-title a{color:var(--navy)}
.home .quote-card{padding:22px;display:flex;flex-direction:column;gap:14px}
.home .stars{color:#F2B01E;letter-spacing:2px;font-size:.95rem}
.home .quote-card p{margin:0;color:var(--ink);font-size:.95rem;line-height:1.7}
.home .quote-card .who{display:flex;gap:12px;align-items:center;margin-top:auto}
.home .quote-card .avatar{width:44px;height:44px;border-radius:50%;background:var(--aqua);display:grid;place-items:center;font:700 .92rem var(--h-font);color:var(--blue);flex-shrink:0}
.home .quote-card .who b{display:block;font:700 .9rem var(--h-font);color:var(--navy)}
.home .quote-card .who span{font-size:.78rem;color:var(--gray)}
.home .press{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.home .press .logo{aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden;filter:grayscale(1);opacity:.7;transition:.3s}
.home .press .logo .ph{object-fit:contain;padding:12px;background:transparent}
.home .press .logo:hover{filter:none;opacity:1}
@media (min-width:681px){
  .home .hero{height:min(560px,calc(100vh - var(--header-h)));min-height:460px}
  .home .about-img{max-height:360px}
  .home .hero-slide .bg::after{background:linear-gradient(100deg,rgba(6,50,101,.92) 0%,rgba(6,50,101,.72) 55%,rgba(6,50,101,.3) 100%)}
  .home .hero-content p{font-size:1.05rem;margin-bottom:28px}
  .home .hero-cta{gap:12px}
  .home .hero-cta .btn{flex:0 0 auto}
  .home .hero-dots{bottom:24px}
  .home .hero-strip{grid-template-columns:1fr 1fr;margin:-28px 24px 0}
  .home .hero-strip > div{flex-direction:row;align-items:center;gap:14px;padding:20px 22px}
  .home .hero-strip .icon-box{width:46px;height:46px}
  .home .hero-strip strong{font-size:.92rem}
  .home .hero-strip span{font-size:.8rem}
  .home .pillars{grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 30px}
  .home .sol-card{aspect-ratio:1/1}
  .home .sol-card .body{padding:22px}
  .home .stats{grid-template-columns:1fr 1fr;gap:28px}
  .home .cert-track{gap:20px}
  .home .cert{flex:0 0 calc((100% - 40px)/3)}
  .home .cert .frame{aspect-ratio:4/5}
  .home .cert-nav{margin-top:22px;gap:16px}
  .home .cert-arrow{width:44px;height:44px}
  .home .news-featured{min-height:300px}
  .home .news-featured .body{padding:26px}
  .home .news-featured h2{font-size:1.28rem}
  .home .news-item{grid-template-columns:120px 1fr;gap:16px;padding:12px}
  .home .news-item .entry-title{font-size:.98rem}
  .home .press{grid-template-columns:repeat(4,1fr);gap:16px}
  .home .press .logo .ph{padding:14px}
  .home .why-card{padding:26px 24px}
  .home .quote-card{padding:26px}
  .home .tabs-center{justify-content:center;margin-bottom:32px}
}
@media (min-width:901px){
  .home .press{grid-template-columns:repeat(6,1fr);gap:16px}
  .home .sol-card{aspect-ratio:4/5}
  .home .news-featured{min-height:340px}
  .home .about-img{max-height:400px}
}
@media (min-width:1025px){
  .home .contact-form{padding:28px}
  .home .hero{height:min(680px,calc(100vh - var(--header-h)));min-height:520px}
  .home .hero-slide .bg::after{background:linear-gradient(90deg,rgba(6,50,101,.92) 0%,rgba(6,50,101,.72) 45%,rgba(6,50,101,.25) 100%)}
  .home .hero-content h1,.home .hero-content h2{margin-bottom:18px}
  .home .hero-content p{font-size:1.1rem;margin-bottom:30px}
  .home .hero-dots{bottom:28px}
  .home .hero-arrow{display:grid}
  .home .hero-strip{margin:-44px auto 0;max-width:calc(var(--container) - 48px);grid-template-columns:repeat(4,1fr)}
  .home .hero-strip > div{padding:22px 26px;border-bottom:0}
  .home .hero-strip > div:nth-child(2n){border-right:1px solid var(--line)}
  .home .hero-strip > div:last-child{border-right:0}
  .home .hero-strip .icon-box{width:52px;height:52px;border-radius:14px}
  .home .hero-strip .icon-box svg{width:26px;height:26px}
  .home .hero-strip strong{font-size:.95rem}
  .home .hero-strip span{font-size:.82rem}
  .home .about-grid{grid-template-columns:1fr 1fr;gap:64px}
  .home .about-img{aspect-ratio:4/3;max-height:none}
  .home .about-img .tag{left:22px;bottom:22px;padding:14px 18px}
  .home .about-img .tag b{font-size:1.6rem}
  .home .pillars{margin:28px 0 32px}
  .home .sol-card{aspect-ratio:3/4}
  .home .sol-card .body{padding:26px}
  .home .sol-card h3{margin:10px 0 8px}
  .home .sol-card p{font-size:.9rem;margin-bottom:14px}
  .home .why-card{padding:30px 28px}
  .home .why-card .icon-box{margin-bottom:18px}
  .home .why-card h3{font-size:1.05rem}
  .home .why-card p{font-size:.92rem}
  .home .stats{grid-template-columns:repeat(4,1fr)}
  .home .stat span{margin-top:10px;font-size:.95rem}
  .home .cert{flex:0 0 calc((100% - 60px)/4)}
  .home .cert .frame{aspect-ratio:3/4}
  .home .news-grid{grid-template-columns:7fr 5fr;gap:28px}
  .home .news-featured{min-height:480px}
  .home .news-featured .body{padding:36px}
  .home .news-featured h2{font-size:1.5rem}
  .home .news-featured p{font-size:1rem}
  .home .news-list{gap:18px}
  .home .quote-card{padding:30px}
  .home .quote-card p{font-size:.98rem}
  .home .quote-card .avatar{width:46px;height:46px}
  .home .press{grid-template-columns:repeat(6,1fr);gap:20px}
  .home .press .logo .ph{padding:14px}
}

/* ---------- TRANG TÌM KIẾM (search.php) — scope .vx-search ---------- */
.vx-search .search-hero-form{display:flex;flex-direction:column;gap:10px;max-width:640px;margin:18px auto 14px}
.vx-search .search-hero-form input{height:48px;border:0;border-radius:var(--radius-btn);padding:0 16px;font-size:16px;outline:none;background:#fff;color:var(--ink)}
.vx-search .search-hero-form input:focus{box-shadow:0 0 0 3px rgba(143,226,155,.5)}
.vx-search .search-meta{color:#C9DCEA}
.vx-search .search-meta b{color:#fff}
.vx-search [data-result-group] .products,.vx-search [data-result-group] .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vx-search [data-result-group] .product-card{display:flex;flex-direction:column}
.vx-search [data-result-group] .product-card .thumb{aspect-ratio:16/9;height:auto;min-height:0}
.vx-search [data-result-group] .post-card .post-thumbnail{aspect-ratio:16/9}
.vx-search [data-result-group] .product-card .body,.vx-search [data-result-group] .post-card .body{padding:18px;gap:10px}
.vx-search [data-result-group] .post-card .excerpt{display:none}
.vx-search [data-result-group] .product-card .body,.vx-search [data-result-group] .post-card .body{padding:12px}
.vx-search [data-result-group] .woocommerce-loop-product__title,.vx-search [data-result-group] .entry-title{font:700 .85rem/1.4 var(--h-font);min-height:2.8em;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vx-search [data-result-group] .product-card .use{display:none}
.vx-search [data-result-group] .post-card{position:relative}
.vx-search [data-result-group] .post-card .body > .badge{position:absolute;top:8px;left:8px;background:#fff;box-shadow:var(--shadow-sm);font-size:10px;padding:4px 8px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-search [data-result-group] .product-card .price-row,.vx-search [data-result-group] .post-card .entry-meta{margin:auto 0 0;min-height:var(--btn-h-sm);padding-top:0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.vx-search [data-result-group] .price .unit{display:none}
.vx-search [data-result-group] .product-card .price-row{flex-wrap:wrap}
.vx-search [data-result-group] .product-card .price-row .btn{flex:1 1 100%}
.vx-search [data-result-group] .product-card .price{white-space:nowrap}
@media (min-width:681px){
  .vx-search .search-hero-form{flex-direction:row}
  .vx-search .search-hero-form input{flex:1}
  .vx-search [data-result-group] .products,.vx-search [data-result-group] .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
  .vx-search [data-result-group] .product-card .body,.vx-search [data-result-group] .post-card .body{padding:16px}
  .vx-search [data-result-group] .woocommerce-loop-product__title,.vx-search [data-result-group] .entry-title{font-size:.92rem}
}
@media (min-width:1025px){
  .vx-search [data-result-group] .products,.vx-search [data-result-group] .grid-3{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- TRANG 404 (404.php) — scope .error404 ---------- */
.error404 .e404{position:relative;margin-top:var(--header-h);overflow:hidden;text-align:center}
.error404 .e404 .mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);width:min(64vw,420px);opacity:.06;pointer-events:none}
.error404 .e404 .code{font:800 clamp(4.5rem,22vw,9rem)/1 var(--h-font);color:var(--navy);letter-spacing:-.02em;max-width:none;margin:0 auto}
.error404 .e404 h1{font-size:clamp(1.3rem,5vw,2rem);margin:10px 0 12px}
.error404 .e404 p{color:var(--gray);max-width:520px;margin:0 auto 26px}
.error404 .e404-form{display:flex;flex-direction:column;gap:10px;max-width:520px;margin:0 auto 28px}
.error404 .e404-form input{height:48px;border:1.5px solid var(--line);border-radius:var(--radius-btn);padding:0 16px;font-size:16px;outline:none;background:#fff}
.error404 .e404-form input:focus{border-color:var(--blue)}
.error404 .e404-links{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:720px;margin:0 auto}
.error404 .e404-links a{display:flex;gap:12px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;transition:transform .3s,box-shadow .3s}
.error404 .e404-links a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.error404 .e404-links b{font:700 .98rem var(--h-font);color:var(--navy)}
@media (min-width:681px){
  .error404 .e404-form{flex-direction:row}
  .error404 .e404-form input{flex:1}
  .error404 .e404-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============================================================
   Mega-dropdown "Sản phẩm" — full-width (2026-09-16)
   style.css (copy verbatim từ source) neo dropdown vào thẻ <li> và cố
   định min-width 720px / 4 cột. Cây product_cat 2 cấp có 5 nhóm cha nên
   cần trải nền hết màn hình, nội dung canh lề theo container. Override ở
   đây để không đụng vào phần CSS verbatim.
   ============================================================ */
@media (min-width: 981px) {
  /* Bỏ neo theo <li> -> .dropdown bám .site-header (position:fixed) nên
     left/right:0 là trải hết bề ngang màn hình. Chỉ áp cho mega, dropdown
     "Bộ giải pháp" vẫn neo dưới chữ như cũ. */
  .main-navigation li.has-mega { position: static; }

  .dropdown--mega {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    display: block;
    padding: 24px 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .main-navigation li.open > .dropdown--mega { display: block; }

  /* Nội dung canh đúng lề container của header. auto-fit: thêm nhóm cha
     mới thì tự xuống dòng, không bóp nhỏ cột. */
  .dropdown--mega .mega-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 12px;
  }
  .dropdown--mega .col { min-width: 0; }
  .dropdown--mega .col a { white-space: normal; line-height: 1.35; }
}

/* ============================================================
   Bộ lọc danh mục dạng <a> (2026-09-16)
   Design gốc (design/html/assets/site.css dòng 231-238, 302-303) style cho
   <button> vì bản HTML tĩnh lọc bằng JS. Theme render <a> để lọc thật
   server-side nên không selector nào khớp -> tab/chip mất sạch style.
   Lặp lại đúng bộ thuộc tính đó cho thẻ <a>. Áp cho cả trang Sản phẩm và
   trang Tin tức (cùng class).
   ============================================================ */
.filter-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h-sm);
  padding: 6px 16px;
  border-radius: 999px;
  font: 700 .85rem var(--h-font);
  color: var(--navy);
  border: 1.5px solid var(--line);
  background: #fff;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.filter-tabs a:hover { border-color: var(--blue); color: var(--blue); }
.filter-tabs a.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.filter-chips a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 500;
  background: var(--aqua-2);
  color: var(--ink);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.filter-chips a:hover { color: var(--blue); }
.filter-chips a.active { background: var(--aqua); color: var(--blue); border-color: var(--blue); }

/* Chưa chọn nhóm cha -> khối chip rỗng, bỏ hẳn để không chừa khoảng trống. */
.shop-toolbar .filter-chips:empty { display: none; }

@media (min-width: 681px) {
  .filter-tabs a { padding: 9px 18px; font-size: .88rem; }
}

/* ============================================================
   WOOCOMMERCE — FIXED_ISSUES mục 13
   style.css là bản copy verbatim của design nên mọi chỉnh cho markup THẬT
   của Woo đặt ở đây. Design tự gắn class .btn / tự bọc .woo-layout,
   .woocommerce-account-layout — Woo không sinh các class đó.
   ============================================================ */

/* 13.1 NÚT — Woo xuất .button / .button.alt, map về đúng giá trị .btn (style.css mục 4).
   Mặc định = .btn--primary; ngoại lệ ghost/sm/block theo class design gán cho từng nút. */
:is(.woocommerce,.woocommerce-page) .button:not(.btn){display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .9rem/1.2 var(--h-font);min-height:var(--btn-h);padding:8px 22px;border-radius:var(--radius-btn);border:1.5px solid transparent;transition:all .25s;text-align:center;cursor:pointer;text-decoration:none;background:var(--blue);color:#fff}
:is(.woocommerce,.woocommerce-page) .button:not(.btn):hover{background:var(--blue-h);color:#fff;box-shadow:0 8px 20px rgba(12,116,170,.3)}
/* ghost: Áp dụng mã · Cập nhật giỏ · Xem (bảng đơn) · Cập nhật phí ship */
:is(.woocommerce,.woocommerce-page) .button:is([name="apply_coupon"],[name="update_cart"],[name="calc_shipping"],.view){border-color:var(--navy);color:var(--navy);background:transparent}
:is(.woocommerce,.woocommerce-page) .button:is([name="apply_coupon"],[name="update_cart"],[name="calc_shipping"],.view):hover{background:var(--navy);color:#fff;box-shadow:none}
/* sm: nút trong bảng đơn hàng + nút trong thông báo */
:is(.woocommerce,.woocommerce-page) :is(.woocommerce-orders-table,.woocommerce-info,.woocommerce-message) .button{min-height:var(--btn-h-sm);padding:6px 16px;font-size:.82rem}
:is(.woocommerce,.woocommerce-page) .woocommerce-orders-table .button{padding:8px 16px} /* giữ style.css:906 */
/* block: tiến hành thanh toán · đặt hàng · đăng nhập · đăng ký */
:is(.woocommerce,.woocommerce-page) :is(.checkout-button,#place_order,.woocommerce-form-login__submit,.woocommerce-form-register .button){display:flex;width:100%}
/* disabled / đang tải — giữ hành vi Woo */
:is(.woocommerce,.woocommerce-page) .button:is(.disabled,:disabled,.loading){opacity:.45;cursor:not-allowed;box-shadow:none}
:is(.woocommerce,.woocommerce-page) .button[name="update_cart"]:disabled:hover{background:transparent;color:var(--navy)}
@media (min-width:681px){
  :is(.woocommerce,.woocommerce-page) .button:not(.btn){font-size:.95rem}
  :is(.woocommerce,.woocommerce-page) :is(.woocommerce-orders-table,.woocommerce-info,.woocommerce-message) .button{font-size:.82rem}
}

/* 13.2 SẢN PHẨM BIẾN THỂ — select gốc ẩn (Woo vẫn dùng), bỏ khối giá phụ;
   giá thật ghi vào .price-big bằng site.js module 8. Tồn kho chỉ hiện khi hết hàng. */
.variations .vx-variation-select{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.single_variation .woocommerce-variation-price,
.single_variation .woocommerce-variation-description{display:none}
.single_variation .woocommerce-variation-availability .stock:not(.out-of-stock){display:none}
.single_variation .woocommerce-variation-availability .stock.out-of-stock{margin:10px 0 0;font-size:.86rem;font-weight:600;color:var(--err)}
.buy-row .single_variation_wrap{flex:1 1 100%;min-width:0}
/* hàng số lượng + nút mua: cùng bố cục .buy-row của design cho cả sp đơn và biến thể */
.buy-box form.cart:not(.variations_form),
.buy-box .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
.buy-box :is(form.cart,.woocommerce-variation-add-to-cart) .quantity{flex:0 0 118px}
.buy-box .single_add_to_cart_button{flex:1 1 120px}
/* biến thể: .buy-row đã có margin-top 14px (= khoảng nút quy cách → số lượng của design) */
.buy-row .woocommerce-variation-add-to-cart{margin-top:0}

/* 13.3 GIỎ TRỐNG — cart-empty.php: thông báo thành card căn giữa, nút về shop căn giữa.
   Không bám .wc-empty-cart-message: xoá hết hàng bằng AJAX thì cart.js dời thông báo vào .woocommerce-notices-wrapper. */
.woocommerce .cart-empty.woocommerce-info{display:block;margin:0;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px 20px;font:700 1.2rem/1.35 var(--h-font);color:var(--navy);box-shadow:var(--shadow-sm)}
.return-to-shop{margin:18px 0 0;text-align:center}

/* 13.4 BỐ CỤC 2 CỘT ≥1025px
   - Giỏ: style.css:853-855 bám .woo-layout (design tự bọc); Woo thật là
     div.woocommerce > form.woocommerce-cart-form + div.cart-collaterals > .cart_totals.
   - Thanh toán: style.css:856-862 cho #customer_details chiếm hàng 2-3; cột trái cao
     hơn cột phải thì hàng tiêu đề "Your order" bị giãn, card tách đôi → thêm hàng đệm 1fr.
   - Tài khoản: style.css:868/955 bám .woocommerce-account-layout (design tự bọc). */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation){display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:1025px){
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form){display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:32px;align-items:start}
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > :not(.woocommerce-cart-form,.cart-collaterals){grid-column:1/-1}
  .woocommerce-cart .woocommerce > .woocommerce-cart-form{grid-column:1;margin-bottom:0}
  .woocommerce-cart .woocommerce > .cart-collaterals{grid-column:2;position:sticky;top:calc(var(--header-h) + 20px)}
  .woocommerce-cart .cart-collaterals .cart_totals{margin-bottom:0}
  form.checkout{grid-template-rows:auto auto auto 1fr}
  form.checkout #customer_details{grid-row:2/span 3}
  .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation){grid-template-columns:250px minmax(0,1fr);gap:24px}
}

/* 13.5 TIÊU ĐỀ CARD — mọi card đều có tiêu đề, cùng style #customer_details > h3 của design */
.woocommerce-billing-fields > h3,.vx-account-title{font:700 1.05rem/1.35 var(--h-font);color:var(--navy);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
/* card đăng nhập khi TẮT đăng ký: Woo không in #customer_login, chỉ có h2 + form
   đứng thẳng trong .woocommerce → biến cả khối thành 1 card rộng bằng 1 cột design. */
.woocommerce-account .woocommerce:has(> form.woocommerce-form-login){background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-p);box-shadow:var(--shadow-sm);margin-bottom:18px}
.woocommerce-account .woocommerce:has(> form.woocommerce-form-login) > h2,
.woocommerce-MyAccount-content form > h2:first-child{font:700 1.05rem/1.35 var(--h-font);color:var(--navy);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.woocommerce-form-login__rememberme{margin-bottom:14px}
@media (min-width:901px){
  /* = 1 cột của #customer_login design (style.css:952, gap 18px) */
  .woocommerce-account .woocommerce:has(> form.woocommerce-form-login){max-width:calc(50% - 9px)}
}
.password-input{position:relative;display:block}
.password-input .show-password-input{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;background:none;border:0;color:var(--gray);cursor:pointer}
.password-input .input-text{padding-right:44px}
.password-input .show-password-input::after{content:"";display:block;width:18px;height:18px;margin:auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.password-input .show-password-input.display-password{color:var(--blue)}

/* 13.6 FORM ĐỊA CHỈ (checkout + sửa địa chỉ) — cặp ô 2 cột như design:
   Quận/Tỉnh (city/state) · SĐT/Email. Woo gắn form-row-wide cho các ô này. */
@media (min-width:681px){
  :is(#billing_city_field,#billing_state_field,#billing_phone_field,#billing_email_field,#shipping_city_field,#shipping_state_field){grid-column:auto}
}
.woocommerce-address-fields > p{margin:18px 0 0}

/* 13.7 CHI TIẾT ĐƠN (view-order · thankyou) */
/* đoạn chữ dashboard: design đặt trong div panel nên nhận style p gốc (ink, cách 16px),
   không phải .woocommerce-MyAccount-content > p (xám) của style.css:881 */
.woocommerce-MyAccount-content > p{color:var(--ink);margin:0 0 16px}
.woocommerce-MyAccount-content mark{background:none;color:var(--navy);font-weight:700}
.woocommerce-view-order .woocommerce-MyAccount-content > .vx-account-title + p{color:var(--gray);margin:0}
.woo-steps--order{margin:22px 0 4px}
.woocommerce-table--order-details th.product-total{text-align:right}
.woocommerce-customer-details > address{font-style:normal;font-size:.88rem;line-height:1.75;color:var(--gray);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0}
.woocommerce-customer-details address p{margin:0}

/* 13.8 SẢN PHẨM — khoảng cách giá lớn → nhãn "Quy cách" */
.buy-box > .price-big{margin-bottom:12px}
@media (min-width:681px){
  .woocommerce-customer-details:not(:has(.woocommerce-columns)) > address{max-width:calc(50% - 7px)}
}
/* thanh "Have a coupon? Click here…" / "Returning customer?": chữ trơn + link là 2 flex item
   của .woocommerce-info (style.css:267) → trên mobile tách 2 cột; cho chảy như 1 dòng văn bản */
:is(.woocommerce-form-coupon-toggle,.woocommerce-form-login-toggle) .woocommerce-info{display:block}

/* ============================================================
   FIXED_ISSUES mục 15 — phân trang, thẻ sản phẩm, form trong side-box,
   sản phẩm giá liên hệ, khoảng cách thân bài, ô mã ưu đãi ở thanh toán
   ============================================================ */

/* 15.1 PHÂN TRANG — archive-product.php + home.php in paginate_links(['type'=>'list'])
   trong <nav class="pagination">. Design không có phân trang (bản gốc dùng nút
   "Xem thêm" + JS) nên style.css chép từ design cũng không có luật nào cho
   .page-numbers -> trình duyệt vẽ <ul> mặc định: gạch đầu dòng, xếp dọc.
   Kiểu nút lấy theo .filter-tabs button (style.css mục 12) cho đồng bộ. */
.pagination ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.pagination ul.page-numbers li{margin:0;list-style:none}
/* Lưu ý: chính thẻ <ul> cũng mang class .page-numbers -> luật nút phải bám
   phần tử BÊN TRONG <li>, nếu không cả khung ul bị vẽ thành 1 viên thuốc dài. */
.pagination li .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:var(--btn-h-sm);min-height:var(--btn-h-sm);padding:6px 12px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:700 .85rem var(--h-font);color:var(--navy);text-decoration:none;transition:all .25s}
.pagination li a.page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.pagination li .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination li .page-numbers.dots{border-color:transparent;background:transparent;color:var(--gray);min-width:auto;padding:6px 4px}

/* 15.2 THẺ SẢN PHẨM — sau khi thêm giỏ bằng AJAX, Woo tự chèn
   <a class="added_to_cart wc-forward">View cart</a> vào .price-row. Link này
   không mang class .btn nên thành chữ trơn và đẩy hàng giá xuống dòng; design
   không có nút đó (khách đã chốt bỏ hẳn — phản hồi đã có toast + số trên icon giỏ). */
.product-card .added_to_cart{display:none}

/* 15.3 FORM TRONG SIDE-BOX — .side-box (style.css mục 15) và .contact-form
   (style.css mục 16) đều vẽ viền + bo + đổ bóng nền trắng, lồng nhau thành
   viền đôi ở "Hỏi kỹ thuật viên" (chi tiết sản phẩm) và "Cần tư vấn cho ao của
   bạn?" (chi tiết bài viết). Form đứng độc lập (trang chủ, liên hệ, tuyển dụng)
   giữ nguyên viền. */
.side-box .contact-form{background:transparent;border:0;box-shadow:none;padding:0}

/* 15.4 SẢN PHẨM GIÁ LIÊN HỆ — hộp mua không có giá lẫn nút (Woo bỏ qua nút mua
   khi sản phẩm không is_purchasable) nên trước đây trống trơn. */
.buy-box .price--contact{display:block;font:800 1.4rem var(--h-font);color:var(--blue);margin-bottom:12px}
#hoi-ky-thuat{scroll-margin-top:calc(var(--header-h) + 16px)}

/* 15.5 CHI TIẾT BÀI VIẾT — bài không có ảnh đại diện thì .entry-content dính
   ngay dưới .entry-header (ảnh đại diện vốn là thứ duy nhất tạo khoảng cách,
   qua inline margin:22px của <figure> trong single.php). Selector liền kề nên
   bài CÓ ảnh không bị cộng thêm. */
.entry-header + .entry-content{margin-top:22px}

/* 15.6 Ô MÃ ƯU ĐÃI TRANG THANH TOÁN — Woo in form ở đầu trang và ẩn đi, chờ bấm
   "Have a coupon?". Design đặt ô nhập trong card đơn hàng và luôn hiện:
   site.js module 14 chuyển node form vào .vx-coupon-slot (inc/woo-hooks.php in
   ở hook woocommerce_review_order_before_payment), CSS bỏ thanh bấm-mở và ghi
   đè inline display:none của Woo (dùng !important vì đó là inline style). */
.woocommerce-form-coupon-toggle{display:none}
.vx-coupon-slot{margin:0 0 18px}
.vx-coupon-slot:empty{display:none} /* JS tắt / chưa kịp chuyển form -> không chừa khoảng trống */
.vx-coupon-slot form.checkout_coupon{display:flex!important;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0;background:transparent}
.vx-coupon-slot form.checkout_coupon p{margin:0}
.vx-coupon-slot .form-row-first{flex:1 1 160px}
/* card đơn hàng chỉ rộng ~300px -> ô nhập và nút xếp 2 hàng, cho nút rộng hết
   hàng để đọc ra là một cặp, không phải nút lạc chỗ */
.vx-coupon-slot .form-row-last{flex:1 1 100%}
.vx-coupon-slot button[name="apply_coupon"]{width:100%}
.vx-coupon-slot #coupon_code{width:100%;height:var(--btn-h);border:1.5px solid var(--line);border-radius:10px;padding:0 14px;font:400 .95rem var(--b-font);color:var(--ink);background:#fff}
.vx-coupon-slot #coupon_code:focus{outline:none;border-color:var(--blue)}
.vx-coupon-slot button[name="apply_coupon"]{background:#fff;color:var(--blue);border-color:var(--blue)}
.vx-coupon-slot button[name="apply_coupon"]:hover{background:var(--blue);color:#fff}

/* 15.5 CONTACT FORM 7 — theme khong co CSS cho markup rieng cua CF7
   (.wpcf7-*). Phan label/o nhap dung chung .field/.form-grid voi form tinh;
   3 cho CF7 xuat khac phai bu lai: nut gui, chieu cao textarea, bao loi. */
.wpcf7-form-control-wrap{display:block}
.wpcf7-spinner{display:none}

/* NUT GUI — form tinh dung <button>, CF7 xuat <input type="submit"> nen dinh
   .field input (style.css muc 9: background:#fff, height:48px, vien xam, padding
   hep). Selector do manh hon .btn--primary nen nut thanh trang tren nen trang,
   mat chu. Tra lai dung style .btn/.btn--primary bang specificity cao hon. */
.field input[type="submit"]{height:auto;min-height:var(--btn-h);padding:8px 22px;border-color:transparent;background:transparent;font:700 .9rem/1.2 var(--h-font)}
.field input[type="submit"].btn--primary{background:var(--blue);color:#fff}
.field input[type="submit"].btn--primary:hover{background:var(--blue-h);color:#fff;box-shadow:0 8px 20px rgba(12,116,170,.3)}

/* TEXTAREA — CF7 xuat rows="10"; .field textarea dat height:auto nen chieu cao
   chay theo rows, cao gap doi design. Chot lai dung chieu cao cua form tinh. */
.wpcf7 .field textarea{height:120px}
/* .vx-msg-b dat trong noi dung form o wp-admin (2 form kieu B), khong co
   trong repo — dung grep theme de ket luan la class chet. */
.wpcf7 .field textarea.vx-msg-b{height:96px;min-height:96px}

.field .wpcf7-not-valid{border-color:var(--err)}
.wpcf7-not-valid-tip{display:block;margin-top:6px;font:500 .82rem var(--b-font);color:var(--err)}
.wpcf7-response-output{margin:16px 0 0;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius);font-size:.9rem;color:var(--ink)}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--ok);background:#F1F8F3;color:var(--ok)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{border-color:var(--err);background:#FCF2F2;color:var(--err)}
.wpcf7 form.submitting .wpcf7-submit{opacity:.55;pointer-events:none}