/* TECOTEC - Product Page CSS
   Enqueue tại: wp_enqueue_scripts (is_product only)
   File: assets/css/product-page.css
*/

/* ===== RESET / BASE ===== */
.tec-page { color: #1a1a1a; font-family: inherit; overflow-x: hidden; }
.tec-page *, .tec-page *::before, .tec-page *::after { box-sizing: border-box; }
.tec-page a { text-decoration: none; color: inherit; }
.tec-wrap { max-width: 1140px; margin: 0 auto; }

/* ===== BREADCRUMB ===== */
.tec-bc { font-size: 13px; color: #667; margin-bottom: 12px; }
.tec-bc .woocommerce-breadcrumb a { color: #146EB4; }
.woocommerce-breadcrumb { overflow-wrap: anywhere; }

/* ===== CARD ===== */
.tec-card { background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; padding: 24px; margin: 24px 0; box-shadow: 0 1px 3px rgba(0,0,0,.04); }

/* ===== PRODUCT GRID ===== */
.tec-pgrid { display: grid; grid-template-columns: minmax(0,480px) 1fr; gap: 40px; }
.tec-pgrid > * { min-width: 0; }

/* ===== GALLERY ===== */
.tec-gal__main { position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; }
.tec-gal__img { width: 100%; height: 100%; object-fit: contain; }
.tec-gal__video, .tec-gal__video iframe, .tec-gal__video video { width: 100%; height: 100%; border: 0; }
.tec-page button.tec-gal__zoom { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #e5e9ef; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.tec-page button.tec-gal__arr { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid #e5e9ef; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #333; }
.tec-gal__arr--l { left: 12px; }
.tec-gal__arr--r { right: 12px; }
.tec-gal__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; }
.tec-page button.tec-gal__th { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: #f5f7fa; position: relative; }
.tec-gal__th.is-active { border-color: #146EB4; }
.tec-gal__th-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tec-gal__th-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.35); font-size: 14px; }

/* ===== INFO / META ===== */
.tec-info__h1 { font-size: 24px !important; line-height: 1.25; font-weight: 700; color: #1a1a1a; margin: 0 0 16px; }
.tec-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.tec-meta__r { display: flex; gap: 6px; font-size: 14px; }
.tec-meta__k { color: #667; min-width: 140px; }
.tec-meta__v { color: #1a1a1a; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.tec-meta__brand { color: #146EB4; font-weight: 600; }
.tec-meta__more { font-size: 12px; color: #146EB4; margin-left: 6px; }

/* ===== PRICE BOX ===== */
.tec-pricebox { background: #f5f7fa; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.tec-pricebox__lbl { font-size: 12px; color: #667; display: block; margin-bottom: 4px; }
.tec-pricebox__prices { display: flex; align-items: baseline; gap: 10px; }
.tec-pricebox__val, .tec-pricebox__sale { font-size: 26px; font-weight: 700; color: #E9711A; }
.tec-pricebox__regular { font-size: 16px; color: #999; text-decoration: line-through; }

/* ===== QTY / BUTTONS / CTA ===== */
.tec-cta-row { display: flex; gap: 10px; }
.tec-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 6px; font-weight: 600; font-size: 15px; cursor: pointer; border: none; }
a.tec-btn--orange { background: #264C7E; color: #fff !important; }
.tec-btn--orange:hover { background: #1d3a61; }
.tec-btn--block { width: 100%; }
.tec-qty { display: inline-flex; align-items: center; border: 1px solid #e5e9ef; border-radius: 6px; overflow: hidden; }
.tec-page .tec-qty button { width: 36px; height: 40px; background: #f5f7fa; color: #1a1a1a; border: none; border-radius: 0; padding: 0; cursor: pointer; font-size: 16px; }
.tec-qty input { width: 48px; text-align: center; border: none; height: 40px; }

/* ===== TRUST BAR ===== */
.tec-trust { display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap; font-size: 13px; color: #667; }

/* ===== TABS ===== */
.tec-tabs-wrap { padding: 0; overflow: hidden; }
.tec-tabs-nav-wrap { border-bottom: 1px solid #e5e9ef; overflow-x: auto; }
.tec-tabs-nav { display: flex; gap: 4px; padding: 0 24px; }
.tec-tabs-nav__btn { padding: 16px 18px; background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0; font-weight: 600; font-size: 14px; color: #667; cursor: pointer; white-space: nowrap; user-select: none; }
.tec-tabs-nav__btn.is-active { color: #146EB4; border-bottom-color: #146EB4; }
.tec-panel { display: none; padding: 24px; }
.tec-panel.is-active { display: block; }

/* ===== WYSIWYG / TABLE ===== */
.tec-wysiwyg { line-height: 1.7; font-size: 15px; max-width: 100%; overflow-x: auto; }
.tec-wysiwyg img { max-width: 100%; height: auto; }
.tec-table-scroll { overflow-x: auto; }
.tec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tec-table td { padding: 10px 14px; border-bottom: 1px solid #eef1f5; }
.tec-table__k { color: #667; width: 260px; background: #f9fafb; }
.tec-table__v { font-weight: 500; }

/* ===== DOCLIST ===== */
.tec-doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tec-doclist__item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tec-doclist__link { color: #146EB4; }
.tec-doclist__link:hover { text-decoration: underline; }

/* ===== RELATED PRODUCTS ===== */
.related.products { max-width: 1140px; margin: 32px auto; }
.related.products > h2 { font-size: 44px; font-weight: 800; color: #0b2545; margin: 0 0 24px; }
.related.products ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.related.products ul.products::before, .related.products ul.products::after { content: none !important; display: none !important; }
.related.products ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; border: 1px solid #146EB4; border-radius: 4px; padding: 28px 16px 24px; text-align: center; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.08); transition: box-shadow .15s, border-color .15s; display: flex !important; flex-direction: column; min-height: 400px; }
.related.products ul.products li.product:hover { border-color: #0b2545; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.related.products ul.products li.product a.woocommerce-loop-product__link { display: block; }
.related.products ul.products li.product img { max-width: 160px; width: 100%; height: 160px; margin: 0 auto 18px; display: block; object-fit: contain; }
.related.products ul.products li.product .woocommerce-loop-product__title { font-size: 20px; font-weight: 400; color: #1a1a1a; line-height: 1.4; margin: 0 0 18px; }
.related.products ul.products li.product .price { display: block; font-size: 15px; font-weight: 700; color: #E9711A; margin: 0 0 12px; }
.related.products ul.products li.product .button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border: 1px solid #146EB4; border-radius: 4px; background: #fff; color: #1a1a1a !important; font-weight: 600; font-size: 14px; margin-top: auto; }
.related.products ul.products li.product .button:hover { background: #264C7E; border-color: #264C7E; color: #fff !important; }
@media (max-width: 900px) { .related.products ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .related.products ul.products { grid-template-columns: 1fr; } }

/* ===== QUICK SUPPORT ===== */
.tec-support { max-width: 1240px; margin: 24px auto; padding: 32px 20px; text-align: center; }
.tec-support__h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.tec-support__sub { color: #667; font-size: 14px; margin: 0 0 24px; }
.tec-support__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.tec-sc { background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; padding: 20px 16px; position: relative; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.tec-sc:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-2px); }
.tec-sc__top { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #146EB4; }
.tec-sc__icon { width: 44px; height: 44px; border-radius: 50%; background: #146EB4; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.tec-sc__type { display: block; font-size: 12px; color: #667; text-transform: uppercase; letter-spacing: .04em; }
.tec-sc__val { display: block; font-size: 16px; font-weight: 700; margin: 4px 0; }
.tec-sc__sub { display: block; font-size: 12px; color: #999; }

/* ===== LIGHTBOX ===== */
.tec-lb { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.tec-lb[hidden] { display: none; }
.tec-lb__img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.tec-lb__video { width: 80vw; max-width: 1100px; aspect-ratio: 16/9; }
.tec-lb__video iframe, .tec-lb__video video { width: 100%; height: 100%; border: 0; }
.tec-lb button.tec-lb__close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; background: none; border: none; padding: 0; border-radius: 0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tec-lb button.tec-lb__prev, .tec-lb button.tec-lb__next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; border-radius: 0; color: #fff; cursor: pointer; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.tec-lb__prev { left: 20px; }
.tec-lb__next { right: 20px; }
.tec-lb__counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; }

/* ===== WOOCOMMERCE OVERRIDES ===== */
.tec-page .woocommerce-message,
.tec-page .woocommerce-error { max-width: 1140px; margin: 16px auto; }

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
    .tec-pgrid { grid-template-columns: 1fr; gap: 24px; }
    .tec-page button.tec-gal__th { width: 88px; height: 88px; }
    .tec-wrap { padding: 0 20px; }
}
@media (max-width: 600px) {
    .tec-card { padding: 16px; }
    .tec-info__h1 { font-size: 20px; }
    .tec-tabs-nav { padding: 0 12px; }
    .tec-panel { padding: 16px; }
    .tec-meta__k { min-width: 110px; }
    .tec-page button.tec-gal__th { width: 60px; height: 60px; }
}