/*
Theme Name: VietDiag
Theme URI: https://vietdiag.com/
Author: VietDiag (clone WordPress)
Description: Block theme (Full Site Editing) duoc port 1:1 tu giao dien UX/UI cua website VietDiag (CMS PHP cu). Toan bo CSS goc nam o assets/css/vietdiag-home.css, khong dung framework ngoai.
Version: 1.0.7
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vietdiag
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, translation-ready
*/

/* ==========================================================================
   Phan bo sung cua WordPress (khong co trong CSS goc cua site cu).
   CSS goc: assets/css/vietdiag-home.css (enqueue rieng, khong sua doi).
   ========================================================================== */

body.vietdiag-ui {
  background: var(--white, #fff);
  color: var(--ink, #142333);
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Thanh admin bar cua WordPress: day header xuong cho khong bi che (xem muc sticky ben duoi) */

/* Can chinh mac dinh cho noi dung do Gutenberg sinh ra */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* LUU Y: khong dat max-width cho MOI con cua .entry-content, vi cac khoi trang chu
   (section.hero, section.section, section.lead-section...) phai rong toan trang giong
   ban cu - chi noi dung van ban moi can gioi han be ngang. */
.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-buttons,
.entry-content > .wp-block-table {
  max-width: var(--container, 1180px);
  margin-inline: auto;
}
.entry-content > .alignwide { max-width: 1280px; }
.entry-content > .alignfull { max-width: none; }
.entry-content > .vd-full-bleed { max-width: none; }

.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }

/* Truy cap: lien ket bo qua dieu huong da co trong header goc (.skip-link) */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip-path: none;
  color: #142333;
  display: block;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Anh trong NOI DUNG BAI VIET (khong ap cho anh cua cac khoi thiet ke, neu khong se pha
   ti le anh da duoc CSS goc quy dinh - vd anh tron 145x145 cua the san pham). */
.rich-content img,
.vd-single-body img,
.vd-product-content img,
.entry-content .wp-block-image img {
  max-width: 100%;
  height: auto;
}
.entry-content figure { margin: 0 0 1.25rem; }
.entry-content figcaption {
  color: var(--muted, #5f6f7e);
  font-size: .85rem;
  margin-top: .5rem;
  text-align: center;
}

/* Noi dung phan rich-content (khoi text trong trang chu / trang tinh) */
.rich-content > *:first-child { margin-top: 0; }
.rich-content > *:last-child { margin-bottom: 0; }
.rich-content h2,
.rich-content h3 { color: var(--navy-900, #0b2239); margin: 1.25rem 0 .6rem; }
.rich-content p { margin: 0 0 .85rem; }
.rich-content ul,
.rich-content ol { margin: 0 0 1rem 1.25rem; }
.rich-content li { margin-bottom: .35rem; }
.rich-content a { color: var(--teal-700, #08736d); text-decoration: underline; }
.rich-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
}
.rich-content th,
.rich-content td {
  border: 1px solid var(--line, #dbe5eb);
  padding: .5rem .65rem;
  text-align: left;
}
.rich-content img { border-radius: var(--radius-sm, 12px); height: auto; max-width: 100%; }

/* Phan trang cho archive / search / blog */
.vd-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin: 2rem 0 1rem;
}
.vd-pagination .page-numbers {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line, #dbe5eb);
  border-radius: 10px;
  color: var(--navy-800, #12324f);
  display: inline-flex;
  font-weight: 600;
  height: 40px;
  justify-content: center;
  min-width: 40px;
  padding: 0 .75rem;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.vd-pagination .page-numbers:hover { border-color: var(--teal-500, #15a79d); color: var(--teal-700, #08736d); }
.vd-pagination .page-numbers.current {
  background: var(--teal-500, #15a79d);
  border-color: var(--teal-500, #15a79d);
  color: #fff;
}

/* Trang thai rong */
.vd-empty {
  background: var(--blue-50, #f2f7fb);
  border: 1px dashed var(--line, #dbe5eb);
  border-radius: var(--radius-md, 20px);
  color: var(--muted, #5f6f7e);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* WooCommerce: an gia tri khi san pham khong co gia (chi hien "Lien he") */
.woocommerce-Price-amount.vd-contact-price { display: none; }
.vd-contact-price {
  color: var(--teal-700, #08736d);
  font-weight: 700;
}

/* Nut/bieu mau mac dinh cua WooCommerce duoc an vi site chay catalog mode */
.woocommerce-cart-form__contents .product-remove,
.single_add_to_cart_button,
.quantity,
.woocommerce-checkout-review-order,
.wc-block-cart,
.wc-block-checkout {
  /* giu nguyen style; catalog mode xu ly bang PHP */
}

/* Editor: giu dung ti le container nhu front-end */
.editor-styles-wrapper .wp-block {
  max-width: var(--container, 1180px);
}
.editor-styles-wrapper .wp-block[data-align="wide"] { max-width: 1280px; }
.editor-styles-wrapper .wp-block[data-align="full"] { max-width: none; }
.editor-styles-wrapper .vd-block-label {
  background: var(--teal-50, #eefaf8);
  border: 1px dashed var(--teal-500, #15a79d);
  border-radius: 8px;
  color: var(--teal-700, #08736d);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .35rem .6rem;
  text-transform: uppercase;
}

/* In an: bo cac thanh phan dieu huong */
@media print {
  .topbar,
  .header,
  .footer,
  .mobile-sticky,
  .modal,
  .toast,
  .nav__mobile-actions { display: none !important; }
}

/* ==========================================================================
   Trang trong (archive / single / chi tiet san pham) - dung cung he VietDiag
   ========================================================================== */

.page_trong { padding: 0 0 4rem; }

.vd-breadcrumb { padding: 1.25rem 0 .25rem; }
.vd-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted, #5f6f7e);
  font-size: .875rem;
}
.vd-breadcrumb li + li::before { content: "/"; color: var(--line, #dbe5eb); margin-right: .4rem; }
.vd-breadcrumb a { color: var(--teal-700, #08736d); text-decoration: none; }
.vd-breadcrumb a:hover { text-decoration: underline; }
.vd-breadcrumb .is-current { color: var(--muted, #5f6f7e); }

.vd-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 1.75rem;
}
.vd-chip {
  background: #fff;
  border: 1px solid var(--line, #dbe5eb);
  border-radius: 999px;
  color: var(--navy-800, #12324f);
  font-size: .9rem;
  font-weight: 600;
  padding: .45rem 1rem;
  text-decoration: none;
  transition: all .2s ease;
}
.vd-chip:hover { border-color: var(--teal-500, #15a79d); color: var(--teal-700, #08736d); }
.vd-chip.is-active { background: var(--teal-500, #15a79d); border-color: var(--teal-500, #15a79d); color: #fff; }

.product-card__price { color: var(--teal-700, #08736d); font-weight: 700; margin: .35rem 0 .6rem; }

/* Chi tiet san pham */
.vd-product-top {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 2.5rem;
}
.vd-product-gallery__main {
  background: var(--blue-50, #f2f7fb);
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
  position: relative;
}
.vd-product-gallery__main img { cursor: zoom-in; display: block; height: auto; width: 100%; }
.vd-product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.vd-product-thumb {
  background: none;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color .15s ease, opacity .15s ease;
  width: 84px;
}
.vd-product-thumb:hover { border-color: var(--teal-100, #dff5f2); }
.vd-product-thumb:focus-visible { border-color: var(--teal-600, #0b8d84); outline: 2px solid var(--teal-600, #0b8d84); outline-offset: 2px; }
.vd-product-thumb.is-active { border-color: var(--teal-500, #15a79d); }
.vd-product-thumb img { display: block; height: auto; width: 100%; }

/* Lightbox xem anh san pham co lon */
.vd-lightbox {
  align-items: center;
  background: rgba(7, 25, 42, .92);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 1.5rem;
  position: fixed;
  z-index: 2000;
}
.vd-lightbox.is-open { display: flex; }
.vd-lightbox img {
  background: #fff;
  border-radius: 12px;
  height: auto;
  max-height: 88vh;
  max-width: min(1100px, 92vw);
  width: auto;
}
.vd-lightbox__close,
.vd-lightbox__nav {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border: 0;
  border-radius: 999px;
  color: #0b2239;
  cursor: pointer;
  display: flex;
  font-size: 26px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  width: 44px;
}
.vd-lightbox__close { right: 1rem; top: 1rem; }
.vd-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.vd-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.vd-lightbox__nav[hidden] { display: none; }

.vd-product-info h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: 0 0 1rem; }
.vd-product-price { color: var(--teal-700, #08736d); font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
.vd-product-short { color: var(--muted, #5f6f7e); margin-bottom: 1.25rem; }
.vd-product-specs {
  border: 1px solid var(--line, #dbe5eb);
  border-radius: var(--radius-sm, 12px);
  list-style: none;
  margin: 0 0 1.25rem;
  padding: .5rem 1rem;
}
.vd-product-specs li {
  border-bottom: 1px dashed var(--line, #dbe5eb);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .6rem 0;
}
.vd-product-specs li:last-child { border-bottom: 0; }
.vd-product-specs span { color: var(--muted, #5f6f7e); }
.vd-product-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }

/* Nut chat Zalo: dung mau xanh thuong hieu Zalo (#0068FF) */
.btn--zalo {
  background: #0068ff;
  border-color: #0068ff;
  box-shadow: 0 10px 24px rgba(0, 104, 255, .22);
  color: #fff;
}
.btn--zalo:hover,
.btn--zalo:focus-visible {
  background: #0056d6;
  border-color: #0056d6;
  box-shadow: 0 14px 28px rgba(0, 104, 255, .3);
  color: #fff;
}
.btn--zalo svg { fill: currentColor; }
.vd-product-note { color: var(--muted, #5f6f7e); font-size: .85rem; }
.vd-product-content, .vd-related { margin-top: 2.5rem; }

/* Bai viet / trang tinh */
.vd-single-head { margin: 1rem 0 1.5rem; }
.vd-single-head h1 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem); margin-bottom: .5rem; }
.vd-single-meta { color: var(--muted, #5f6f7e); font-size: .9rem; gap: 1rem; }
.vd-single-meta a { color: var(--teal-700, #08736d); }
.vd-single-body { margin-top: 1.75rem; }
.vd-single-cta {
  background: var(--teal-50, #eefaf8);
  border: 1px solid var(--teal-100, #dff5f2);
  border-radius: var(--radius-md, 20px);
  margin-top: 2.5rem;
  padding: 1.5rem;
  text-align: center;
}
.vd-page-head { margin-top: 1rem; }
.vd-content-wrap { padding-top: 1rem; }
.vd-archive-title { margin: 1rem 0 1.5rem; }

/* Card trang danh sach san pham: anh lon dang the (khac the tron nho o trang chu) */
.vd-listing-card .product-card__media {
  background: var(--blue-50, #f2f7fb);
  border-radius: var(--radius-sm, 12px);
  padding: 16px;
}
.vd-listing-card .product-card__media img {
  border-radius: 0;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  width: 100%;
}
.vd-listing-card .product-card__badge { position: static; display: inline-block; margin-bottom: .5rem; }
.vd-listing-card .product-card__body { padding: 1rem .25rem 0; }
.vd-listing-card .product-card__body h3 { font-size: 1rem; line-height: 1.35; margin-bottom: .35rem; }
.vd-listing-card .product-card__body p { color: var(--muted, #5f6f7e); font-size: .875rem; margin-bottom: .5rem; }

/* Tat ca cac trang dung CHUNG co che voi trang chu:
   - topbar cuon di theo trang
   - chi .header dinh lai o dau trang (position: sticky trong CSS goc)
   Khong dung lai kieu "inner-header-stack" cua ban cu (dinh ca topbar) vi lam header
   chiem 127px va che noi dung khi cuon. */
.topbar { position: static; }
.header { position: sticky; top: 0; z-index: 100; }

/* Neu ve sau co ai boc header trong khoi .inner-header-stack thi van tat sticky cua khoi do
   va bo margin giua cac con (WP block gap). */
.inner-header-stack { position: static !important; }
.inner-header-stack > .header { position: sticky; top: 0; }
.inner-header-stack > * + * { margin-block-start: 0; }

body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* Trang chu: cac khoi da co padding rieng (94px) nen bo khoang cach flow cua WordPress
   de giong het ban cu (ban cu khong co margin giua cac section). */
body.home .entry-content.is-layout-flow > * + *,
body.home .wp-block-post-content.is-layout-flow > * + * { margin-block-start: 0; }

/* Khoi bao boc trang archive/chi tiet san pham: padding theo nhip cua ban cu */
.vd-archive-product { padding: 8px 0 72px; }
.vd-product-detail { padding: 8px 0 72px; }
.vd-archive-product .section-head { margin: .25rem 0 1rem; }
.vd-archive-product .section-head h1 { margin-bottom: .35rem; }

/* Card dung cho archive mac dinh cua WordPress */
.vd-card {
  background: #fff;
  border: 1px solid var(--line, #dbe5eb);
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
  padding: 0 0 1.25rem;
  transition: box-shadow .25s ease, transform .25s ease;
}
.vd-card:hover { box-shadow: var(--shadow-md, 0 18px 50px rgba(10, 34, 56, .13)); transform: translateY(-3px); }
.vd-card .wp-block-post-featured-image { margin: 0 0 1rem; }
.vd-card .wp-block-post-featured-image img { display: block; height: auto; width: 100%; }
.vd-card h2, .vd-card h3 { font-size: 1.1rem; margin: 0 .25rem .5rem; padding: 0 1.25rem; }
.vd-card h2 a, .vd-card h3 a { color: var(--navy-800, #12324f); text-decoration: none; }
.vd-card p { color: var(--muted, #5f6f7e); margin: 0 1.25rem; }
.vd-grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .vd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-product-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vd-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Thong bao trang lien he */
.vd-notice {
  border-radius: var(--radius-sm, 12px);
  margin-bottom: 1.25rem;
  padding: .85rem 1.1rem;
}
.vd-notice--ok { background: #e8f7ef; border: 1px solid #b7e4cb; color: #14653f; }
.vd-notice--error { background: #fdecec; border: 1px solid #f5c2c2; color: #a12a2a; }

/* Form lien he trong trang */
.vd-contact-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vd-contact-form .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .vd-contact-form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .vd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}