/*
Theme Name: HyperUX
Description: Build pages and WooCommerce shops with the HyperUX visual builder.
Author: HyperUX
Version: 0.2.8
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hyperux
Domain Path: /languages
*/

/* Site frame (QT-06 GD-03). Builder elements carry their own styles in build/effects.css. */
:root {
  /* Defaults = theme options defaults (QT-12 1A, BR-01); src/Customizer/StyleOutput.php prints the chosen values. */
  --hux-site-width: 1200px;
  --hux-text-width: 760px;
  --hux-site-text: #1f2328;
  --hux-site-muted: #59636e;
  --hux-site-line: #e5e7eb;
  --hux-site-bg: #ffffff;
  --hux-site-bg-outer: #e9edf2;
  --hux-site-accent: #1d4ed8;
  --hux-primary: #1d4ed8;
  --hux-secondary: #0f766e;
  --hux-heading: #1f2328;
  --hux-link: #1d4ed8;
  --hux-link-hover: #1e40af;
  --hux-link-decoration: underline;
  --hux-link-hover-decoration: underline;
  --hux-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hux-body-weight: 400;
  --hux-body-size: 16px;
  --hux-body-lh: 1.6;
  --hux-font-heading: inherit;
  --hux-heading-weight: 700;
  --hux-heading-transform: none;
  --hux-heading-ls: 0px;
  --hux-heading-mobile: .8;
  --hux-h1: 32px; --hux-h2: 26px; --hux-h3: 22px; --hux-h4: 18px; --hux-h5: 16px; --hux-h6: 14px;
  --hux-font-menu: var(--hux-font-body);
  --hux-menu-weight: 500;
  --hux-menu-size: 16px;
  --hux-menu-ls: 0px;
  --hux-font-button: var(--hux-font-body);
  --hux-button-weight: 700;
  --hux-font-alt: 'Dancing Script', cursive;
  --hux-upper-breadcrumbs: none; --hux-upper-buttons: none; --hux-upper-nav: none; --hux-upper-section: none; --hux-upper-widget: none;
  --hux-btn-radius: 4px;
  --hux-image-radius: 0px;
  --hux-form-radius: 6px;
  --hux-logo-scale: 1;
  --hux-shop-button: #0f766e; --hux-shop-sale: #dc2626; --hux-shop-new: #16a34a; --hux-shop-custom: #7c3aed;
  --hux-shop-stars: #f59e0b; --hux-shop-price: #6b7280; --hux-shop-sale-price: #dc2626;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--hux-site-bg); color: var(--hux-site-text); font-family: var(--hux-font-body); font-weight: var(--hux-body-weight); font-size: var(--hux-body-size); line-height: var(--hux-body-lh); -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--hux-link); text-decoration: var(--hux-link-decoration); }
a:hover { color: var(--hux-link-hover); text-decoration: var(--hux-link-hover-decoration); }
h1, h2, h3, h4, h5, h6 { font-family: var(--hux-font-heading); font-weight: var(--hux-heading-weight); text-transform: var(--hux-heading-transform); letter-spacing: var(--hux-heading-ls); color: var(--hux-heading); line-height: 1.25; }
h1 { font-size: var(--hux-h1); } h2 { font-size: var(--hux-h2); } h3 { font-size: var(--hux-h3); } h4 { font-size: var(--hux-h4); } h5 { font-size: var(--hux-h5); } h6 { font-size: var(--hux-h6); }
.hux-element.hux-heading, .hux-text :is(h1, h2, h3, h4, h5, h6) { color: var(--element-text-color, var(--hux-heading)); }
/* In a banner's text box a heading follows the box (light / dark tone) unless it has its own colour (QT-10). */
.hux-text-box .hux-element.hux-heading, .hux-text-box .hux-text :is(h1, h2, h3, h4, h5, h6) { color: var(--element-text-color, inherit); }
.alt-font, .hux-alt-font { font-family: var(--hux-font-alt); font-weight: 400; }
.section-title, .hux-section-title { text-transform: var(--hux-upper-section); }
.widget-title, .widget .wp-block-heading, .widgettitle { text-transform: var(--hux-upper-widget); }
.woocommerce-breadcrumb, .breadcrumbs, .hux-breadcrumbs { text-transform: var(--hux-upper-breadcrumbs); }
button, .button, .wp-element-button, .wp-block-button__link, input[type="submit"], .hux-button { font-family: var(--hux-font-button); font-weight: var(--hux-button-weight); text-transform: var(--hux-upper-buttons); border-radius: var(--hux-btn-radius); }
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], select, textarea { border-radius: var(--hux-form-radius); }
.hux-entry__content img, .hux-content img, .wp-post-image { border-radius: var(--hux-image-radius); }
/* Layout frame (QT-12 4B): boxed = content in a centred box on the outer colour, framed = box with margin and corners. */
body.hux-frame-boxed, body.hux-frame-framed { background: var(--hux-site-bg-outer); }
.hux-frame-boxed .hux-page { max-width: calc(var(--hux-site-width) + 64px); margin: 0 auto; background: var(--hux-site-bg); box-shadow: 0 0 30px rgba(0, 0, 0, .06); }
.hux-frame-framed .hux-page { margin: 24px; background: var(--hux-site-bg); border-radius: 10px; overflow: hidden; box-shadow: 0 0 30px rgba(0, 0, 0, .06); }
@media (max-width: 767px) {
  .hux-frame-boxed .hux-page, .hux-frame-framed .hux-page { margin: 0; border-radius: 0; box-shadow: none; }
  h1 { font-size: calc(var(--hux-h1) * var(--hux-heading-mobile)); } h2 { font-size: calc(var(--hux-h2) * var(--hux-heading-mobile)); } h3 { font-size: calc(var(--hux-h3) * var(--hux-heading-mobile)); }
}
/* WooCommerce colours (QT-12 shop colours); layout options of the shop come with part 1D. */
.woocommerce span.onsale { background: var(--hux-shop-sale); }
.woocommerce .star-rating, .woocommerce .star-rating::before { color: var(--hux-shop-stars); }
.woocommerce .price del, .woocommerce .price del .amount { color: var(--hux-shop-price); }
.woocommerce .price ins, .woocommerce .price ins .amount { color: var(--hux-shop-sale-price); text-decoration: none; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button, .woocommerce #place_order { background: var(--hux-shop-button); color: #fff; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hux-skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; padding: 8px 16px; clip: auto; clip-path: none; background: var(--hux-site-bg); color: var(--hux-site-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }

.hux-site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; max-width: var(--hux-site-width); margin: 0 auto; padding: 12px 16px; }
.hux-site-title { color: inherit; font-size: 20px; font-weight: 700; text-decoration: none; }
.custom-logo, .hux-logo-mobile { display: block; width: auto; max-height: calc(56px * var(--hux-logo-scale)); }
.hux-logo-mobile { display: none; }
.hux-site-tagline { margin: 2px 0 0; color: var(--hux-site-muted); font-size: 13px; }
.hux-site-menu ul, ul.hux-site-menu { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.hux-site-menu { font-family: var(--hux-font-menu); font-size: var(--hux-menu-size); font-weight: var(--hux-menu-weight); letter-spacing: var(--hux-menu-ls); text-transform: var(--hux-upper-nav); }
.hux-site-menu a { display: inline-block; padding: 10px 0; color: inherit; text-decoration: none; }
.hux-site-menu a:hover, .hux-site-menu .current-menu-item > a, .hux-site-menu .current_page_item > a { color: var(--hux-site-accent); }
.hux-site-menu a:focus-visible, .hux-site-title:focus-visible { outline: 2px solid var(--hux-site-accent); outline-offset: 2px; }

.hux-site-content { max-width: var(--hux-text-width); margin: 0 auto; padding: 40px 16px 64px; }
.hux-site-content--list, .hux-site-content--wide, .woocommerce-page .hux-site-content { max-width: var(--hux-site-width); }
.hux-page-title { margin: 0 0 32px; font-size: var(--hux-h1); line-height: 1.25; }
.hux-entry + .hux-entry { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--hux-site-line); }
.hux-entry__title { margin: 0 0 8px; font-size: var(--hux-h1); line-height: 1.25; }
.hux-entry__title a { color: inherit; text-decoration: none; }
.hux-entry__title a:hover { color: var(--hux-site-accent); }
.hux-entry__meta { margin: 0 0 16px; color: var(--hux-site-muted); font-size: 14px; }
.hux-entry__content > :first-child { margin-top: 0; }
.hux-comments { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--hux-site-line); }
/* WordPress prints the comment box with cols="45" (~380px): wider than a phone column. */
.hux-comments input, .hux-comments textarea { max-width: 100%; box-sizing: border-box; }
.comment-form > p { margin: 0 0 16px; }
.comment-form label { display: block; margin-bottom: 6px; font-weight: 600; }
.comment-form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { width: 100%; padding: 9px 12px; border: 1px solid var(--hux-site-line, #d1d5db); background: var(--hux-site-bg, #fff); color: var(--hux-site-text, inherit); font: inherit; }
.comment-form input[type="submit"] { padding: 10px 20px; border: 0; background: var(--hux-primary); color: #fff; font-size: inherit; cursor: pointer; }
.navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-links .page-numbers { padding: 6px 12px; border: 1px solid var(--hux-site-line); border-radius: 6px; text-decoration: none; }
.nav-links .current { background: var(--hux-site-text); color: var(--hux-site-bg); }

.hux-site-footer { border-top: 1px solid var(--hux-site-line); color: var(--hux-site-muted); font-size: 14px; }
.hux-site-footer p { margin: 0; }
/* Footer (QT-12 1C): widget columns or a HyperUX block, then the footer bottom. Only filled columns take space. */
.hux-footer { background: var(--hux-footer-bg, transparent); }
.hux-footer__inner { max-width: var(--hux-site-width); margin: 0 auto; padding: 0 16px; }
.hux-footer__top { padding: var(--hux-footer-pad, 48px) 0; }
.hux-footer__top:has(.hux-footer__block) { padding: 0; }
.hux-footer__top:has(.hux-footer__block) .hux-footer__inner { max-width: none; padding: 0; }
.hux-footer__widgets { display: grid; grid-template-columns: repeat(var(--hux-footer-cols, 4), minmax(0, 1fr)); gap: var(--hux-footer-gap, 32px); }
.hux-footer--align-center .hux-footer__widgets, .hux-footer--align-center .hux-footer__bottom { text-align: center; }
.hux-footer--align-center .hux-contact, .hux-footer--align-center .hux-social, .hux-footer--align-center .hux-payments { justify-content: center; }
.hux-footer__col--empty { display: grid; place-items: center; min-height: 90px; border: 1px dashed currentColor; border-radius: 6px; opacity: .45; font-size: 13px; }
.hux-widget + .hux-widget { margin-top: 24px; }
.hux-widget__title { margin: 0 0 12px; color: var(--hux-heading); font-size: 16px; text-transform: var(--hux-upper-widget, none); }
.hux-widget ul { margin: 0; padding: 0; list-style: none; }
.hux-widget li { margin: 0 0 8px; }
.hux-footer a { color: inherit; }
.hux-footer a:hover { color: var(--hux-site-accent); }
.hux-contact--stack { flex-direction: column; gap: 10px; font-size: 14px; }
.hux-footer__bottom { background: var(--hux-footer-bottom-bg, transparent); border-top: 1px solid var(--hux-site-line); }
.hux-footer__bottom .hux-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 20px; padding-bottom: 20px; }
.hux-footer__bottom--center .hux-footer__inner { flex-direction: column; justify-content: center; }
.hux-footer__menu { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.hux-footer__menu a { text-decoration: none; }
.hux-payments { display: flex; flex-wrap: wrap; gap: 6px; }
.hux-pay { display: block; }
.hux-footer--dark { color: #cbd5e1; }
.hux-footer--dark .hux-widget__title { color: #fff; }
.hux-footer--dark .hux-footer__bottom { border-top-color: rgba(255, 255, 255, .12); color: #94a3b8; }
.hux-footer--dark a:hover { color: #fff; }
@media (max-width: 1023px) { .hux-footer__widgets { grid-template-columns: repeat(min(2, var(--hux-footer-cols, 4)), minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hux-footer__widgets { grid-template-columns: 1fr; }
  .hux-footer__bottom .hux-footer__inner { flex-direction: column; text-align: center; }
}

/* Phones: the menu stays on one line and scrolls sideways until Navigation (M02-13) brings the ☰ menu. */
@media (max-width: 767px) {
  .hux-site-nav { width: 100%; overflow-x: auto; }
  .hux-site-menu ul, ul.hux-site-menu { flex-wrap: nowrap; }
  .hux-site-menu a { white-space: nowrap; }
  .hux-site-content { padding-top: 24px; }
  .hux-page-title, .hux-entry__title { font-size: 26px; }
  .hux-has-mobile-logo .custom-logo { display: none; }
  .hux-has-mobile-logo .hux-logo-mobile { display: block; }
}

/* Page title strip and breadcrumbs (QT-12 bản 1.11). */
.hux-ptitle { display: flex; align-items: center; min-height: var(--hux-pt-h, 200px); background: color-mix(in srgb, var(--hux-text, #1f2328) 5%, var(--hux-content-bg, #fff)) center / cover no-repeat; border-bottom: 1px solid var(--hux-site-line); }
.hux-ptitle__inner { width: 100%; max-width: var(--hux-site-width); margin: 0 auto; padding: 24px 16px; }
.hux-ptitle--center { text-align: center; }
.hux-ptitle__title { margin: 6px 0 0; font-size: var(--hux-h1); line-height: 1.2; }
.hux-ptitle--banner { position: relative; color: #fff; background-color: #1f2937; border: 0; }
.hux-ptitle--banner::before { content: ""; position: absolute; inset: 0; background: rgb(15 23 42 / 55%); }
.hux-ptitle--banner .hux-ptitle__inner { position: relative; }
.hux-ptitle--banner .hux-ptitle__title, .hux-ptitle--banner .hux-crumbs, .hux-ptitle--banner .hux-crumbs a { color: #fff; }
.hux-crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--hux-site-muted); font-size: 13px; text-transform: var(--hux-upper-breadcrumbs, none); }
.hux-ptitle--center .hux-crumbs { justify-content: center; }
.hux-crumbs a { color: inherit; text-decoration: none; }
.hux-crumbs a:hover { color: var(--hux-site-accent); text-decoration: underline; }
.hux-crumbs [aria-current] { color: var(--hux-text); }
.hux-crumbs-row { max-width: var(--hux-site-width); margin: 0 auto; padding: 16px 16px 0; }
.hux-post__head .hux-crumbs, .hux-post__hero .hux-crumbs, .hux-post__beside .hux-crumbs { margin-bottom: 10px; }
.hux-post__hero .hux-crumbs, .hux-post__hero .hux-crumbs a, .hux-post__hero .hux-crumbs [aria-current] { color: #fff; }
/* "HyperUX — this page": content width. */
.hux-width-narrow .hux-site-content { max-width: 720px; }
.hux-width-full .hux-site-content, .hux-width-full .hux-site-content--post { max-width: none; }

/* Share buttons (QT-12 1C). */
.hux-share { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 0; }
.hux-picture { display: contents; } /* <picture> from QT-17 must not change layouts built around the <img> */
.hux-share-wrap { max-width: var(--hux-site-width, 1200px); margin: 0 auto 32px; padding: 0 16px; }
.hux-share__label { margin-right: 4px; font-weight: 600; }
.hux-share__btn { --c: #4b5563; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1.5px solid var(--c); border-radius: var(--hux-btn-radius, 4px); background: var(--c); color: #fff; font: inherit; font-size: 13px; line-height: 1; text-decoration: none !important; cursor: pointer; }
.hux-share__btn--facebook { --c: #1877f2; } .hux-share__btn--x { --c: #111827; } .hux-share__btn--zalo { --c: #0068ff; } .hux-share__btn--threads { --c: #000; }
.hux-share__btn--linkedin { --c: #0a66c2; } .hux-share__btn--pinterest { --c: #e60023; } .hux-share__btn--telegram { --c: #229ed9; } .hux-share__btn--whatsapp { --c: #25d366; }
.hux-share__btn--mail { --c: #6b7280; } .hux-share__btn--copy { --c: #374151; }
.hux-share--outline .hux-share__btn { background: transparent; color: var(--c); }
.hux-share--circle .hux-share__btn { width: 38px; height: 38px; justify-content: center; padding: 0; border-radius: 50%; }
.hux-share--circle .hux-share__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hux-share__btn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.hux-share__toast { position: absolute; left: 0; top: 100%; margin-top: 6px; padding: 4px 10px; border-radius: 6px; background: #111827; color: #fff; font-size: 12px; }

/* 404 without a block. */
.hux-404 { text-align: center; }
.hux-404__code { margin: 0; color: var(--hux-primary); font-size: 72px; font-weight: 800; line-height: 1; }
.hux-404 .search-form { display: flex; justify-content: center; gap: 8px; margin: 24px 0; }
.hux-404 .hux-button { display: inline-block; padding: 10px 20px; background: var(--hux-primary); color: #fff; text-decoration: none; }

/* Cookie notice (QT-12 Advanced). */
.hux-cookie { position: fixed; z-index: 9990; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; padding: 14px 18px; background: #111827; color: #f3f4f6; font-size: 14px; }
.hux-cookie[hidden] { display: none; }
.hux-cookie p { margin: 0; }
.hux-cookie--box { left: 16px; right: auto; bottom: 16px; max-width: 340px; justify-content: flex-start; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.hux-cookie__ok { border: 0; padding: 8px 16px; background: var(--hux-primary); color: #fff; cursor: pointer; }
#wpadminbar .hux-maintenance-flag > .ab-item { background: #dba617; color: #1d2327; font-weight: 600; }

.hux-404 .search-field { min-width: 0; width: min(100%, 320px); padding: 9px 12px; border: 1px solid var(--hux-site-line, #d1d5db); border-radius: var(--hux-btn-radius, 4px); font: inherit; }
.hux-404 .search-submit { padding: 9px 16px; border: 0; background: var(--hux-text, #1f2328); color: #fff; font: inherit; cursor: pointer; }