/* WP AutoParts — Homepage Widgets CSS
   Port từ Autoparts-Website-Design-2/index-one.html (inline <style>)
   Các class io-* được giữ nguyên để khớp HTML widget.
   ================================================================= */

:root {
	--io-amber:   #f2b01e;
	--io-dark:    #1d2127;
	--io-slate:   #42506a;
	--io-slate-2: #37445b;
}

/* home.html compatible Elementor widget output */
.adm-stage { position: relative; background: #0d0d0d; height: 100vh; min-height: 560px; }
.adm-stage--elementor { overflow: hidden; }
.adm-hero { position: relative; display: flex; align-items: flex-start; justify-content: center; background: #0d0d0d; line-height: 0; height: 100%; }
.adm-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.adm-hero-text { position: relative; z-index: 2; text-align: center; line-height: 1.1; padding: 0 24px; margin-top: clamp(150px,26vh,300px); transform: translateY(40px); opacity: 0; animation: admHeroIn 1s cubic-bezier(.16,1,.3,1) .25s forwards; }
.adm-hero-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(34px,7vw,86px); letter-spacing: 1px; text-transform: uppercase; color: #f2f2f2; text-shadow: 0 2px 1px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.5); margin: 0; }
.adm-hero-rule { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 14px auto 12px; max-width: 760px; transform: scaleX(0); transform-origin: center; opacity: 0; animation: admRuleIn .9s cubic-bezier(.16,1,.3,1) .7s forwards; }
.adm-hero-rule::before, .adm-hero-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg,transparent,rgba(230,162,60,.85),transparent); }
.adm-hero-rule .star { color: #e6a23c; font-size: 13px; flex-shrink: 0; }
.adm-hero-sub { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(10px,1.5vw,16px); letter-spacing: 3px; text-transform: uppercase; color: #e4e4e4; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.7); opacity: 0; animation: admSubIn .9s ease .95s forwards; }
@keyframes admHeroIn { to { transform: translateY(0); opacity: 1; } }
@keyframes admRuleIn { to { transform: scaleX(1); opacity: 1; } }
@keyframes admSubIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.adm-hero-text, .adm-hero-rule, .adm-hero-sub { animation: none; opacity: 1; transform: none; }
}
.adm-cats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
.elementor-widget-ap_category_grid .adm-cats { position: relative; background: #141414; padding: 24px 0; }
.adm-cats-grid { max-width: 1180px; margin: 0 auto; padding: 0 24px 24px; display: grid; grid-template-columns: repeat(var(--ap-cols, 7),1fr); gap: 14px; }
.elementor-widget-ap_category_grid .adm-cats-grid { padding-bottom: 0; }
.adm-cat { display: flex; flex-direction: column; gap: 10px; }
.adm-cat .thumb { aspect-ratio: 1; max-height: 150px; border-radius: 8px; background: repeating-linear-gradient(45deg,#151515 0 10px,#1f1f1f 10px 20px); border: 1px solid #2d2d2d; display: grid; place-items: center; color: #585858; transition: border-color .15s, transform .15s; overflow: hidden; }
.adm-cat .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-cat:hover .thumb { border-color: #e6a23c; transform: translateY(-4px); }
.adm-cat .nm { text-align: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: #dcdcdc; }
.adm-cat:hover .nm { color: #e6a23c; }

.brand-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s, transform .15s, box-shadow .15s; position: relative; }
.brand-card--dealer { border-color: #f5a623; }
.brand-card--dealer:hover { border-color: #e09400; box-shadow: 0 10px 24px -16px rgba(245, 166, 35, .55); }
.brand-card__crown { position: absolute; top: 8px; right: 8px; color: #f5a623; pointer-events: none; z-index: 1; }
.brand-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 10px 24px -16px rgba(221,51,51,.5); }
.brand-card .bc-img { aspect-ratio: 16/10; border-radius: 5px; background: repeating-linear-gradient(45deg,#ececec 0 10px,#f4f4f4 10px 20px); border: 1px dashed #d0d0d0; display: grid; place-items: center; color: #bdbdbd; overflow: hidden; }
.brand-card .bc-img img { max-width: 90%; max-height: 80%; object-fit: contain; display: block; }
.brand-card .bc-name { text-align: center; font-weight: 700; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink); }

.promos { padding: 28px 0 44px; }
.promo { height: 100%; min-height: 230px; gap: 18px; }
.promo .badge-tl { white-space: nowrap; align-self: flex-start; }
.promo h3 { font-size: 38px; }
.promo .shop { align-self: flex-start; white-space: nowrap; }

.brand-tiles .brand-tile { background: #fff; color: var(--ink); border: 1px solid var(--line); padding: 12px 16px; }
.brand-tiles .brand-tile--logo { aspect-ratio: 1.6; display: flex; align-items: center; justify-content: center; }
.brand-tiles .brand-tile--dealer { border-color: #f5a623; }
.brand-tiles .brand-tile--dealer:hover { border-color: #e09400; }
.brand-tiles .brand-tile__crown { position: absolute; top: 8px; right: 8px; color: #f5a623; z-index: 2; pointer-events: none; }
.brand-tiles .brand-tile::before { display: none; }
.brand-tiles .brand-tile__logo { max-width: initial; max-height: initial; width: 90%; height: auto !important; object-fit: contain; display: block; position: relative; z-index: 1; }
.brand-tiles .brand-tile__ph { width: 72%; height: 58%; border-radius: 4px; background: repeating-linear-gradient(45deg,#ececec 0 10px,#f4f4f4 10px 20px); border: 1px dashed #d0d0d0; display: block; position: relative; z-index: 1; }
.brand-tiles .brand-tile:hover { border-color: var(--red); transform: translateY(-3px); }
.brand-tiles .brand-tile-more { background: #fff; }
.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:hover span { color: var(--red); }

.about { background: #fff; }
.about-copy .section-head { margin-bottom: 22px; align-items: flex-start; }
.about-copy p { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin: 0 0 16px; max-width: 540px; }
.about-checks { list-style: none; margin: 24px 0 30px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.about-checks li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); }
.about-checks .ck { width: 22px; height: 22px; border-radius: 5px; background: rgba(221,51,51,.1); color: var(--red); display: grid; place-items: center; flex-shrink: 0; }
.about-actions { display: flex; align-items: center; gap: 22px 32px; flex-wrap: wrap; }
.about-actions .btn { white-space: nowrap; }
.about-hotline { display: flex; align-items: center; gap: 13px; padding-left: 30px; border-left: 1px solid var(--line); }
.about-hotline .ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(221,51,51,.08); color: var(--red); display: grid; place-items: center; flex-shrink: 0; }
.about-hotline > div { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.about-hotline .lbl { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); line-height: 1; }
.about-hotline .num { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1; }
.about-hotline .num a { color: inherit; }
.about-img { aspect-ratio: 1/1; border-radius: 10px; background: repeating-linear-gradient(45deg,#ececec 0 16px,#f4f4f4 16px 32px); border: 1px dashed #d0d0d0; position: relative; display: grid; place-items: center; color: #c2c2c2; overflow: hidden; }
.about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img .lbl { position: absolute; left: 18px; bottom: 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #9a9a9a; }

.tip-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tip-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(221,51,51,.5); }
.tip-ic { background: rgba(221,51,51,.05); border-bottom: 1px solid var(--line); padding: 34px 0; display: grid; place-items: center; }
.tip-ic.has-thumb { padding: 0; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.tip-ic.has-thumb img { width: 100%; height: 100%; object-fit: fill; display: block; transition: transform .2s; }
.tip-card:hover .tip-ic.has-thumb img { transform: scale(1.04); }
.tip-ic .ring { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid rgba(221,51,51,.25); color: var(--red); display: grid; place-items: center; }
.tip-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tip-cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); font-weight: 500; }
.tip-body h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.12; text-transform: uppercase; letter-spacing: -.2px; margin: 0; text-wrap: balance; }
.tip-body h4 a { color: inherit; text-decoration: none; }
.tip-body h4 a:hover { color: var(--red); }
.tip-body p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.tip-card .tip-more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 12px; color: var(--red); text-transform: uppercase; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 8px; }
.tip-card:hover .tip-more { gap: 12px; }

/* ── News section mobile (front-page.html) ───────────────────────── */
.news-mobile-list { display: none; }
.news-mobile-list .thumb { line-height: 1.4; }
.news-mobile-list .thumb svg { width: 28px; height: 28px; color: #c4c4c4; }
.news-item h4 a { color: inherit; text-decoration: none; }
.news-item h4 a:hover { color: var(--red); }
.news-mobile-list .ni-more {
	display: inline-flex; align-items: center; gap: 7px;
	font-weight: 700; font-size: 12px; color: var(--red); text-transform: uppercase; letter-spacing: .5px;
	transition: gap .15s;
}
.news-mobile-list .ni-more span { font-size: 14px; line-height: 1; }
.news-mobile-list .news-item:hover .ni-more { gap: 11px; }
.news-all-mb { display: none; }

@media (max-width: 767.98px) {
	.news-all-mb {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		width: max-content; max-width: 100%; margin: 18px auto 0; white-space: nowrap;
		padding: 12px 28px; border: 1.5px solid var(--red); border-radius: 8px;
		color: var(--red); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
		text-decoration: none;
		transition: background .15s, color .15s, gap .15s;
	}
	.news-all-mb span { font-size: 15px; line-height: 1; }
	.news-all-mb:hover { background: var(--red); color: #1a1a1a; gap: 12px; }
	.tips-row > div:nth-child(n+2) { display: none; }
	.tips-row > div:first-child { flex: 0 0 100%; max-width: 100%; }
	.news-mobile-list { display: flex; margin-top: 16px; }
}

@media (max-width: 1080px) {
	.brand-card-grid { grid-template-columns: repeat(4,1fr); }
	.about-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 1024px) and (min-width: 769px) {
	.adm-cats-grid { grid-template-columns: repeat(4,1fr); max-width: 760px; padding: 0 18px 18px; gap: 12px; }
	.elementor-widget-ap_category_grid .adm-cats-grid { padding-bottom: 0; }
	.adm-cat .thumb { max-height: 120px; }
	.adm-cat .nm { font-size: 13px; }
}
@media (max-width: 768px) {
	.adm-cats { position: static; background: #141414; }
	.adm-cats-grid { grid-template-columns: repeat(3,1fr); padding: 24px; }
	.adm-cat .thumb { max-height: none; }
}
@media (max-width: 640px) {
	.brand-card-grid { grid-template-columns: repeat(2,1fr); }
	.about-copy .section-head h2 { font-size: 34px; }
}
@media (max-width: 560px) {
	.about-hotline { padding-left: 0; border-left: 0; }
}
@media (max-width: 460px) {
	.adm-cats-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Section layout ─────────────────────────────────────────────── */
.io-band       { padding: 56px 0; }
.band-banners  { padding-top: 0; padding-bottom: 0; }
.bg-white      { background: #fff; }
.bg-gray       { background: var(--ap-ink); }

.io-sec-head   { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.io-sec-heading { }

.io-kicker {
	display: flex; align-items: center; gap: 10px;
	color: var(--ap-red);
	font-family: var(--ap-font-mono, "DM Mono", ui-monospace, monospace);
	font-size: 12px; font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase;
	margin-bottom: 10px;
}
.io-kicker::before { content: ""; width: 26px; height: 2px; background: var(--ap-red); }

.io-title {
	font-family: var(--ap-font-display, "Anton", var(--ap-font-head));
	font-weight: 400; text-transform: uppercase;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1; color: var(--ap-black); letter-spacing: .01em;
	margin: 0;
}

.io-seeall {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--ap-red); font-weight: 700;
	font-size: 13.5px; text-transform: uppercase;
	letter-spacing: .06em; white-space: nowrap;
}
.io-seeall:hover { text-decoration: underline; color: var(--ap-red); }

/* ── Hero Slider ─────────────────────────────────────────────────── */
.io-hero       { display: grid; grid-template-columns: 1fr 360px; gap: 22px; padding: 30px 0 56px; }
.io-hero-main  { position: relative; border-radius: 10px; overflow: hidden; background: var(--io-dark); min-height: 472px; }

.io-slides     { position: relative; height: 100%; min-height: 472px; }
.io-slide      { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding: 40px 44px; opacity: 0; visibility: hidden; transition: opacity .5s; background: radial-gradient(120% 130% at 88% 18%,#2b323d 0%,var(--io-dark) 56%); }
.io-slide.is-active { opacity: 1; visibility: visible; }

.io-badge-out  { display: inline-block; border: 1.5px solid rgba(255,255,255,.6); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 3px; font-family: var(--ap-font-body); }

.io-hero-h     { font-family: var(--ap-font-display, "Anton", var(--ap-font-head)); font-weight: 400; font-size: clamp(36px, 5vw, 60px); line-height: .92; color: #fff; text-transform: uppercase; margin: 18px 0 16px; letter-spacing: .005em; }
.io-hero-h em  { color: var(--ap-red); font-style: normal; display: block; }
.io-slide-txt p { color: #c4cad4; font-size: 15.5px; line-height: 1.6; margin: 0 0 24px; }

.io-btn-out    { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid #fff; color: #fff; padding: 13px 22px; border-radius: 5px; font-weight: 600; font-size: 14.5px; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; transition: background .18s, color .18s; }
.io-btn-out:hover { background: #fff; color: var(--io-dark); }
.io-btn-out svg { width: 17px; height: 17px; }

.io-slide-art  { position: relative; align-self: stretch; display: flex; }
.io-art-ph     { flex: 1; border-radius: 7px; display: flex; align-items: center; justify-content: center; text-align: center; color: #727a87; font-size: 13px; line-height: 1.7; font-family: var(--ap-font-mono, monospace); background: repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 11px,rgba(255,255,255,0) 11px 22px),rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); padding: 20px; }
.io-art-img    { flex: 1; object-fit: contain; border-radius: 7px; max-height: 380px; }
.io-stamp      { position: absolute; right: -4px; bottom: -6px; width: 96px; height: 96px; border-radius: 50%; background: var(--ap-red); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.05; font-family: var(--ap-font-display, "Anton", sans-serif); text-transform: uppercase; font-size: 22px; box-shadow: 0 8px 20px rgba(0,0,0,.3); transform: rotate(-12deg); }
.io-stamp b    { font-family: var(--ap-font-body); font-size: 9px; font-weight: 600; letter-spacing: .12em; margin-top: 2px; }

.io-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; display: grid; place-items: center; z-index: 5; cursor: pointer; }
.io-hero-arrow svg { width: 20px; height: 20px; }
.io-hero-arrow:hover { background: rgba(255,255,255,.24); }
.io-hero-arrow.prev { left: 14px; }
.io-hero-arrow.next { right: 14px; }
.io-dots       { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 9px; z-index: 5; }
.io-dots button { width: 26px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.32); border: none; cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.io-dots button.active { background: #fff; width: 34px; }

/* Side cards */
.io-hero-side  { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.io-side-card  { position: relative; border-radius: 10px; padding: 24px 24px 22px; overflow: hidden; display: flex; flex-direction: column; color: #fff; min-height: 0; text-decoration: none; }
.io-side-card.green  { background: linear-gradient(135deg,#2bae5f,#1f9a52); }
.io-side-card.blue   { background: linear-gradient(135deg,#2a64d6,#1e4fb5); }
.io-side-card.red    { background: linear-gradient(135deg,var(--ap-red),var(--ap-red-700)); }
.io-side-card.amber  { background: linear-gradient(135deg,#e07b27,#c5611a); }
.io-side-tag   { align-self: flex-start; background: rgba(0,0,0,.28); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; font-family: var(--ap-font-body); }
.io-side-card h3 { font-family: var(--ap-font-display, "Anton", sans-serif); font-weight: 400; text-transform: uppercase; font-size: 25px; line-height: 1; margin: 16px 0 7px; letter-spacing: .01em; }
.io-side-card p  { font-size: 14px; color: rgba(255,255,255,.86); margin: 0; max-width: 62%; line-height: 1.4; }
.io-side-ph    { position: absolute; right: 18px; top: 50%; transform: translateY(-46%); width: 96px; height: 96px; border-radius: 7px; background: repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 9px,rgba(255,255,255,.07) 9px 18px); }
.io-side-go    { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: #fff; color: var(--ap-text); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 16px; border-radius: 5px; position: relative; z-index: 2; }
.io-side-go svg { width: 15px; height: 15px; }

/* ── Make Grid ───────────────────────────────────────────────────── */
.io-makes      { display: grid; gap: 14px; }
.io-makes--cols-4 { grid-template-columns: repeat(4, 1fr); }
.io-makes--cols-5 { grid-template-columns: repeat(5, 1fr); }
.io-makes--cols-6 { grid-template-columns: repeat(6, 1fr); }

.io-makev      { display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; background: #fff; border: 1px solid var(--ap-line); border-radius: 10px; padding: 18px 12px 15px; transition: transform .18s, box-shadow .18s, border-color .18s; text-decoration: none; }
.io-makev:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(10,12,20,.10); border-color: var(--ap-red); }
.io-lt-logo    { width: 100%; height: 62px; border-radius: 6px; flex: none; display: grid; place-items: center; overflow: hidden; }
.io-lt-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.io-lt-logo.neutral { background: var(--ap-surface-3); color: var(--ap-muted-2); border: 1px dashed var(--ap-line); }
.io-lt-logo.neutral svg { width: 22px; height: 22px; }
.io-makev-name { font-family: var(--ap-font-head); font-weight: 600; font-size: 14.5px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; color: var(--ap-black); }
.io-makev:hover .io-makev-name { color: var(--ap-red); }

/* ── Promo Banners ───────────────────────────────────────────────── */
.io-promos     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 0; }
.io-promo      { position: relative; border-radius: 10px; overflow: hidden; padding: 26px 28px 24px; min-height: 196px; display: flex; flex-direction: column; color: #fff; text-decoration: none; }
.io-promo.dark  { background: linear-gradient(120deg,#262b33,var(--io-dark)); }
.io-promo.slate { background: linear-gradient(120deg,#4a5a76,var(--io-slate-2)); }
.io-promo.red   { background: linear-gradient(120deg,#d8302f,#b21c1d); }
.io-promo::after { content:""; position:absolute; right:-70px; top:50%; transform:translateY(-50%); width:230px; height:230px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.16); }
.io-promo-tag  { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; font-family: var(--ap-font-body); position: relative; z-index: 2; }
.io-promo-tag.red   { background: var(--ap-red); color: #fff; }
.io-promo-tag.amber { background: var(--io-amber); color: #222; }
.io-promo-h    { font-family: var(--ap-font-display, "Anton", sans-serif); font-weight: 400; text-transform: uppercase; font-size: 34px; line-height: .95; margin: 16px 0 9px; letter-spacing: .01em; position: relative; z-index: 2; }
.io-promo p    { font-size: 14px; color: rgba(255,255,255,.85); margin: 0 0 20px; position: relative; z-index: 2; max-width: 76%; line-height: 1.45; }
.io-promo-wm   { position: absolute; right: 22px; bottom: 20px; font-family: var(--ap-font-head); font-weight: 600; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.13); z-index: 1; }
.io-promo-go   { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: #fff; color: var(--ap-text); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 16px; border-radius: 5px; position: relative; z-index: 2; }
.io-promo-go svg { width: 15px; height: 15px; }

/* ── News Cards ──────────────────────────────────────────────────── */
.io-news       { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.io-ncard      { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ap-line); border-radius: 10px; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.io-ncard:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(10,12,20,.12); border-color: var(--ap-red); }
.io-ncard-thumb { display: grid; place-items: center; aspect-ratio: 16/10; background: linear-gradient(135deg,var(--ap-red-soft),#f6f7f9); color: rgba(236,35,36,.55); text-decoration: none; overflow: hidden; }
.io-ncard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.io-ncard:hover .io-ncard-thumb img { transform: scale(1.04); }
.io-ncard-thumb svg { width: 48px; height: 48px; }
.io-ncard-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 18px 20px; flex: 1; }
.io-ncard-tag  { font-family: var(--ap-font-mono, monospace); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-red); }
.io-ncard h3   { font-family: var(--ap-font-head); font-weight: 600; font-size: 18px; line-height: 1.22; letter-spacing: .01em; color: var(--ap-black); margin: 0; }
.io-ncard h3 a { color: inherit; text-decoration: none; }
.io-ncard h3 a:hover { color: var(--ap-red); }
.io-ncard p    { font-size: 13.5px; line-height: 1.55; color: var(--ap-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.io-ncard-rm   { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--ap-red); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; padding-top: 4px; text-decoration: none; }
.io-ncard-rm svg { width: 15px; height: 15px; transition: transform .18s; }
.io-ncard-rm:hover svg { transform: translateX(3px); }

/* ── About Section ───────────────────────────────────────────────── */
.io-about      { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
.io-about-text .io-kicker { margin-bottom: 10px; }
.io-about-text .io-title  { margin-bottom: 18px; }
.io-about-text p { font-size: 15.5px; line-height: 1.72; color: var(--ap-muted); margin: 0 0 14px; max-width: 560px; }
.io-about-points { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 28px; list-style: none; padding: 0; }
.io-about-points li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ap-text); font-weight: 500; }
.io-about-points .ck { width: 27px; height: 27px; border-radius: 7px; background: var(--ap-red-soft); color: var(--ap-red); display: grid; place-items: center; flex: none; }
.io-about-points .ck svg { width: 15px; height: 15px; }
.io-about-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.io-about-cta  { display: inline-flex; align-items: center; gap: 10px; background: var(--ap-red); color: #fff; font-weight: 700; font-size: 14.5px; text-transform: uppercase; letter-spacing: .05em; padding: 15px 26px; border-radius: 6px; transition: background .18s; text-decoration: none; }
.io-about-cta svg { width: 17px; height: 17px; }
.io-about-cta:hover { background: var(--ap-red-600); color: #fff; }
.io-about-phone { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.io-about-phone .ic { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ap-line); display: grid; place-items: center; color: var(--ap-red); flex: none; transition: border-color .18s; }
.io-about-phone .ic svg { width: 20px; height: 20px; }
.io-about-phone:hover .ic { border-color: var(--ap-red); }
.io-about-phone .tx { display: flex; flex-direction: column; line-height: 1.25; }
.io-about-phone .tx span { font-size: 11.5px; color: var(--ap-muted-2); text-transform: uppercase; letter-spacing: .08em; }
.io-about-phone .tx b { font-family: var(--ap-font-head); font-size: 21px; color: var(--ap-black); letter-spacing: .01em; }
.io-about-media { position: relative; border-radius: 12px; overflow: hidden; min-height: 380px; border: 1px solid var(--ap-line); }
.io-about-media .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg,var(--ap-surface-3) 0 14px,var(--ap-line) 14px 28px); }
.io-about-media .ph svg { width: 64px; height: 64px; color: var(--ap-muted-2); opacity: .65; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.io-hero          { grid-template-columns: 1fr; }
	.io-hero-side     { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
	.io-makes--cols-6 { grid-template-columns: repeat(4, 1fr); }
	.io-makes--cols-5 { grid-template-columns: repeat(4, 1fr); }
	.io-news          { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.io-slide         { grid-template-columns: 1fr; padding: 28px 26px; }
	.io-slide-art     { display: none; }
	.io-hero-h        { font-size: 46px; }
	.io-hero-side     { grid-template-columns: 1fr; }
	.io-makes--cols-4, .io-makes--cols-5, .io-makes--cols-6 { grid-template-columns: repeat(3, 1fr); }
	.io-promos        { grid-template-columns: 1fr; }
	.io-news          { grid-template-columns: 1fr; }
	.io-about         { grid-template-columns: 1fr; gap: 28px; }
	.io-about-media   { min-height: 240px; order: -1; }
	.io-title         { font-size: 32px; }
}
@media (max-width: 480px) {
	.io-makes--cols-4, .io-makes--cols-5, .io-makes--cols-6 { grid-template-columns: repeat(2, 1fr); }
}