/*
Theme Name: Máy in Toàn Nhân
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* Base & Typography Styles */
h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text-body);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.price, .num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

/* Focus ring accessibility */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Icon system helper class */
.mitn-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Blockquote Styles (Imported from old site) */
blockquote {
  font-style: italic;
  margin: 0.25em 0;
  padding: 5px 20px 0px 20px;
  line-height: 1.45;
  position: relative;
  color: #bebebea1;
  border-left: 5px solid #E31837;
  background: #f9f9f9;
}
blockquote p {
  margin: 0; 
  font-size: 16px;
  font-weight: 400;
}
blockquote,
blockquote p {
  color: #555555 !important;
}
blockquote strong {
  color: #555555 !important;
}

/* ============================================================================
   WPSM TABLE STYLES (Toàn Nhân Premium Table)
   ============================================================================ */
.wpsm-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
  box-sizing: border-box;
}

.wpsm-table table {
  width: 100%;
  min-width: 600px; /* Ép bảng giữ chiều ngang tối thiểu trên mobile để cuộn */
  border-collapse: collapse;
  margin: 0 !important;
  font-size: var(--fs-sm);
  color: #111111 !important;
}

.wpsm-table th,
.wpsm-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
  border-right: none;
  color: #111111 !important;
}

/* In đậm cột đầu tiên */
.wpsm-table td:first-child,
.wpsm-table th:first-child {
  font-weight: 700;
  color: #111111 !important;
}

/* Header styling */
.wpsm-table-main-color thead th,
.wpsm-table-main-color thead td {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  font-weight: 700;
  font-family: var(--font-heading);
  border-bottom: 1.5px solid var(--color-text-primary) !important;
  border-right: none !important;
}

.wpsm-table-main-color thead th a,
.wpsm-table-main-color thead td a {
  color: var(--color-text-primary) !important;
}

/* Zebra striping */
.wpsm-table tr:nth-child(even) {
  background-color: var(--color-surface-raised);
}

.wpsm-table tr:hover {
  background-color: var(--color-brand-surface);
}

/* Mobile responsive scroll hint */
@media (max-width: 767px) {
  .wpsm-table {
    background:
      linear-gradient(90deg, var(--color-surface-base) 30%, transparent),
      linear-gradient(90deg, transparent, var(--color-surface-base) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.08), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.08), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ============================================================================
   TOPBAR CUSTOM STYLES
   ============================================================================ */
.topbar__left {
  display: flex;
  align-items: center;
  height: 100%;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--color-text-inverse) !important;
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--duration-fast) var(--ease-standard);
  line-height: 1;
}
.topbar__item:hover {
  text-decoration: underline;
  color: var(--color-text-inverse) !important;
}
.topbar__icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
  display: inline-block;
}

/* Hidden SVG sprite storage */
.mitn-sprite-store,
.mitn-sprite-store svg {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Center search bar within the header nav space */
ul.header-nav-main {
  justify-content: center;
}

/* Ensure search dropdown and account menu render above header-bottom-mega (z-index:39) */
#masthead.header-main {
  z-index: 50;
}

/* Sticky Main Header on Mobile & Tablet */
@media (max-width: 999px) {
  #masthead.header-main {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  /* Prevent Flatsome from hiding main header when sticky is active on mobile */
  .has-sticky #masthead.header-main.hide-for-sticky,
  .sticky-active #masthead.header-main.hide-for-sticky,
  #header.has-sticky #masthead.hide-for-sticky {
    display: block !important;
  }
  
  /* Account for WordPress Admin Bar on mobile */
  .admin-bar #masthead.header-main {
    top: 46px;
  }
}