/*
 * ISSVN BUILD81.45.6.6.29
 * Global outer-container contract for the ISS theme.
 *
 * The old imported HTML/CSS used several independent widths
 * (1180 / 1200 / 1240 / 1320).  That made Header, breadcrumb,
 * page content, Builder and Footer stop on different vertical lines.
 *
 * This file is loaded LAST by themes/iss/layout/header.php.
 */

:root {
  /* Current ISS site standard requested by the project. */
  --iss-page-width: 1440px;
}

/* Main PH + ISS outer wrappers. Keep full-width backgrounds outside these wrappers. */
body.iss-theme .container,
body.iss-theme .container-xl,
body.iss-theme .container-xxl,
body.iss-theme .iss-container,
body.iss-theme .phb-container,
body.iss-theme .ph-product-container,
body.iss-theme .ph-commerce-container,
body.iss-theme .ph-account-container,
body.iss-theme .ph-wrap {
  box-sizing: border-box;
  width: min(var(--iss-page-width), calc(100% - 32px)) !important;
  max-width: var(--iss-page-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Dịch vụ ISS came from the static HTML and had its own 1180/1200px shells. */
body.iss-theme .service-v2--customer-layout .service-customer-shell,
body.iss-theme .service-customer-hero__inner,
body.iss-theme .service-customer-hero__brands {
  box-sizing: border-box;
  width: min(var(--iss-page-width), calc(100% - 32px)) !important;
  max-width: var(--iss-page-width) !important;
}

/* The absolute hero-brand layer still needs its original centering mechanism. */
body.iss-theme .service-customer-hero__brands {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Header / topbar / footer now share the exact same desktop edges. */
body.iss-theme .site-topbar > .container,
body.iss-theme .site-header > .container,
body.iss-theme .iss-footer .iss-container,
body.iss-theme .iss-footer__copyright > .iss-container {
  width: min(var(--iss-page-width), calc(100% - 32px)) !important;
  max-width: var(--iss-page-width) !important;
}

/* Preserve comfortable side gutters on smaller screens. */
@media (max-width: 560px) {
  body.iss-theme .container,
  body.iss-theme .container-xl,
  body.iss-theme .container-xxl,
  body.iss-theme .iss-container,
  body.iss-theme .phb-container,
  body.iss-theme .ph-product-container,
  body.iss-theme .ph-commerce-container,
  body.iss-theme .ph-account-container,
  body.iss-theme .ph-wrap,
  body.iss-theme .service-v2--customer-layout .service-customer-shell,
  body.iss-theme .service-customer-hero__inner,
  body.iss-theme .service-customer-hero__brands,
  body.iss-theme .site-topbar > .container,
  body.iss-theme .site-header > .container,
  body.iss-theme .iss-footer .iss-container,
  body.iss-theme .iss-footer__copyright > .iss-container {
    width: calc(100% - 20px) !important;
  }
}

/* BUILD81.45.6.6.31: one border tone across the ISS public theme.
   Header keeps its own Admin > Cài đặt Header border through
   header-settings-bind.css, which loads after this file. */
:root,
body.iss-theme {
  --ink-200: #c0c1c3;
  --ink-300: #c0c1c3;
  --iss-border-color: #c0c1c3;
  --ph-border-color: #c0c1c3;
}

/* Breadcrumb vertical rhythm requested for the whole ISS frontend. */
body.iss-theme .breadcrumb {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

/* BUILD81.45.6.6.32: ISS structural border contract. */
:root,
body.iss-theme {
  --ink-200:#c0c1c3;
  --ink-300:#c0c1c3;
  --iss-border:#c0c1c3;
  --iss-border-color:#c0c1c3;
  --ph-border-color:#c0c1c3;
  --bs-border-color:#c0c1c3;
}
body.iss-theme .card,
body.iss-theme .sidebar,
body.iss-theme .iss-data-empty,
body.iss-theme .iss-product-detail__image,
body.iss-theme .iss-contact-item,
body.iss-theme .iss-news-card,
body.iss-theme .contact-map,
body.iss-theme .contact-request__form,
body.iss-theme .contact-support__options {
  border-color:#c0c1c3 !important;
}

/* Common neutral borders across ISS frontend components. Colored CTA/focus borders stay untouched. */
body.iss-theme .partner-card,
body.iss-theme .support-card,
body.iss-theme .brand-list,
body.iss-theme .iss-dropdown,
body.iss-theme .carousel__arrow,
body.iss-theme .service-v2__card,
body.iss-theme .service-v2__category-card,
body.iss-theme .service-group-card,
body.iss-theme .service-sharing-card,
body.iss-theme .service-v2__share-card,
body.iss-theme .service-v2__sidebar-link,
body.iss-theme .iss-pagination a:not([aria-current="page"]),
body.iss-theme .pagination a:not([aria-current="page"]) {
  border-color:#c0c1c3 !important;
}

/* BUILD81.45.6.6.42 — ISS typography ceiling.
   Project rule: no public-facing ISS text may use a weight heavier than 700.
   Keep normal/medium weights intact; only selectors inherited from shared PH CSS
   that previously used 800/900 are normalized here, without changing PH core. */
body.iss-theme .site-logo-text,
body.iss-theme .mobile-hotline,
body.iss-theme .eyebrow,
body.iss-theme .dropdown-title,
body.iss-theme .error-code,
body.iss-theme .ph-site-footer h3,
body.iss-theme .ph-footer-name,
body.iss-theme .ph-footer-company,
body.iss-theme .ph-footer-contact-cta,
body.iss-theme .ph-site-brand-text,
body.iss-theme .ph-partner-mark,
body.iss-theme .ph-search-page__head h1,
body.iss-theme .ph-search-page__form button,
body.iss-theme .ph-search-section__heading h2,
body.iss-theme .ph-search-count,
body.iss-theme .ph-search-product-card h3,
body.iss-theme .ph-header-search__view-all,
body.iss-theme .float a {
  font-weight:700 !important;
}

/* Rich text pasted from editors sometimes carries 800/900 inline. */
body.iss-theme [style*="font-weight:800"],
body.iss-theme [style*="font-weight: 800"],
body.iss-theme [style*="font-weight:900"],
body.iss-theme [style*="font-weight: 900"] {
  font-weight:700 !important;
}

/* BUILD81.45.6.6.56 — PH shared comment form parity on ISS.
   Keep the PH class contract unchanged so future PH comment fixes continue to apply.
   This block mirrors the latest PH frontend comment UI and only aligns the neutral
   border token with the ISS-wide #c0c1c3 contract. */
body.iss-theme .ph-comments{--ph-comment-border:#c0c1c3;margin:28px 0 36px;padding:24px;background:#fff;border:1px solid var(--ph-comment-border);border-radius:14px}
body.iss-theme .ph-comments-heading{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px}
body.iss-theme .ph-comments-heading h2,body.iss-theme .ph-facebook-comments h2{margin:0 0 6px}
body.iss-theme .ph-comments-heading p{margin:0;color:#64748b}
body.iss-theme .ph-comment-compose,body.iss-theme .ph-comment-stream{padding:20px;border:1px solid var(--ph-comment-border);border-radius:12px;background:#fff}
body.iss-theme .ph-comment-compose{margin-top:18px;box-shadow:0 4px 14px rgba(15,23,42,.05)}
body.iss-theme .ph-comment-stream{margin-top:24px}
body.iss-theme .ph-comment-block-heading{margin-bottom:16px}
body.iss-theme .ph-comment-block-heading h3{margin:0 0 5px;font-size:20px}
body.iss-theme .ph-comment-block-heading p{margin:0;color:#64748b}
body.iss-theme .ph-comment-list{display:grid;gap:12px;margin:0}
body.iss-theme .ph-comment-item{margin-left:min(calc(var(--comment-depth,0) * 22px),66px);padding:14px 16px;border:1px solid var(--ph-comment-border);border-radius:10px;background:#fff}
body.iss-theme .ph-comment-item header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.iss-theme .ph-comment-item p{margin:8px 0}
body.iss-theme .ph-comment-item small{color:#64748b}
body.iss-theme .ph-comment-badge{font-size:11px;padding:3px 7px;border-radius:999px;background:#eef4ff}
body.iss-theme .ph-comment-stars{letter-spacing:1px}
body.iss-theme .ph-comment-empty{margin:0;color:#64748b}
body.iss-theme .ph-comment-form{display:grid;gap:14px}
body.iss-theme .ph-comment-form .ph-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.iss-theme .ph-comment-form label{display:grid;gap:6px}
body.iss-theme .ph-comment-form input,body.iss-theme .ph-comment-form select,body.iss-theme .ph-comment-form textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--ph-comment-border);border-radius:8px;background:#fff}
body.iss-theme .ph-comment-form input:focus,body.iss-theme .ph-comment-form select:focus,body.iss-theme .ph-comment-form textarea:focus{outline:2px solid rgba(37,99,235,.12);outline-offset:0}
body.iss-theme .ph-comment-form button{justify-self:start;padding:10px 18px;border-radius:8px;cursor:pointer}
body.iss-theme .ph-comment-submit{display:inline-flex;align-items:center;justify-content:center;background:#0b69c7;color:#fff;border:1px solid #0b69c7;border-radius:8px;font-weight:700;cursor:pointer}
body.iss-theme .ph-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
body.iss-theme .ph-facebook-comments{margin-top:24px;padding-top:22px;border-top:1px solid var(--ph-comment-border)}
body.iss-theme .ph-facebook-comments .fb-comments{width:100%!important}
body.iss-theme .ph-comment-email{margin-top:3px;color:#64748b;font-size:13px}
body.iss-theme .ph-comment-rating{margin-top:6px}
body.iss-theme .ph-google-stars{display:inline-flex;align-items:center;gap:2px;line-height:1}
body.iss-theme .ph-google-stars--display span{color:#dadce0;font-size:20px}
body.iss-theme .ph-google-stars--display span.is-active{color:#fbbc04}
body.iss-theme .ph-rating-summary{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px}
body.iss-theme .ph-rating-summary>strong{font-size:24px;color:#202124}
body.iss-theme .ph-rating-summary>span:last-child{color:#5f6368;font-size:14px}
body.iss-theme .ph-rating-input{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.iss-theme .ph-rating-label{font-weight:600}
body.iss-theme .ph-google-stars--picker button{appearance:none;border:0;background:transparent;padding:1px;cursor:pointer;color:#dadce0;font-size:30px;line-height:1;transition:transform .12s ease,color .12s ease}
body.iss-theme .ph-google-stars--picker button:hover{transform:scale(1.08)}
body.iss-theme .ph-google-stars--picker button.is-active{color:#fbbc04}
body.iss-theme .ph-rating-clear{border:0!important;background:transparent!important;padding:0!important;color:#5f6368;text-decoration:underline;cursor:pointer}
body.iss-theme .ph-rating-selected{color:#5f6368;font-size:13px}
body.iss-theme .ph-rating-error{display:block;width:100%;color:#b91c1c;font-size:13px;font-weight:600}
body.iss-theme .ph-rating-error[hidden]{display:none!important}
body.iss-theme .ph-comment-pagination{margin-top:22px;justify-content:center}
body.iss-theme .ph-facebook-comments__diagnostic{margin:0 0 16px;padding:12px 14px;border:1px solid var(--ph-comment-border);border-radius:8px;background:#f8fafc;color:#475569;font-size:14px}
body.iss-theme .ph-facebook-comments__diagnostic>div+div{margin-top:5px}
body.iss-theme .ph-comment-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
body.iss-theme .ph-comment-reply-trigger{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 12px;border:1px solid #aeb8c6;border-radius:8px;background:#fff;color:#334155;font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
body.iss-theme .ph-comment-reply-trigger:hover,body.iss-theme .ph-comment-reply-trigger[aria-expanded="true"]{border-color:#7d8a9b;background:#f8fafc;box-shadow:0 2px 5px rgba(15,23,42,.08)}
body.iss-theme .ph-comment-reply-trigger:focus-visible{outline:2px solid rgba(37,99,235,.22);outline-offset:2px}
body.iss-theme .ph-comment-reply-panel{flex-basis:100%;width:100%}
body.iss-theme .ph-comment-reply-panel[hidden]{display:none!important}
body.iss-theme .ph-comment-reply-form{display:grid;gap:10px;margin-top:4px;padding:14px;border:1px solid var(--ph-comment-border);border-radius:10px;background:#f8fafc;width:min(680px,100%);box-sizing:border-box}
body.iss-theme .ph-comment-reply-form label{display:grid;gap:5px;font-size:13px;font-weight:600}
body.iss-theme .ph-comment-reply-form input,body.iss-theme .ph-comment-reply-form textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--ph-comment-border);border-radius:8px;background:#fff;font:inherit}
body.iss-theme .ph-comment-reply-person{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.iss-theme .ph-comment-reply-identity{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--ph-comment-border);border-radius:8px;background:#fff}
body.iss-theme .ph-comment-reply-identity span{display:inline-flex;padding:3px 7px;border-radius:999px;background:#e8f0fe;color:#174ea6;font-size:11px;font-weight:700}
body.iss-theme .ph-comment-main-identity{margin-bottom:2px}
body.iss-theme .ph-comment-reply-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.iss-theme .ph-comment-reply-submit{justify-self:start!important;padding:9px 16px!important;background:#0b69c7!important;color:#fff!important;border:1px solid #0b69c7!important;border-radius:8px!important;font-weight:700!important;cursor:pointer}
body.iss-theme .ph-comment-reply-cancel{padding:9px 14px;border:1px solid var(--ph-comment-border);border-radius:8px;background:#fff;color:#475569;font-weight:600;cursor:pointer}
body.iss-theme .ph-comment-children{display:grid;gap:10px;margin-top:12px;padding-left:14px;border-left:2px solid var(--ph-comment-border)}
body.iss-theme .ph-comment-children>.ph-comment-item{margin-left:0}
body.iss-theme .ph-comment-badge.is-admin{background:#e8f0fe;color:#174ea6}
body.iss-theme .ph-comment-badge.is-user{background:#ecfdf5;color:#047857}
@media(max-width:640px){body.iss-theme .ph-comment-form .ph-form-grid{grid-template-columns:1fr}body.iss-theme .ph-comments{padding:18px}body.iss-theme .ph-comment-compose,body.iss-theme .ph-comment-stream{padding:16px}body.iss-theme .ph-comment-item{margin-left:0}body.iss-theme .ph-comment-reply-form{min-width:0;width:100%}body.iss-theme .ph-comment-reply-person{grid-template-columns:1fr}body.iss-theme .ph-comment-children{padding-left:10px}body.iss-theme .ph-comment-footer{align-items:flex-start}}

/* BUILD81.45.6.6.58 — one footer gap for the whole ISS frontend.
   Keep this global instead of giving every page its own bottom margin. */
:root,
body.iss-theme {
  --iss-footer-gap: 30px;
}
body.iss-theme .iss-footer {
  margin-top: var(--iss-footer-gap) !important;
}

/* BUILD81.45.6.6.75 — ONE breadcrumb contract for the ISS frontend.
   Product list rhythm is the reference: 15px top / 28px crumb / 15px bottom. */
body.iss-theme .iss-breadcrumb-wrap{
  box-sizing:border-box !important;
  width:min(var(--iss-page-width,1440px),calc(100% - 32px)) !important;
  max-width:var(--iss-page-width,1440px) !important;
  margin:15px auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
body.iss-theme .iss-breadcrumb-wrap .iss-breadcrumb,
body.iss-theme .iss-breadcrumb-wrap .iss-common-breadcrumb{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  min-height:28px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#606a74 !important;
  font-size:14px !important;
  line-height:1.4 !important;
}
body.iss-theme .iss-breadcrumb-wrap .iss-breadcrumb a,
body.iss-theme .iss-breadcrumb-wrap .iss-common-breadcrumb a{
  color:#0068b5 !important;
  text-decoration:none !important;
}
body.iss-theme .iss-breadcrumb-wrap .breadcrumb__sep{
  color:#929ba4 !important;
}
/* The 15px wrapper bottom margin is the ONLY gap before the first content section. */
body.iss-theme main > .iss-breadcrumb-wrap + section{
  margin-top:0 !important;
  padding-top:0 !important;
}
@media(max-width:560px){
  body.iss-theme .iss-breadcrumb-wrap{
    width:calc(100% - 20px) !important;
    margin-top:12px !important;
    margin-bottom:12px !important;
  }
}