/* Tiến Phát — các style chuyển từ inline style của mockup sang class,
   và phần bổ sung riêng cho bản WordPress. Nạp sau main.css. */

.tp-site{min-height:100%;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body)}

/* Topbar (mockup: inline style trên .rail) */
.tp-topbar{padding:8px 32px;background:var(--color-accent-900);color:var(--color-neutral-100);font-size:13px;letter-spacing:.04em}
.tp-topbar-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.tp-topbar .topbar-note{text-transform:uppercase;font-family:var(--font-heading);letter-spacing:.06em}
.tp-topbar-hours{display:flex;gap:18px;align-items:center;color:var(--color-accent-200);font-family:var(--font-heading);letter-spacing:.06em}

/* Zalo người thứ 2 (mockup: .tp-zalo-person-tai) */
.tp-zalo-person-2 .tp-zalo-avatar{background:#0068ff!important}

/* Nội dung mặc định (index/page/404) */
.tp-default{max-width:1240px;margin:0 auto;padding:64px 24px 96px}
.tp-default h1{font-size:clamp(30px,4vw,44px);line-height:1.15;margin:0 0 18px}
.tp-default .tp-entry{max-width:820px;font-size:16px;line-height:1.7}
.tp-default .tp-entry img{max-width:100%;height:auto}
.tp-default .tp-post-list{display:grid;gap:22px;padding:0;margin:0;list-style:none}
.tp-default .tp-post-list a{font-weight:700}


/* Mockup: topbar ẩn ở ≤1024px trên trang chi tiết (rule body>div>div.rail), nhưng vẫn hiện ở trang chủ. */
@media (max-width:1024px){body.home .tp-site>.tp-topbar{display:block!important}}

/* Danh mục chưa có sản phẩm / lọc không ra kết quả */
.catalog-empty{margin:0 0 24px;padding:22px 24px;border:1px dashed #cfdcd6;border-radius:12px;background:#fff;color:#4f6560;font-size:15px}
.catalog-empty button{margin-left:8px;border:0;background:none;color:var(--accent,#ef6b2e);font-weight:700;cursor:pointer;text-decoration:underline}

/* Đầu nhóm ở danh mục cha: bỏ nền trắng (rule chung "header{background}" của mockup ăn vào thẻ <header>). */
.product-family .family-header{background:transparent!important}

/* Trigger mega menu là link (bấm để vào danh mục cha). */
a.tp-menu-trigger{text-decoration:none;cursor:pointer}

/* Gallery: số ảnh ẩn trên thumb thứ 3 lấy theo dữ liệu (mockup cố định "+3"). */
.gallery-thumbs.show-more-badge .gallery-thumb[data-more]:after{content:attr(data-more)}


/* Trạng thái gửi form */
.form-status:empty{display:none}
.form-status{margin-top:12px;padding:11px 14px;border-radius:10px;font-size:14px;line-height:1.5}
.form-status[data-type="success"]{background:#eaf6ee;border:1px solid #b9dcc4;color:#1d5b33}
.form-status[data-type="error"]{background:#fdecea;border:1px solid #f2c0b8;color:#9b2c1a}
.tp-request-form input[aria-invalid="true"]{border-color:#c4421f!important;box-shadow:0 0 0 2px rgba(196,66,31,.12)}

/* Video case study phát ngay trong khung (trang chủ) */
.case-video-frame .case-video-player{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;background:#0b1f1b;object-fit:contain}
.case-video-frame.is-playing{cursor:default}
.case-video-frame.is-playing::after,
.case-video-frame.is-playing .case-video-overlay,
.case-video-frame.is-playing .case-video-play,
.case-video-frame.is-playing .case-video-badge{display:none}
.case-video-frame.is-playing:hover img{transform:none}
.case-video-frame.is-empty{cursor:default}
.case-video-frame.is-empty:hover img{transform:none}

/* Nút liên hệ nổi: rê vào nút nào thì chỉ nút đó dài ra, 2 nút còn lại đứng yên.
   - Khóa chiều cao từng nút (chữ hiện ra lúc đang co giãn không làm nút cao lên → cả cụm
     căn giữa dọc không bị đẩy lên/xuống).
   - Chữ luôn một dòng, phần thừa bị che trong lúc nút đang dài ra.
   - Bỏ hiệu ứng nhích (translateY) khi hover. */
@media (min-width:1180px){
  .tp-floating-contact .tp-float-item{height:54px!important;min-height:54px!important;max-height:54px!important;box-sizing:border-box;overflow:hidden;flex:0 0 54px;transform:none!important;transition:width .18s ease,box-shadow .16s ease,background-color .16s ease!important}
  .tp-floating-contact .tp-float-item:hover,
  .tp-floating-contact .tp-float-item:focus-visible{transform:none!important}
  .tp-floating-contact .tp-float-copy{flex:0 0 auto;min-width:0;white-space:nowrap}
  .tp-floating-contact .tp-float-copy small,
  .tp-floating-contact .tp-float-copy strong{white-space:nowrap}
  .tp-floating-contact .tp-float-icon,
  .tp-floating-contact .tp-zalo-mark{flex:0 0 32px}
}

/* "Cần biết khi đặt hàng" (#dat-hang): khung ngoài padding đều 4 phía, các mục cách nhau 14px theo chiều dọc.
   main.css có "#dat-hang .blueprint{padding:8px 18px 20px!important}" áp cả cho khung ngoài → ghi đè bằng class riêng. */
#dat-hang .blueprint.dh-wrap{padding:24px!important}
#dat-hang .cells-4.dh-grid{row-gap:14px!important}
@media (max-width:760px){
  #dat-hang .blueprint.dh-wrap{padding:14px!important}
  #dat-hang .cells-4.dh-grid{row-gap:14px!important}
}

/* Thanh menu dùng nowrap; nội dung mega panel phải xuống dòng bình thường. */
.tp-mega-panel{white-space:normal}

/* ===== Drawer mobile: style riêng, giống nhau trên mọi trang =====
   (category.css của mockup có rule chung details/summary → trước đây trang danh mục
   có dấu +/− còn trang chủ thì không). */
.tp-drawer details{margin:0;padding:0!important;border:0!important;border-bottom:1px solid var(--color-neutral-200)!important}
.tp-drawer details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;min-height:52px;padding:0 18px;border:0;font-family:var(--font-heading);font-size:17px;font-weight:500;color:var(--color-text);cursor:pointer}
.tp-drawer details>summary::-webkit-details-marker{display:none}
.tp-drawer details>summary::marker{content:''}
.tp-drawer details>summary::after{content:"";font-size:0;color:transparent;flex:0 0 26px;width:26px;height:26px;border:1px solid #d7e1dc;border-radius:50%;
  background:linear-gradient(#b94b1a,#b94b1a) center/10px 1.6px no-repeat,linear-gradient(#b94b1a,#b94b1a) center/1.6px 10px no-repeat;transition:transform .2s,background-color .2s}
.tp-drawer details[open]>summary{color:#a84216;font-weight:650}
.tp-drawer details[open]>summary::after{content:"";font-size:0;background:linear-gradient(#b94b1a,#b94b1a) center/10px 1.6px no-repeat,#fff5ef;border-color:#efb493}
.tp-drawer details>a{border-bottom:0!important;min-height:44px;padding-left:30px}
.tp-drawer details>a:first-of-type{font-weight:600;color:#a84216}
.tp-drawer details[open]{padding-bottom:6px!important;background:#fafcfb}

.tp-drawer-contact{margin:auto 16px 0;padding-top:20px}
.tp-drawer-call{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;border-radius:14px;background:#b94b1a;color:#fff!important;text-decoration:none;
  box-shadow:0 8px 20px rgba(185,75,26,.28);transition:background-color .2s,transform .2s}
.tp-drawer-call:hover{background:#a03f14}
.tp-drawer-call:active{transform:scale(.98)}
.tp-drawer-call-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18)}
.tp-drawer-call-icon svg{width:20px;height:20px}
.tp-drawer-call-text{display:grid;gap:2px;min-width:0;flex:1}
.tp-drawer-call-text small{font-size:12px;font-weight:600;letter-spacing:.04em;opacity:.88;text-transform:uppercase}
.tp-drawer-call-text b{font-family:var(--font-heading);font-size:20px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.tp-drawer-call-go{font-size:18px;opacity:.85}
.tp-drawer-hours{margin:10px 0 0;text-align:center;font-size:13px;color:var(--color-neutral-700,#5d6b67)}

/* ===== Thẻ sản phẩm: ảnh + tên bấm được ===== */
a.product-media{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.product-media img{transition:transform .35s ease}
a.product-media:hover img{transform:scale(1.04)}
.product-title-link{color:inherit;text-decoration:none}
.product-title-link:hover{color:#a84216}
/* Ảnh lớn trong mega menu bấm được (chữ và lớp phủ không chặn click) */
.tp-mega-promo-link{position:absolute;inset:0;z-index:1}
.tp-mega-overlay,.tp-mega-promo-copy{pointer-events:none}
.tp-mega-overlay{z-index:1}
.tp-mega-promo-copy{z-index:2}
.tp-mega-promo-copy a{pointer-events:auto}

/* ===== Nút lên đầu trang ===== */
.tp-to-top{position:fixed;right:33px;bottom:24px;z-index:890;width:48px;height:48px;display:grid;place-items:center;padding:0;border:1px solid #d7e1dc;border-radius:50%;
  background:#fff;color:#173731;cursor:pointer;box-shadow:0 8px 22px rgba(23,55,49,.16);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s,background-color .2s,color .2s}
.tp-to-top svg{width:20px;height:20px}
.tp-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.tp-to-top:hover{background:#b94b1a;border-color:#b94b1a;color:#fff}
.tp-to-top:focus-visible{outline:2px solid #b94b1a;outline-offset:3px}
@media(max-width:680px){.tp-to-top{right:14px;bottom:calc(90px + env(safe-area-inset-bottom,0px));width:44px;height:44px}}
@media print{.tp-to-top{display:none!important}}

/* ===== Thanh liên hệ mobile (GỌI | ZALO | TƯ VẤN): luôn hiện, icon SVG cùng hàng với chữ ===== */
.tp-mobile-actions{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none;min-height:0!important}
.tp-mobile-actions .tp-mobile-action{flex-direction:row!important;gap:8px!important;min-height:50px!important;height:50px;padding:0 8px!important}
.tp-mobile-actions .tp-mobile-action strong{font-size:13px!important;line-height:1!important;letter-spacing:.06em;white-space:nowrap}
.tp-mobile-actions .tp-ma-icon{flex:0 0 20px;width:20px;height:20px}
.tp-mobile-actions .tp-mobile-zalo .tp-zalo-mark-sm{width:24px!important;height:24px!important;flex:0 0 24px!important;padding:2px!important}
@media(max-width:1179px){body{padding-bottom:calc(50px + env(safe-area-inset-bottom,0px))!important}}
@media(max-width:680px){.tp-footer-bottom,.footer-bottom{padding-bottom:62px!important}.tp-to-top{bottom:calc(62px + env(safe-area-inset-bottom,0px))}}

/* Trang Liên hệ: icon Zalo nằm giữa ô 44px (main.css ép .tp-zalo-mark 32px + padding 5px làm SVG tràn lệch) */
.tp-contact-card .tp-zalo-mark.tp-contact-card-icon{width:44px!important;height:44px!important;flex:0 0 44px!important;padding:0!important;border-radius:12px!important;display:grid!important;place-items:center!important}
.tp-contact-card .tp-zalo-mark.tp-contact-card-icon .tp-zalo-glyph{width:30px!important;height:28px!important;margin:0!important}

/* ===== Gallery sản phẩm: video phát ngay trong khung ===== */
.gallery-stage .gallery-player{position:absolute;inset:0;z-index:4;background:#0b1f1b}
.gallery-stage .gallery-player[hidden]{display:none}
.gallery-stage .gallery-player video,.gallery-stage .gallery-player iframe{display:block;width:100%;height:100%;border:0;object-fit:contain;background:#0b1f1b}
.gallery-stage.is-playing .gallery-play{display:none!important}
/* Mũi tên vẫn bấm được khi đang phát; đặt cao lên giữa để không đè thanh điều khiển video */
.gallery-stage.is-playing .gallery-arrow{z-index:5;top:42%}
/* ===== Plyr dùng chung (gallery sản phẩm + video case study trang chủ) ===== */
.tp-plyr{width:100%;--plyr-color-main:#b94b1a;--plyr-video-background:#0b1f1b;--plyr-font-family:var(--font-body,inherit)}
.tp-plyr .plyr__poster{background-size:cover}
/* YouTube: iframe cao gấp đôi rồi đẩy lên nửa → thanh tiêu đề (trên) và logo (dưới) nằm ngoài vùng hiển thị;
   Plyr chặn click vào iframe nên người xem chỉ thao tác trên thanh điều khiển của Plyr. */
.tp-plyr .plyr--youtube .plyr__video-embed iframe{top:-50%;height:200%}
.tp-plyr>iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.gallery-stage .gallery-player{display:flex;align-items:center;justify-content:center}
.gallery-stage .gallery-player .tp-plyr:has(.plyr--html5),.gallery-stage .gallery-player .plyr--html5{height:100%}
.gallery-stage .gallery-player .plyr--html5 video{object-fit:contain}
.case-video-frame .case-video-player{display:flex;align-items:center;justify-content:center;object-fit:initial}
.case-video-frame .case-video-player .tp-plyr:has(.plyr--html5),.case-video-frame .case-video-player .plyr--html5{height:100%}
.case-video-frame .case-video-player iframe,.case-video-frame .case-video-player video{width:100%;height:100%;border:0}

/* Nút play video case study (trang chủ): tam giác to hơn, canh theo trọng tâm hình (viewBox ôm sát tam giác
   trong projects.php, canh giữa trọng tâm/khung hình — thay translateX(2px) cũ làm tam giác lệch phải). */
.case-video-frame .case-video-play svg{width:40px;height:40px;transform:none}
@media(max-width:680px){.case-video-frame .case-video-play svg{width:32px;height:32px}}