/*
Theme Name: Huy Giang Custom
Author: HG Dev
Description: Classic theme — hard-coded layout/colors, content editable inline (SCF).
Version: 1.0
Text Domain: huygiang
*/

:root {
	--navy: #04397A;
	--navy2: #004285;
	--blue: #1D8ADE;
	--yellow: #FBD627;
	--light: #EEF7FE;
	--ink: #22303F;
	--muted: #5b6b7c;
	--radius: 14px;
	--shadow: 0 10px 30px rgba(4, 57, 122, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--ink);
	background: #fff;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.label { color: var(--blue); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
h1, h2, h3 { color: var(--navy); line-height: 1.18; }
.h2 { font-size: 34px; font-weight: 900; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 12px 26px; font-weight: 700; font-size: 14.5px; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-yellow { background: var(--yellow); color: var(--navy); box-shadow: 0 6px 16px rgba(251, 214, 39, .4); }
.btn-outline { border: 1.5px solid #fff; background: rgba(255,255,255,.95); color: var(--navy); font-weight: 700; }
.btn-white { background: #fff; color: var(--navy); border: 1px solid #d7e5f2; }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(14,115,204,.35); border-radius: 999px; }
.btn-blue:hover { background: var(--navy2); }
.btn .hg-icon { width: 18px; height: 18px; }

/* ============ HEADER ============ */
.site-header { background: #fff; position: sticky; top: 0; z-index: 900; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.site-header .logo img { height: 50px; width: auto; }
.main-nav ul { display: flex; gap: 6px; }
.main-nav a { display: block; padding: 10px 14px; font-weight: 600; font-size: 15px; color: var(--navy); border-radius: 8px; }
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a { color: var(--blue); }
.main-nav li { position: relative; }
.main-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border: 1px solid #d7e5f2; border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 42, 96, .14); padding: 6px; flex-direction: column; gap: 0; z-index: 950; }
.main-nav .menu-item-has-children:hover > .sub-menu, .main-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; }
.main-nav .sub-menu li { width: 100%; }
.main-nav .sub-menu a { padding: 9px 12px; font-size: 14px; border-radius: 7px; }
.main-nav .sub-menu a:hover { background: #eef6fd; color: var(--blue); }
.main-nav .sub-tg { display: none; }
.quote-btn { background: var(--yellow); color: var(--navy); padding: 11px 22px; border-radius: 999px; font-weight: 800; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.quote-btn .hg-icon { width: 15px; height: 15px; }

/* ============ HERO ============ */
.hero { position: relative; background: #00569b; color: #fff; overflow: hidden; aspect-ratio: 1916 / 821; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.hero .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 0; padding-top: 0; padding-bottom: 150px; gap: 0; }
.hero-copy h1 { color: #fff; font-size: 54px; font-weight: 900; line-height: 1.12; margin-bottom: 18px; text-shadow: 0 2px 18px rgba(0,40,90,.35); }
.hero-copy h1 .accent { color: var(--yellow); display: block; }
.hero-sub { color: #fff; font-size: 17px; font-weight: 500; max-width: 470px; margin-bottom: 28px; white-space: pre-line; text-shadow: 0 1px 4px rgba(0,30,70,.75), 0 2px 14px rgba(0,40,90,.55); }
.hero-btns { display: flex; gap: 14px; }
.hero-chips { position: absolute; left: 0; right: 0; bottom: 12.5%; z-index: 5; }
.hero-chips .wrap { display: flex; flex-direction: row; gap: 16px; min-height: 0; padding-top: 0; padding-bottom: 0; justify-content: flex-start; max-width: 1240px; margin-left: auto; margin-right: auto; }
.chip { display: flex; align-items: center; gap: 12px; background: transparent; border: 0; border-radius: 12px; padding: 6px 4px; min-width: 0; flex: 0 1 auto; text-shadow: 0 1px 10px rgba(0,40,90,.45); }
.chip .ic { flex: none; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,40,90,.25); }
.chip .ic .hg-icon { width: 25px; height: 25px; }
.chip b { font-size: 14.5px; display: block; color: #fff; }
.chip span { font-size: 12px; color: #e2eefb; display: block; }

/* ============ SECTIONS ============ */
.section { padding: 72px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.section-head .sub { color: var(--muted); font-size: 14.5px; margin-top: 10px; max-width: 640px; }

/* ABOUT */
.about { background: #fff; }
.about .wrap { display: grid; grid-template-columns: 34fr 40fr 26fr; gap: 28px; align-items: center; }
.about h2 { font-size: 30px; font-weight: 900; margin: 8px 0 14px; }
.about p.lead { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feat { border: 1px solid #e3eef8; border-radius: var(--radius); padding: 18px 16px; display: flex; flex-direction: column; gap: 9px; background: #fbfdff; }
.feat .ic { width: 42px; height: 42px; border-radius: 10px; background: var(--light); color: var(--blue); display: grid; place-items: center; }
.feat .ic .hg-icon { width: 22px; height: 22px; }
.feat b { font-size: 14.5px; color: var(--navy); }
.feat span { font-size: 12.5px; color: var(--muted); }
.about .photo img { border-radius: var(--radius); object-fit: cover; width: 100%; height: 100%; box-shadow: var(--shadow); }

/* STATS */
.stats { position: relative; background: linear-gradient(180deg, var(--light) 0%, #fff 100%); padding: 0; overflow: hidden; aspect-ratio: 1741 / 300; }
.stats-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.stats .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: center; height: 100%; padding-top: 0; padding-bottom: 0; }
.stat { display: flex; gap: 14px; align-items: center; }
.stat .ic { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.stat .ic .hg-icon { width: 26px; height: 26px; }
.stat b { display: block; font-size: 21px; font-weight: 900; color: var(--navy); }
.stat span { font-size: 12.5px; color: var(--muted); }

/* PRODUCTS */
.products { background: #fff; }
.prod-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.prod { border: 1px solid #e3eef8; border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(4,57,122,.05); transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; }
.prod:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.prod .ph { position: relative; }
.prod .ph img { width: 100%; aspect-ratio: 4/2.7; object-fit: cover; }
.prod .ph .go { position: absolute; right: 10px; bottom: -16px; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(29,138,222,.4); }
.prod .ph .go .hg-icon { width: 16px; height: 16px; }
.prod .tx { padding: 18px 14px 16px; }
.prod b { font-size: 17.5px; font-weight: 800; color: var(--navy); display: block; margin-bottom: 6px; }
.prod span { font-size: 12.5px; color: var(--muted); }

/* PARTNERS + TEAM */
.partners { position: relative; background: linear-gradient(180deg, #fff 0%, var(--light) 100%); overflow: hidden; }
.partners-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; z-index: 0; }
.partners .wrap { position: relative; z-index: 2; }
.partners .top { display: grid; grid-template-columns: 46fr 54fr; gap: 30px; align-items: center; margin-bottom: 30px; }
.partners .top p { color: var(--muted); font-size: 14.5px; margin-top: 12px; }
.pt-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pt-chip { background: #fff; border: 1px solid #e3eef8; border-radius: 12px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: 0 3px 10px rgba(4,57,122,.05); }
.pt-chip .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--light); color: var(--blue); display: grid; place-items: center; }
.pt-chip .ic .hg-icon { width: 23px; height: 23px; }
.pt-chip b { font-size: 12.5px; color: var(--navy); }
.team-slider,
.news-slider { position: relative; }
.team-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.team-grid::-webkit-scrollbar { display: none; }
.team { scroll-snap-align: start; background: #fff; border: 1px solid #e3eef8; border-radius: var(--radius); padding: 16px; display: grid; grid-template-columns: 120px 1fr; gap: 16px; box-shadow: 0 4px 14px rgba(4,57,122,.06); }
.s-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #d8e6f4; color: var(--blue); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(4,57,122,.18); padding: 0; }
.s-arrow.prev { left: -16px; }
.s-arrow.next { right: -16px; }
.s-arrow:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.team .ph img { border-radius: 10px; width: 100%; height: 130px; object-fit: cover; }
.team b { font-size: 16px; color: var(--navy); display: block; }
.team .role { color: var(--blue); font-size: 13px; font-weight: 700; display: block; margin: 2px 0 8px; }
.team .quote { font-size: 12.5px; color: var(--muted); font-style: italic; }

/* NEWS */
.news { background-size: cover; background-position: center; position: relative; color: #fff; overflow: hidden; }
.news-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.news::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,55,120,.82) 0%, rgba(0,75,145,.5) 55%, rgba(0,60,125,.68) 100%); }
.news .wrap { position: relative; z-index: 2; }
.news h2 { color: #fff; }
.news .label { color: #ffd94e; }
.news .section-head .sub { color: #fff; font-weight: 500; text-shadow: 0 1px 4px rgba(0,30,70,.7), 0 2px 12px rgba(0,40,90,.5); }
.news-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.news-grid::-webkit-scrollbar { display: none; }
.news-card { scroll-snap-align: start; background: #fff; border-radius: var(--radius); overflow: hidden; color: var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.news-card .ph img { width: 100%; aspect-ratio: 16/7.5; object-fit: cover; }
.news-card .tx { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card .meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.news-card .meta .tag { color: var(--blue); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.news-card .meta .date { color: var(--muted); border-left: 1px solid #d7e5f2; padding-left: 10px; }
.news-card b { font-size: 16.5px; color: var(--navy); line-height: 1.3; }
.news-card p { font-size: 13px; color: var(--muted); flex: 1; }
.news-card .go { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; margin-top: 10px; }
.news-card .go .hg-icon { width: 15px; height: 15px; }

/* CONTACT */
.contact { background: #fff; padding-bottom: 40px; }
.contact .wrap { display: grid; grid-template-columns: 38fr 34fr 28fr; gap: 30px; align-items: center; }
.contact h2 { font-size: 30px; }
.contact h2 .accent { color: var(--blue); display: block; white-space: pre-line; }
.contact p.lead { color: var(--muted); font-size: 14px; margin-top: 12px; }
.c-rows { display: flex; flex-direction: column; gap: 16px; }
.c-row { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.c-row .ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--light); color: var(--blue); display: grid; place-items: center; }
.c-row .ic .hg-icon { width: 18px; height: 18px; }
.c-row a:hover { color: var(--blue); }
.contact .map { height: 232px; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; background: #eef4fb; }
.contact .map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============ FOOTER ============ */
.site-footer { position: relative; background: var(--navy2); color: #cfe3f7; margin-top: 0; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 46px; background: #fff; border-radius: 0 0 100% 100% / 0 0 90px 90px; }
.site-footer .wave { position: absolute; right: 0; top: -46px; width: 190px; opacity: .95; }
.footer-main { padding: 44px 0 22px; }
.footer-main .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 36px; align-items: center; }
.site-footer .fbrand { max-width: 300px; justify-self: start; }
.footer-main .f-nav { justify-self: center; }
.footer-main .footer-soc { justify-self: end; }
.site-footer .flogo { display: flex; align-items: center; gap: 12px; }
.site-footer .flogo img { height: 52px; width: auto; }
.site-footer .flogo b { color: #fff; font-size: 15px; letter-spacing: .02em; line-height: 1.25; text-transform: uppercase; }
.site-footer .about-txt { font-size: 12.5px; margin-top: 8px; }
.f-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.f-nav a { font-size: 13.5px; color: #cfe3f7; }
.f-nav a:hover { color: #fff; }
.footer-soc { display: flex; gap: 10px; margin-top: 0; }
.footer-soc a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.footer-soc a:hover { background: var(--blue); }
.footer-soc .hg-icon { width: 16px; height: 16px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding: 16px 0; font-size: 12.5px; }
.footer-bottom .wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.ft-sep { opacity: .55; }

/* ============ GENERIC PAGE ============ */
.page-hero { background: linear-gradient(105deg, #003b7c, #0e73cc); color: #fff; padding: 60px 0 110px; text-align: center; }
.page-hero h1 { color: #fff; font-size: 36px; font-weight: 900; }
.page-body { max-width: 860px; margin: -70px auto 60px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 44px; }
.page-body h2 { margin: 22px 0 10px; font-size: 24px; }
.page-body p { margin-bottom: 14px; color: #3d4c5c; }
.page-body img { border-radius: 10px; margin: 10px 0; }
.page-body ul { list-style: disc; padding-left: 22px; color: #3d4c5c; margin-bottom: 14px; }
.page-body a { color: var(--blue); }
.single .page-body { max-width: 820px; }

/* ============ RESPONSIVE (locked) ============ */
@media (max-width: 1080px) {
	.hero { aspect-ratio: auto; padding: 50px 0; }
	.hero .wrap { height: auto; padding-bottom: 48px; }
	.hero-chips { bottom: 24px; }
	.about .wrap { grid-template-columns: 1fr 1fr; }
	.about .photo { grid-column: span 2; }
	.prod-grid { grid-template-columns: repeat(3, 1fr); }
	.team-grid { grid-auto-columns: calc((100% - 22px) / 2); }
	.news-grid { grid-auto-columns: calc((100% - 22px) / 2); }
	.stats { aspect-ratio: auto; padding: 30px 0; }
	.stats .wrap { grid-template-columns: repeat(2, 1fr); height: auto; }
	.partners .top { grid-template-columns: 100%; }
	.contact .wrap { grid-template-columns: 1fr 1fr; }
	.contact .map { grid-column: span 2; }
	.footer-main .wrap { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
}
@media (max-width: 720px) {
	.site-header .wrap { flex-wrap: wrap; height: auto; padding: 12px 20px; gap: 10px; }
	.main-nav { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.main-nav ul { display: inline-flex; gap: 2px; }
	.main-nav a { white-space: nowrap; padding: 8px 12px; font-size: 14px; }
	.hero-copy h1 { font-size: 32px; }
	.hero .wrap { min-height: 0; padding-bottom: 30px; }
	.hero-chips { position: static; margin-top: 0; }
	.hero-chips .wrap { flex-direction: column; gap: 6px; }
	.chip { min-width: 0; background: rgb(0 55 110 / 79%); padding: 4px 10px; }
	/* Stats: drop the divider indent — parent .wrap already pads both sides */
	.ab-stats .ab-stat:not(:first-child) { border-left: 0; padding-left: 0; }
	.about .wrap, .feat-grid, .prod-grid, .contact .wrap, .footer-main .wrap { grid-template-columns: 100%; }
	.pt-chips { grid-template-columns: repeat(2, 1fr); }
	.team-grid, .news-grid { grid-auto-columns: 100%; }
	.s-arrow.prev { left: 8px; }
	.s-arrow.next { right: 8px; }
	.about .photo { grid-column: span 1; }
	.stats .wrap { grid-template-columns: 100%; }
	.contact .map { grid-column: span 1; }
	.team { grid-template-columns: 96px 1fr; }
	.section { padding: 52px 0; }
	.h2 { font-size: 26px; }
}

/* ============ ABOUT PAGE ============ */
.ab-hero { position: relative; background: #00569b; color: #fff; overflow: hidden; aspect-ratio: 1568 / 580; min-height: 380px; }
.ab-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.ab-hero .wrap { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; padding-top: 20px; padding-bottom: 60px; }
.ab-hero-copy h1 { color: #fff; font-size: 56px; font-weight: 900; line-height: 1.05; margin-bottom: 14px; text-shadow: 0 2px 14px rgba(0,30,70,.75), 0 1px 4px rgba(0,30,70,.55); }
.ab-hero-copy h1 .accent { color: var(--yellow); display: inline; }
.ab-hero-sub { color: #fff; font-size: 19px; font-weight: 700; white-space: pre-line; margin-bottom: 12px; text-shadow: 0 1px 12px rgba(0,30,70,.75), 0 1px 3px rgba(0,30,70,.55); }
.ab-hero-para { color: #fff; font-size: 14px; font-weight: 500; max-width: 460px; text-shadow: 0 1px 4px rgba(0,30,70,.85), 0 2px 12px rgba(0,40,90,.65); }
.abstory { position: relative; overflow: hidden; padding-top: 20px; aspect-ratio: 1568 / 568; min-height: 380px; }
.abstory-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.abstory .wrap { position: relative; z-index: 1; }
.abstory .copy { max-width: 620px; }
.abfactory { position: relative; padding-bottom: 90px; }
.abfact-in { display: grid; grid-template-columns: 55fr 45fr; align-items: center; gap: 50px; }
.abfactory .ph img { width: 100%; min-height: 440px; height: 100%; object-fit: cover; display: block; }
.abfactory .copy { padding: 40px max(24px, calc((100vw - 1240px) / 2)) 40px 0; }
.abfact-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; }
.abstory .label, .abfactory .label { color: var(--blue); }
.abstory h2, .abfactory h2 { font-size: 34px; line-height: 1.15; white-space: pre-line; margin-bottom: 16px; }
.abstory .copy p, .abfactory .copy p { color: var(--muted); font-size: 14.5px; margin-bottom: 14px; }
.abstory .copy { max-width: 660px; }
.abstory h2 { font-size: 40px; }
.abstory .copy p { font-size: 16.5px; margin-bottom: 16px; }
.ab-stats { background: linear-gradient(105deg, #eaf5fd, #f7fbff); border-top: 1px solid #e3eef9; border-bottom: 1px solid #e3eef9; }
.ab-stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 28px; }
.ab-stat { display: flex; align-items: center; gap: 14px; }
.ab-stat:not(:first-child) { border-left: 1px solid #d7e5f2; padding-left: 28px; }
.ab-stat .ic { width: 64px; height: 64px; border-radius: 50%; background: #dcebfa; color: var(--navy); display: grid; place-items: center; flex: none; }
.ab-stat .ic .hg-icon { width: 30px; height: 30px; }
.ab-stat b { font-size: 24px; font-weight: 900; color: var(--navy); display: block; line-height: 1.1; }
.ab-stat > span > span { color: var(--muted); font-size: 13px; }
/* Stats strip: reveal straight up only — no sideways slide / zoom that makes icons look misaligned */
.ab-stat.rv-left, .ab-stat.rv-right, .ab-stat.rv-zoom { transform: translateY(34px); }
.ab-stat.rv-in { transform: none; }
.abprocess { background: linear-gradient(180deg, #eaf5fd 0%, #f7fbff 100%); padding: 40px 0 46px; border-bottom: 1px solid #e3eef9; }
.abprocess .wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.abprocess .step .ph img { width: 100%; aspect-ratio: 16/11; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow); display: block; }
.abprocess .cap { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.abprocess .cap span { font-size: 15.5px; color: var(--navy); font-weight: 700; flex: 1; }
.abprocess .cap b { width: 30px; height: 30px; font-size: 13.5px; }
.abprocess .cap b { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; display: grid; place-items: center; flex: none; }
.abcerts { position: relative; padding-bottom: 90px; }
.abcert-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; }
.abcerts .top p, .abpartners .top p { color: var(--muted); font-size: 14.5px; max-width: 560px; margin-top: 8px; }
.abcerts h2, .abpartners h2 { font-size: 30px; white-space: pre-line; }
.abcerts h2 { font-size: 40px; }
.abcerts .top p { font-size: 16.5px; }
.abcerts .top { display: block; margin-bottom: 14px; }
.cert-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.cert { text-align: center; }
.cert .cert-img { max-height: 400px; width: auto; max-width: 280px; display: inline-block; }
.cert .name { display: block; margin-top: 12px; font-size: 13.5px; color: var(--navy); font-weight: 700; }
.abpartners { position: relative; overflow: hidden; }
.abpartners .partners-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.abpartners .wrap { position: relative; z-index: 1; }
.abpartners .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 26px; }
.ablogo-slider { position: relative; z-index: 1; }
.ablogo-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 110px) / 6); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ablogo-grid::-webkit-scrollbar { display: none; }
.ablogo { scroll-snap-align: start; background: #fff; border: 1px solid #e3eef9; border-radius: 12px; height: 74px; display: grid; place-items: center; box-shadow: var(--shadow); padding: 0 12px; }
.ablogo span { font-weight: 900; font-size: 15px; color: var(--navy); letter-spacing: .02em; white-space: nowrap; }
.abcta { position: relative; overflow: hidden; background: linear-gradient(120deg, #0e73cc, #00569b 60%, #024a86); color: #fff; border-radius: var(--radius); margin: 28px 24px 0; }
.abcta .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.abcta .wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 44px 28px; }
.abcta h2 { color: #fff; font-size: 30px; line-height: 1.18; white-space: pre-line; }
.abcta p { color: #dcebfa; font-size: 14px; margin-top: 10px; max-width: 460px; }
@media (max-width: 1080px) {
	.abfact-in { grid-template-columns: 1fr; }
	.ab-hero { aspect-ratio: auto; min-height: 0; }
	.abstory { aspect-ratio: auto; min-height: 0; padding: 34px 0; }
	.ab-hero .wrap { height: auto; padding-top: 48px; padding-bottom: 52px; }
	.abfactory .copy { padding: 0 24px; }
	.abfactory .ph img { min-height: 0; height: auto; object-fit: contain; }
	.abstory .copy { background: rgba(255,255,255,.78); padding: 20px; border-radius: var(--radius); max-width: 100%; }
	.ab-stats .wrap { grid-template-columns: repeat(2, 1fr); }
	.abprocess .wrap { grid-template-columns: repeat(2, 1fr); }
	.abcerts { position: relative; }
	.cert-grid { flex-wrap: wrap; }
	.ablogo-grid { grid-auto-columns: calc((100% - 22px) / 3); }
	.abcta .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
	.ab-hero { aspect-ratio: 883 / 1568; }
	.ab-hero .wrap { height: 100%; padding-top: 34px; align-items: flex-start; }
	.ab-hero-copy h1 { font-size: 38px; }
	.abprocess .wrap { grid-template-columns: 100%; }
	.cert-grid { flex-direction: column; align-items: center; }
	.ablogo-grid { grid-auto-columns: 100%; }
	.abcta { margin: 0 12px; }
}

/* ============ CONTACT PAGE ============ */
.ct-main { padding: 0 0 70px; }
.ct-inzone { position: relative; padding: 52px 0 56px; }
.ct-main-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.ct-inzone > .wrap { position: relative; z-index: 1; }
.ct-hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 46px; z-index: 1; }
.ct-top { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.ct-form-card { background: #fff; border: 1px solid #e3eef9; border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 34px; }
.ct-form-card h2 { font-size: 26px; }
.ct-form-card > p { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.ct-form-body { margin-top: 18px; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.cf-grid label { display: block; font-size: 12.5px; font-weight: 500; color: var(--navy); }
.cf-grid .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.cf-grid .wpcf7-form-control:not([type="submit"]) { width: 100%; border: 1px solid #dfe8f2; border-radius: 8px; padding: 9px 14px; font: inherit; font-size: 13.5px; background: #fff; }
.cf-grid .wpcf7-form-control:focus { outline: 2px solid var(--blue); border-color: var(--blue); background: #fff; }
.cf-grid .wpcf7-not-valid-tip { font-size: 11px; color: #d64545; margin-top: 4px; }
.cf-grid textarea.wpcf7-form-control { min-height: 88px; resize: vertical; }
.cf-grid { grid-template-areas: "a b" "c d" "e e" "f f" "s s"; }
.cf-grid > label:nth-of-type(1) { grid-area: a; } .cf-grid > label:nth-of-type(2) { grid-area: b; }
.cf-grid > label:nth-of-type(3) { grid-area: c; } .cf-grid > label:nth-of-type(4) { grid-area: d; }
.cf-grid > label:nth-of-type(5) { grid-area: e; } .cf-grid > label:nth-of-type(6) { grid-area: f; }
.cf-grid > .wpcf7-response-output, .cf-grid > .cf-submit { grid-area: s; }
.cf-grid input[type="submit"], .cf-submit { width: auto; background: var(--yellow); color: var(--navy); border: 0; border-radius: 999px; padding: 13px 34px; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 6px 16px rgba(251,214,39,.4); justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.cf-grid input[type="submit"]:hover { transform: translateY(-1px); }
.wpcf7-response-output { border: 1px solid #cfe7ff !important; border-radius: 10px; background: #f7fbff; font-size: 13px; }

.ct-info-card { background: none; border: 0; box-shadow: none; }
.ct-info-copy { padding: 30px 32px 34px; }
.ct-info-copy h2 { font-size: 30px; }
.ct-info-row { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; }
.ct-info-row span:not(.ic) { max-width: 560px; }
.ct-info-row .ic { width: 54px; height: 54px; flex: none; border-radius: 14px; background: #fff; color: var(--blue); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(4,57,122,.12); }
.ct-info-row .ic svg { width: 26px; height: 26px; }
.ct-info-row b { display: block; font-size: 17px; color: var(--navy); }
.ct-info-row a, .ct-info-row span:not(.ic) { display: block; font-size: 15px; color: var(--muted); margin-top: 5px; white-space: pre-line; }
.ct-info-row a:hover { color: var(--blue); }
.ct-info-ph img { width: 100%; height: 100%; object-fit: cover; }

.ct-loc { margin-top: 60px; }
.ct-loc-head h2 { font-size: 28px; }
.ct-loc-head p { color: var(--muted); font-size: 14px; max-width: 620px; margin-top: 8px; }
.ct-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; }
.ct-loc-card { background: #fff; border: 1px solid #e3eef9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ct-loc-card .ph { aspect-ratio: 16/10; overflow: hidden; }
.ct-loc-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ct-loc-card:hover .ph img { transform: scale(1.04); }
.ct-loc-card .body { display: flex; gap: 10px; align-items: flex-start; padding: 16px 18px; }
.ct-loc-card .ic { width: 34px; height: 34px; flex: none; border-radius: 9px; background: #eaf5fd; color: var(--blue); display: grid; place-items: center; }
.ct-loc-card b { font-size: 14px; color: var(--navy); }
.ct-loc-card span:not(.ic) { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.ct-map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid #e3eef9; box-shadow: var(--shadow); min-height: 280px; }
.ct-map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; }
.ct-map-btn { position: absolute; left: 16px; bottom: 16px; z-index: 2; font-size: 13px; padding: 10px 20px; }

.ct-duo { display: grid; grid-template-columns: 52fr 48fr; gap: 30px; margin-top: 60px; }
.ct-export { position: relative; border-radius: var(--radius); overflow: hidden; color: #fff; min-height: 340px; display: flex; }
.ct-export-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ct-export::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(2,42,84,.25), rgba(2,42,84,.78) 75%); z-index: 1; }
.ct-export-in { position: relative; z-index: 2; display: flex; gap: 16px; align-items: flex-start; padding: 34px 32px; margin-top: auto; }
.ct-export .ic-big { width: 52px; height: 52px; flex: none; border-radius: 14px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); display: grid; place-items: center; }
.ct-export h3 { font-size: 22px; color: #fff; }
.ct-export p { font-size: 13.5px; color: #eaf3fc; margin-top: 8px; max-width: 420px; }
.ct-export p.muted { color: #cfe0f0; font-size: 12.5px; }
.ct-export .btn { margin-top: 16px; }

.ct-why { background: #fff; border: 1px solid #e3eef9; border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 36px; }
.ct-why h2 { font-size: 26px; }
.ct-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; margin-top: 22px; }
.ct-why-item { display: flex; gap: 12px; align-items: flex-start; }
.ct-why-item .ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #eaf5fd; color: var(--blue); display: grid; place-items: center; }
.ct-why-item b { font-size: 14px; color: var(--navy); }
.ct-why-item p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.ct-faq { margin-top: 60px; }
.ct-faq-head h2 { font-size: 28px; }
.ct-faq-head p { color: var(--muted); font-size: 14px; margin-top: 8px; max-width: 620px; }
.btn-outline-blue { border: 1.5px solid var(--blue); color: var(--blue); background: #fff; margin-top: 16px; display: inline-flex; }
.btn-outline-blue:hover { background: var(--blue); color: #fff; }
.ct-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; align-items: start; }
.ct-faq-item { background: #fff; border: 1px solid #e3eef9; border-radius: 14px; box-shadow: var(--shadow); padding: 0 20px; }
.ct-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-weight: 800; font-size: 14px; color: var(--navy); padding: 18px 0; }
.ct-faq-item summary::-webkit-details-marker { display: none; }
.ct-faq-item .plus { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #eaf5fd; color: var(--blue); }
.ct-faq-item .plus::before, .ct-faq-item .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform .2s; }
.ct-faq-item .plus::before { width: 12px; height: 2px; left: 7px; top: 12px; }
.ct-faq-item .plus::after { width: 2px; height: 12px; left: 12px; top: 7px; }
.ct-faq-item[open] .plus::after { transform: scaleY(0); }
.ct-faq-item[open] { border-color: #bcdcf7; }
.ct-faq-item p { font-size: 13px; color: var(--muted); line-height: 1.6; padding: 0 0 18px; }
.ct-final { margin-top: 60px; }

@media (max-width: 1080px) {
	.ct-top { grid-template-columns: 100%; }
	.ct-duo { grid-template-columns: 100%; }
	.ct-loc-grid { grid-template-columns: 1fr 1fr; }
	.ct-map { grid-column: 1 / -1; }
	.ct-info-card { grid-template-columns: 100%; }
}
@media (max-width: 720px) {
	.cf-grid { grid-template-columns: 100%; grid-template-areas: "a" "b" "c" "d" "e" "f" "s"; }
	.ct-loc-grid { grid-template-columns: 100%; }
	.ct-why-grid { grid-template-columns: 100%; }
	.ct-faq-grid { grid-template-columns: 100%; }
	.ct-form-card { padding: 26px 20px; }
	.ct-export-in { padding: 24px 20px; flex-direction: column; }
}


/* ===================== SHARING PAGE ===================== */
.sh-hero { position: relative; background: #00569b; color: #fff; overflow: hidden; aspect-ratio: 2172 / 724; }
.sh-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.sh-hero .wrap { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 104px; }
.sh-hero h1 { color: #fff; font-size: 60px; font-weight: 900; margin-bottom: 10px; text-shadow: 0 2px 18px rgba(0,40,90,.35); }
.sh-hero-sub { font-size: 20px; font-weight: 700; max-width: 420px; margin-bottom: 14px; text-shadow: 0 1px 10px rgba(0,40,90,.4); }
.sh-hero-para { font-size: 13.5px; max-width: 400px; color: #eaf4fd; text-shadow: 0 1px 8px rgba(0,40,90,.4); }

.sh-cats { background: #e8f3fc; padding: 10px 0; }
.sh-cat-bar { display: flex; overflow-x: auto; scrollbar-width: none; }
.sh-cat-bar::-webkit-scrollbar { display: none; }
.sh-cat { display: flex; align-items: center; justify-content: center; gap: 10px; flex: none; white-space: nowrap; padding: 20px 22px 16px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--navy); font-weight: 700; font-size: 14px; cursor: pointer; transition: color .15s, border-color .15s; }
.sh-cat svg { flex: none; color: var(--navy2); }
.sh-cat:hover { color: var(--blue); }
.sh-cat.active { border-bottom-color: var(--yellow); }
/* Category container: plain scroll row on desktop, accordion card on mobile */
.sh-side { display: block; }
.sh-side-head { display: none; }

.sh-main { padding-bottom: 26px; }
.sh-featured { position: relative; display: grid; grid-template-columns: 51fr 49fr; gap: 34px; align-items: center; background: linear-gradient(180deg, #e8f3fc 0%, #d6ebfb 60%, #eef7fe 100%); border-radius: 18px; padding: 18px; margin-bottom: 30px; }
.sh-feat-img { position: relative; border-radius: 14px; overflow: hidden; align-self: stretch; min-height: 330px; }
.sh-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-feat-badge { position: absolute; top: 14px; left: 14px; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 999px; box-shadow: 0 4px 12px rgba(4,57,122,.25); }
.sh-feat-body { padding: 14px 10px 14px 0; }
.sh-feat-body h3 { font-size: 27px; font-weight: 900; color: var(--navy); margin: 10px 0 12px; line-height: 1.25; }
.sh-feat-body h3 a { color: inherit; }
.sh-feat-body p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }
.sh-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.sh-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sh-meta svg { color: var(--blue); }

.sh-pagi { display: flex; justify-content: center; gap: 8px; margin-top: 34px; }
.sh-pagi .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1.5px solid #dbe9f6; color: var(--navy); font-weight: 800; font-size: 13.5px; text-decoration: none; transition: all .18s; }
.sh-pagi .page-numbers:hover { border-color: var(--blue); color: var(--blue); }
.sh-pagi .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.sh-pagi .page-numbers.dots { border: none; background: none; }
.sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.sh-head h2 { font-size: 34px; font-weight: 900; color: var(--navy); margin-top: 4px; }
.btn-blue-o { border: 1.5px solid var(--blue); color: var(--blue); }
.btn-blue-o:hover { background: var(--blue); color: #fff; }

.sh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sh-card { background: #fff; border: 1px solid #e3eef9; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.sh-card:hover { transform: translateY(-3px); }
.sh-card-img { display: block; overflow: hidden; }
.sh-card-img img { width: 100%; aspect-ratio: 16/8.5; object-fit: cover; display: block; transition: transform .3s; }
.sh-card:hover .sh-card-img img { transform: scale(1.04); }
.sh-card-body { position: relative; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sh-card-body .label { font-size: 11.5px; }
.sh-card-body h4 { font-size: 16.5px; font-weight: 900; color: var(--navy); line-height: 1.3; }
.sh-card-body h4 a { color: inherit; }
.sh-card-body > p { font-size: 12.5px; color: var(--muted); line-height: 1.55; padding-bottom: 30px; }
.sh-card-go { position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(29,138,222,.35); transition: transform .15s, background .15s; }
.sh-card-go:hover { transform: translateX(2px); background: var(--navy2); }
.sh-card.is-hidden { display: none; }
.sh-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px 0; }

.sh-faq { position: relative; background: #eef7fe; overflow: hidden; aspect-ratio: 1568 / 523; display: grid; align-items: center; }
.sh-faq-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sh-faq > .wrap { position: relative; z-index: 1; }
.sh-faq-grid { display: grid; grid-template-columns: 44fr 56fr; gap: 60px; align-items: start; }
.sh-faq-copy h2 { font-size: 34px; font-weight: 900; color: var(--navy); margin: 4px 0 12px; }
.sh-faq-copy > p { font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 380px; }
.sh-faq-list { display: flex; flex-direction: column; gap: 12px; }

.sh-cta { position: relative; overflow: hidden; background: #06283f; }
.sh-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.sh-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,32,55,.82) 0%, rgba(4,32,55,.35) 60%, rgba(4,32,55,.15) 100%); }
.sh-cta .wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 56px; padding-bottom: 56px; }
.sh-cta h2 { color: #fff; font-size: 32px; font-weight: 900; margin-bottom: 10px; }
.sh-cta p { color: #cfe4f5; font-size: 13.5px; max-width: 620px; line-height: 1.6; }

@media (max-width: 1100px) {
	.sh-grid { grid-template-columns: repeat(2, 1fr); }
	.sh-faq { aspect-ratio: auto; padding: 30px 0; }
	.sh-faq-grid { grid-template-columns: 1fr; gap: 30px; }
	.sh-hero h1 { font-size: 44px; }
}
@media (max-width: 640px) {
	.sh-side { border: 1px solid #d7e7f5; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(4,57,122,.06); overflow: hidden; }
	.sh-side-head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 18px; background: linear-gradient(100deg, #0b4f92, #1d8ade); border: 0; color: #fff; font-weight: 800; font-size: 16px; font-family: inherit; text-align: left; cursor: pointer; user-select: none; }
	.sh-side-head::after { content: ''; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; transition: transform .2s ease; }
	.sh-side.is-open .sh-side-head::after { transform: rotate(180deg); }
	.sh-side .sh-cat-bar { display: none; flex-direction: column; }
	.sh-side.is-open .sh-cat-bar { display: flex; }
	.sh-side .sh-cat { justify-content: flex-start; width: 100%; padding: 13px 18px; border-bottom: 1px solid #eef5fb; }
	.sh-side .sh-cat:last-child { border-bottom: 0; }
	.sh-side .sh-cat.active { border-bottom-color: #eef5fb; background: var(--yellow); color: var(--navy); }
	.sh-side .sh-cat.active:hover { color: var(--navy); }
	.sh-grid { grid-template-columns: 1fr; }
	.sh-featured { grid-template-columns: 1fr; padding: 14px; }
	.sh-pagi { display: flex; justify-content: center; gap: 8px; margin-top: 34px; }
.sh-pagi .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1.5px solid #dbe9f6; color: var(--navy); font-weight: 800; font-size: 13.5px; text-decoration: none; transition: all .18s; }
.sh-pagi .page-numbers:hover { border-color: var(--blue); color: var(--blue); }
.sh-pagi .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.sh-pagi .page-numbers.dots { border: none; background: none; }
.sh-head { flex-direction: column; align-items: flex-start; }
	.sh-head h2 { font-size: 24px; }
	.sh-cta .wrap { flex-direction: column; align-items: flex-start; }
	.sh-hero .wrap { padding-top: 70px; padding-bottom: 80px; }
}


/* ===================== NEWS PAGE ===================== */
.nw-hero { position: relative; background: #00569b; color: #fff; overflow: hidden; aspect-ratio: 2060 / 763; }
.nw-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nw-hero .wrap { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 96px; }
.nw-hero h1 { color: #fff; font-size: 62px; font-weight: 900; margin-bottom: 10px; text-shadow: 0 2px 18px rgba(0,40,90,.35); }
.nw-hero .accent { color: var(--yellow); }
.nw-hero-sub { font-size: 20px; font-weight: 700; max-width: 420px; margin-bottom: 14px; white-space: pre-line; text-shadow: 0 1px 10px rgba(0,40,90,.4); }
.nw-hero-para { font-size: 13.5px; max-width: 400px; color: #eaf4fd; text-shadow: 0 1px 8px rgba(0,40,90,.4); }
.nw-hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 42px; z-index: 1; }

.nw-crumb { padding-top: 18px; font-size: 13px; color: var(--muted); }
.nw-crumb a { color: var(--muted); }
.nw-crumb a:hover { color: var(--blue); }
.nw-crumb b { color: var(--navy); }

.nw-main { padding-top: 16px; }
.nw-body { display: grid; grid-template-columns: 74fr 26fr; gap: 34px; align-items: start; }
.nw-sec-label { display: block; margin-bottom: 14px; }
.nw-featured { display: grid; grid-template-columns: 47fr 53fr; gap: 30px; align-items: center; margin-bottom: 38px; }
.nw-feat-img { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); align-self: center; aspect-ratio: 16 / 9; }
.nw-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-badge { position: absolute; bottom: -13px; left: 16px; background: var(--blue); color: #fff; font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 7px 14px; border-radius: 8px; box-shadow: 0 4px 12px rgba(4,57,122,.3); }
.nw-badge.on-img { top: 14px; bottom: auto; }
.nw-feat-body h3 { font-size: 30px; font-weight: 900; color: var(--navy); margin: 8px 0 12px; line-height: 1.22; }
.nw-feat-body h3 a { color: inherit; }
.nw-feat-body p { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }
.nw-feat-body .sh-meta { margin-bottom: 2px; }

.nw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nw-card { background: #fff; border: 1px solid #e3eef9; border-radius: var(--radius); box-shadow: var(--shadow); overflow: visible; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.nw-card:hover { transform: translateY(-3px); }
.nw-card-img { position: relative; display: block; overflow: visible; margin-bottom: 4px; }
.nw-card-img img { width: 100%; height: auto; aspect-ratio: 16/8.5; object-fit: cover; display: block; border-radius: var(--radius) var(--radius) 0 0; transition: transform .3s; }
.nw-card-img { overflow: visible; border-radius: var(--radius) var(--radius) 0 0; }
.nw-card-img .nw-badge { z-index: 2; }
.nw-card:hover .nw-card-img img { transform: scale(1.04); }
.nw-card-body { padding: 22px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nw-card-body h4 { font-size: 17.5px; font-weight: 900; color: var(--navy); line-height: 1.3; }
.nw-card-body h4 a { color: inherit; }
.nw-card-body > p { font-size: 12.5px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); margin-top: auto; }
.nw-more:hover { color: var(--blue); }
.nw-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px 0; }

.nw-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 20px; }
.nw-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #dce9f5; border-radius: 12px; padding: 12px 16px; color: var(--muted); box-shadow: var(--shadow); }
.nw-search input { flex: 1; border: 0; outline: none; font-size: 13.5px; color: var(--navy); background: none; }
.nw-side-card { background: #fff; border: 1px solid #dce9f5; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 20px 22px; }
.nw-side-card h4 { font-size: 19px; font-weight: 900; color: var(--navy); margin-bottom: 6px; }
.nw-side-card ul { list-style: none; }
.nw-side-card ul li + li { border-top: 1px solid #edf4fa; }
.nw-side-card ul button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 2px; background: none; border: 0; cursor: pointer; color: var(--navy); font-size: 13.5px; font-weight: 600; text-align: left; transition: color .15s; }
.nw-side-card ul button svg { color: var(--blue); flex: none; }
.nw-side-card ul button span { flex: 1; line-height: 1.3; }
.nw-side-card ul button em { font-style: normal; font-size: 12.5px; color: var(--muted); background: #eef6fd; border-radius: 999px; padding: 2px 10px; }
.nw-side-card ul button:hover, .nw-side-card ul button.active { color: var(--blue); }
.nw-recent li { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.nw-recent li + li { border-top: 1px solid #edf4fa; }
.nw-recent li > a:first-child { flex: none; width: 88px; }
.nw-recent img { width: 100%; height: auto; aspect-ratio: 8/5; object-fit: cover; border-radius: 10px; display: block; }
.nw-recent a { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.3; display: block; }
.nw-recent a:hover { color: var(--blue); }
.nw-recent span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.nw-viewall { justify-content: center; margin-top: 18px; }

.nw-nl { position: relative; overflow: hidden; background: #06283f; }
.nw-nl-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.nw-nl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,32,55,.85) 0%, rgba(4,32,55,.45) 55%, rgba(4,32,55,.2) 100%); }
.nw-nl .wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: 26px; padding-top: 52px; padding-bottom: 52px; }
.nw-nl-ic { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.nw-nl-copy { flex: 1; }
.nw-nl-copy h2 { color: #fff; font-size: 30px; font-weight: 900; margin-bottom: 8px; }
.nw-nl-copy .accent { color: var(--yellow); }
.nw-nl-copy p { color: #cfe4f5; font-size: 13.5px; max-width: 560px; line-height: 1.6; }
.nw-nl-form { flex: none; width: 400px; }
.nw-nl-form .wpcf7 { display: flex; gap: 10px; align-items: stretch; }
.nw-nl-form .wpcf7-form { display: flex; gap: 10px; width: 100%; }
.nw-nl-form .wpcf7-form-control-wrap { flex: 1; }
.nw-nl-form input[type=email] { width: 100%; border: 0; border-radius: 999px; padding: 13px 20px; font-size: 13.5px; outline: none; background: #fff; }
.nw-nl-form .nw-submit, .nw-nl-form input[type=submit] { background: var(--yellow); color: var(--navy); font-weight: 800; font-size: 13.5px; border: 0; border-radius: 999px; padding: 13px 26px; cursor: pointer; box-shadow: 0 6px 16px rgba(251,214,39,.4); }
.nw-nl-form .wpcf7-response-output { position: absolute; left: 0; bottom: -34px; margin: 0; font-size: 12px; color: #fff; border: 0; padding: 0; width: 100%; text-align: center; }
.nw-nl-form { position: relative; }

@media (max-width: 1100px) {
	.nw-body { grid-template-columns: 1fr; }
	.nw-grid { grid-template-columns: repeat(2, 1fr); }
	.nw-side { position: static; display: contents; }
	.nw-search { order: -3; }
	.nw-side-card:has([data-cats]) { order: -2; }
	.nw-side-card:has(.nw-recent) { order: 1; }
	.nw-hero h1 { font-size: 46px; }
}
@media (max-width: 640px) {
	.nw-grid { grid-template-columns: 1fr; }
	.nw-featured { grid-template-columns: 1fr; }
	.nw-nl .wrap { flex-direction: column; align-items: flex-start; }
	.nw-nl-copy h2 { font-size: 24px; }
	.ps-tab { padding: 10px 14px; font-size: 12px; }
	.nw-nl-form { width: 100%; }
	.nw-card-body h4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.nw-card-body > p { -webkit-line-clamp: 2; }
}

/* ===== SINGLE POST ===== */
.sg-hero-meta { display: flex; align-items: center; gap: 14px; justify-content: center; margin-bottom: 10px; }
.sg-hero-cat { background: rgba(255,255,255,.16); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; }
.sg-thumb { margin: 0 0 26px; border-radius: 14px; overflow: hidden; }
.sg-thumb img { width: 100%; height: auto; display: block; }
.sg-content { font-size: 15.5px; color: #3d4c5c; line-height: 1.75; }
.sg-content h2 { font-size: 23px; color: var(--navy); margin: 30px 0 12px; }
.sg-content h3 { font-size: 18px; color: var(--navy); margin: 22px 0 10px; }
.sg-content p { margin-bottom: 16px; }
.sg-content ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.sg-content li { margin-bottom: 7px; }
.sg-content blockquote { margin: 22px 0; padding: 16px 22px; background: #eef6fd; border-left: 4px solid var(--blue); border-radius: 0 12px 12px 0; font-weight: 700; color: var(--navy); }
.sg-content strong { color: var(--navy); }
.sg-sharebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid #e8f1f9; }
.sg-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); }
.sg-tags a { display: inline-block; background: #eef6fd; color: var(--blue); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; text-decoration: none; }
.sg-tags a:hover { background: var(--blue); color: #fff; }
.sg-share { display: flex; align-items: center; gap: 8px; }
.sg-share > span { font-size: 12.5px; font-weight: 800; color: var(--muted); margin-right: 2px; }
.page-body .sg-share-btn { color: #fff; }
.sg-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; color: #fff; text-decoration: none; transition: transform .15s, opacity .15s; }
.sg-share-btn:hover { transform: translateY(-2px); opacity: .9; }
.sg-share-btn svg { display: block; flex: none; }
.sg-share-btn.fb { background: #1877f2; }
.sg-share-btn.tw { background: #14171a; }
.sg-share-btn.li { background: #0a66c2; }
.sg-share-btn.cp { background: #5c7080; }
.sg-share-btn.copied { background: #16a34a; }
.sg-author { display: flex; gap: 16px; align-items: flex-start; margin-top: 26px; padding: 20px; background: #f4f9fd; border-radius: 14px; }
.sg-author-ava { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.sg-author strong { color: var(--navy); font-size: 14.5px; }
.sg-author p { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 4px; }
.sg-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.sg-pn-item { display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1.5px solid #e2eef8; border-radius: 12px; padding: 14px 18px; text-decoration: none; transition: border-color .15s; }
.sg-pn-item:hover { border-color: var(--blue); }
.sg-pn-item span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sg-pn-item strong { font-size: 13.5px; color: var(--navy); line-height: 1.4; }
.sg-pn-item.next { text-align: right; }
.sg-related { background: linear-gradient(180deg, #f2f8fd 0%, #fff 100%); padding: 54px 0 64px; }
.sg-rel-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .sg-rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sg-rel-grid { grid-template-columns: 1fr; } .sg-pn { grid-template-columns: 1fr; } .sg-pn-item.next { text-align: left; } }

/* ============ PRODUCTS PAGE ============ */
.pd-hero { position: relative; overflow: hidden; background: #0b4f92; aspect-ratio: 2172 / 724; }
.pd-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; z-index: 0; }
.pd-hero .wrap { position: relative; z-index: 2; display: flex; align-items: center; min-height: 460px; padding: 40px 28px 120px; }
.pd-hero-copy { max-width: 470px; }
.pd-hero-copy h1 { color: #fff; font-size: 62px; font-weight: 900; letter-spacing: -.01em; line-height: 1; margin-bottom: 16px; }
.pd-hero-copy h1 .accent { color: var(--yellow); }
.pd-hero-tag { color: #fff; font-size: 25px; font-weight: 800; line-height: 1.25; margin-bottom: 16px; }
.pd-hero-sub { color: rgba(255,255,255,.92); font-size: 15.5px; line-height: 1.6; max-width: 430px; }

.pd-crumbs { display: flex; align-items: center; gap: 8px; padding: 14px 28px 4px; font-size: 13px; color: var(--muted); }
.pd-crumbs a { color: var(--muted); }
.pd-crumbs a:hover { color: var(--blue); }

.pd-main { display: grid; grid-template-columns: 250px 1fr; gap: 34px; padding: 12px 28px 26px; align-items: start; }

.pd-side { background: #fff; border: 1px solid #e3eef8; border-radius: 14px; box-shadow: 0 4px 14px rgba(4,57,122,.06); overflow: hidden; position: sticky; top: 92px; }
.pd-side-head { background: linear-gradient(100deg, #0b4f92, #1d8ade); color: #fff; font-weight: 800; font-size: 16px; padding: 15px 18px; }
.pd-side-nav { display: flex; flex-direction: column; }
.pd-side-item { display: flex; align-items: center; gap: 11px; padding: 13px 18px; font-size: 14px; font-weight: 700; color: var(--navy); border-bottom: 1px solid #eef5fb; transition: background .15s, color .15s; }
.pd-side-item:last-child { border-bottom: 0; }
.pd-side-item .ic { color: var(--blue); display: grid; place-items: center; }
.pd-side-item:hover { background: #f2f9ff; color: var(--blue); }
.pd-side-item .arr { margin-left: auto; color: var(--navy); }
.pd-side-item.is-all { background: var(--yellow); color: var(--navy); border-bottom-color: #f0d54a; }
.pd-side-item.is-all:hover { background: #fbdf44; color: var(--navy); }

.pd-content h2 { font-size: 30px; margin: 4px 0 10px; }
.pd-lead { color: #3d4c5c; font-size: 15px; line-height: 1.65; max-width: 700px; margin-bottom: 22px; }
.pd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pd-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3eef8; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(4,57,122,.05); transition: transform .18s, box-shadow .18s; }
.pd-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pd-card .ph img { width: 100%; aspect-ratio: 4/2.9; object-fit: cover; display: block; }
.pd-card .tx { padding: 14px 16px 16px; }
.pd-card .tt { display: flex; align-items: flex-start; gap: 10px; }
.pd-card .tt b { font-size: 15.5px; color: var(--navy); line-height: 1.3; flex: 1; }
.pd-card .go { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(29,138,222,.4); transition: background .15s, transform .15s; }
.pd-card:hover .go { background: var(--navy); transform: translateX(2px); }
.pd-card .tx p { font-size: 12.8px; color: var(--muted); line-height: 1.55; margin-top: 8px; }

.pd-sol { position: relative; background: linear-gradient(180deg, #eaf5fd 0%, #f6fbff 100%); padding: 70px 0 60px; margin-top: 26px; overflow: hidden; }
.pd-sol::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 15% 0%, rgba(255,255,255,.85), transparent 60%); pointer-events: none; }
.pd-sol-in { position: relative; display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: center; }
.pd-sol-copy h2 { font-size: 29px; margin: 4px 0 12px; }
.pd-sol-copy p { color: #3d4c5c; font-size: 14.5px; line-height: 1.65; margin-bottom: 20px; }
.pd-sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pd-sol-card { background: #fff; border: 1px solid #e3eef8; border-radius: 14px; box-shadow: 0 4px 14px rgba(4,57,122,.06); padding: 22px 16px 18px; text-align: center; }
.pd-sol-card .ic { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 12px; background: var(--light); color: var(--blue); display: grid; place-items: center; }
.pd-sol-card b { display: block; font-size: 14px; color: var(--navy); margin-bottom: 8px; }
.pd-sol-card p { font-size: 12px; color: var(--muted); line-height: 1.55; }

.pd-strip { position: relative; background: linear-gradient(180deg, #f6fbff, #e2f1fc); }
.pd-strip-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 1080px; margin: 0 auto; }
.pd-strip-in img { width: 100%; height: 210px; object-fit: cover; display: block; }
.pd-strip-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; display: block; }

.pd-cta { position: relative; background: #0b4f92; overflow: hidden; padding: 56px 0; }
.pd-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pd-cta-ship { position: absolute; right: 3%; bottom: -6px; height: 86%; width: auto; max-width: 40%; object-fit: contain; mix-blend-mode: screen; opacity: .95; z-index: 1; filter: drop-shadow(0 10px 22px rgba(0,20,50,.45)); }
.pd-cta-in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.pd-cta-in h2 { color: #fff; font-size: 33px; }
.pd-cta-in h2 .accent { color: var(--yellow); }
.pd-cta-in p { color: rgba(255,255,255,.9); font-size: 14.5px; margin-top: 10px; max-width: 480px; }
.pd-cta-in .btn { flex: none; }

@media (max-width: 1080px) {
	.pd-hero .wrap { min-height: 400px; }
	.pd-hero-copy h1 { font-size: 50px; }
	.pd-main { grid-template-columns: 220px 1fr; gap: 24px; }
	.pd-grid { grid-template-columns: repeat(2, 1fr); }
	.pd-sol-in { grid-template-columns: 1fr; }
	.pd-sol-grid { grid-template-columns: repeat(2, 1fr); }
	.pd-cta-ship { opacity: .55; max-width: 34%; }
}
@media (max-width: 720px) {
	.pd-hero { aspect-ratio: 882 / 1568; }
	.pd-hero .wrap { min-height: 0; padding-bottom: 90px; }
	.pd-hero-bg { object-position: center top; }
	.pd-hero-copy h1 { font-size: 40px; }
	.pd-hero-tag { font-size: 19px; }
	.pd-main { grid-template-columns: 1fr; }
	.pd-side { position: static; margin-bottom: 18px; }
	.pd-contact-btn .lbl-full { display: none; }
	.pd-contact-btn .lbl-short { display: inline; }
	.pd-contact-btn { white-space: nowrap; gap: 6px; font-size: 12px; padding: 10px 12px; }
	.pd-side-head { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
	.pd-side-head::after { content: ''; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; transition: transform .2s ease; }
	.pd-side.is-open .pd-side-head::after { transform: rotate(180deg); }
	.pd-side-nav { display: none; }
	.pd-side.is-open .pd-side-nav { display: flex; }
	.pd-grid { grid-template-columns: 1fr; }
	.pd-sol-grid { grid-template-columns: 1fr; }
	.pd-strip-in { grid-template-columns: 1fr; }
	.pd-strip-in img { height: 160px; }
	.pd-cta-in { flex-direction: column; align-items: flex-start; }
	.pd-cta-ship { display: none; }
	.pd-cta-in h2 { font-size: 26px; }
}

/* Product cards on the products page */
.pd-grid-prods { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pd-prod { position: relative; padding: 0; border-radius: 14px; overflow: hidden; }
.pd-prod-main { display: block; position: relative; text-decoration: none; }
.pd-prod .ph { background: #f2f8fd; }
.pd-prod .ph img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .3s; }
.pd-prod:hover .ph img { transform: scale(1.05); }
.pd-prod .ov { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 40px 14px 16px; background: linear-gradient(180deg, rgba(4,37,79,0) 0%, rgba(4,37,79,.55) 34%, rgba(3,30,66,.92) 100%); transition: padding .25s ease; }
.lbl-short { display: none; }
.pd-prod .ov b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #fff; font-size: 14.5px; line-height: 1.3; text-shadow: 0 1px 8px rgba(0,20,50,.45); }
.pd-prod .ov p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255,255,255,.85); font-size: 11.3px; line-height: 1.45; max-height: 0; opacity: 0; margin-top: 0; transition: max-height .25s ease, opacity .25s ease, margin-top .25s ease; }
.pd-contact-btn { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 999px; background: #fff; color: var(--blue); font-weight: 800; font-size: 12.5px; box-shadow: 0 4px 12px rgba(4,37,79,.3); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background .15s, color .15s; }
.pd-prod:hover .ov, .pd-prod:focus-within .ov { padding-bottom: 104px; }
.pd-prod:hover .ov p, .pd-prod:focus-within .ov p { max-height: 44px; opacity: 1; margin-top: 5px; }
.pd-prod:hover .pd-contact-btn, .pd-prod:focus-within .pd-contact-btn { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pd-contact-btn:hover { background: var(--yellow); color: var(--navy); }
@media (hover: none) {
	.pd-prod .ov { padding-bottom: 104px; }
	.pd-prod .ov p { max-height: 44px; opacity: 1; margin-top: 5px; }
	.pd-contact-btn { opacity: 1; transform: none; pointer-events: auto; }
}
.pd-card[hidden] { display: none; }
.pd-empty { color: var(--muted); padding: 20px 0; }

@media (max-width: 1080px) {
	.pd-grid-prods { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.pd-grid-prods { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.pd-hero .wrap, .pd-crumbs, .pd-main { padding-left: 10px; padding-right: 10px; }
	/* Shopee-style card: image on top, text below on white */
	.pd-prod-main { display: flex; flex-direction: column; }
	.pd-prod .ph { order: -1; }
	.pd-prod .ov { position: static; padding: 12px 14px 4px; background: #fff; }
	.pd-prod .ov b { color: var(--navy); text-shadow: none; font-size: 15px; }
	.pd-prod .ov p { color: var(--muted); max-height: 44px; opacity: 1; margin-top: 4px; text-shadow: none; }
	.pd-contact-btn { position: static; margin: 10px 14px 14px; background: #f2f8fd; border: 1px solid #d8e6f4; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; }
}

/* Products pagination */
.pd-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; }
.pd-pg { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1px solid #dcebf8; color: var(--navy); font-weight: 800; font-size: 14px; transition: background .15s, color .15s, border-color .15s; }
.pd-pg:hover { background: #eef6fd; border-color: var(--blue); color: var(--blue); }
.pd-pg.is-current { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 4px 10px rgba(29,138,222,.35); }
.pd-pg.nav { background: #f4f9fe; }

/* ===== Single product detail ===== */
.ps-body { padding: 18px 0 60px; background: #f6fbff; }
.ps-crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 6px 0 14px; }
.ps-crumbs a { color: var(--muted); }
.ps-crumbs a:hover { color: var(--blue); }
.ps-crumbs i { color: #b7cee4; font-style: normal; }
.ps-crumbs span { color: var(--navy); }
.ps-card { background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(4,37,79,.07); padding: 26px; }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.ps-big img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; display: block; }
.ps-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.ps-thumb { width: 78px; height: 62px; border-radius: 10px; overflow: hidden; padding: 0; border: 2px solid transparent; cursor: pointer; background: none; opacity: .75; }
.ps-thumb.is-on { border-color: var(--blue); opacity: 1; }
.ps-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-cat { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #e8f4fe; color: var(--blue); font-weight: 800; font-size: 12.5px; }
.ps-info h1 { font-size: 27px; line-height: 1.2; color: var(--navy); margin: 12px 0 10px; font-weight: 900; }
.ps-desc { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }
.ps-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ps-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; background: #f3f9fe; border: 1px solid #dcebf8; color: var(--navy); font-weight: 700; font-size: 11.8px; }
.ps-badge svg { color: var(--blue); }
.ps-specs { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.ps-specs tr { border-bottom: 1px solid #eef5fb; }
.ps-specs tr:last-child { border-bottom: none; }
.ps-specs th { text-align: left; font-weight: 700; color: var(--navy); font-size: 12.5px; padding: 8px 14px 8px 0; white-space: nowrap; width: 150px; }
.ps-specs td { color: var(--muted); font-size: 12.5px; padding: 8px 0; }
.ps-actions { display: flex; gap: 12px; }
.ps-quote, .ps-sales { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 12px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; transition: background .15s, color .15s, transform .15s; white-space: nowrap; }
.ps-quote { background: var(--yellow); color: var(--navy); box-shadow: 0 5px 14px rgba(255,199,42,.35); }
.ps-quote:hover { background: var(--blue); color: #fff; transform: translateY(-1px); }
.ps-sales { background: #fff; border: 1.5px solid #dcebf8; color: var(--navy); }
.ps-sales:hover { border-color: var(--blue); color: var(--blue); }
.ps-tabs { display: flex; gap: 10px; margin: 26px 0 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ps-tabs::-webkit-scrollbar { display: none; }
.ps-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px 12px 0 0; border: none; background: #e8f2fb; color: var(--navy); font-weight: 800; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; }
.ps-tab:hover { background: #d8ecfb; }
.ps-tab.is-on { background: var(--blue); color: #fff; }
.ps-tabpane { background: #fff; border-radius: 0 16px 16px 16px; box-shadow: 0 10px 30px rgba(4,37,79,.07); padding: 24px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.ps-tabpane[hidden] { display: none; }
.ps-tab-txt { color: #3e5470; font-size: 13.5px; line-height: 1.75; }
.ps-tab-txt p { margin: 0 0 12px; }
.ps-tab-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; display: block; }
.ps-specs-lg { margin-bottom: 0; }
.ps-specs-lg th { width: 190px; }
@media (max-width: 900px) {
	.ps-grid, .ps-tabpane { grid-template-columns: 1fr; }
	.ps-actions .ps-quote, .ps-actions .ps-sales { flex: 1; justify-content: center; }
}
.ps-big { position: relative; overflow: hidden; border-radius: 14px; }
.ps-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border: none; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--navy); cursor: pointer; box-shadow: 0 3px 10px rgba(4,37,79,.18); transition: background .15s, color .15s; }
.ps-nav.prev { left: 12px; }
.ps-nav.next { right: 12px; }
.ps-nav:hover { background: var(--blue); color: #fff; }

/* Related products on product detail */
.ps-rel { margin-top: 40px; }
.ps-rel .sh-head { margin-bottom: 18px; }
.ps-rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1080px) {
	.ps-rel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reveal on scroll (varied, smooth) ---------- */
.rv { opacity: 0; transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); transition-delay: var(--rvd, 0ms); will-change: opacity, transform; }
.rv-up    { transform: translateY(34px); }
.rv-left  { transform: translateX(-38px); }
.rv-right { transform: translateX(38px); }
.rv-zoom  { transform: scale(.93); }
.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.rv, .rvh { opacity: 1; transform: none; transition: none; }
}
/* Hero entrance: each word-cluster moves its own way */
.rvh { opacity: 0; transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); transition-delay: var(--rvd, 0ms); will-change: opacity, transform; }
h1 .rvh { display: inline-block; }
.rvh-up    { transform: translateY(34px); }
.rvh-left  { transform: translateX(-34px); }
.rvh-right { transform: translateX(34px); }
.rvh-zoom  { transform: scale(.88); }
.rvh.rvh-in { opacity: 1; transform: none; }

/* ---------- Header mobile: hamburger + drawer from right ---------- */
.nav-burger { display: none; }
.nav-close { display: none; }
.nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(8,30,60,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1100; }
@media (max-width: 1080px) {
	.nav-burger { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #eef6fd; color: var(--navy); cursor: pointer; flex: none; }
	.nav-burger:hover { background: #dcecf9; }
	.nav-close { display: grid; place-items: center; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: #eef6fd; color: var(--navy); cursor: pointer; }
	.main-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: #fff; z-index: 1200; transform: translateX(105%); transition: transform .3s cubic-bezier(.22,.61,.36,1); box-shadow: -14px 0 36px rgba(4,37,79,.2); padding: 70px 16px 26px; overflow-y: auto; display: block; }
	body.nav-open .main-nav { transform: none; }
	body.nav-open { overflow: hidden; }
	body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
	.main-nav ul { flex-direction: column; gap: 2px; align-items: stretch; }
	.main-nav a { padding: 13px 12px; font-size: 16px; border-radius: 10px; }
	.main-nav a:hover { background: #eef6fd; }
	.main-nav .sub-menu { position: static; display: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 4px 16px; background: none; }
	.main-nav li.sub-open > .sub-menu { display: flex; }
	.main-nav li.menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
	.main-nav .sub-tg { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #cfe2f3; border-radius: 7px; color: var(--blue); font-weight: 700; font-size: 16px; line-height: 1; flex: none; }
	.main-nav .sub-tg::before { content: '+'; }
	.main-nav li.sub-open > a .sub-tg::before { content: '\2013'; }
}

/* Prevent off-canvas drawer from creating horizontal scroll */
html, body { overflow-x: clip; }

/* Header: single row on small screens; anchors clear sticky header */
@media (max-width: 720px) {
	.site-header .quote-btn { display: none; }
	.site-header .logo img { height: 42px; }
	.section { scroll-margin-top: 66px; }
}
.section { scroll-margin-top: 84px; }

/* Section head: stack below 720px, title full width, button one line */
@media (max-width: 720px) {
	.section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
	.section-head .btn, .section-head a { white-space: nowrap; }
}
.section-head .btn, .section-head a { white-space: nowrap; }

@media (max-width: 640px) {
	.pd-hero { aspect-ratio: 1304 / 724; }
}