/* Shared public UI scale. Source of truth: docs/DESIGN_SYSTEM.md.
 * Load after site.css: legacy page CSS owns layout, this file owns shared sizing.
 */
:root {
  --atct-font-h1: 32px;
  --atct-font-h2: 26px;
  --atct-font-h3: 18px;
  --atct-font-body-size: 16px;
  --atct-font-description: 14px;
  --atct-font-caption: 12px;
  --atct-font-footer: 13px;
  --atct-font-catalog-title: 22px;
  --atct-font-cta-title: 30px;
  --atct-font-step-title: 16px;
  --atct-font-article-h2: 28px;
  --atct-font-article-h3: 20px;
  --atct-control-height: 32px;
  --atct-field-height: 36px;
  --atct-button-font-size: 14px;
  --atct-button-padding-x: 12px;
  --atct-button-radius: 6px;
  --atct-card-padding: 16px;
  --atct-section-space: 20px;
  --atct-section-space-mobile: 20px;
}

body.atct-site,
.editor-styles-wrapper,
.atct-product-hub,
.atct-material-hub {
  font-family: var(--atct-font-body);
  font-size: var(--atct-font-body-size);
  line-height: 1.65;
}

body.atct-site:not(.home) main h1 {
  font-size: var(--atct-font-h1) !important;
  line-height: 1.25;
  font-weight: 800;
}

body.atct-site:not(.home):not(.single-post) main h2 {
  font-size: var(--atct-font-h2) !important;
  line-height: 1.25;
  font-weight: 700;
}

body.atct-site:not(.home):not(.single-post) main h3 {
  font-size: var(--atct-font-h3) !important;
  line-height: 1.35;
  font-weight: 700;
}

body.atct-site.single-post main .wp-block-post-content h2 {
  font-size: var(--atct-font-article-h2) !important;
}

body.atct-site.single-post main .wp-block-post-content h3 {
  font-size: var(--atct-font-article-h3) !important;
}

.atct-hub-lead,
.atct-mh-lead,
.single-atct_product .wp-block-post-excerpt,
.single-atct_project .wp-block-post-excerpt {
  font-size: var(--atct-font-body-size);
  line-height: 1.7;
}

.atct-hub-card-body h3,
.atct-material-card strong,
.atct-method-card strong,
.atct-mh-card h3,
.atct-mh-app-card h3 {
  font-size: var(--atct-font-h3);
  font-weight: 700;
  line-height: 1.35;
}

body.atct-site:not(.home) main .atct-card .wp-block-post-title {
  font-size: var(--atct-font-h3) !important;
  line-height: 1.35;
}

.atct-hub-card-body ul,
.atct-material-card ul,
.atct-method-card ul,
.atct-mh-card ul,
.atct-mh-app-card ul,
.atct-card .wp-block-post-excerpt,
.atct-hub-panel header p,
.atct-mh-seo-note {
  font-size: var(--atct-font-description);
  line-height: 1.6;
}

.atct-hub-detail-link,
.atct-mh-card a,
.atct-mh-app-card a,
.atct-mh-section-head > a,
.atct-mh-head-links a,
.atct-mh-seo-note a {
  font-size: var(--atct-font-description);
  line-height: 1.4;
}

.atct-breadcrumbs,
.atct-hub-breadcrumb,
.atct-mh-breadcrumb,
.atct-mh-table-note {
  font-size: var(--atct-font-caption);
  line-height: 1.5;
}

.atct-mh-eyebrow,
.atct-hub-kicker {
  font-size: var(--atct-font-caption);
  line-height: 1.4;
  letter-spacing: 0;
}

/* Keep the homepage decisions as explicit roles, not page-wide overrides. */
.home .atct-hero h1 {
  font-size: var(--atct-font-h1) !important;
}

.home .atct-product-section .atct-section-head h2 {
  font-size: var(--atct-font-catalog-title);
}

.home main .atct-quote-band .atct-quote-copy h2 {
  font-size: var(--atct-font-cta-title);
}

.home main .atct-process-section .atct-process-grid h3 {
  font-size: var(--atct-font-step-title) !important;
}

.home .atct-faq-layout > .wp-block-column:first-child > h2 {
  font-size: var(--atct-font-body-size);
}

.home .atct-faq-list summary {
  font-size: var(--atct-font-description);
}

.atct-hub-category-label {
  margin: 0;
  color: var(--atct-green-950);
  font-size: var(--atct-font-body-size);
  font-weight: 700;
}

#danh-sach-san-pham {
  scroll-margin-top: 96px;
}

.atct-header .atct-product-menu .wp-block-navigation-submenu__toggle {
  flex-shrink: 0;
}

body.atct-site .atct-header .atct-product-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: var(--atct-font-description);
  line-height: 1.4;
  white-space: normal;
  text-decoration: none;
}

.atct-header .atct-product-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--atct-cream);
}

@media (min-width: 821px) {
  .atct-header nav.wp-block-navigation .atct-product-menu.has-child > ul.wp-block-navigation__submenu-container {
    min-width: 260px;
    padding: 8px;
    border: 1px solid var(--atct-line);
    border-radius: var(--atct-button-radius);
    background: #fff;
    box-shadow: 0 12px 28px rgb(7 56 36 / 12%);
    gap: 0;
  }
}

@media (max-width: 820px) {
  .atct-header .is-menu-open .wp-block-navigation__responsive-container-content {
    overflow-y: auto;
  }

  .atct-header .is-menu-open .wp-block-navigation__container {
    width: 100%;
  }

  body.atct-site .atct-header .is-menu-open li.atct-product-menu.has-child {
    display: block !important;
    width: 100% !important;
    min-width: 0;
    text-align: left;
  }

  body.atct-site .atct-header .is-menu-open li.atct-product-menu.has-child > a.wp-block-navigation-item__content {
    display: inline-flex;
    width: auto !important;
    min-width: 0;
    white-space: nowrap;
  }

  body.atct-site .atct-header .is-menu-open li.atct-product-menu.has-child > ul.wp-block-navigation__submenu-container {
    box-sizing: border-box;
    width: 100% !important;
    padding: 8px 0 0 12px !important;
    gap: 0;
    align-items: stretch !important;
    text-align: left;
  }

  body.atct-site .atct-header .is-menu-open li.atct-product-menu.has-child > ul > li,
  body.atct-site .atct-header .is-menu-open li.atct-product-menu.has-child > ul > li > a {
    width: 100% !important;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
  }
}

body.atct-site:not(.home) main :is(.atct-advice-card, .atct-mh-advice-card) h2 {
  font-size: var(--atct-font-cta-title) !important;
  line-height: 1.25;
}

.atct-advice-card p:not(.atct-hub-kicker),
.atct-mh-advice-card p {
  font-size: var(--atct-font-body-size);
  line-height: 1.65;
}

/* Scope controls to the public site; mobile contact bars keep their own layout. */
body.atct-site:not(.wp-admin) :is(
  .wp-element-button,
  .wp-block-button__link,
  .atct-submit,
  .atct-zalo-button,
  .atct-hub-primary,
  .atct-hub-secondary,
  .atct-mh-primary,
  .atct-mh-secondary,
  .atct-hub-filters button,
  .atct-mh-quick a
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--atct-control-height);
  min-height: var(--atct-control-height);
  gap: 6px;
  padding: 0 var(--atct-button-padding-x);
  border-radius: var(--atct-button-radius);
  font-family: var(--atct-font-body);
  font-size: var(--atct-button-font-size);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

body.atct-site :is(
  .atct-field input:not([type="checkbox"]):not([type="hidden"]):not([type="file"]),
  .atct-field select,
  .atct-hub-search input,
  .atct-hub-sort select
) {
  box-sizing: border-box;
  height: var(--atct-field-height);
  min-height: var(--atct-field-height);
  max-width: 100%;
  padding: 6px 10px;
  border-radius: var(--atct-button-radius);
  font-family: var(--atct-font-body);
  font-size: var(--atct-font-body-size);
  line-height: 1.25;
}

body.atct-site:not(.wp-admin) .atct-hub-search input {
  padding-left: 36px !important;
}

/* Keep full search/sort labels readable at the shared 16px field size. */
.atct-hub-controls {
  display: grid;
  grid-template-columns: minmax(0, 240px) 230px;
  max-width: 100%;
  justify-content: end;
}

.atct-hub-controls > br {
  display: none;
}

.atct-hub-search,
.atct-hub-sort {
  min-width: 0;
}

.atct-hub-search input,
.atct-hub-sort select {
  width: 100%;
}

body.atct-site .atct-field label {
  font-size: var(--atct-font-description);
  line-height: 1.4;
}

body.atct-site .atct-field textarea {
  font-family: var(--atct-font-body);
  font-size: var(--atct-font-body-size);
  line-height: 1.6;
  min-height: 96px;
  padding: 10px;
  border-radius: var(--atct-button-radius);
}

/* Grow content naturally with the readable type scale, without hiding bullets. */
.atct-hub-card-body,
.atct-mh-card > div,
.atct-mh-tech-grid .atct-mh-card > div,
.atct-mh-app-card > div {
  padding: var(--atct-card-padding);
}

.atct-mh-card,
.atct-mh-app-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--atct-radius);
}

.atct-mh-card > div,
.atct-mh-app-card > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.atct-mh-card > div > a,
.atct-mh-app-card > div > a {
  margin-top: auto;
}

/* WordPress may insert paragraph wrappers around shortcode links. */
.atct-mh-card > p:empty,
.atct-mh-app-card > p:empty {
  display: none;
}

.atct-mh-card > div > p:last-child,
.atct-mh-app-card > div > p:last-child {
  margin: auto 0 0;
}

.atct-mh-card ul,
.atct-mh-app-card ul {
  margin: 0;
}

.atct-mh-app-card h3 {
  min-height: 0;
}

.atct-hub-container,
.atct-mh-container {
  width: calc(100% - 40px);
  max-width: var(--atct-container);
}

.atct-hub-hero-grid,
.atct-mh-hero-grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  min-height: 380px;
}

.atct-hub-hero-copy,
.atct-mh-hero-copy {
  min-width: 0;
  padding: var(--atct-section-space) 24px var(--atct-section-space) 0;
}

.atct-hub-usps,
.atct-mh-usps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.atct-hub-usps strong,
.atct-mh-usps strong {
  font-size: var(--atct-font-description);
  line-height: 1.4;
}

.atct-hub-usps small,
.atct-mh-usps small {
  display: block;
  margin-top: 2px;
  font-size: var(--atct-font-caption);
  line-height: 1.4;
}

.atct-mh-section {
  padding-block: var(--atct-section-space);
}

.atct-mh-material-grid,
.atct-mh-tech-grid,
.atct-mh-application-grid {
  gap: 16px;
}

.atct-mh-application-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.atct-hub-compare table,
.atct-mh-compare table {
  font-size: var(--atct-font-description);
  line-height: 1.5;
}

.atct-hub-compare th,
.atct-hub-compare td,
.atct-mh-compare th,
.atct-mh-compare td {
  padding: 10px 12px;
}

.atct-mh-advice {
  padding-bottom: var(--atct-section-space);
}

.atct-mh-advice-card {
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr) minmax(260px, 1fr);
  border-radius: var(--atct-radius);
}

.atct-mh-advice-card > div {
  min-width: 0;
  padding: 24px;
}

.atct-mh-advice-card figure img {
  max-height: none;
}

.atct-footer,
.atct-footer p,
.atct-footer .wp-block-navigation-item__content,
.atct-footer .atct-contact {
  font-size: var(--atct-font-footer);
}

@media (max-width: 1024px) {
  .atct-mh-material-grid,
  .atct-mh-tech-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .atct-mh-advice-card {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .atct-mh-advice-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .atct-hub-controls {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

  .atct-hub-hero-grid,
  .atct-mh-hero-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .atct-hub-hero-copy,
  .atct-mh-hero-copy {
    padding: var(--atct-section-space-mobile) 0;
  }

  .atct-mh-hero-media {
    margin-inline: -20px;
  }

  .atct-mh-hero-media::before {
    inset: 0 0 auto;
    width: auto;
    height: 18%;
    background: linear-gradient(#fff, transparent);
  }

  .atct-mh-hero-media img {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 6;
  }
}

@media (max-width: 560px) {
  .atct-hub-controls {
    grid-template-columns: 1fr;
  }

  .atct-hub-container,
  .atct-mh-container {
    width: calc(100% - 28px);
  }

  .atct-mh-hero-media {
    margin-inline: -14px;
  }

  .atct-mh-material-grid,
  .atct-mh-tech-grid,
  .atct-mh-application-grid {
    grid-template-columns: 1fr;
  }

  .atct-mh-card,
  .atct-mh-app-card {
    display: flex;
  }

  .atct-mh-card > img,
  .atct-mh-app-card > img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .atct-mh-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .atct-mh-advice-card {
    display: block;
  }

  .atct-mh-advice-card figure {
    height: 160px;
  }

  .atct-mh-advice-card > div {
    padding: var(--atct-card-padding);
  }

  .atct-mh-advice-actions {
    grid-template-columns: 1fr;
  }

  .atct-mh-seo-note {
    grid-template-columns: 1fr;
  }
}