/* ================================================================
   HOÀNG QUYÊN INTERCO – Visual Override CSS v2.0
   Chỉ ghi đè màu sắc, font, shadow, border-radius lên theme gốc
   Không thay đổi layout hay class structure
   ================================================================ */

/* ── Google Fonts được load qua header_global.tpl ── */
/* Be Vietnam Pro (body) + Montserrat (headings) */

/* ── Variables ── */
:root {
  --hq-navy:        #0D2340;
  --hq-navy-mid:    #1A3A5C;
  --hq-navy-nav:    #162E4D;
  --hq-gold:        #C8922A;
  --hq-gold-lt:     #E2AC52;
  --hq-gold-pale:   #F8EED8;
  --hq-white:       #FFFFFF;
  --hq-smoke:       #F5F7FA;
  --hq-border:      #E4E9F0;
  --hq-text:        #1A2537;
  --hq-text-mid:    #4A5568;
  --hq-text-muted:  #718096;
  --hq-green:       #1E7E34;
  --hq-shadow:      0 2px 12px rgba(13,35,64,.09);
  --hq-shadow-lg:   0 8px 28px rgba(13,35,64,.13);
  --hq-r:           6px;
  --hq-r-lg:        10px;
}

/* ── Global font override ── */
body {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--hq-text);
  background: var(--hq-smoke);
}

h1, h2, h3, h4, h5, h6,
.title-box a, .title-box h1, .title-box h2, .title-box strong,
.head-box .title-box a, .box-litmit h2, .head-box-category h2 {
  font-family: 'Montserrat', sans-serif;
}

a { color: var(--hq-navy-mid); }
a:hover { color: var(--hq-gold); text-decoration: none; }

/* ─────────────────────────────────────────────
   HEADER
───────────────────────────────────────────── */

/* Topbar */
.head-first {
  background: var(--hq-navy) !important;
  height: auto !important;
  padding: 6px 0;
  border-bottom: none;
}

.head-first .ul-social li a {
  color: rgba(255,255,255,.65);
  font-size: 15px;
  transition: color .18s;
}
.head-first .ul-social li a:hover { color: var(--hq-gold-lt); }

.head-first .ul-hotline li a { color: rgba(255,255,255,.85); font-size: 13px; }
.head-first .ul-hotline li a.just-hl { color: rgba(255,255,255,.85); }
.head-first .ul-hotline li a .phone_contact { color: var(--hq-gold-lt); font-weight: 700; font-family: 'Montserrat', sans-serif; font-size: 14px; }
.head-first .ul-hotline li a:hover { color: var(--hq-gold-lt); text-decoration: none; }

/* Tài khoản dropdown */
.head-first .ul-lg {
  background: var(--hq-white);
  border: 1px solid var(--hq-border);
  border-radius: 0 0 var(--hq-r) var(--hq-r);
  box-shadow: var(--hq-shadow-lg);
  min-width: 140px;
}
.head-first .ul-lg li a {
  color: var(--hq-text-mid) !important;
  font-size: 13px;
  padding: 9px 16px;
  display: block;
  border-bottom: 1px solid var(--hq-border);
  transition: background .15s;
}
.head-first .ul-lg li:last-child a { border: none; }
.head-first .ul-lg li a:hover { background: var(--hq-smoke); color: var(--hq-navy) !important; }

/* Viewed products */
.box-pdseen a { color: rgba(255,255,255,.7); font-size: 12.5px; }
.box-pdseen a:hover { color: var(--hq-gold-lt); }

/* Main header */
.head-second {
  background: var(--hq-white);
  box-shadow: 0 1px 0 var(--hq-border);
  height: auto !important;
  padding: 12px 0;
}

/* Logo */
.box-logo { padding: 8px 0 !important; }
.box-logo img { height: 72px; }
.box-logo .img-reponsive { height: 72px !important; }

/* Search form */
.box-Sform { padding: 22px 0 !important; }
.box-Sform .form-inline { position: relative; display: flex; }
.box-Sform input[type="text"].my-form {
  padding: 10px 16px;
  border: 2px solid var(--hq-border);
  border-right: none;
  border-radius: var(--hq-r) 0 0 var(--hq-r);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 14px;
  background: var(--hq-smoke);
  color: var(--hq-text);
  transition: border-color .18s, box-shadow .18s;
}
.box-Sform input[type="text"].my-form:focus {
  border-color: var(--hq-navy-mid);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13,35,64,.07);
  outline: none;
}
.box-Sform select.my-form {
  border: 2px solid var(--hq-border);
  border-right: none;
  background: var(--hq-smoke);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13px;
  padding: 10px 8px;
  color: var(--hq-text-mid);
}
.box-Sform .btn-search {
  background: var(--hq-navy);
  color: #fff;
  border: none;
  border-radius: 0 var(--hq-r) var(--hq-r) 0;
  padding: 0 18px;
  font-size: 15px;
  cursor: pointer;
  transition: background .18s;
}
.box-Sform .btn-search:hover { background: var(--hq-gold); }

/* Search tags */
.xuhuong p { font-size: 12px; color: var(--hq-text-muted); margin: 6px 0 4px; }
.ul-xuhuong li { display: inline-block; margin: 2px 3px 2px 0; }
.ul-xuhuong li a {
  font-size: 11px; padding: 2px 10px;
  background: var(--hq-smoke); border: 1px solid var(--hq-border);
  border-radius: 100px; color: var(--hq-text-mid);
  transition: all .15s; display: inline-block;
}
.ul-xuhuong li a:hover { background: var(--hq-navy); color: #fff; border-color: var(--hq-navy); }

/* Cart/Like buttons */
.box-card { padding: 20px 0 !important; }
.ul-card li a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border: 1.5px solid var(--hq-border);
  border-radius: var(--hq-r);
  background: var(--hq-white);
  color: var(--hq-text-mid);
  font-size: 13px;
  font-weight: 500;
  transition: all .18s;
  margin-left: 8px;
  position: relative;
}
.ul-card li a .fa { font-size: 20px; display: block; }
.ul-card li a:hover { background: var(--hq-navy); color: #fff; border-color: var(--hq-navy); text-decoration: none; }
.ul-card li a span {
  position: absolute; top: 4px; right: 4px;
  background: var(--hq-gold); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; line-height: 16px;
  border-radius: 100px; text-align: center; padding: 0 4px;
}

/* Hotline in head-second */
.ul-hotline li a.just-hl { font-size: 13px; font-weight: 600; }

/* ─────────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────────── */
.head-three {
  background: var(--hq-navy-nav) !important;
  height: auto !important;
}

/* Menu items */
.ul-menu { height: auto !important; background: transparent !important; }
.ul-menu li.li-parent > a.a-parent,
.ul-menu li.li-parent-first > a.a-parent {
  color: rgba(255,255,255,.90);
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 13px 16px;
  height: auto !important;
  border-bottom: 3px solid transparent;
  transition: all .18s;
}
.ul-menu li.li-parent:hover > a.a-parent,
.ul-menu li.li-parent.active > a.a-parent {
  color: #fff;
  border-bottom-color: var(--hq-gold);
  background: rgba(255,255,255,.07);
}
.ul-menu li.li-parent-first > a.a-parent { font-size: 16px; padding: 10px 14px; }

/* Mega dropdown */
.out-menu {
  background: var(--hq-white) !important;
  visibility: visible !important;
  border-top: 3px solid var(--hq-gold);
  border-radius: 0 0 var(--hq-r-lg) var(--hq-r-lg);
  box-shadow: var(--hq-shadow-lg);
  padding: 20px 24px;
}
.out-menu .title-two {
  color: var(--hq-navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 10px;
  display: block;
  border-bottom: 1px solid var(--hq-border);
  padding-bottom: 6px;
}
.out-menu .title-two:hover { color: var(--hq-gold); }
.ul-out li a {
  color: var(--hq-text-mid);
  font-size: 13px;
  padding: 5px 0 5px 8px;
  display: block;
  transition: all .15s;
}
.ul-out li a:hover { color: var(--hq-gold); padding-left: 14px; }

/* Mega mini panel (hamburger) */
.ul-menu-lagi {
  background: var(--hq-white);
  border-top: 3px solid var(--hq-gold);
  border-radius: 0 0 var(--hq-r-lg) var(--hq-r-lg);
  box-shadow: var(--hq-shadow-lg);
}
.ul-menu-lagi li a {
  color: var(--hq-text-mid);
  font-size: 13.5px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--hq-border);
  transition: all .15s;
}
.ul-menu-lagi li a:hover { background: var(--hq-gold-pale); color: var(--hq-navy); padding-left: 24px; }
.ul-mega li a {
  color: var(--hq-text-mid) !important;
  font-size: 13px;
  padding: 8px 18px !important;
  border-bottom: 1px solid var(--hq-border);
}
.ul-mega li a:hover { background: var(--hq-gold-pale) !important; color: var(--hq-navy) !important; }

/* Search panel in nav */
.searcf-s {
  background: var(--hq-white);
  border-top: 3px solid var(--hq-gold);
  border-radius: 0 0 var(--hq-r-lg) var(--hq-r-lg);
  box-shadow: var(--hq-shadow-lg);
  padding: 16px;
}

/* ul-right (search icon + cart in nav) */
.ul-right li a {
  color: rgba(255,255,255,.80);
  font-size: 18px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  height: 100%;
  transition: color .18s;
}
.ul-right li a:hover { color: var(--hq-gold-lt); }

/* Mobile nav buttons */
.btn-pd-mb, .btn-mn-mb {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: var(--hq-r);
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s;
}
.btn-pd-mb:hover, .btn-mn-mb:hover { background: rgba(255,255,255,.22); }
.menu-mb li a { color: rgba(255,255,255,.85); font-size: 18px; }
.hl-pd-mb { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; }
.hl-pd-mb .fa { margin-right: 4px; }

/* ─────────────────────────────────────────────
   CART PREVIEW BAR
───────────────────────────────────────────── */
.all-contents { background: var(--hq-navy); padding: 4px 0; }
.trust-box { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tittle-trust { color: rgba(255,255,255,.8); font-size: 13px; }
.color-theme { color: var(--hq-gold-lt) !important; font-weight: 700; }

/* ─────────────────────────────────────────────
   SECTION: INTRO / ABOUT
───────────────────────────────────────────── */
.section-intro { margin-top: 0; padding: 48px 0; background: var(--hq-smoke); }
.section-intro .intro-info { padding-right: 32px; }
.headline {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--hq-navy);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 16px;
}
.headline:after { display: none; }
.intro-desc { font-size: 15px; color: var(--hq-text-mid); line-height: 1.75; }
.intro-video img { border-radius: var(--hq-r-lg); box-shadow: var(--hq-shadow-lg); }

/* bg-section (core values) */
.bg-section, .bg-section-b {
  background: var(--hq-navy) !important;
  padding: 40px 0;
}
.bg-section .intro-info, .bg-section-b .intro-info { color: rgba(255,255,255,.9); }
.bg-section .headline, .bg-section-b .headline { color: #fff; }
.bg-section .intro-desc, .bg-section-b .intro-desc { color: rgba(255,255,255,.8); }

/* ─────────────────────────────────────────────
   PRODUCT SECTIONS
───────────────────────────────────────────── */

/* Section header */
.head-box {
  border-bottom: 2px solid var(--hq-border) !important;
  padding-bottom: 12px;
  margin-bottom: 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title-box { float: none; }
.title-box a, .title-box h2 a, .title-box strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--hq-navy);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.title-box a::before, .title-box h2 a::before, .title-box strong::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--hq-gold);
  border-radius: 2px;
  flex-shrink: 0;
}
.title-box a:hover, .title-box h2 a:hover { color: var(--hq-gold); text-decoration: none; }

/* Arrow buttons */
.arrow-slider { float: none; }
.btn-pre, .btn-next, .bnts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1.5px solid var(--hq-border) !important;
  border-radius: var(--hq-r) !important;
  background: var(--hq-white) !important;
  color: var(--hq-text-mid) !important;
  font-size: 15px;
  transition: all .18s;
  cursor: pointer;
  text-decoration: none;
}
.btn-pre:hover, .btn-next:hover, .bnts:hover {
  background: var(--hq-navy) !important;
  color: #fff !important;
  border-color: var(--hq-navy) !important;
}

/* Product card */
.pd-box {
  border: 1px solid var(--hq-border) !important;
  border-radius: var(--hq-r-lg) !important;
  background: var(--hq-white);
  transition: transform .25s, box-shadow .25s !important;
  overflow: hidden !important;
}
.pd-box:hover { transform: translateY(-4px); box-shadow: var(--hq-shadow-lg) !important; border-color: #c8d5e6 !important; }

/* Product image */
.box-images {
  border: none !important;
  background: var(--hq-smoke);
  position: relative;
  overflow: hidden !important;
  min-height: 180px;
}
.box-images img { transition: transform .4s ease !important; }
.pd-box:hover .box-images img { transform: scale(1.06); }

/* Like button */
.btn-addlike {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid var(--hq-border) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--hq-text-muted) !important;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  transition: all .18s;
  padding: 0;
  z-index: 2;
}
.btn-addlike:hover { background: #ff4d6d !important; border-color: #ff4d6d !important; color: #fff !important; }

/* Sale badge */
.sale-off {
  background: #e53e3e !important;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--hq-r);
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  line-height: 1.2;
}

/* Product content */
.box-content {
  padding: 12px !important;
  border: none !important;
  border-top: 1px solid var(--hq-border) !important;
}
.box-content h3 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--hq-text);
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.box-content h3 a { color: var(--hq-text); }
.box-content h3 a:hover { color: var(--hq-navy-mid); }

/* Price */
.price-drop { font-size: 15px !important; font-weight: 700; color: var(--hq-gold) !important; display: block; }
.price { font-size: 12px !important; color: var(--hq-text-muted) !important; text-decoration: line-through; }
.box-content .fa-phone { font-size: 13px; margin-right: 4px; }
.box-content a[href^="tell:"] { color: var(--hq-gold); font-weight: 700; font-size: 13px; }

/* Sticker */
.sticker-cod {
  position: static !important;
  background: transparent !important;
  color: inherit;
  padding: 0 !important;
  height: auto !important;
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px !important;
  border-top: 1px solid var(--hq-border);
  align-items: center;
}
.sticker-cod img { height: 18px !important; width: auto !important; }
.sticker-cod .ship_text { height: 18px !important; }

/* ─────────────────────────────────────────────
   BESTSELLERS
───────────────────────────────────────────── */
.back-gray { background: var(--hq-smoke) !important; padding: 40px 0; }
.head-box-category {
  background: var(--hq-navy) !important;
  border-radius: var(--hq-r-lg);
  padding: 14px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left-head { display: flex; align-items: center; gap: 12px; color: #fff !important; text-decoration: none !important; }
.left-head:hover { text-decoration: none !important; }
.left-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
.left-head img { width: 28px; height: 28px; }
.left-head .fa-angle-right { color: var(--hq-gold); }
.body-box-category { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.body-box-category .col-2-ct { padding: 0; }

/* ─────────────────────────────────────────────
   NEWS / ARTICLES
───────────────────────────────────────────── */
.pad-30 { padding: 32px 0; }
.box-litmit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--hq-border);
}
.box-litmit h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--hq-navy);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.box-litmit h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--hq-gold);
  border-radius: 2px;
}

/* News card */
.bor-s {
  border: 1px solid var(--hq-border) !important;
  border-radius: var(--hq-r-lg) !important;
  overflow: hidden;
  background: var(--hq-white);
  transition: transform .25s, box-shadow .25s !important;
  height: 100%;
}
.bor-s:hover { transform: translateY(-3px); box-shadow: var(--hq-shadow-lg) !important; }

.news-img { overflow: hidden !important; }
.news-img img { transition: transform .4s ease !important; width: 100%; display: block; }
.news-img a:hover img, .bor-s:hover .news-img img { transform: scale(1.05); }
.news-img .map-eage {
  background: rgba(13,35,64,.78);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 16px;
}
.news-img .map-eage .fa { font-size: 24px; color: var(--hq-gold); }
.news-img .map-eage p { color: #fff; font-size: 12.5px; text-align: center; line-height: 1.4; margin: 0; }

.news-content {
  padding: 12px !important;
  border-top: 1px solid var(--hq-border);
}
.news-content a {
  color: var(--hq-text) !important;
  font-size: 13.5px !important;
  font-weight: 600;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: auto !important;
}
.news-content a:hover { color: var(--hq-gold) !important; }
.news-content p { font-size: 12.5px; color: var(--hq-text-muted); line-height: 1.5; margin-top: 6px; }
.shop-content { padding: 12px !important; border-top: 1px solid var(--hq-border); }
.shop-content a { color: var(--hq-text) !important; font-size: 13px !important; font-weight: 600; }
.shop-content a:hover { color: var(--hq-gold) !important; }
.news-astitile a { -webkit-line-clamp: 3 !important; height: auto !important; }

/* Customer quotes */
.h2-customer h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  color: var(--hq-navy);
  font-weight: 700;
  text-transform: none;
}
.h2-customer h2 .fa { color: var(--hq-gold); }
.box-inner {
  background: var(--hq-white);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-r-lg);
  padding: 24px;
  text-align: center;
  box-shadow: var(--hq-shadow);
}
.img-customer img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.bnts-customer {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--hq-smoke); border: 1.5px solid var(--hq-border);
  color: var(--hq-text-mid); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .18s; cursor: pointer;
}
.bnts-customer:hover { background: var(--hq-navy); color: #fff; border-color: var(--hq-navy); }

/* ─────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────── */
.box-left {
  background: var(--hq-white);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-r-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.title-left {
  background: var(--hq-navy);
  padding: 11px 16px;
}
.title-left strong {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.content-left { padding: 6px 0; }

.box-shas {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hq-border);
}
.box-shas:last-child { border: none; }
.box-imgs img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--hq-r); }
.content-shas { flex: 1; }
.content-shas a { font-size: 13px; font-weight: 500; color: var(--hq-text); line-height: 1.4; }
.content-shas a:hover { color: var(--hq-gold); }
.content-shas .price-drop, .content-shas .fa-phone { font-size: 13px; }
.content-shas .price-drop { display: block; margin-top: 4px; }

/* Left menu */
.ul-left li { border-bottom: 1px solid var(--hq-border); }
.ul-left li:last-child { border: none; }
.ul-left li a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; color: var(--hq-text-mid);
  font-size: 13.5px; transition: all .18s;
}
.ul-left li a:hover, .ul-left li.active a {
  background: var(--hq-gold-pale); color: var(--hq-navy); padding-left: 18px;
}
.ul-left li a .fa { color: var(--hq-gold); font-size: 12px; }
.ul-childs { padding: 4px 0 4px 24px; }
.ul-childs li a { padding: 5px 0; font-size: 13px; color: var(--hq-text-muted); }
.ul-childs li a:hover { color: var(--hq-gold); }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.footer-first {
  background: var(--hq-navy) !important;
  padding: 48px 0 28px !important;
  color: rgba(255,255,255,.8);
}
.footer-first p, .footer-first li { color: rgba(255,255,255,.72); font-size: 13.5px; }
.footer-first a { color: rgba(255,255,255,.72); font-size: 13.5px; transition: color .18s; }
.footer-first a:hover { color: var(--hq-gold-lt); text-decoration: none; }
.footer-first strong { color: rgba(255,255,255,.92); }

.box-info > span {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Footer menu columns */
.col-lg-2.col-md-2 .box-info > span {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ul-infos li a { color: rgba(255,255,255,.72) !important; font-size: 13.5px; display: block; padding: 4px 0; transition: color .18s; }
.ul-infos li a:hover { color: var(--hq-gold-lt) !important; }

/* Newsletter input */
.ip-send {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--hq-r) 0 0 var(--hq-r);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13px;
}
.ip-send::placeholder { color: rgba(255,255,255,.4); }
.ip-send:focus { outline: none; border-color: rgba(255,255,255,.4); }
.btn-send {
  padding: 9px 16px;
  background: var(--hq-gold);
  color: #fff;
  border: none;
  border-radius: 0 var(--hq-r) var(--hq-r) 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .18s;
}
.btn-send:hover { background: var(--hq-gold-lt); }
.form-inline { display: flex !important; }

/* Social in footer */
.ul-sofooter { display: flex; gap: 8px; margin-top: 14px; }
.non-back {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  margin-bottom: 8px;
}
.ul-sofooter li { display: inline-block; }
.ul-sofooter li a {
  display: flex;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  align-items: center; justify-content: center;
  color: rgba(255,255,255,.70);
  font-size: 15px;
  transition: all .18s;
}
.ul-sofooter li a:hover { background: var(--hq-gold); border-color: var(--hq-gold); color: #fff; }

/* Footer bottom */
.footer-second {
  background: rgba(0,0,0,.28) !important;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-second p, .footer-second span, .p-pokm {
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
  margin: 0;
}
.footer-second a { color: rgba(255,255,255,.55); }
.footer-second a:hover { color: var(--hq-gold-lt); }

/* ─────────────────────────────────────────────
   MOBILE FIXED FOOTER
───────────────────────────────────────────── */
.wrap-fixed-footer {
  background: var(--hq-white) !important;
  border-top: 1px solid var(--hq-border) !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,.08) !important;
}
.wrap-fixed-footer li .button {
  color: var(--hq-text-mid) !important;
  font-size: 9px;
  font-weight: 600;
  font-family: 'Be Vietnam Pro', sans-serif;
  transition: color .18s;
}
.wrap-fixed-footer li .button .fa { font-size: 22px !important; display: block; }
.wrap-fixed-footer li .button:hover { color: var(--hq-gold) !important; }
.wrap-fixed-footer li .button .phone_animation {
  background: var(--hq-gold) !important;
  box-shadow: 0 0 0 4px rgba(200,146,42,.25) !important;
}
.wrap-fixed-footer li.fixed-footer-zalo .button { color: #0068FF !important; line-height: 50px !important; }
.wrap-fixed-footer li .button #count-cart { background: var(--hq-gold) !important; }

/* ─────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────── */
.bracum {
  background: var(--hq-smoke);
  padding: 9px 0;
  border-bottom: 1px solid var(--hq-border);
  margin: 0 0 24px !important;
}
.ol-non li { font-size: 13px; color: var(--hq-text-muted); }
.ol-non li a { color: var(--hq-text-mid); }
.ol-non li a:hover { color: var(--hq-gold); }

/* ─────────────────────────────────────────────
   CONTENT PAGES
───────────────────────────────────────────── */
.my-content {
  background: var(--hq-white);
  border-radius: var(--hq-r-lg);
  padding: 24px;
  border: 1px solid var(--hq-border);
}
.head-box .title-box h1 a { font-size: 18px; font-weight: 700; }
.item-news { padding: 20px 0; border-bottom: 1px solid var(--hq-border); }
.item-news:last-child { border: none; }
.content-right h2 { font-size: 17px; font-weight: 700; color: var(--hq-navy); margin-bottom: 6px; }
.content-right h2 a { color: inherit; }
.content-right h2 a:hover { color: var(--hq-gold); }
.content-right span { font-size: 12px; color: var(--hq-text-muted); display: block; margin-bottom: 8px; }
.content-right p { font-size: 14px; color: var(--hq-text-mid); line-height: 1.65; margin-bottom: 10px; }
.see-more {
  display: inline-block; font-size: 13px; font-weight: 600;
  color: var(--hq-gold); border: 1.5px solid var(--hq-gold);
  padding: 5px 14px; border-radius: var(--hq-r); transition: all .18s;
}
.see-more:hover { background: var(--hq-gold); color: #fff; text-decoration: none; }

/* Product detail */
.title-Product { font-size: 22px; font-weight: 700; color: var(--hq-navy); margin-bottom: 12px; }
.price-drop span { font-size: 22px; font-weight: 700; color: var(--hq-gold); }
.issale { font-size: 14px; color: var(--hq-text-muted); text-decoration: line-through; margin-left: 6px; }
.persale { font-size: 13px; font-weight: 700; color: #e53e3e; margin-left: 6px; }
.btn-bts.btn-atc {
  background: var(--hq-navy) !important; color: #fff;
  padding: 11px 20px; border-radius: var(--hq-r-lg);
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .18s; border: none;
}
.btn-bts.btn-atc:hover { background: var(--hq-navy-mid) !important; }
.btn-bts.btn-fs {
  background: var(--hq-gold) !important; color: #fff;
  padding: 11px 20px; border-radius: var(--hq-r-lg);
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px;
  border: none; transition: background .18s;
}
.btn-bts.btn-fs:hover { background: var(--hq-gold-lt) !important; }
.btn-bts.btn-hea {
  background: var(--hq-smoke) !important; color: var(--hq-text-muted);
  border: 1.5px solid var(--hq-border) !important;
  padding: 10px 14px; border-radius: var(--hq-r-lg);
  transition: all .18s;
}
.btn-bts.btn-hea:hover { background: #ff4d6d !important; color: #fff !important; border-color: #ff4d6d !important; }
.title-member { background: var(--hq-navy); padding: 12px 20px; border-radius: var(--hq-r-lg) var(--hq-r-lg) 0 0; }
.title-member h2 { font-size: 15px; color: #fff; text-transform: uppercase; letter-spacing: .04em; margin: 0; }

/* Cart & Payment */
.shopping-payment-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; color: var(--hq-navy);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 2px solid var(--hq-border); margin-bottom: 14px;
}
.shopping-payment-title.first { border-bottom-color: var(--hq-gold); }
.table thead th {
  background: var(--hq-navy); color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 14px;
}
.btn.buynow {
  background: var(--hq-gold) !important; color: #fff;
  border-radius: var(--hq-r-lg); padding: 10px 22px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; border: none;
  transition: background .18s; cursor: pointer;
}
.btn.buynow:hover { background: var(--hq-gold-lt) !important; }
.btn.continue, .btn.update, .btn.remove {
  border-radius: var(--hq-r-lg);
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
  padding: 9px 16px; display: inline-flex; align-items: center; gap: 6px;
  transition: all .18s; cursor: pointer;
}
.btn.continue { background: var(--hq-smoke); color: var(--hq-text-mid); border-color: var(--hq-border); }
.btn.continue:hover { background: var(--hq-navy); color: #fff; border-color: var(--hq-navy); }
.btn.update { background: var(--hq-smoke); color: var(--hq-navy); border-color: var(--hq-navy); }
.btn.update:hover { background: var(--hq-navy); color: #fff; }
.btn.remove { background: #fff; color: #e53e3e; border-color: #e53e3e; }
.btn.remove:hover { background: #e53e3e; color: #fff; }

/* ─────────────────────────────────────────────
   TAG CLOUD (footer)
───────────────────────────────────────────── */
.p-pokm { color: rgba(255,255,255,.5) !important; }
.p-pokm b { color: rgba(255,255,255,.6); }
.p-pokm a { color: rgba(255,255,255,.6); font-size: 12.5px; }
.p-pokm a:hover { color: var(--hq-gold-lt); }

/* ─────────────────────────────────────────────
   HOVER EFFECTS (from hoangquyenjsc original)
───────────────────────────────────────────── */
.hover_circle img { transition: transform .5s ease; }
.hover_circle:hover img { transform: scale(1.1); }

/* ─────────────────────────────────────────────
   MISC UTILITIES
───────────────────────────────────────────── */
.mar-top-10 { margin-top: 10px; }
.mar-top-20 { margin-top: 20px; }
.mar-top-25 { margin-top: 25px; }
.mar-bot-20 { margin-bottom: 20px; }
.mar-bot-10 { margin-bottom: 10px; }
.bg-gray { background: var(--hq-smoke) !important; }

/* Pagination */
.pagina ul.pagination li a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--hq-r);
  border: 1.5px solid var(--hq-border); color: var(--hq-text-mid);
  font-size: 13px; transition: all .18s; margin: 2px;
}
.pagina ul.pagination li a:hover,
.pagina ul.pagination li.active a {
  background: var(--hq-navy); color: #fff; border-color: var(--hq-navy);
}

/* DMCA badge */
.dmca-badge img { opacity: .65; filter: grayscale(20%); transition: opacity .2s; }
.dmca-badge:hover img { opacity: 1; }

/* OWL carousel dots */
.owl-dots .owl-dot span { background: var(--hq-border) !important; }
.owl-dots .owl-dot.active span { background: var(--hq-navy) !important; }