/* ============================================================
   HOME (pg-home) — light header + image hero slider + category section
   Scoped to .pg-home so home-one.html (.pg-home-one only) is untouched.
   Loaded AFTER global.css → ties in specificity resolve in our favour.
   ============================================================ */

/* ---------- HERO SLIDER (each slide = one full-bleed image; OSlider engine) ---------- */
.home-slider { position: relative; background: #0b0b0b; overflow: hidden; --os-speed: 600ms; }
.hs-viewport { overflow: hidden; }
.hs-track { padding: 0; }
.hs-slide { position: relative; height: clamp(360px, 42vw, 600px); background: #111; }
.hs-slide .hs-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* right-side text overlay (default). Slides with .text-left flip everything. */
.hs-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(270deg, rgba(8,8,8,.82) 0%, rgba(8,8,8,.55) 42%, rgba(8,8,8,.10) 100%); }
.hs-slide.text-left .hs-scrim { background: linear-gradient(90deg, rgba(8,8,8,.82) 0%, rgba(8,8,8,.55) 42%, rgba(8,8,8,.10) 100%); }
.hs-content.container { position: relative; z-index: 3; width: 100%; height: 100%;
  margin-left: auto; margin-right: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right;
  padding-top: 0; padding-bottom: 0;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5 + 44px);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); }
.hs-slide.text-left .hs-content.container { align-items: flex-start; text-align: left;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
.hs-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: #f5a623; margin-bottom: 18px; }
.hs-eyebrow::after { content: ""; width: 26px; height: 2px; background: #f5a623; }
.hs-slide.text-left .hs-eyebrow { flex-direction: row-reverse; }
.hs-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; line-height: 1.04;
  font-size: clamp(30px, 4.2vw, 56px); letter-spacing: .5px; text-transform: uppercase; color: #fff;
  margin: 0 0 16px; max-width: 18ch; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hs-sub { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6; color: #dcdcdc; margin: 0 0 28px; max-width: 44ch; }
.hs-cta { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 30px;
  background: var(--red); color: #1a1a1a; font-weight: 800; font-size: 14px; letter-spacing: .4px;
  text-transform: uppercase; border-radius: 4px; transition: background .15s, transform .15s; }
.hs-cta:hover { background: var(--red-dark); transform: translateY(-2px); }
.hs-cta span { font-size: 18px; line-height: 1; }

/* entrance: visible end-state is the BASE (robust for print / reduced-motion /
   frozen-animation capture); animate FROM hidden only as an enhancement. */
.hs-slide .hs-content > * { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hs-slide.is-active .hs-content > * { animation: hsRise .6s cubic-bezier(.2,.7,.2,1) forwards; }
  .hs-slide.is-active .hs-eyebrow { animation-delay: .08s; }
  .hs-slide.is-active .hs-title   { animation-delay: .16s; }
  .hs-slide.is-active .hs-sub     { animation-delay: .26s; }
  .hs-slide.is-active .hs-cta     { animation-delay: .36s; }
}
@keyframes hsRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* arrows */
.hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(245,166,35,.45);
  background: rgba(10,10,10,.4); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hs-arrow:hover { background: var(--red); border-color: var(--red); color: #1a1a1a; }
.hs-prev { left: 20px; }
.hs-next { right: 20px; }

/* dots — visible on any background. .site button{background:none} (0,1,1) would
   strip a plain .hs-dot (0,1,0) fill, so scope under .home-slider to win. */
.hs-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 11px; }
.home-slider .hs-dot { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.65); box-shadow: 0 0 0 1.5px rgba(0,0,0,.5), 0 1px 5px rgba(0,0,0,.55);
  transition: background .2s, width .2s, border-radius .2s; }
.home-slider .hs-dot:hover { background: #fff; }
.home-slider .hs-dot.is-active { background: var(--red); width: 32px; border-radius: 6px; box-shadow: 0 0 0 1.5px rgba(0,0,0,.4), 0 1px 5px rgba(0,0,0,.5); }

/* ---------- CATEGORY SECTION ---------- */
.cat-section { padding: 48px 0 30px; }
.cat-section .cat-full { width: 100%; }
.cat-carousel { position: relative; --os-per-view: 3; --os-gap: 18px; }
.cat-viewport { overflow: hidden; width: 100%; }
.cat-track { padding: 2px 1px; }

/* Elementor editor: keep carousel viewport full-width inside the widget column */
.elementor-editor-active .elementor-widget-ap_category_section .cat-viewport.oslider__viewport,
.elementor-editor-preview .elementor-widget-ap_category_section .cat-viewport.oslider__viewport {
	width: 100%;
}

/* overlay card: image fills, name+desc bottom-left */
.cat-card { position: relative; display: block; text-decoration: none; color: inherit;
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--bg-soft);
  border: 1px solid var(--line); transition: transform .25s, box-shadow .25s, border-color .25s; }
.cat-card:hover { transform: translateY(-4px); border-color: rgba(245,166,35,.6);
  box-shadow: 0 22px 44px -26px rgba(15,17,22,.5); }
.cat-card .hs-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cat-card::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,8,.88) 0%, rgba(8,8,8,.5) 30%, rgba(8,8,8,.05) 58%, rgba(8,8,8,0) 100%);
  transition: opacity .3s; }
.cc-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px 22px 20px;
  display: flex; flex-direction: column; align-items: flex-start; }
.cc-name { display: inline-block; align-self: flex-start;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .4px; color: #1a1a1a; margin: 0; text-wrap: balance;
  background: var(--red); padding: 6px 13px; border-radius: 4px; }
.cc-desc-wrap { display: grid; grid-template-rows: 0fr; align-self: stretch;
  transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1); }
.cc-desc-clip { min-height: 0; overflow: hidden; }
.cc-desc { margin: 0; padding-top: 10px;
  font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.82); text-wrap: pretty;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease .05s, transform .4s cubic-bezier(.4,0,.2,1) .05s; }
@media (hover: hover) {
  .cat-card:hover .cc-desc-wrap { grid-template-rows: 1fr; }
  .cat-card:hover .cc-desc { opacity: 1; transform: none; }
}

/* bottom navigation: prev · dots · next */
.cat-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px;
  background: #eef0f2; border-radius: 999px; padding: 8px 14px; gap: 14px;
  width: fit-content; margin-left: auto; margin-right: auto; }
.cat-section .cat-nav { background:#eef0f2; border-radius:999px; padding:8px 14px; gap:14px; width:-moz-fit-content; width:fit-content; margin-left:auto; margin-right:auto; }
.cat-section .cat-arrow { width:36px; height:36px; }
.cat-section .cat-arrow:hover { background:#fff; border-color:var(--line); color:var(--red); border-radius:50%; }
.cat-section .cat-arrow:disabled:hover { background:#fff; border-color:var(--line); color:var(--ink); }
@media (max-width:768px){
  .section-head { align-items:center; text-align:center; }
  .section-head .left { align-items:center; }
  .section-head .eyebrow { justify-content:center; }
}
.cat-dots { display: flex; align-items: center; gap: 9px; }
.cat-dots .cat-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(15,17,22,.22); transition: background .2s, width .25s, border-radius .25s; }
.cat-dots .cat-dot:hover { background: rgba(15,17,22,.4); }
.cat-dots .cat-dot.active { width: 26px; border-radius: 5px; background: var(--red); }

/* featured brands: cap at 5 on mobile + dashed "Xem thêm" card */
.brand-more-col { display: none; }
.brand-more { height: 100%; min-height: 96px; background: #fff;
  border: 1.5px dashed var(--red); border-radius: 8px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  color: var(--red); text-align: center; transition: background .15s, border-color .15s; }
.brand-more:hover { background: rgba(245,166,35,.08); }
.brand-more .bm-ic { display: grid; place-items: center; }
.brand-more .bm-txt { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: .4px; text-transform: uppercase; line-height: 1.1; }

/* brand tiles: cap at 14 on sub-desktop + dashed "Xem thêm" tile */
.brand-tile-more { display: none; }
.brand-tiles .brand-tile-more { background: #fff; border: 1.5px dashed var(--red); }
.brand-tiles .brand-tile-more::before { display: none; }
.brand-tiles .brand-tile-more span {
  color: var(--ink); display: inline-flex; align-items: center; gap: 7px; font-size: 18px;
  font-weight: 400; letter-spacing: .3px; }
.brand-tiles .brand-tile-more svg { stroke: var(--red); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .pg-home .hdr-logo img { height: 92px; }
  .pg-home .site-header .wrap { height: 118px; }
  .brand-tiles > a:nth-child(n+15):not(.brand-tile-more) { display: none; }
  .brand-tiles .brand-tile-more { display: flex; }
}
@media (max-width: 768px) {
  .home-hdr { display: none; }
  .hs-slide { height: clamp(320px, 64vw, 420px); }
  .hs-content.container { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5 + 36px); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5 + 36px); }
  .hs-slide.text-left .hs-content.container { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5 + 36px); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5 + 36px); }
  .hs-scrim { background: linear-gradient(270deg, rgba(8,8,8,.84) 0%, rgba(8,8,8,.6) 60%, rgba(8,8,8,.3) 100%); }
  .hs-arrow { width: 42px; height: 42px; }
  .hs-prev { left: 12px; } .hs-next { right: 12px; }
  .cat-section { padding: 16px 0 40px; }
  .brands-row > div:nth-child(n+6):not(.brand-more-col) { display: none; }
  .brand-more-col { display: block; }
  .va-hide-mb { display: none; }
}

/* ---------- TIN TỨC: mobile list + featured card (front-page.html) ---------- */
@media (max-width: 767.98px) {
  .ap-news-section .tips-row > div:nth-child(n+2) { display: none; }
  .ap-news-section .tips-row > div:first-child { flex: 0 0 100%; max-width: 100%; }
  .ap-news-section .news-mobile-list { display: flex; margin-top: 16px; }
  .ap-news-section .news-all-mb { display: flex; }
}

@media (max-width: 460px) {
  .hs-title { font-size: clamp(26px, 8vw, 38px); }
  .hs-sub { font-size: 14px; }
}