/* ==========================================================================
   Nam Phương Group – giao diện theo thiết kế Figma "PROFILE NAM PHƯƠNG"
   (PC: frame 1134:* rộng 1440px · Mobile: frame 114x:* rộng 402px)
   Token màu / chữ lấy từ design system trong Figma.
   Quy ước hiệu ứng: chỉ khi hover mới có hiệu ứng nổi / đổi màu (không có trạng thái nổi mặc định).
   ========================================================================== */
:root {
  /* Brand */
  --brand-1400: #005878;
  --brand-1300: #006589;
  --brand-1200: #00729b;
  --brand-1000: #2089ac;
  --brand-900: #3c96b4;
  --brand-700: #6eacc5;
  --brand-300: #c4dbe6;
  /* Secondary */
  --sec-1300: #008291;
  --sec-1200: #0093a4;
  --sec-1000: #0fa4b2;
  --sec-900: #3daeba;
  --sec-700: #71c1ca;
  --sec-200: #daecf0;
  /* Info */
  --info-200: #eff9f9;
  --info-300: #e7f6f5;
  --info-400: #def3f2;
  --info-500: #d6f0ef;
  /* Neutral */
  --n-100: #ffffff;
  --n-300: #f3f3f3;
  --n-400: #efefef;
  --n-500: #ececec;
  --n-800: #b7b7b7;
  --n-900: #bbbbbb;
  --n-1000: #989898;
  --n-1300: #383838;
  --n-1500: #050505;
  --text-bold: #1c1c1c;
  --text-body: #565656;
  --text-muted: #726c68;
  --page-bg: #f7f7f7;
  --danger: #d83571;
  --badge: #ff5c9b;

  --font: "Mona Sans", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Barlow Semi Condensed", "Mona Sans", system-ui, sans-serif;
  --font-form: "Inter", var(--font);
  --font-script: "Ms Madi", cursive;
  --radius: 10px;
  --container: 1200px;
  --gutter: 20px;
  --shadow-card: 4px 5px 14px rgba(51, 51, 51, .1), 14px 22px 26px rgba(51, 51, 51, .09), 32px 49px 35px rgba(51, 51, 51, .05), 58px 87px 42px rgba(51, 51, 51, .01);
  --shadow-soft: 4px 4px 13px rgba(0, 0, 0, .1), 16px 18px 24px rgba(0, 0, 0, .09), 35px 39px 32px rgba(0, 0, 0, .05), 63px 70px 38px rgba(0, 0, 0, .01);
  --shadow-row: 7px 11px 14px rgba(117, 117, 117, .1), 27px 43px 25.5px rgba(117, 117, 117, .09);
  --shadow-grey: 5px 7px 19px rgba(158, 158, 158, .1), 19px 28px 34px rgba(158, 158, 158, .09), 43px 63px 46px rgba(158, 158, 158, .05), 77px 112px 54px rgba(158, 158, 158, .01);
  /* Glass: bóng sáng nhiều lớp như Figma (GLASS + drop shadow trắng) */
  --glass-glow: 2px 1px 5px rgba(255, 255, 255, .1), 7px 5px 9px rgba(255, 255, 255, .09), 16px 11px 12px rgba(255, 255, 255, .05), 29px 20px 14px rgba(255, 255, 255, .01);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.3; color: var(--text-body); background: var(--page-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-1000); text-decoration: none; transition: color .2s, background-color .2s, box-shadow .25s, transform .25s, opacity .2s; }
a:hover { color: var(--brand-1300); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; color: var(--text-bold); }
p { margin: 0 0 .8em; }
button, input, select, textarea { font: inherit; color: inherit; }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--brand-1300); color: #fff; padding: 8px 16px; z-index: 1000; border-radius: 8px; }
.skip-link:focus { left: 8px; color: #fff; }
.icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.15em; }
.ico { display: inline-block; width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 2px solid var(--sec-1000); outline-offset: 2px; }

/* ---------- Kiểu chữ ---------- */
.link-u { color: var(--brand-1000); font-weight: 500; font-size: 14px; text-decoration: underline; text-decoration-thickness: 7%; text-underline-offset: 2px; }
.link-u:hover { color: var(--brand-1300); }
.pill-tag { display: inline-flex; align-items: center; align-self: flex-start; background: var(--info-200); color: var(--sec-1200); font-weight: 500; font-size: 14px; line-height: 18px; padding: 4px 10px; border-radius: 10px; }
.pill-tag.light { background: #fff; }
.section-title { font-size: 26px; line-height: 31px; font-weight: 600; color: var(--brand-1300); text-align: center; margin-bottom: 48px; }
.section-title.left { text-align: left; }
.section-title a { color: inherit; }
.h3 { font-size: 26px; line-height: 31px; font-weight: 600; color: var(--brand-1300); }
.h4 { font-size: 22px; line-height: 26px; font-weight: 700; color: var(--text-bold); }
.body { font-size: 14px; line-height: 18px; color: var(--text-body); }
.display { font-family: var(--font-display); font-size: 36px; line-height: 43px; font-weight: 700; letter-spacing: .01em; color: var(--sec-1300); margin: 0; }
.display span { display: block; }
.tagline { font-size: 26px; line-height: 31px; font-weight: 600; color: var(--sec-1000); margin: 0; }
.rich { overflow-wrap: anywhere; }
.rich > :last-child { margin-bottom: 0; }
.rich img { border-radius: var(--radius); margin: 1em auto; }
.rich ul, .rich ol { padding-left: 1.3em; }
.rich table { border-collapse: collapse; width: 100%; margin: 1em 0; display: block; overflow-x: auto; }
.rich td, .rich th { border: 1px solid var(--n-500); padding: 8px 12px; }
.rich iframe { max-width: 100%; }
.req { color: var(--danger); font-weight: inherit; }

/* ---------- Nút ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; padding: 8px 15px; border-radius: 40px; border: 0;
  font-weight: 700; font-size: 16px; letter-spacing: .01em; line-height: 21px; cursor: pointer; white-space: nowrap; color: #fff;
  background: linear-gradient(90deg, var(--brand-1300) 0%, #007a8f 37%, var(--sec-1000) 100%);
  box-shadow: 1px 2px 0 var(--brand-1300), inset 2px 2px 3.5px rgba(0, 83, 113, .8); }
.btn:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); box-shadow: 1px 3px 0 var(--brand-1300), inset 2px 2px 3.5px rgba(0, 83, 113, .8), 0 8px 18px rgba(0, 101, 137, .25); }
.btn:active { transform: none; }
/* Nút kính (glass): viền gradient + nền mờ + bóng sáng */
.btn-glass { color: var(--brand-1300); background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--glass-glow); }
.btn-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--btn-border, linear-gradient(90deg, var(--brand-1300), #0ea1b0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.btn-glass:hover { color: #fff; background: linear-gradient(90deg, var(--brand-1300) 0%, #007a8f 37%, var(--sec-1000) 100%); box-shadow: var(--glass-glow), 0 8px 18px rgba(0, 101, 137, .2); filter: none; }
.btn-glass.light { color: #fff; background: rgba(255, 255, 255, .06); --btn-border: linear-gradient(110deg, rgba(255, 255, 255, .27) 0%, rgba(255, 255, 255, 0) 52%, #fff 100%);
  box-shadow: 2px 1px 5px rgba(255, 255, 255, .1), 7px 5px 9px rgba(255, 255, 255, .09), 16px 11px 12px rgba(255, 255, 255, .05), 0 4px 18px rgba(0, 0, 0, .06); }
.btn-glass.light:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.btn-sm { font-size: 13px; padding: 5px 14px; min-height: 0; }
.btn-block { width: 100%; }
.btn-primary { color: #fff; }
.btn-outline { color: var(--brand-1300); background: transparent; box-shadow: inset 0 0 0 1px var(--brand-1300); }
.btn-outline:hover { color: #fff; background: var(--brand-1300); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Khối kính dùng chung (form, album…) */
.glass-box { position: relative; border-radius: 20px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 -21px 46px rgba(255, 255, 255, .1), 0 -83px 83px rgba(255, 255, 255, .09), 0 -188px 113px rgba(255, 255, 255, .05), 0 6px 24px rgba(0, 101, 137, .05); }
.glass-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- Topbar ---------- */
.topbar { height: 40px; background: linear-gradient(90deg, #fff 65%, #f9fdfd 80%, #d8eff1 100%); }
.topbar-inner { display: flex; justify-content: flex-end; align-items: center; height: 100%; gap: 40px; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--brand-900); text-decoration: underline; text-decoration-thickness: 5%; text-underline-offset: 2px; }
.topbar a img { width: 15px; height: 15px; }

/* ---------- Header / menu ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--sec-1000); box-shadow: 0 4px 10px rgba(0, 0, 0, .05); }
.header-inner { display: flex; align-items: center; gap: 43px; min-height: 75px; padding-top: 8px; padding-bottom: 8px; }
.logo { flex: none; display: block; }
.logo img { width: 139px; height: 59px; object-fit: contain; }
.main-nav { flex: 1; }
.main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.main-nav li { position: relative; }
.main-nav > ul > li > a { display: block; font-size: 16px; line-height: 21px; font-weight: 500; letter-spacing: .01em; color: rgba(255, 255, 255, .8); padding: 8px 0; white-space: nowrap; }
.main-nav > ul > li > a:hover { color: #fff; }
.main-nav > ul > li.active > a { color: #fff; font-weight: 800; text-decoration: underline; text-decoration-thickness: 7%; text-underline-offset: 4px; }
.sub-toggle { display: none; }
.sub-menu { position: absolute; top: 100%; left: -12px; min-width: 220px; list-style: none; margin: 0; padding: 8px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s; }
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sub-menu a { display: block; padding: 8px 12px; color: var(--text-bold); border-radius: 6px; font-weight: 500; }
.sub-menu a:hover { background: var(--info-200); color: var(--sec-1300); }
.header-actions { display: flex; align-items: center; gap: 40px; flex: none; margin-left: auto; }
.header-actions > .hotline-pill { margin-right: 0; }
.hotline-pill { position: relative; border-radius: 40px; padding: 8px 15px; font-size: 16px; line-height: 21px; font-weight: 800; letter-spacing: .01em; color: #fff; white-space: nowrap;
  background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--glass-glow); }
.hotline-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, .27) 0%, rgba(255, 255, 255, 0) 52%, #fff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.hotline-pill:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.header-actions .lang-search { display: flex; align-items: center; gap: 12px; }
.lang-flag { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); flex: none; }
.lang-flag svg { width: 100%; height: 100%; display: block; }
.search-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: rgba(255, 255, 255, .8); font-size: 16px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 5%; text-underline-offset: 3px; white-space: nowrap; }
.search-link img { width: 14px; height: 14px; }
.search-link:hover { color: #fff; }
.nav-toggle { display: none; width: 32px; height: 32px; border: 0; background: none; cursor: pointer; color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
.nav-toggle span { width: 15px; height: 1.5px; background: currentColor; border-radius: 2px; transition: .3s; }
.search-panel { display: none; background: #fff; padding: 14px 0; box-shadow: 0 8px 20px rgba(0, 0, 0, .06); }
.search-panel.open { display: block; }
.search-panel .container { display: flex; gap: 10px; }
.search-panel input, .search-big input { flex: 1; padding: 10px 18px; border: 1px solid var(--sec-700); border-radius: 40px; background: #fff; }

/* ---------- Banner trang chủ ---------- */
.hero { position: relative; height: 534px; overflow: hidden; background: #fff; }
.hero .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hero .slide.active { opacity: 1; z-index: 1; }
.hero .slide picture, .hero .slide picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .slide picture img { object-fit: cover; object-position: right bottom; }
.hero .slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(214, 240, 241, .95) 0%, rgba(230, 246, 247, .7) 38%, rgba(255, 255, 255, 0) 66%); }
.hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 44px; padding-bottom: 60px; }
.hero-eyebrow { font-size: 22px; line-height: 26px; font-weight: 600; color: var(--brand-700); margin: 0 0 4px; }
.hero-title { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: .01em; line-height: 41px; max-width: 744px; }
.hero-title span { display: block; color: var(--brand-1300); }
.hero-title span + span { color: var(--sec-1000); }
.hero .btn { margin-top: 24px; align-self: flex-start; }
.slider-dots { position: absolute; bottom: 80px; left: 0; right: 0; z-index: 3; display: flex; gap: 6px; }
.slider-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #e8e8e8; cursor: pointer; transition: .3s; }
.slider-dots button.active { width: 17px; border-radius: 2px; background: var(--brand-1000); }

/* ---------- Thanh tác vụ nhanh (kính) ---------- */
.quick-tabs { position: relative; z-index: 5; margin-top: -60px; }
.quick-tabs .container { display: flex; }
.quick-tabs a { height: 120px; display: flex; align-items: center; justify-content: center; gap: 19px; font-size: 22px; line-height: 26px; font-weight: 700; color: var(--brand-900); }
.quick-tabs a img { width: 25px; height: 25px; }
.quick-tab-main { position: relative; flex: 0 0 410px; background: var(--info-400); border-radius: 10px 0 0 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: -6px -1px 13px rgba(255, 255, 255, .1), -23px -5px 23px rgba(255, 255, 255, .09), -52px -11px 32px rgba(255, 255, 255, .05); }
.quick-tab-main::before, .quick-tab-rest::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .7), #fff 57%, rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.quick-tab-rest { position: relative; flex: 1; display: flex; justify-content: center; gap: 137px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); border-radius: 0 10px 10px 0;
  box-shadow: -6px -1px 13px rgba(255, 255, 255, .1), -23px -5px 23px rgba(255, 255, 255, .09), 0 10px 30px rgba(0, 0, 0, .04); }
.quick-tab-rest::before { padding: 1px; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, .6)); }
.quick-tabs a:hover { color: var(--brand-1300); }
.quick-tabs a:hover img { transform: scale(1.1); }
.quick-tabs a img { transition: transform .25s var(--ease); }
.quick-tab-main:hover { background: var(--info-500); }

/* ---------- Khối chung ---------- */
.section { padding: 80px 0; }
.band-white { background: #fff; }

/* Về Nam Phương (trang chủ) */
.about-home { padding: 100px 0 125px; }
.about-home .inner { max-width: 996px; margin: 0 auto; display: grid; grid-template-columns: 483px 486px; gap: 27px; }
.about-home .left { display: flex; flex-direction: column; gap: 24px; }
.about-home .heads { display: flex; flex-direction: column; gap: 12px; }
.about-home .heads > div { display: flex; flex-direction: column; gap: 8px; }
.about-home h2 { font-family: var(--font-display); font-size: 36px; line-height: 43px; font-weight: 700; letter-spacing: .01em; color: var(--sec-1300); }
.about-home .sub { font-size: 26px; line-height: 31px; font-weight: 600; color: var(--sec-1000); margin: 0; }
.social-proof { display: flex; align-items: center; gap: 24px; }
.social-proof .avatars { display: flex; }
.social-proof .avatars img { width: 53px; height: 53px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.social-proof .avatars img + img { margin-left: -16px; }
.social-proof .avatars-img { width: 126px; height: 53px; object-fit: contain; }
.social-proof strong { display: block; font-size: 20px; font-weight: 700; color: var(--n-900); letter-spacing: .01em; }
.social-proof span { font-size: 13px; line-height: 17px; color: rgba(51, 51, 51, .8); }
.about-home .right { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.about-home .right .rich p:first-child, .about-home .right .rich p:first-child strong { font-size: 18px; line-height: 23px; font-weight: 700; color: var(--text-bold); }
.about-home .right .rich p { font-size: 14px; line-height: 18px; color: var(--text-body); margin-bottom: 12px; text-align: justify; }
.about-home .right .rich p:first-child { text-align: left; }
.about-home .right .rich p:last-child { margin-bottom: 0; }

/* Giải pháp theo cây trồng (vòng tròn) */
.crops-home { position: relative; padding: 233px 0 115px; overflow: hidden; }
.crop-orbit { position: relative; height: 323px; }
.crop-orbit::before { content: ""; position: absolute; left: 50%; top: 166px; width: 772px; height: 772px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 134px, rgba(0, 250, 193, .3) 135px, transparent 137px, transparent 172px, rgba(0, 250, 193, .3) 173px, transparent 175px, transparent 207px, rgba(0, 250, 193, .3) 208px, transparent 210px, transparent 248px, rgba(0, 250, 193, .3) 249px, transparent 251px, transparent 310px, rgba(0, 250, 193, .3) 311px, transparent 313px, transparent 384px, rgba(0, 250, 193, .3) 385px, transparent 387px);
  opacity: .5; -webkit-mask-image: linear-gradient(#000 45%, transparent 75%); mask-image: linear-gradient(#000 45%, transparent 75%); }
.crop-orbit::after { content: ""; position: absolute; left: 50%; top: 50px; width: 356px; height: 356px; transform: translateX(-30%); border-radius: 50%; background: rgba(222, 243, 242, .8); filter: blur(110px); pointer-events: none; }
.crop-orbit-title { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); margin: 0; text-align: center; white-space: nowrap; z-index: 1; }
.crop-orbit-title span { display: block; font-size: 42px; font-weight: 700; line-height: 50px; color: var(--brand-1300); }
.crop-orbit-title em { display: block; margin: -1px 0 0 94px; font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 40px; line-height: 48px; color: var(--sec-1000); }
.crop-orbit .crop-card { position: absolute; z-index: 1; width: 282px; height: 138px; }
.crop-orbit .crop-pos-1 { right: 205px; top: 185px; }
.crop-orbit .crop-pos-2 { right: 0; top: 0; }
.crop-orbit .crop-pos-3 { left: 0; top: 0; }
.crop-orbit .crop-pos-4 { left: 204px; top: 185px; }
.crop-orbit.is-grid { height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; padding-top: 110px; }
.crop-orbit.is-grid .crop-card { position: static; width: auto; }
.crop-grid { display: grid; grid-template-columns: repeat(2, 282px); gap: 24px; }
.crop-card { height: 138px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px 25px; border-radius: 10px; background: var(--n-400); color: var(--brand-1300); font-size: 18px; line-height: 23px; font-weight: 500; text-align: center; box-shadow: 8px 6px 45px #fff; transition: background-color .25s, color .25s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.crop-card svg { width: 30px; height: 30px; color: var(--brand-1300); transition: color .25s; }
.crop-card img { width: 30px; height: 30px; object-fit: contain; }
.crop-card p { margin: 0; font-size: 14px; line-height: 18px; font-weight: 400; color: var(--text-bold); text-align: justify; transition: color .25s; }
.crop-card:hover { background: var(--sec-1200); color: #fff; box-shadow: 4px 5px 14px rgba(51, 51, 51, .1), 14px 22px 26px rgba(51, 51, 51, .09), 32px 49px 35px rgba(51, 51, 51, .05), 58px 87px 42px rgba(51, 51, 51, .01); }
.crop-card:hover svg, .crop-card:hover p { color: #fff; }
.page-intro .crop-card { justify-content: flex-start; background: #f3f3f3; }
.page-intro .crop-card:hover { background: var(--sec-1300); }

/* Công nghệ (trang chủ) */
.tech-home { padding: 86px 0 100px; background: var(--tech-bg, url(../img/figma/tech-bg.jpg)) center top / cover no-repeat; background-color: var(--page-bg); }
.split-126 { display: grid; grid-template-columns: 486px 588px; gap: 126px; align-items: center; }
.tech-intro { display: flex; flex-direction: column; gap: 115px; }
.tech-intro .top { display: flex; flex-direction: column; gap: 30px; }
.tech-intro .heads { display: flex; flex-direction: column; gap: 20px; }
.tech-intro .heads > div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tech-intro .heads .rich { text-align: justify; }
.tech-tabs { display: flex; gap: 24px; flex-wrap: wrap; }
.tech-tabs button { background: none; border: 0; padding: 0; font-size: 14px; line-height: 18px; color: var(--n-900); cursor: pointer; text-align: left; transition: color .2s; }
.tech-tabs button:hover, .tech-tabs button.active { color: var(--text-bold); font-weight: 700; text-decoration: underline; text-decoration-thickness: 5%; text-underline-offset: 2px; }
.tech-gallery { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.tech-gallery .imgs { display: flex; gap: 24px; }
.tech-gallery .imgs img { width: 180px; height: 180px; object-fit: cover; border-radius: 10px; }
.tech-gallery .btn { min-width: 165px; }
.tech-cards { display: flex; flex-direction: column; gap: 18px; }
.tech-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; border-radius: 10px; background: var(--n-300); transition: background-color .3s, box-shadow .35s var(--ease); }
.tech-card .txt { width: 289px; display: flex; flex-direction: column; gap: 6px; }
.tech-card h3 { font-size: 18px; line-height: 23px; font-weight: 700; }
.tech-card h3 a { color: var(--brand-1300); }
.tech-card p { font-size: 14px; line-height: 18px; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tech-card .thumb { width: 200px; height: 123px; border-radius: 4px; overflow: hidden; flex: none; }
.tech-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tech-card:hover, .tech-card.hl { background: #fff; box-shadow: var(--shadow-soft); }
.tech-card:hover h3 a, .tech-card.hl h3 a { color: var(--sec-1300); }
.tech-card:hover .thumb img { transform: scale(1.05); }

/* Hợp tác gia công (trang chủ) + thẻ quy trình */
.oem-home { padding: 81px 0 80px; }
.oem-home .section-title { margin-bottom: 64px; }
.oem-grid { display: grid; grid-template-columns: 555px 1fr; gap: 55px; align-items: start; }
.oem-visual { position: relative; height: 522px; }
.oem-visual > img { width: 486px; height: 486px; object-fit: cover; border-radius: 10px; }
.step-cards { position: absolute; left: 0; top: 305px; width: 555px; display: flex; flex-direction: column; gap: 14px; }
.step-card { display: flex; align-items: center; gap: 16px; width: 337px; min-height: 63px; background: #fff; border: 1px solid var(--n-500); border-radius: 10px; padding: 8px 12px; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.step-card:nth-child(1) { margin-left: 128px; }
.step-card:nth-child(2) { margin-left: 218px; }
.step-card:nth-child(3) { margin-left: 98px; }
.step-ico { width: 45px; height: 45px; border-radius: 5px; background: var(--info-400); display: flex; align-items: center; justify-content: center; flex: none; color: var(--brand-1200); }
.step-ico img { width: 45px; height: 45px; }
.step-ico svg { width: 25px; height: 25px; }
.step-card p { margin: 0; font-size: 14px; line-height: 18px; color: var(--text-body); }
.step-card strong { font-weight: 700; color: var(--text-body); }
.oem-text { margin-top: 96px; display: flex; flex-direction: column; gap: 64px; align-items: flex-end; text-align: right; }
.oem-text .heads { max-width: 486px; display: flex; flex-direction: column; gap: 20px; align-items: flex-end; }
.oem-text .heads > div { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.oem-text .heads .pill-tag { align-self: flex-end; }
.oem-text .heads .rich { text-align: justify; }
.oem-stats-wrap { width: 100%; display: flex; flex-direction: column; gap: 30px; align-items: flex-end; }
.oem-stats-block { width: 100%; max-width: 592px; display: flex; flex-direction: column; gap: 26px; }
.oem-timeline { position: relative; height: 14px; margin-left: 170px; }
.oem-timeline::before { content: ""; position: absolute; left: 10px; right: 2px; top: 6px; border-top: 1px solid rgba(0, 147, 164, .4); }
.oem-timeline i { position: absolute; top: 0; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, var(--sec-900) 0 4px, rgba(113, 193, 202, .7) 5px, rgba(113, 193, 202, 0) 7px); box-shadow: 0 0 8px rgba(113, 193, 202, .9); }
.oem-timeline i:nth-child(1) { left: 0; }
.oem-timeline i:nth-child(2) { left: calc(50% - 7px); }
.oem-timeline i:nth-child(3) { right: 0; }
.oem-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; }
.oem-stat { text-align: right; min-height: 169px; }
.oem-stat strong { display: block; font-size: 35px; line-height: 42px; font-weight: 700; color: var(--sec-1200); letter-spacing: .01em; }
.oem-stat em { display: block; font-style: normal; font-size: 20px; line-height: 24px; font-weight: 600; color: var(--sec-700); }
.oem-stat p { margin: 20px 0 0; font-size: 12px; line-height: 14px; font-weight: 500; color: var(--n-900); letter-spacing: .05em; }

/* Cam kết */
.commit { background: var(--n-400); padding: 81px 0 80px; }
.commit .section-title { margin-bottom: 51px; }
.commit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 29px; }
.commit-card { min-height: 315px; display: flex; flex-direction: column; gap: 24px; padding: 20px; border-radius: 8px; background: #fff; transition: background-color .3s, color .3s, box-shadow .35s var(--ease), transform .35s var(--ease); }
.commit-card img { width: 44px; height: 45px; border-radius: 5px; transition: filter .3s; }
.commit-card h3 { font-size: 22px; line-height: 26px; font-weight: 600; color: var(--n-1500); margin-bottom: 8px; transition: color .3s; }
.commit-card .rich p { font-size: 14px; line-height: 18px; text-align: justify; }
.commit-card:hover { background: var(--sec-1200); color: #fff; transform: translateY(-29px); box-shadow: 6px 5px 17px rgba(0, 0, 0, .1), 22px 21px 31px rgba(0, 0, 0, .09), 50px 47px 41px rgba(0, 0, 0, .05), 90px 83px 49px rgba(0, 0, 0, .01); }
.commit-card:hover h3 { color: #fff; font-weight: 700; }

/* Bạn đang cần tư vấn / Đặt gia công */
.consult { position: relative; background: var(--page-bg); min-height: 296px; overflow: hidden; }
.consult-bg { position: absolute; top: -123px; right: 0; width: 900px; height: 461px; object-fit: cover; }
.consult::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--page-bg) 47%, rgba(247, 247, 247, .98) 56%, rgba(248, 248, 248, .9) 67%, rgba(255, 255, 255, .55) 100%); }
.consult .container { position: relative; z-index: 1; padding-top: 51px; padding-bottom: 57px; }
.consult .inner { max-width: 588px; display: flex; flex-direction: column; gap: 20px; }
.consult .inner > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.consult h2 { font-family: var(--font-display); font-size: 42px; line-height: 50px; font-weight: 700; color: var(--sec-1300); letter-spacing: .01em; }
.consult .sub { margin: 0; font-size: 18px; line-height: 23px; font-weight: 500; font-style: italic; color: var(--text-body); }
.consult .sub b { display: block; font-size: 22px; line-height: 26px; font-weight: 700; }
.consult .sub span { display: block; }
.consult .actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.consult .actions .btn { min-width: 165px; }
.consult .actions .link-u + .link-u { margin-left: -6px; }
.oem-cta .container { padding-top: 45px; padding-bottom: 44px; }
.oem-cta .inner { max-width: 791px; gap: 38px; }

/* Dự án đã triển khai */
.projects-home { padding: 80px 0 64px; }
.projects-home .section-title { margin-bottom: 48px; }
.sol-bottom { background: linear-gradient(180deg, #fff 17%, #f1f3f3 38%, #f4f6f6 58%, #e9f3f3 74%, #e0f1f1 88%, #cdeceb 100%); }
.sol-bottom .projects-home { padding-bottom: 54px; }
.sol-bottom .faq { background: none; }
.project-list { display: flex; flex-direction: column; gap: 24px; }
.project-row { display: grid; grid-template-columns: 180px 282px 1fr 40px; column-gap: 25px; align-items: center; padding: 25px 30px; border-radius: 10px; color: inherit; transition: background-color .3s, box-shadow .35s var(--ease); }
.project-row .title { font-size: 18px; line-height: 23px; font-weight: 700; color: var(--text-body); text-align: justify; }
.project-row img.thumb { width: 180px; height: 100px; object-fit: cover; border-radius: 10px; }
.project-row .info { display: flex; flex-direction: column; gap: 4px; max-width: 506px; margin-left: 59px; }
.project-row .desc { max-width: 447px; }
.project-row .desc { font-size: 14px; line-height: 18px; color: var(--text-body); text-align: justify; }
.project-row .loc { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--text-bold); }
.project-row .loc img { width: 26px; height: 26px; }
.project-row .arrow { width: 40px; height: 40px; transition: transform .3s var(--ease); }
.project-row:hover { background: #fff; box-shadow: var(--shadow-row); color: inherit; }
.project-row:hover .arrow { transform: translateX(4px); }

/* Tin tức (trang chủ) */
.news-home { padding: 75px 0 60px; background: transparent; }
.home-page .news-home { background: linear-gradient(180deg, #efefef 0, #f4f6f6 70%, #eef5f5 100%); }
.news-bg { background: linear-gradient(180deg, var(--n-400) 0, #f4f6f6 37%, #cdeceb 100%); }
.news-home .section-title { margin-bottom: 49px; }
.news-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.news-track::-webkit-scrollbar { display: none; }
.news-item { scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.news-item::before { content: ""; width: 20px; height: 14px; margin: 3px 0 -4px; background: url(../img/figma/ic-quote.svg) center / contain no-repeat; }
.news-item h3 { font-size: 16px; line-height: 21px; font-weight: 700; color: var(--n-1500); letter-spacing: .01em; }
.news-item h3 a { color: inherit; }
.news-item h3 a:hover { color: var(--brand-1000); }
.meta { display: flex; gap: 24px; font-size: 12px; line-height: 14px; letter-spacing: .05em; margin-top: -8px; }
.meta b { font-weight: 800; color: var(--n-800); min-width: 78px; }
.meta span { font-weight: 500; color: var(--brand-700); }
.news-item p { margin: 4px 0 0; font-size: 14px; line-height: 18px; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.news-item .link-u { align-self: flex-start; }
.news-dots, .dots { display: flex; justify-content: center; gap: 3px; margin-top: 40px; }
.dots:empty, .news-dots:empty { display: none; }
.news-dots button, .dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #e8e8e8; cursor: pointer; transition: .3s; }
.news-dots button.active, .dots button.active { width: 17px; border-radius: 2px; background: var(--brand-1000); }

/* Form đăng ký tư vấn (kính, đè lên chân trang) */
.lead { position: relative; z-index: 2; padding: 115px 0 0; background: linear-gradient(180deg, var(--n-400) 0, #f4f6f6 37%, #ebf4f4 75%, #cdeceb 100%) top / 100% calc(100% - 44px) no-repeat; }
.home-page .lead { padding-top: 60px; background: linear-gradient(180deg, #eef5f5 0, #cdeceb 100%) top / 100% calc(100% - 44px) no-repeat; }
.lead-head { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-bottom: 34px; }
.lead-head h2 { font-size: 26px; line-height: 31px; font-weight: 700; color: var(--n-1500); max-width: 386px; }
.lead-head .rich { max-width: 588px; font-size: 16px; line-height: 21px; text-align: justify; }
.lead-head .rich strong { color: var(--text-body); }
.lead-box { padding: 70px 100px 81px; overflow: hidden; }
.lead-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; border-radius: 0 0 20px 20px; pointer-events: none; background: linear-gradient(180deg, rgba(0, 130, 145, 0), rgba(0, 130, 145, .1)); }
.lead-form .fields { display: grid; grid-template-columns: repeat(3, 306px); gap: 24px; margin-bottom: 31px; }
.fld { position: relative; display: block; }
.fld input { width: 100%; height: 37px; border: 0; border-bottom: 1px solid var(--brand-700); border-radius: 0 0 0 6px; background: transparent; padding: 8px 14px; font-family: var(--font-form); font-size: 14px; font-weight: 700; color: var(--n-1500); line-height: 21px; }
.fld .lbl { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-form); font-size: 14px; font-weight: 700; color: var(--n-1500); pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.fld input:focus { outline: none; border-bottom: 2px solid var(--sec-1200); }
.fld input:focus + .lbl { opacity: .45; }
.fld input:not(:placeholder-shown) + .lbl { opacity: 0; }
.lead-form .ask { font-weight: 700; font-size: 14px; line-height: 18px; color: var(--n-1300); margin-bottom: 12px; padding: 0; }
.lead-form .radios { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-bottom: 32px; }
.radio { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--n-1300); line-height: 18px; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio .ico { width: 15px; height: 15px; background: url("../img/figma/radio-off.svg") center/contain no-repeat; flex: none; }
.radio input:checked + .ico { background-image: url("../img/figma/radio-on.svg"); }
.radio input:checked ~ span:last-child { font-weight: 700; color: var(--brand-1300); }
.radio:hover span:last-child { color: var(--brand-1300); }
.radio input:focus-visible + .ico { outline: 2px solid var(--sec-1000); outline-offset: 2px; border-radius: 50%; }
.lead-form .btn { min-width: 165px; }
.lead-form .alert { margin-bottom: 20px; }

/* ---------- Chân trang ---------- */
.site-footer { position: relative; margin-top: -44px; padding-top: 126px; background: var(--sec-1300); color: #fff; }
.site-footer.flat { margin-top: 0; padding-top: 126px; }
.about-page .site-footer { margin-top: -50px; padding-top: 175px; }
.footer-top { display: grid; grid-template-columns: 384px 282px 180px 282px; gap: 24px; }
.footer-brand { display: flex; flex-direction: column; gap: 30px; }
.footer-brand img { width: 226px; height: 95px; object-fit: contain; object-position: left; }
.footer-brand strong { font-size: 22px; line-height: 26px; font-weight: 800; text-transform: uppercase; }
.footer-col h3 { color: #fff; font-size: 18px; line-height: 23px; font-weight: 800; margin-bottom: 12px; }
.footer-col p { font-size: 14px; line-height: 18px; margin: 0 0 4px; }
.footer-col li { font-size: 14px; line-height: 18px; }
.footer-col ul li::marker, .contact-col ul li::marker { font-size: .7em; }
.footer-col ul { margin: 0; padding-left: 20px; }
.footer-col a { color: #fff; }
.footer-col a:hover { color: var(--info-400); }
.footer-links a { text-decoration: underline; text-decoration-thickness: 5%; }
.footer-hours { margin-top: 8px; }
.footer-hours p { font-size: 13px; margin: 0; }
.profile-pill { display: inline-flex; margin-top: 13px; background: #fff; color: var(--brand-1000) !important; border-radius: 40px; padding: 4px 10px; font-size: 14px; line-height: 18px; font-weight: 700; text-decoration: none !important; }
.profile-pill:hover { background: var(--info-400); }
.footer-map { display: inline-block; margin-top: 30px; font-size: 18px; line-height: 23px; font-weight: 800; color: #fff !important; text-decoration: none !important; }
.footer-map:hover { color: var(--info-400) !important; }
.footer-bottom { margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .7); padding: 24px 0 31px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-social span { min-width: 179px; }
.footer-social { display: flex; align-items: center; gap: 18px; font-size: 16px; line-height: 21px; font-weight: 500; letter-spacing: .01em; }
.footer-social .icons { display: flex; gap: 8px; }
.footer-social img { width: 20px; height: 20px; transition: transform .2s; }
.footer-social a:hover img { transform: scale(1.12); }
.copyright { font-size: 14px; line-height: 18px; font-weight: 700; color: rgba(255, 255, 255, .6); margin: 0; }

/* ---------- Nút nổi ---------- */
.float-actions { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.float-btn { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); border: 0; cursor: pointer; font-weight: 700; font-size: .75rem; }
.float-btn .icon { width: 22px; height: 22px; }
.float-btn.zalo { background: #0068ff; }
.float-btn.call { background: var(--brand-1300); animation: pulse 2s infinite; }
.float-btn.to-top { background: #fff; color: var(--brand-1300); opacity: 0; visibility: hidden; transition: .3s; }
.float-btn.to-top .icon { transform: rotate(180deg); }
.float-btn.to-top.show { opacity: 1; visibility: visible; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 101, 137, .45); } 70% { box-shadow: 0 0 0 16px rgba(0, 101, 137, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 101, 137, 0); } }

/* ==========================================================================
   Trang con
   ========================================================================== */
/* Banner trang con */
.page-hero { position: relative; height: 285px; background: var(--hero-img, url("../img/figma/hero-solutions.jpg")) center bottom / cover no-repeat; background-color: #e6f5f6; }
.page-hero .container { padding-top: 97px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: .05em; margin-bottom: 24px; color: var(--n-1000); }
.breadcrumb a { color: var(--n-1000); }
.breadcrumb a:hover { color: var(--brand-1000); }
.breadcrumb [aria-current], .breadcrumb a:last-child:not(:first-child), .breadcrumb a:has(+ .mob-only) { color: var(--brand-700); }
.page-hero .hero-title-text { margin: 0; font-family: var(--font-display); font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .01em; color: var(--brand-1300); max-width: 760px; }
.page-hero .hero-title-text span { display: block; }
.page-hero .hero-title-text span + span { color: var(--sec-1000); }
.page-hero .hero-title-text .desk-only + .mob-only { color: var(--brand-1300); }
.mob-only { display: none !important; }

/* Khối giới thiệu trang con: chữ trái + hình phải */
.page-intro { position: relative; padding: 80px 0 100px; overflow: hidden; }
.intro-grid { display: grid; grid-template-columns: 485px 1fr; gap: 128px; align-items: start; }
.intro-text { display: flex; flex-direction: column; gap: 24px; }
.intro-text.wide { max-width: 588px; gap: 54px; }
.intro-lead { display: flex; flex-direction: column; gap: 20px; }
.intro-lead .rich { text-align: justify; }
.intro-lead .rich p { margin-bottom: 18px; }
.intro-lead .rich > :last-child { margin-bottom: 0; }
.intro-lead .rich strong { color: var(--text-body); }
.intro-lead .rich h4 { font-size: 18px; line-height: 23px; font-weight: 500; color: var(--text-body); margin: 0 0 16px; text-align: justify; }
.intro-heads { display: flex; flex-direction: column; gap: 8px; }
.intro-heads .tagline { margin-top: 4px; }
.intro-heads .social-proof { margin-top: 16px; }
.intro-extra { position: relative; margin: 18px 0 0; padding-top: 14px; font-size: 18px; line-height: 23px; font-weight: 500; color: var(--n-1000); text-align: justify; }
.intro-extra::before { content: ""; position: absolute; top: 0; left: 0; width: 180px; border-top: 1px solid rgba(0, 147, 164, .4); }
.intro-visual { position: relative; min-height: 400px; }
.intro-visual .glow { position: absolute; width: 361px; height: 361px; right: 0; top: 0; border-radius: 50%; background: radial-gradient(circle, #d7eff1 0, rgba(221, 243, 244, .91) 46%, rgba(239, 255, 254, .6) 100%); filter: blur(35px); pointer-events: none; }
.intro-visual .crop-grid { margin-top: 59px; }
/* Công nghệ: ảnh tròn + 3 thẻ */
.tech-page .page-intro { padding-bottom: 166px; }
.tech-visual { height: 454px; margin-top: -16px; }
.tech-visual .tech-circle { position: absolute; left: 0; top: 8px; width: 362px; height: auto; }
.tech-visual .step-cards { left: auto; right: 0; top: 237px; width: 457px; gap: 14px; }
.tech-visual .step-card:nth-child(1) { margin-left: 30px; }
.tech-visual .step-card:nth-child(2) { margin-left: 120px; }
.tech-visual .step-card:nth-child(3) { margin-left: 0; }
/* Gia công: ảnh + 3 thẻ */
.oem-intro-visual { height: 495px; margin-top: 61px; }
.oem-intro-visual .glow { width: 553px; height: 553px; right: -60px; top: -120px; filter: blur(110px); }
.oem-intro-img { position: absolute; left: 0; top: 80px; width: 486px; height: 377px; object-fit: cover; border-radius: 10px; }
.oem-intro-visual .step-cards { left: 129px; top: 279px; width: 457px; }
.oem-intro-visual .step-card:nth-child(1) { margin-left: 30px; }
.oem-intro-visual .step-card:nth-child(2) { margin-left: 120px; }
.oem-intro-visual .step-card:nth-child(3) { margin-left: 0; }
.oem-intro-visual .step-ico svg { color: var(--brand-1200); }
.oem-intro .intro-text, .products-intro .intro-text { gap: 51px; }
.oem-intro .intro-extra, .products-intro .intro-extra { margin-top: -9px; }
/* Sản phẩm: ảnh minh hoạ + chú thích */
.products-visual { width: 640px; margin: -60px 0 0 -32px; aspect-ratio: 640 / 690; min-height: 0; container-type: inline-size; }
.products-visual .glow { width: 86%; height: 80%; left: 10%; top: 19%; filter: blur(110px); background: radial-gradient(circle, #d7eff1 0, rgba(221, 243, 244, .91) 46%, rgba(239, 255, 254, .6) 100%); }
.products-visual > img { position: relative; width: 100%; height: auto; }
.callout { position: absolute; margin: 0; padding: 1.25cqw 1.9cqw; background: #fff; border: 1px solid var(--sec-1000); border-radius: 10px; font-size: max(2.19cqw, 10px); line-height: 1.29; color: var(--text-body); font-weight: 400; transition: box-shadow .3s; }
.callout strong { font-weight: 700; }
.callout:hover { box-shadow: var(--shadow-soft); }
.callout.c1 { left: 37.97%; top: 43.48%; width: 43.3%; }
.callout.c2 { left: 15.63%; top: 73.04%; width: 42.5%; }
.callout.c3 { left: 54.53%; top: 85.22%; width: 42.5%; }
/* Đường cong trắng phân tách (Gia công, Sản phẩm): nền trắng phồng xuống phần xám bên dưới */
.oem-intro, .products-intro { background: #fff; padding-bottom: 85px; overflow: visible; overflow-x: clip; }
.oem-intro::after, .products-intro::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -110px; height: 220px; background: #fff; border-radius: 50%; pointer-events: none; }
.oem-intro .container, .products-intro .container { position: relative; z-index: 1; }
.oem-intro + .oem-capacity { padding-top: 218px; }
.products-intro + .product-sections { padding-top: 198px; }

/* ---------- Giới thiệu ---------- */
.about-overview { position: relative; padding: 115px 0 46px; overflow: hidden; }
.about-overview .container { position: relative; z-index: 1; }
.about-overview .intro-lead { gap: 12px; }
.about-overview .intro-lead .rich { text-align: left; }
.about-overview .intro-heads .display { margin-top: 0; }
.about-overview .intro-extra { margin-top: -12px; }
.about-rice { position: absolute; left: calc(50% + 216px); top: 0; width: 504px; max-width: none; height: auto; pointer-events: none; }
.about-mindset { position: relative; padding: 81px 0 81px; background: radial-gradient(ellipse at center, rgba(247, 247, 247, 1) 0, rgba(255, 255, 255, .5) 100%), var(--bg, none) center / cover no-repeat; }
.mindset-head { display: grid; grid-template-columns: 384px 687px; gap: 27px; margin-bottom: 60px; }
.mindset-head > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.mindset-head .rich { color: var(--text-bold); text-align: justify; }
.mindset-head .rich p { margin-bottom: 12px; }
.mindset-head .rich p:last-child { margin-bottom: 0; }
.mindset-head .rich p + p { color: var(--text-body); }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-card { padding: 24px 20px; border-radius: 8px; background: var(--n-300); min-height: 203px; box-shadow: 2px 3px 8px rgba(255, 255, 255, .1), 10px 10px 14px rgba(255, 255, 255, .09); transition: background-color .3s, box-shadow .35s var(--ease), transform .35s var(--ease); }
.stat-card .num { margin: 0 0 16px; }
.stat-card strong { display: block; font-size: 34px; line-height: 40px; font-weight: 800; color: var(--sec-1200); }
.stat-card em { display: block; font-style: normal; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--sec-700); }
.stat-card p:last-child { margin: 0; font-size: 14px; line-height: 18px; color: var(--text-bold); text-align: justify; }
.stat-card:hover { background: #fff; box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.about-rnd { position: relative; min-height: 796px; background: var(--bg, #def3f2) center / cover no-repeat; }
.rnd-flower { position: absolute; left: 0; top: 0; width: 601px; height: auto; pointer-events: none; }
.rnd-panel { position: relative; margin-left: calc(50% - 90px); max-width: 810px; min-height: 698px; background: var(--sec-1200); border-radius: 0 0 0 40px; color: #fff; }
.rnd-inner { max-width: 690px; padding: 68px 0 64px 102px; display: flex; flex-direction: column; gap: 8px; }
.rnd-inner .pill-tag { margin-bottom: 0; }
.rnd-inner .h3 { color: #fff; margin-bottom: 16px; }
.rnd-inner .rich { max-width: 588px; font-size: 14px; line-height: 18px; text-align: justify; }
.rnd-inner .rich h3 { font-size: 18px; line-height: 23px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.rnd-inner .rich p { margin: 0 0 32px; }
.rnd-inner .rich h3 + p { margin-bottom: 32px; }
.rnd-inner .rich ol { list-style: none; counter-reset: step; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.rnd-inner .rich ol li { counter-increment: step; background: var(--sec-900); border-radius: 4px; padding: 8px 12px; transition: background-color .25s, transform .25s; }
.rnd-inner .rich ol li::before { content: counter(step) ". "; }
.rnd-inner .rich ol li:hover { background: #4fbac4; transform: translateX(4px); }
.rnd-inner .rich strong { color: #fff; }
.rnd-inner .rich p:last-child { margin-bottom: 0; }
.about-crops { padding: 143px 0 105px; }
.about-crops .crop-orbit { height: 502px; }
.about-crops .crop-orbit::before { top: 288px; }
.about-crops .crop-orbit::after { left: calc(50% - 98px); top: 4px; width: 444px; height: 444px; transform: none; background: #def3f2; filter: blur(105px); }
.about-crops .crop-card { height: auto; min-height: 207px; justify-content: flex-start; padding: 25px 20px; gap: 16px; }
.about-crops .crop-card span { margin-bottom: -2px; }
.about-crops .crop-orbit .crop-pos-1 { left: auto; right: 101px; top: 295px; }
.about-crops .crop-orbit .crop-pos-2 { right: 0; top: 0; }
.about-crops .crop-orbit .crop-pos-3 { left: 0; top: 0; }
.about-crops .crop-orbit .crop-pos-4 { left: 104px; top: 286px; }
.crop-orbit-visual { position: absolute; left: 300px; top: -112px; width: 600px; height: auto; z-index: 1; pointer-events: none; }
.about-catalogue { position: relative; min-height: 713px; display: flex; align-items: flex-start; background: var(--bg, #def3f2) center / cover no-repeat; }
.catalogue-panel { flex: 0 0 calc(50% - 12px); min-height: 497px; background: var(--sec-1200); border-radius: 0 0 40px 0; color: #fff; display: flex; justify-content: flex-end; }
.catalogue-inner { width: calc(var(--container) / 2 - 12px); margin-right: 0; padding: 80px 40px 104px 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 588px; }
.catalogue-inner .display { color: #fff; margin-bottom: 16px; }
.catalogue-inner .rich { max-width: 384px; font-size: 14px; line-height: 18px; margin-bottom: 32px; text-align: justify; }
.catalogue-inner .btn { min-width: 155px; min-height: 39px; }
.catalogue-cover { flex: 1; display: flex; justify-content: flex-start; padding: 74px 0 26px 121px; }
.catalogue-cover img { width: 458px; max-width: 100%; height: auto; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.catalogue-cover a:hover img { transform: translateY(-6px); }
.about-video { position: relative; }
.video-poster { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: pointer; overflow: hidden; }
.video-poster > img:first-child { width: 100%; height: auto; aspect-ratio: 1440 / 809; object-fit: cover; }
.video-poster .play { position: absolute; left: 50%; top: 50%; width: 95px; height: 70px; transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.video-poster:hover .play { transform: translate(-50%, -50%) scale(1.1); }
.video-poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.about-gallery { position: relative; z-index: 2; padding: 88px 0 0; background: linear-gradient(180deg, var(--n-400) 0, #f4f6f6 37%, #ebf4f4 75%, #cdeceb 100%) top / 100% calc(100% - 50px) no-repeat; }
.gallery-box { padding: 71px 102px 138px; overflow: hidden; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gallery-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; border-radius: 0 0 20px 20px; pointer-events: none; background: linear-gradient(180deg, rgba(0, 130, 145, 0), rgba(0, 130, 145, .25)); }
.gallery-box .carousel-track { grid-auto-columns: calc((100% - 57px) / 4); gap: 19px; }
.gallery-box .carousel-item { border-radius: 10px; overflow: hidden; aspect-ratio: 234 / 231; }
.gallery-box .carousel-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-box .carousel-item:hover img { transform: scale(1.06); }

/* ---------- Carousel / slideshow chung ---------- */
.carousel { position: relative; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { scroll-snap-align: start; min-width: 0; }
.slider-btn { position: absolute; z-index: 3; width: 30px; height: 30px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid #fff; color: #fff; transition: background-color .25s, transform .25s; }
.slider-btn svg { width: 30px; height: 30px; }
.slider-btn.grey { border-color: var(--n-1000); color: var(--n-1000); }
.slider-btn:hover { background: rgba(255, 255, 255, .35); transform: scale(1.08); }
.slider-btn.grey:hover { background: var(--brand-1300); border-color: var(--brand-1300); color: #fff; }
.slideshow { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 486 / 478; background: #fff; }
.slideshow > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.slideshow > img.active { opacity: 1; }
.slideshow .slider-btn { top: 50%; transform: translateY(-50%); }
.slideshow .slider-btn:hover { transform: translateY(-50%) scale(1.08); }
.slideshow .prev { left: 26px; } .slideshow .next { right: 20px; }

/* ---------- Công nghệ ---------- */
.tech-list { position: relative; padding: 84px 0 105px; background: var(--bg, none) center / cover no-repeat, #f7f7f7; }
.tech-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; }
.tech-carousel .dots { margin-top: 24px; }
.tech-item { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 5px; background: #fff; transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.tech-item .thumb { display: block; border-radius: 5px; overflow: hidden; aspect-ratio: 344 / 265; margin-bottom: 26px; }
.tech-item .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tech-item h3 { font-size: 18px; line-height: 23px; font-weight: 700; }
.tech-item h3 a { color: var(--brand-1300); }
.tech-item p { margin: 0 0 6px; font-size: 14px; line-height: 18px; text-align: justify; flex: 1; }
.tech-item .link-u { color: var(--brand-900); align-self: flex-start; }
.tech-item:hover { box-shadow: var(--shadow-grey); transform: translateY(-4px); }
.tech-item:hover .thumb img { transform: scale(1.05); }
.features { position: relative; padding: 75px 0 0; background: linear-gradient(180deg, #efefef 0, #f4f6f6 83%, #f0f5f5 100%); }
.tech-page .lead { background: linear-gradient(180deg, #f0f5f5 0, #ebf4f4 60%, #cdeceb 100%) top / 100% calc(100% - 44px) no-repeat; }
.features .section-title { margin-bottom: 48px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 25px; padding-bottom: 60px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(0, 147, 164, 0), rgba(0, 147, 164, .6) 49%, rgba(0, 147, 164, 0)) 1; }
.feature { display: grid; grid-template-columns: 85px 1fr; transition: transform .3s var(--ease); }
.feature.rev { grid-template-columns: 1fr 85px; }
.feature.rev .feature-ico { order: 2; }
.feature.rev .feature-txt { text-align: right; }
.feature-ico { width: 85px; height: 85px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--brand-1300); transition: background-color .3s, color .3s; }
.feature-ico svg, .feature-ico img { width: 30px; height: 30px; object-fit: contain; }
.feature-txt { background: #fff; border-radius: 12px; padding: 10px 16px; min-height: 85px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .3s; }
.feature-txt h3 { font-size: 16px; line-height: 21px; font-weight: 700; letter-spacing: .01em; color: var(--brand-1300); }
.feature-txt p { margin: 0; font-size: 14px; line-height: 18px; color: var(--text-body); }
.feature:not(.rev) .feature-txt p { text-align: justify; }
.feature:hover .feature-ico { background: var(--sec-1200); color: #fff; }
.feature:hover .feature-txt { box-shadow: var(--shadow-row); }
.process .feature-grid { grid-template-columns: repeat(6, 1fr); }
.process .feature { grid-column: span 2; }
.process .feature:nth-child(4) { grid-column: 2 / span 2; }
.process .feature-txt p { text-align: justify; }
.process .feature.rev .feature-txt p { text-align: right; }

/* ---------- FAQ ---------- */
.faq { padding: 26px 0 136px; background: linear-gradient(180deg, rgba(247, 247, 247, 0) 0%, #eef6f6 45%, #d3eceb 100%); }
.faq .section-title { margin-bottom: 64px; }
.faq-list { max-width: 792px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #d5e7ef; }
.faq-item + .faq-item { margin-top: 12px; }
.faq-item summary { list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 8px 0; cursor: pointer; font-size: 16px; line-height: 21px; font-weight: 500; letter-spacing: .2px; color: var(--n-1000); transition: color .2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { width: 15px; height: 15px; flex: none; margin-top: 2px; background: url(../img/icons/faq-add.svg) center / contain no-repeat; transition: transform .3s; }
.faq-item:not([open]) summary { align-items: center; }
.faq-item:not([open]) summary i { margin-top: 0; }
.faq-item summary:hover { color: var(--brand-1300); }
.faq-item[open] { border-bottom-color: #58a1bd; }
.faq-item[open] summary { color: var(--brand-1000); font-weight: 700; }
.faq-item[open] summary i { background-image: url(../img/icons/faq-remove.svg); }
.faq-item .rich { padding: 0 102px 8px 0; text-align: justify; font-size: 14px; line-height: 18px; color: var(--text-bold); }

/* ---------- Gia công ---------- */
.oem-capacity { padding: 0 0 100px; }
.oem-capacity .oem-grid { grid-template-columns: 486px 1fr; gap: 128px; }
.oem-capacity .oem-text { margin-top: 0; gap: 64px; }
.oem-capacity .oem-timeline { margin-left: 164px; }
.capacity-slider .dots { margin-top: 40px; }
.product-carousel { padding: 0 0 80px; }
.product-carousel .section-title { margin-bottom: 47px; }
.product-carousel .carousel-track { grid-auto-columns: calc((100% - 72px) / 4); }
.product-carousel .slider-btn { top: 125px; }
.product-carousel .prev { left: 18px; } .product-carousel .next { right: 18px; }
.product-carousel .dots { margin-top: 42px; }
.process { padding-top: 75px; background: linear-gradient(180deg, #fff 0, #f4f6f6 100%); }
.oem-page .lead { padding-top: 120px; background: linear-gradient(180deg, #f4f6f6 0, #ebf4f4 75%, #cdeceb 100%) top / 100% calc(100% - 44px) no-repeat; }

/* Thẻ sản phẩm */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-card { display: flex; flex-direction: column; min-width: 0; }
.product-card .thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 5px; background: #fff; overflow: hidden; margin-bottom: 24px; transition: box-shadow .35s var(--ease); }
.product-card .thumb img { width: 49.6%; height: 89%; object-fit: contain; transition: transform .5s var(--ease); }
.product-card:hover .thumb { box-shadow: var(--shadow-grey); }
.product-card:hover .thumb img { transform: scale(1.05) translateY(-2%); }
.badge { position: absolute; top: 18px; left: 18px; background: var(--badge); color: #fff; font-size: 14px; line-height: 18px; font-weight: 500; padding: 4px 10px; border-radius: 10px; }
.product-card h3 { font-size: 16px; line-height: 21px; font-weight: 700; letter-spacing: .01em; margin-bottom: 8px; }
.product-card h3 a { color: var(--n-1500); }
.product-card h3 a:hover { color: var(--brand-1300); }
.product-card .summary { margin: 0 0 18px; font-size: 14px; line-height: 18px; min-height: 36px; color: var(--text-body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.product-card .highlight { margin: auto 0 0; padding: 10px; border-radius: 4px; background: var(--info-200); font-size: 14px; line-height: 18px; color: var(--text-body); }
.card-actions { margin-top: auto; display: flex; gap: 12px; }
.card-actions .btn { flex: 1; min-width: 0; padding-left: 8px; padding-right: 8px; }
.product-sections { padding: 0 0 60px; }
.products-page .product-sections { padding-top: 40px; }
.products-page .products-intro + .product-sections { padding-top: 194px; }
.product-group { margin-bottom: 64px; }
.product-group .section-title { margin-bottom: 48px; }
.sub-tabs { display: flex; gap: 20px; width: max-content; max-width: 100%; margin: 0 0 32px; border-bottom: 1px solid #ddd; overflow-x: auto; scrollbar-width: none; }
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs button { flex: none; border: 0; background: none; padding: 5px; margin-bottom: -1px; font-size: 16px; line-height: 21px; font-weight: 500; color: var(--n-1000); cursor: pointer; border-radius: 2px 2px 0 0; transition: color .2s, background-color .2s; white-space: nowrap; }
.sub-tabs button:hover { color: var(--brand-1300); }
.sub-tabs button.active { background: #ddd; color: var(--n-1500); font-weight: 700; font-style: italic; }
.tab-pane { display: none; }
.tab-pane.active { display: grid; }

/* ---------- Tin tức ---------- */
.news-page { padding: 97px 0 120px; }
.news-cats-head { margin-bottom: 48px; }
.news-cats-head .h3 { margin-bottom: 12px; }
.news-cats-head p { margin: 0; color: var(--text-body); }
.news-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 97px; }
.news-cat { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 282 / 217; border-radius: 10px; overflow: hidden; background: var(--n-500); }
.news-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-cat-label { position: relative; width: 72%; height: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--sec-1300); color: #fff; border-radius: 8px 8px 0 0; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: .2px; text-align: center; transition: background-color .3s, height .35s var(--ease); }
.news-cat-label .ico { width: 30px; height: 30px; }
.news-cat:hover .news-cat-label, .news-cat.active .news-cat-label { background: var(--brand-1300); height: 56%; }
.news-cat:hover img { transform: scale(1.06); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 24px; }
.post-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.post-card .thumb { position: relative; display: block; aspect-ratio: 384 / 190; border-radius: 10px; overflow: hidden; background: var(--n-300); margin-bottom: 12px; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card .play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 101, 137, .9); color: #fff; display: flex; align-items: center; justify-content: center; }
.post-card h3 { font-size: 16px; line-height: 21px; font-weight: 700; letter-spacing: .2px; min-height: 42px; }
.post-card h3 a { color: var(--n-1500); }
.post-card h3 a:hover { color: var(--brand-1000); }
.post-card .meta { margin-top: -8px; }
.post-card p { margin: 4px 0 0; font-size: 14px; line-height: 18px; color: var(--text-body); min-height: 72px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .link-u { align-self: flex-start; }
.post-card:hover .thumb img { transform: scale(1.05); }
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 64px; }
.pagination a, .pagination .dots { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--n-900); font-size: 12px; line-height: 14px; letter-spacing: .6px; font-weight: 500; }
.pagination a.active { background: var(--info-300); color: var(--brand-1000); }
.pagination a:hover { background: var(--brand-1300); color: #fff; }
.pagination .dots { background: none; }

/* ---------- Chi tiết bài viết ---------- */
.detail { padding: 80px 0 120px; }
.detail-grid { display: grid; grid-template-columns: 792px 384px; gap: 24px; align-items: start; }
.detail-main { min-width: 0; }
.detail-gallery { margin-bottom: 80px; }
.detail-gallery .main-slide { position: relative; aspect-ratio: 790 / 469; border-radius: 8px; overflow: hidden; background: #fff; }
.detail-gallery .main-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.detail-gallery .main-slide img.active { opacity: 1; }
.detail-gallery .slider-btn { top: 50%; margin-top: -15px; }
.detail-gallery .prev { left: 15px; } .detail-gallery .next { right: 15px; }
.detail-gallery .thumbs { display: flex; justify-content: center; gap: 17px; margin-top: 24px; flex-wrap: wrap; }
.detail-gallery .thumbs button { width: 62px; height: 62px; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer; transition: transform .2s; }
.detail-gallery .thumbs button:hover { transform: translateY(-2px); }
.detail-gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.detail-label { margin: 0 0 12px; font-size: 16px; line-height: 21px; font-weight: 500; letter-spacing: .01em; color: var(--text-muted); }
.detail-article h1 { font-family: var(--font-display); font-size: 42px; line-height: 50px; font-weight: 700; letter-spacing: .01em; color: #000; }
.detail-summary { margin-top: 35px; padding: 15px 30px; border-radius: 8px; background: #f1f1f1; }
.detail-summary p { margin: 0; font-size: 18px; line-height: 23px; font-weight: 600; font-style: italic; color: var(--text-body); }
.detail-project { margin-top: 32px; display: flex; flex-direction: column; gap: 4px; }
.detail-project p { margin: 0; font-size: 14px; line-height: 18px; color: var(--text-body); text-align: justify; }
.detail-project .loc { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-bold); }
.detail-project .loc img { width: 26px; height: 26px; }
.detail-article .video-embed { margin-top: 24px; }
.detail-content { margin-top: 24px; font-size: 14px; line-height: 18px; color: var(--text-muted); }
.detail-content p { margin: 0 0 18px; }
.detail-content h2 { font-size: 22px; line-height: 26px; font-weight: 600; color: #000; margin: 32px 0 32px; }
.detail-content h3 { font-size: 18px; line-height: 23px; font-weight: 600; color: #000; margin: 24px 0 14px; }
.detail-content img { width: 100%; border-radius: 0; margin: 24px 0; }
.detail-content ul { margin: 0 0 18px; padding-left: 21px; }
.detail-content li::marker { font-size: .8em; }
.detail-products { margin-top: 40px; }
.detail-products h2 { font-size: 22px; color: var(--brand-1300); margin-bottom: 24px; }
.share { display: flex; align-items: center; gap: 5px; margin-top: 48px; }
.share span { min-width: 95px; font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: .05em; color: var(--text-muted); margin-right: 11px; }
.share a { display: inline-flex; width: 16px; height: 16px; color: var(--brand-1300); }
.share a svg { width: 16px; height: 16px; }
.share a:hover { color: var(--sec-1000); transform: translateY(-1px); }
.detail-side { display: flex; flex-direction: column; gap: 32px; position: sticky; top: 100px; }
.zalo-box { overflow: hidden; }
.zalo-top { position: relative; height: 161px; padding: 17px 16px; background: var(--bg, var(--sec-1000)) center / cover no-repeat; }
.zalo-top .qr { display: inline-block; background: #fff; padding: 8px; transition: transform .3s var(--ease); }
.zalo-top .qr img { width: 112px; height: 112px; }
.zalo-top .qr:hover { transform: scale(1.04); }
.zalo-body { background: var(--sec-1200); color: #fff; padding: 23px 20px 43px; border-radius: 0 0 0 20px; }
.zalo-title { margin: 0 0 4px; font-family: var(--font-display); font-size: 45px; line-height: 63px; font-weight: 700; }
.zalo-body .rich { font-size: 16px; line-height: 22px; font-weight: 500; }
.zalo-body .rich a { color: #fff; font-weight: 700; text-decoration: underline; }
.detail-side .actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.detail-side .actions .link-u + .link-u { margin-left: -8px; }
.detail-side .actions .btn { padding: 8px 18px; }
.detail-side .actions + .side-cats { margin-top: 16px; }
.side-cats { padding: 25px; border-radius: 8px; background: #f1f1f1; }
.side-cats h2 { font-size: 26px; line-height: 31px; font-weight: 600; color: var(--brand-1300); margin-bottom: 12px; }
.side-cats p { margin: 0 0 32px; color: var(--text-body); }
.side-cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.side-cats a { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: .01em; color: var(--text-bold); }
.side-cats a .ico { width: 20px; height: 20px; color: var(--brand-1300); display: inline-flex; }
.side-cats a .ico svg, .side-cats a .ico img { width: 20px; height: 20px; }
.side-cats a:hover { color: var(--brand-1300); transform: translateX(3px); }
.featured-projects { padding: 0 0 80px; }
.featured-projects .section-title { margin-bottom: 38px; }
.featured-box { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 132px; padding: 30px 50px; border: 1px solid var(--brand-1300); border-radius: 10px; }
.featured-item { display: flex; align-items: center; gap: 27px; color: var(--brand-1300); }
.featured-item .num { flex: none; font-family: "Darker Grotesque", var(--font-display); font-size: 64px; line-height: 90px; font-weight: 900; }
.featured-item .ttl { font-family: var(--font-display); font-size: 22px; line-height: 29px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.featured-item:hover { color: var(--sec-1000); }
.related { padding: 0 0 120px; }
.related .section-title { margin-bottom: 48px; }
.related .slider-btn { top: 80px; }
.related .prev { left: 20px; } .related .next { right: 20px; }
.related .dots { gap: 1px; }
.related .dots button { width: 6px; height: 6px; background: var(--brand-300); }
.related .dots button.active { width: 17px; height: 6px; background: var(--brand-1000); }

/* ---------- Liên hệ ---------- */
.contact-info-section { padding: 80px 0 80px; }
.contact-grid { display: grid; grid-template-columns: 588px 1fr; gap: 24px; }
.contact-heading { font-size: 22px; line-height: 26px; font-weight: 800; color: var(--brand-1300); }
.contact-cols { display: grid; grid-template-columns: 282px 1fr; gap: 0 24px; }
.contact-cols hr { grid-column: 1 / -1; width: 100%; border: 0; height: 1px; margin: 24px 0 24px; background: linear-gradient(90deg, rgba(0, 147, 164, 0), rgb(0, 147, 164) 49%, rgba(0, 147, 164, 0)); opacity: .6; }
.contact-col h3 { font-size: 18px; line-height: 23px; font-weight: 800; color: #000; margin-bottom: 12px; }
.contact-col p, .contact-col li { margin: 0 0 4px; font-size: 14px; line-height: 18px; color: var(--text-body); }
.contact-col b { font-weight: 700; }
.contact-col a { color: var(--text-body); }
.contact-col a:hover { color: var(--brand-1000); }
.contact-col .hours { margin-top: 16px; }
.contact-col .hours p { margin: 0; font-size: 13px; }
.contact-col ul { margin: 0; padding-left: 21px; }
.contact-col li { font-size: 14px; line-height: 18px; margin: 0; }
.contact-cta { position: relative; min-height: 701px; background: var(--bg, url(../img/figma/contact-bg.jpg)) center / cover no-repeat; }
.contact-slogan { position: absolute; left: 0; top: 0; width: calc(50% - 12px); height: 622px; background: var(--sec-1200); border-radius: 0 0 40px 0; display: flex; justify-content: flex-end; }
.slogan-inner { width: calc(var(--container) / 2 - 12px); padding: 78px 0 0; color: #fff; }
.slogan-big { margin: 0; font-family: var(--font-display); font-size: 55px; line-height: 72px; font-weight: 900; text-transform: uppercase; }
.slogan-big span { display: block; }
.slogan-under { margin: 18px 0 8px; font-size: 18px; line-height: 31px; font-weight: 600; text-transform: uppercase; }
.slogan-under span { display: table; border-bottom: 1px solid #fff; line-height: 28px; }
.slogan-mid { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 60px; font-weight: 800; }
.slogan-small { margin: 0 0 35px; font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 700; }
.contact-form-wrap { position: relative; display: flex; justify-content: flex-end; padding-top: 76px; padding-bottom: 80px; }
.contact-slogan .btn { min-height: 39px; }
.contact-glass { width: 542px; display: flex; flex-direction: column; align-items: flex-end; gap: 32px; }
.glass-box.dark { width: 100%; padding: 30px 30px 35px; border-radius: 10px; background: rgba(247, 252, 252, .13); -webkit-backdrop-filter: blur(22px) saturate(120%); backdrop-filter: blur(22px) saturate(120%); color: #fff; }
.glass-box.dark::before { background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .45)); }
.glass-box.dark h2 { font-size: 26px; line-height: 31px; font-weight: 700; color: #fff; }
.glass-box.dark .rich { font-size: 14px; line-height: 18px; margin: 4px 0 22px; }
.fld.pill { margin-top: 24px; }
.glass-box.dark .rich + .fld.pill, .glass-box.dark input[type=hidden] + .fld.pill { margin-top: 0; }
.fld.pill input { height: 45px; border: 1px solid #eaf3f6; border-radius: 40px; background: rgba(255, 255, 255, .05); padding: 10px 14px; color: #fff; font-family: var(--font-form); }
.fld.pill .lbl { color: #fff; }
.fld.pill input:focus { border-width: 1px; border-color: #fff; background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.contact-glass .btn { min-width: 165px; }
.contact-glass .alert { margin-bottom: 16px; }
.map { background: #e5e3df; }
.map iframe { width: 100%; height: 603px; border: 0; display: block; }

/* ---------- Chi tiết sản phẩm (trang không có thiết kế riêng: dùng chung token) ---------- */
.with-sidebar { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.with-sidebar.right { grid-template-columns: 1fr 320px; }
.sidebar { position: sticky; top: 100px; display: grid; gap: 20px; }
.sidebar-box { background: #fff; border-radius: var(--radius); padding: 22px; }
.sidebar-box h3 { font-size: 16px; color: var(--brand-1300); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--n-500); }
.sidebar-box ul { list-style: none; margin: 0; padding: 0; }
.sidebar-box li a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text-body); font-size: 14px; }
.sidebar-box li a:hover, .sidebar-box li a.active { background: var(--info-200); color: var(--sec-1300); font-weight: 700; }
.sidebar-cta { background: var(--sec-1300); color: #e6f6f7; }
.sidebar-cta h3 { color: #fff; border-color: rgba(255, 255, 255, .25); }
.product-top { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.main-image { background: #fff; border-radius: var(--radius); aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.main-image img { width: 100%; height: 100%; object-fit: contain; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; aspect-ratio: 1; }
.thumbs button.active { border-color: var(--sec-1000); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { font-family: var(--font-display); font-size: 42px; line-height: 50px; color: var(--brand-1300); margin: 8px 0 14px; }
.product-info .lead-text { font-size: 16px; }
.spec { display: grid; grid-template-columns: max-content 1fr; margin: 24px 0; background: #fff; border-radius: var(--radius); overflow: hidden; }
.spec dt, .spec dd { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--n-300); }
.spec dt { font-weight: 700; color: var(--brand-1300); }
.spec dt:last-of-type, .spec dd:last-of-type { border-bottom: 0; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product-body { display: grid; grid-template-columns: 1fr 400px; gap: 40px; margin-top: 56px; align-items: start; }
.info-block { margin-bottom: 32px; }
.info-block h2 { font-size: 22px; color: var(--brand-1300); margin-bottom: 12px; }
.info-block .rich, .info-block p { font-size: 15px; line-height: 1.5; }
.check-list { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.check-list li { display: flex; gap: 10px; }
.check-list .icon { color: var(--sec-1000); margin-top: .2em; }
.card-form { background: #fff; border-radius: var(--radius); padding: 32px; }
.card-form h2 { font-size: 22px; color: var(--brand-1300); margin-bottom: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 16px 0 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-form); font-size: 14px; font-weight: 700; color: var(--n-1500); }
.field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--sec-1200); background: var(--info-200); border-radius: 6px 6px 0 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 -2px 0 var(--sec-1200); }
.section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.empty { padding: 40px; text-align: center; background: #fff; border-radius: var(--radius); }
.alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.alert-success { background: var(--info-300); color: var(--brand-1300); border: 1px solid var(--sec-700); }
.alert-error { background: #fdecf1; color: #9b1c47; border: 1px solid #f4bfd0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 24px; }
.gallery a { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery a:hover img { transform: scale(1.05); }
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; margin: 0 auto 24px; max-width: 960px; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.search-big { display: flex; gap: 10px; max-width: 720px; margin: 0 auto 40px; }
.result-title { font-size: 22px; color: var(--brand-1300); margin: 40px 0 20px; }
.error-page .error-code { font-family: var(--font-display); font-size: clamp(5rem, 12vw, 9rem); font-weight: 700; color: var(--sec-1000); line-height: 1; margin: 0; }
.page-hero.compact { height: auto; padding: 18px 0; background: #fff; }
.page-hero.compact .container { padding-top: 0; }

/* Lightbox + hiệu ứng xuất hiện */
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .9); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.lightbox img { max-height: 90vh; max-width: 100%; border-radius: 8px; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, .reveal { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } }
@media (hover: none) {
  /* Thiết bị cảm ứng: không giữ hiệu ứng hover sau khi chạm */
  .commit-card:hover, .stat-card:hover, .tech-item:hover { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
  .header-inner { gap: 24px; }
  .main-nav > ul { gap: 18px; }
  .header-actions { gap: 20px; }
  .split-126, .intro-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
  .oem-grid, .oem-capacity .oem-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .oem-visual > img { width: 90%; height: auto; aspect-ratio: 1; }
  .quick-tab-rest { gap: 60px; }
  .footer-top { grid-template-columns: 1.3fr 1fr .7fr 1fr; }
  .lead-form .fields { grid-template-columns: repeat(3, 1fr); }
  .lead-box { padding-left: 60px; padding-right: 60px; }
  .project-row { grid-template-columns: 180px 1fr 1.4fr 40px; }
  .project-row .title { margin-right: 0; }
  .detail-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .contact-grid { grid-template-columns: 1fr 1.4fr; }
  .mindset-head { grid-template-columns: 1fr 1.6fr; }
  .crop-orbit .crop-pos-1 { right: 12%; } .crop-orbit .crop-pos-4 { left: 12%; }
  .products-visual { width: 100%; margin-left: 0; }
  .catalogue-inner, .slogan-inner { width: auto; padding-left: var(--gutter); }
}
@media (max-width: 1100px) {
  .search-link span, .header-actions .hotline-pill { display: none; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-carousel .carousel-track { grid-auto-columns: calc((100% - 48px) / 3); }
  .commit-grid { grid-template-columns: repeat(2, 1fr); padding-top: 0; }
  .commit-card:hover { transform: translateY(-6px); }
  .commit-card { min-height: 0; }
  .product-body { grid-template-columns: 1fr 340px; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .feature-grid, .process .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .process .feature, .process .feature:nth-child(4) { grid-column: auto; }
  .tech-visual, .oem-intro-visual { transform: scale(.85); transform-origin: top left; }
}

/* ---------- Tablet & mobile (thiết kế mobile 402px) ---------- */
@media (max-width: 960px) {
  :root { --gutter: 16px; }
  .topbar { height: 29px; }
  .topbar-inner { justify-content: flex-end; gap: 20px; }
  .topbar a { font-size: 12px; line-height: 14px; gap: 4px; }
  .topbar a img { width: 12px; height: 12px; }
  .topbar a:nth-child(3) { display: none; }
  .site-header { box-shadow: none; }
  .header-inner { min-height: 74px; gap: 7px; }
  .nav-toggle { display: inline-flex; margin-left: -6px; }
  .logo img { width: 118px; height: 50px; }
  .main-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 86vw); background: var(--sec-1300); padding: 90px 22px 22px; transform: translateX(-100%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; overflow-y: auto; z-index: 150; }
  .main-nav.open { transform: none; visibility: visible; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 120; }
  /* Header (chứa menu) phải nằm trên lớp nền mờ, nếu không lớp nền che mất menu và chặn mọi thao tác */
  body.nav-open .site-header { z-index: 130; }
  .nav-toggle { position: relative; z-index: 160; }
  .header-actions { margin-left: auto; gap: 12px; position: relative; z-index: 160; }
  .search-link { display: none; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .15); display: flex; flex-wrap: wrap; align-items: center; }
  .main-nav > ul > li > a { flex: 1; padding: 14px 4px; color: #fff; }
  .sub-toggle { display: inline-flex; border: 0; background: none; color: #fff; padding: 10px; cursor: pointer; }
  .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; width: 100%; background: transparent; padding: 0 0 10px 12px; }
  .sub-menu a { color: #fff; }
  .has-sub.open .sub-menu { display: block; }
  .main-nav .mobile-search { display: flex; margin-top: 20px; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* Banner trang chủ */
  .hero { height: 260px; }
  .hero .slide picture img { object-position: 60% bottom; top: auto; height: 70%; }
  .hero .slide::after { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .93) 33%, rgba(255, 255, 255, .83) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, rgba(214, 239, 241, .8), rgba(255, 255, 255, 0) 60%); }
  .hero-content { justify-content: flex-start; padding-top: 54px; padding-bottom: 0; }
  .hero-eyebrow { font-size: 16px; line-height: 19px; }
  .hero-title { font-size: 28px; line-height: 34px; }
  .slider-dots { bottom: 70px; }
  .quick-tabs { margin-top: -27px; }
  .quick-tabs .container { display: block; }
  .quick-tabs .container > * { border-radius: 0; }
  .quick-tab-wrap, .quick-tabs .container { position: relative; }
  .quick-tabs .container::before { content: ""; position: absolute; inset: 0 var(--gutter); border-radius: 10px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .04); }
  .quick-tabs .container { display: flex; }
  .quick-tab-main, .quick-tab-rest { position: relative; flex: none; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .quick-tab-main::before, .quick-tab-rest::before { display: none; }
  .quick-tab-rest { flex: 1; display: flex; gap: 0; justify-content: space-around; }
  .quick-tabs a { height: 54px; font-size: 13px; line-height: 16px; font-weight: 500; gap: 5px; padding: 0 8px; letter-spacing: .01em; }
  .quick-tabs a img { width: 12px; height: 12px; }

  .about-home { padding: 57px 0 60px; }
  .about-home .inner, .split-126, .intro-grid, .oem-grid, .oem-capacity .oem-grid, .product-top, .product-body, .with-sidebar, .with-sidebar.right, .detail-grid, .contact-grid, .mindset-head { grid-template-columns: 1fr; gap: 36px; }
  .about-home .inner > *, .split-126 > *, .oem-grid > *, .intro-grid > * { min-width: 0; }
  .about-home .inner { gap: 47px; }

  /* Cây trồng */
  .crops-home { padding: 104px 0 60px; }
  .crop-orbit { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
  .crop-orbit::before { top: 120px; width: 600px; height: 600px; }
  .crop-orbit::after { top: 0; left: 30%; }
  .crop-orbit-title { position: static; transform: none; grid-column: 1 / -1; margin: 0 auto 77px; }
  .crop-orbit .crop-card, .crop-orbit.is-grid .crop-card { position: static; width: auto; }
  .crop-orbit .crop-pos-4 { order: 1; } .crop-orbit .crop-pos-3 { order: 2; } .crop-orbit .crop-pos-2 { order: 3; } .crop-orbit .crop-pos-1 { order: 4; }
  .crop-orbit.is-grid { padding-top: 0; }
  .crop-card, .crop-orbit .crop-card { height: 109px; padding: 20px 12px; gap: 12px; }

  .tech-home { padding: 60px 0 60px; }
  .tech-intro { gap: 32px; }
  .tech-intro .top { gap: 24px; }
  .tech-card { gap: 10px; padding: 10px 10px 10px 10px; }
  .tech-card .txt { width: auto; flex: 1; }
  .tech-card .thumb { width: 150px; height: 123px; }
  .tech-gallery .imgs img { width: 113px; height: 113px; }
  .tech-gallery { order: 2; }
  .tech-intro { display: contents; }
  .split-126 { display: flex; flex-direction: column; gap: 32px; }
  .tech-cards { order: 1; }

  .oem-home { padding: 60px 0 40px; }
  .oem-home .section-title { margin-bottom: 36px; }
  .oem-visual { height: auto; }
  .oem-visual > img { width: 100%; height: auto; aspect-ratio: 370 / 370; }
  .step-cards { position: relative; left: auto; top: auto; width: auto; margin-top: -150px; padding: 0; }
  .oem-text .heads .rich { text-align-last: auto; }
  .step-card { width: auto; max-width: 337px; }
  .step-card:nth-child(1) { margin-left: auto; margin-right: 0; }
  .step-card:nth-child(2) { margin-left: 0; margin-right: auto; }
  .step-card:nth-child(3) { margin-left: auto; margin-right: 0; }
  .oem-text { margin-top: 0; gap: 40px; }
  .oem-stats-wrap { align-items: stretch; }
  .oem-stats-wrap .btn-row { order: -1; }
  .oem-stats-block { flex-direction: row; gap: 40px; }
  .oem-timeline { margin: 0; width: 14px; height: auto; flex: none; }
  .oem-timeline::before { left: 6px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 1px solid rgba(0, 147, 164, .4); }
  .oem-timeline i:nth-child(1) { top: 40px; left: 0; } .oem-timeline i:nth-child(2) { top: calc(50% - 7px); left: 0; } .oem-timeline i:nth-child(3) { top: auto; bottom: 30px; left: 0; right: auto; }
  .oem-stats { grid-template-columns: 1fr; gap: 40px; flex: 1; }
  .oem-stat { text-align: left; }
  .oem-stat p { margin-top: 20px; font-size: 14px; line-height: 18px; letter-spacing: 0; }

  .commit { padding: 60px 0 60px; }
  .commit .section-title { margin-bottom: 36px; }
  .commit-grid { grid-template-columns: 1fr; gap: 24px; }
  .commit-card { gap: 26px; padding: 10px 10px 18px; }
  .commit-card:hover { transform: none; }

  .consult .container { padding-top: 70px; padding-bottom: 58px; }
  .consult-bg { width: 100%; height: 100%; top: 0; opacity: .6; }
  .consult::after { background: linear-gradient(180deg, rgba(247, 247, 247, .2) 0, rgba(247, 247, 247, .85) 100%), linear-gradient(90deg, var(--page-bg) 20%, rgba(247, 247, 247, .7) 100%); }
  .consult .sub { font-size: 18px; line-height: 23px; }
  .consult .sub b { font-size: 22px; line-height: 28px; }

  .projects-home { padding: 60px 0 40px; }
  .project-list { gap: 32px; }
  .project-row { grid-template-columns: 120px 1fr 40px; padding: 0; gap: 22px 12px; }
  .project-row img.thumb { width: 120px; height: 80px; }
  .project-row .title { grid-column: 2 / 4; font-size: 18px; text-align: justify; }
  .project-row .info { grid-column: 1 / 3; max-width: none; margin-left: 0; }
  .project-row .arrow { grid-row: 2; grid-column: 3; align-self: start; }
  .project-row:hover { background: none; box-shadow: none; }

  .news-home { padding: 60px 0 40px; }
  .news-track, .carousel-track, .related .carousel-track { grid-auto-columns: 100%; }
  .gallery-box .carousel-track { grid-auto-columns: calc((100% - 19px) / 2); }
  .product-carousel .carousel-track { grid-auto-columns: 100%; }

  .lead { padding-top: 60px; }
  .home-page .lead { padding-top: 40px; }
  .lead-head { flex-direction: column; align-items: flex-start; gap: 34px; margin-bottom: 34px; }
  .lead-head .rich { font-size: 18px; line-height: 23px; font-weight: 400; color: var(--n-1000); }
  .lead-box { padding: 40px 20px 100px; }
  .lead-form .fields { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .lead-form .radios { flex-direction: column; gap: 8px; }

  .site-footer { padding-top: 140px; }
  .site-footer.flat { padding-top: 96px; }
  .about-page .site-footer { padding-top: 140px; }
  .footer-top { grid-template-columns: 1fr; gap: 38px; }
  .footer-brand { gap: 38px; }
  .footer-brand strong { font-size: 18px; line-height: 23px; font-weight: 700; }
  .footer-hours { margin-top: 24px; }
  .footer-map { margin-top: 38px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 38px; padding-top: 38px; padding-bottom: 39px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }

  /* Banner trang con */
  .page-hero { height: 266px; background-image: var(--hero-img-m, var(--hero-img)); background-position: center bottom; }
  .page-hero .container { padding-top: 85px; }
  .page-hero .hero-title-text { font-size: 28px; line-height: 34px; }
  .mob-only { display: revert !important; }
  span.mob-only, a.mob-only { display: inline !important; }
  .hero-title-text span.mob-only { display: block !important; }
  .desk-only { display: none !important; }
  .detail-side-mobile { padding: 0 0 60px; }
  .detail-side-mobile .detail-side { gap: 48px; }

  .page-intro { padding: 48px 0 60px; }
  .intro-text.wide { gap: 40px; }
  .intro-visual { min-height: 0; }
  .intro-visual .crop-grid { margin-top: 0; }
  .crop-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tech-visual { height: auto; margin-top: 0; padding-top: 0; transform: none; }
  .tech-visual .tech-circle { position: relative; width: 61%; top: 0; }
  .tech-visual .step-cards { position: relative; left: 0; top: auto; width: auto; margin-top: -40px; }
  .tech-visual .step-card:nth-child(n), .oem-intro-visual .step-card:nth-child(n) { margin-left: auto; margin-right: 0; }
  .tech-visual .step-card:nth-child(2), .oem-intro-visual .step-card:nth-child(2) { margin-left: 0; margin-right: auto; }
  .oem-intro-visual { height: auto; margin-top: 0; transform: none; }
  .oem-intro-img { position: relative; top: 0; width: 83%; height: auto; aspect-ratio: 307 / 238; }
  .oem-intro-visual .step-cards { position: relative; left: 0; top: auto; width: auto; margin-top: -60px; }
  .oem-intro, .products-intro { padding-bottom: 40px; }
  .oem-intro::after, .products-intro::after { height: 80px; bottom: -40px; }
  .oem-intro + .oem-capacity, .products-intro + .product-sections { padding-top: 90px; }
  .tech-page .page-intro { padding-bottom: 60px; }
  .products-visual { width: 100%; margin: 0; }

  /* Giới thiệu */
  .about-overview { padding: 48px 0 0; margin-top: 0; }
  .about-rice { position: relative; left: -34px; top: auto; width: calc(100% + 168px); margin-top: 12px; }
  .about-mindset { padding: 60px 0; }
  .mindset-head { gap: 32px; margin-bottom: 48px; }
  .stat-cards { grid-template-columns: 1fr; gap: 16px; }
  .stat-card { min-height: 0; padding: 24px 10px; }
  .about-rnd { min-height: 0; display: flex; flex-direction: column; }
  .rnd-flower { position: relative; left: 0; top: auto; width: 100%; height: 546px; object-fit: cover; object-position: left top; }
  .rnd-panel { margin-left: var(--gutter); max-width: none; min-height: 0; border-radius: 0 0 0 40px; }
  .rnd-inner { padding: 48px var(--gutter) 48px; max-width: none; }
  .about-crops { padding: 60px 0; }
  .about-crops .crop-orbit { height: auto; grid-template-columns: 1fr; }
  .crop-orbit-visual { position: relative; left: auto; top: auto; width: 100%; grid-column: 1 / -1; order: 0; }
  .about-crops .crop-orbit .crop-card { min-height: 0; height: auto; padding: 25px 10px; }
  .page-intro .crop-grid .crop-card:nth-child(1) { order: 4; } .page-intro .crop-grid .crop-card:nth-child(2) { order: 3; }
  .page-intro .crop-grid .crop-card:nth-child(3) { order: 2; } .page-intro .crop-grid .crop-card:nth-child(4) { order: 1; }
  .about-crops .crop-orbit .crop-pos-4 { order: 1; } .about-crops .crop-orbit .crop-pos-3 { order: 2; } .about-crops .crop-orbit .crop-pos-2 { order: 3; } .about-crops .crop-orbit .crop-pos-1 { order: 4; }
  .about-catalogue { flex-direction: column; min-height: 0; }
  .catalogue-panel { flex: none; width: 100%; min-height: 0; justify-content: flex-start; }
  .catalogue-inner { padding: 48px var(--gutter) 56px; }
  .catalogue-cover { padding: 40px var(--gutter) 48px; }
  .catalogue-cover img { width: 80%; margin: 0 auto; }
  .video-poster > img:first-child { aspect-ratio: 402 / 260; }
  .video-poster .play { width: 60px; height: 44px; }
  .about-gallery { padding-top: 60px; }
  .gallery-box { padding: 40px 16px 100px; }

  /* Công nghệ */
  .tech-list { padding: 60px 0; }
  .tech-grid { grid-auto-columns: 100%; gap: 16px; }
  .features { padding-top: 60px; }
  .feature-grid, .process .feature-grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 48px; }
  .faq { padding: 40px 0 90px; }
  .faq .section-title { margin-bottom: 36px; }
  .faq-item .rich { padding-right: 0; }

  /* Gia công */
  .oem-capacity { padding-bottom: 60px; }
  .oem-capacity .oem-grid { display: flex; flex-direction: column; }
  .oem-capacity .capacity-slider { order: 2; }
  .oem-capacity .oem-text { gap: 40px; }
  .oem-capacity .oem-text, .oem-capacity .oem-text .heads, .oem-capacity .oem-text .heads > div { align-items: flex-start; text-align: left; }
  .oem-capacity .oem-text .heads .pill-tag { align-self: flex-start; }
  .product-carousel .slider-btn { top: 33%; }

  /* Sản phẩm */
  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .product-group { margin-bottom: 48px; }
  .sub-tabs { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter); }

  /* Tin tức */
  .news-page { padding: 48px 0 64px; }
  .news-cats-head { margin-bottom: 30px; }
  .news-cats { grid-template-columns: 1fr 1fr; gap: 15px 16px; margin-bottom: 48px; }
  .news-cat { aspect-ratio: 177 / 163; }
  .news-cat:nth-child(3) { order: 4; }
  .news-cat-label { width: 89%; height: 109px; font-size: 16px; }
  .news-cat:hover .news-cat-label, .news-cat.active .news-cat-label { height: 115px; }
  .post-grid { grid-template-columns: 1fr; gap: 48px; }
  .post-grid .post-card .thumb { aspect-ratio: auto; height: 190px; }
  .news-page .pagination { margin-top: 48px; }

  /* Chi tiết */
  .detail { padding: 16px 0 100px; }
  .detail-gallery { margin-bottom: 64px; }
  .detail-gallery .main-slide { aspect-ratio: 370 / 293; border-radius: 4px; }
  .detail-gallery .slider-btn { display: none; }
  .detail-gallery .thumbs { justify-content: flex-start; gap: 11px; margin-top: 11px; flex-wrap: nowrap; overflow-x: auto; }
  .detail-gallery .thumbs button { flex: 1 0 65px; width: auto; max-width: 66px; height: 66px; }
  .breadcrumb { display: block; }
  .breadcrumb > * { display: inline; }
  .breadcrumb a:has(+ .mob-only), .breadcrumb [aria-current]:not(:last-child) { color: var(--n-1000); }
  .detail-summary { padding: 15px 10px; margin-top: 24px; }
  .detail-side { position: static; }
  .featured-projects { padding-bottom: 65px; }
  .featured-box { grid-template-columns: 1fr; gap: 32px; padding: 24px 12px; border-radius: 4px; }
  .featured-item .num { font-size: 50px; line-height: 70px; }
  .featured-item { gap: 20px; }
  .related { padding-bottom: 60px; }
  .related .section-title { margin-bottom: 38px; }
  .related .post-card .thumb { aspect-ratio: auto; height: 190px; }
  .related .prev { left: 11px; } .related .next { right: 12px; }
  .zalo-top { height: 155px; }

  /* Liên hệ */
  .contact-info-section { padding: 48px 0 48px; }
  .contact-grid { gap: 24px; }
  .contact-cols { grid-template-columns: 1fr; gap: 0; }
  .contact-col + .contact-col { margin-top: 24px; }
  .contact-cols hr { margin: 38px 0 0; }
  .contact-cols hr + .contact-col { margin-top: 24px; }
  .contact-heading { font-size: 18px; line-height: 23px; font-weight: 700; margin-bottom: 0; }
  /* Thiết kế mobile không có khối khẩu hiệu và form: thông tin liên hệ đi thẳng xuống bản đồ */
  .contact-cta { display: none; }
  .contact-slogan { display: none; }
  .slogan-inner { width: auto; padding: 48px var(--gutter) 48px; }
  .slogan-big { font-size: 44px; line-height: 56px; }
  .contact-form-wrap { padding-top: 40px; padding-bottom: 48px; }
  .contact-glass { width: 100%; }
  .map iframe { height: 168px; }
}
@media (max-width: 560px) {
  .product-grid, .product-grid.cols-3 { grid-template-columns: 1fr; }
  .product-card .thumb { aspect-ratio: 370 / 282; }
  .product-card .thumb img { width: 38%; }
  .news-cats { grid-template-columns: 1fr 1fr; }
  .search-panel .container { flex-direction: column; }
  .card-actions .btn { font-size: 16px; }
}

/* ==========================================================================
   Hồ sơ năng lực — sách lật (StPageFlip). Kích thước chữ trong trang sách dùng cqw
   để co giãn theo khổ trang (trang rộng 500px ⇒ 1cqw = 5px).
   ========================================================================== */
.profile-book { padding: 80px 0 120px; background: linear-gradient(180deg, var(--page-bg) 0%, var(--info-200) 100%); }
.profile-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; }
.profile-intro { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.profile-intro h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.15; color: var(--brand-1300); text-wrap: balance; }
.profile-intro .rich p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.profile-tabs { flex: none; display: inline-flex; gap: 4px; padding: 4px; border-radius: 40px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(0, 101, 137, .12), 0 8px 24px rgba(0, 88, 120, .08); }
.profile-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 40px; padding: 9px 18px; background: transparent; color: var(--brand-1300);
  font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.profile-tabs button:hover { background: var(--info-300); }
.profile-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(90deg, var(--brand-1300) 0%, #007a8f 37%, var(--sec-1000) 100%);
  box-shadow: 1px 2px 0 var(--brand-1300), inset 2px 2px 3.5px rgba(0, 83, 113, .8); }
.profile-tabs button:focus-visible, .book-btn:focus-visible, .book-nav:focus-visible { outline: 2px solid var(--sec-1000); outline-offset: 2px; }
.flag { width: 20px; height: 20px; border-radius: 50%; flex: none; background-size: cover; background-position: center; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
.flag-vi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect width='30' height='30' fill='%23da251d'/%3E%3Cpolygon fill='%23ffcd00' points='15,6.5 17.2,13 24,13 18.5,17 20.6,23.5 15,19.5 9.4,23.5 11.5,17 6,13 12.8,13'/%3E%3C/svg%3E"); }
.flag-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23012169'/%3E%3Cpath d='M0 0l60 60M60 0L0 60' stroke='%23fff' stroke-width='12'/%3E%3Cpath d='M0 0l60 60M60 0L0 60' stroke='%23c8102e' stroke-width='5'/%3E%3Cpath d='M30 0v60M0 30h60' stroke='%23fff' stroke-width='18'/%3E%3Cpath d='M30 0v60M0 30h60' stroke='%23c8102e' stroke-width='10'/%3E%3C/svg%3E"); }

.book-stage { position: relative; padding: 36px 76px 44px; border-radius: 30px; overflow: hidden; margin-inline: calc(50% - min(50vw - 20px, 720px));
  background: radial-gradient(ellipse 70% 60% at 50% 40%, #fff 0%, var(--info-300) 60%, var(--sec-200) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 101, 137, .08), var(--shadow-grey); }
.book-wrap { position: relative; width: 100%; max-width: min(1300px, calc((100vh - 120px) * 1.4144)); margin: 0 auto; }
.book-wrap[hidden] { display: none; }
.book-wrap::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 60, 80, .22), rgba(0, 60, 80, 0)); pointer-events: none; z-index: -1; }
.book-wrap:not(.ready) .bp { display: none; }
.book-wrap:not(.ready) .book { aspect-ratio: 1000 / 707; }
.book-nav { position: absolute; top: 50%; z-index: 5; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--brand-1300); background: rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0, 88, 120, .15), inset 0 0 0 1px rgba(0, 101, 137, .12);
  transition: background .2s, color .2s, transform .2s, opacity .2s; }
.book-nav svg { width: 24px; height: 24px; }
.book-nav.prev { left: 18px; }
.book-nav.next { right: 18px; }
.book-nav:hover:not(:disabled) { color: #fff; background: linear-gradient(90deg, var(--brand-1300) 0%, #007a8f 37%, var(--sec-1000) 100%); transform: scale(1.06); }
.book-nav:disabled { opacity: .35; cursor: default; }
.book-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.book-count { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--brand-1300); font-variant-numeric: tabular-nums; }
.book-actions { display: flex; align-items: center; gap: 10px; }
.book-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--brand-1300); background: #fff;
  box-shadow: 0 4px 14px rgba(0, 88, 120, .1), inset 0 0 0 1px rgba(0, 101, 137, .14); transition: background .2s, color .2s; }
.book-btn svg { width: 22px; height: 22px; }
.book-btn:hover { color: #fff; background: var(--brand-1300); }
.book-btn[hidden] { display: none; }
.book-btn .off, .book-btn[aria-pressed="false"] .on { display: none; }
.book-btn[aria-pressed="false"] .off { display: block; }
.book-hint { margin: 14px 0 0; font-size: 13px; color: var(--text-muted); }
.book-stage.is-full { display: flex; align-items: center; justify-content: center; border-radius: 0; padding: 24px 90px; }
.book-stage.is-full .book-wrap { max-width: min(100%, calc((100vh - 48px) * 1.4144)); }

/* Trang sách */
.bp { position: relative; overflow: hidden; container-type: size; background: #fff; color: var(--text-body); font-family: var(--font); }
.bp-tint { background: var(--info-200); }
.bp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bp::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bp.--left::before { background: linear-gradient(270deg, rgba(0, 40, 60, .16) 0%, rgba(0, 40, 60, 0) 7%); }
.bp.--right::before { background: linear-gradient(90deg, rgba(0, 40, 60, .16) 0%, rgba(0, 40, 60, 0) 7%); }
.bp-in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.6cqw; padding: 9cqw 8.5cqw 13cqw; }
.bp h3, .bp h4, .bp p, .bp ol, .bp dl { margin: 0; }
.bp-chap, .bp-eyebrow { display: flex; align-items: baseline; gap: 2cqw; padding-bottom: 2cqw; border-bottom: 1px solid var(--sec-200); font-size: 2.5cqw; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sec-1200); }
.bp-chap span { font-family: var(--font-display); font-size: 5.4cqw; font-weight: 700; letter-spacing: 0; color: var(--brand-1300); }
.bp-h { font-family: var(--font-display); font-weight: 600; font-size: 6.4cqw; line-height: 1.12; color: var(--brand-1300); text-wrap: balance; }
.bp-h-sm { font-size: 4.8cqw; }
.bp-h span { display: block; }
.bp-pill { align-self: flex-start; font-size: 2.4cqw; font-weight: 500; padding: .8cqw 2cqw; border-radius: 2cqw; background: var(--info-200); color: var(--sec-1200); }
.bp-tagline { font-family: var(--font-display); font-weight: 600; font-size: 3.8cqw; color: var(--sec-1000); }
.bp-text { font-size: 2.75cqw; line-height: 1.55; }
.bp-text p + p { margin-top: 1.6cqw; }
.bp-text h3 { margin: 2cqw 0 1cqw; font-size: 3.2cqw; font-weight: 600; color: var(--brand-1300); }
.bp-text strong { color: var(--brand-1400); font-weight: 600; }
.bp-rnd { font-size: 2.45cqw; }
.bp-rnd ol { list-style: none; padding: 0; margin: 1.4cqw 0; counter-reset: s; display: grid; gap: 1cqw; }
.bp-rnd li { counter-increment: s; display: flex; gap: 2cqw; align-items: center; padding: 1.2cqw 2cqw; border-radius: 1.6cqw; background: var(--info-200); }
.bp-rnd li::before { content: counter(s); flex: none; width: 4.4cqw; height: 4.4cqw; display: grid; place-items: center; border-radius: 50%; background: var(--brand-1300); color: #fff; font-weight: 700; font-size: 2.3cqw; }
.bp-about-img { margin-top: auto; align-self: flex-end; width: 58cqw; max-height: 48cqh; object-fit: contain; }
.bp-foot { position: absolute; left: 8.5cqw; right: 8.5cqw; bottom: 4.6cqw; display: flex; justify-content: space-between; align-items: baseline; padding-top: 1.6cqw; border-top: 1px solid var(--sec-200); font-size: 2.1cqw; color: var(--text-muted); }
.bp-foot b { font-family: var(--font-display); font-size: 3.2cqw; color: var(--brand-1300); }
.bp-sign { margin-top: auto; display: flex; flex-direction: column; gap: 1cqw; font-size: 2.6cqw; }
.bp-script { font-family: var(--font-script); font-size: 9cqw; line-height: 1.05; color: var(--sec-1000); }
.bp-small { font-size: 2.2cqw; color: var(--text-muted); }
.bp-toc { list-style: none; padding: 0; display: flex; flex-direction: column; }
.bp-toc li { display: flex; align-items: baseline; gap: 2cqw; margin: 0; min-height: 0; line-height: 1.3; padding: 1.75cqw 0; border-bottom: 1px solid rgba(0, 101, 137, .1); font-size: 3cqw; color: var(--text-body); }
.bp-toc .no { font-family: var(--font-display); font-weight: 700; font-size: 3.6cqw; color: var(--sec-1000); width: 6cqw; }
.bp-toc .leader { flex: 1; border-bottom: 1px dotted var(--brand-700); transform: translateY(-.6cqw); }
.bp-toc .pg { font-family: var(--font-display); font-weight: 600; color: var(--brand-1300); font-variant-numeric: tabular-nums; }
.bp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin-top: 1cqw; }
.bp-stat { display: flex; flex-direction: column; gap: 1cqw; padding: 3.6cqw; border-radius: 3cqw; background: var(--info-200); }
.bp-stat strong { font-family: var(--font-display); font-weight: 700; font-size: 7.4cqw; line-height: 1; color: var(--brand-1300); }
.bp-stat em { font-style: normal; font-weight: 600; font-size: 2.6cqw; color: var(--sec-1200); }
.bp-stat p { font-size: 2.3cqw; line-height: 1.45; }
.bp-list { display: flex; flex-direction: column; gap: 3.4cqw; }
.bp-row { display: grid; grid-template-columns: 30cqw 1fr; gap: 3.4cqw; align-items: center; }
.bp-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2.4cqw; }
.bp-row-sm { grid-template-columns: 24cqw 1fr; }
.bp-row h4, .bp-product h4, .bp-crop h4, .bp-commit h4 { font-size: 3.1cqw; line-height: 1.25; font-weight: 600; color: var(--brand-1300); }
.bp-row p, .bp-crop p, .bp-commit p { margin-top: .8cqw; font-size: 2.35cqw; line-height: 1.45; }
.bp-row .loc { color: var(--sec-1200); font-weight: 600; }
.bp-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.bp-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2.4cqw; }
.bp-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-top: 1cqw; }
.bp-mini-stats div { padding-left: 2cqw; border-left: 2px solid var(--sec-1000); }
.bp-mini-stats strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 6cqw; line-height: 1; color: var(--brand-1300); }
.bp-mini-stats em { font-style: normal; font-size: 2.2cqw; }
.bp-products { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.bp-product { display: flex; flex-direction: column; gap: 1cqw; padding: 2.6cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 1cqw 3cqw rgba(0, 88, 120, .08); }
.bp-product .pic { aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 2cqw; background: radial-gradient(circle at 50% 45%, #fff 0%, var(--info-400) 75%); }
.bp-product .pic img { width: 88%; height: 88%; object-fit: contain; }
.bp-product p { font-size: 2.15cqw; line-height: 1.4; }
.bp-crops { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.bp-crop { padding: 3.4cqw; border-radius: 3cqw; border: 1px solid var(--sec-200); }
.bp-crop .ico { width: 9cqw; height: 9cqw; display: grid; place-items: center; margin-bottom: 2cqw; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--brand-1300), var(--sec-1000)); }
.bp-crop .ico svg { width: 4.8cqw; height: 4.8cqw; }
.bp-commits { display: flex; flex-direction: column; gap: 3.2cqw; }
.bp-commit { display: grid; grid-template-columns: 9cqw 1fr; gap: 3cqw; align-items: start; }
.bp-commit img { width: 9cqw; height: 9cqw; padding: 1.8cqw; border-radius: 50%; background: var(--info-200); }
.bp-lead { font-size: 2.8cqw; line-height: 1.5; }
.bp-contact { display: grid; grid-template-columns: 24cqw 1fr; gap: 2.4cqw 2cqw; margin-top: 1cqw; }
.bp-contact dt { font-size: 2.2cqw; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sec-1200); padding-top: .3cqw; }
.bp-contact dd { margin: 0; font-size: 2.8cqw; line-height: 1.45; color: var(--brand-1400); }

.bp-cover, .bp-back { color: #fff; background: var(--brand-1400); }
.bp-cover-img { position: absolute; inset: 0; background-size: cover; background-position: 60% center; }
.bp-cover-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(0, 88, 120, .94) 0%, rgba(0, 114, 155, .78) 45%, rgba(15, 164, 178, .5) 100%); }
.bp-cover .bp-in, .bp-back .bp-in { z-index: 1; justify-content: space-between; padding: 10cqw 9cqw; }
.bp-cover::after, .bp-back::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4cqw; z-index: 2; pointer-events: none; }
.bp-cover::after { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .08) 45%, rgba(0, 0, 0, 0)); }
.bp-back::after { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .08) 45%, rgba(0, 0, 0, 0)); }
.bp-logo { width: 34cqw; height: auto; }
.bp-cover-title { display: flex; flex-direction: column; gap: 2.4cqw; }
.bp-cover-kicker { font-size: 2.4cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.bp-cover-title h3 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 11.5cqw; line-height: .98; letter-spacing: .01em; text-wrap: balance; }
.bp-cover-tag { font-size: 3.4cqw; line-height: 1.35; max-width: 70cqw; }
.bp-cover-company { padding-top: 2.4cqw; border-top: 1px solid rgba(255, 255, 255, .4); font-size: 2.4cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bp-back { background: linear-gradient(160deg, var(--brand-1300) 0%, #007a8f 50%, var(--sec-1000) 100%); }
.bp-back .bp-in { align-items: center; justify-content: center; gap: 5cqw; text-align: center; }
.bp-back-thanks { font-size: 3cqw; line-height: 1.5; max-width: 66cqw; }
.bp-back .bp-script { color: #fff; }
.bp-back-meta { font-size: 2.4cqw; letter-spacing: .04em; opacity: .85; }

/* Nút & hộp phóng to để đọc */
.book-zoom-chip { position: absolute; top: 14px; right: 18px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border: 0; border-radius: 40px; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--brand-1300); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 88, 120, .12), inset 0 0 0 1px rgba(0, 101, 137, .12); transition: background .2s, color .2s; }
.book-zoom-chip svg { width: 18px; height: 18px; }
.book-zoom-chip:hover { color: #fff; background: var(--brand-1300); }
.book-zoom-chip[hidden] { display: none; }
.bz-lock, .bz-lock body { overflow: hidden; }
.book-zoom { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(0, 32, 44, .94); }
.book-zoom[hidden] { display: none; }
.bz-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; color: #fff; }
.bz-count { font-family: var(--font-display); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; }
.bz-actions { display: flex; gap: 8px; }
.bz-actions button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12); transition: background .2s; }
.bz-actions button:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.bz-actions button:disabled { opacity: .35; cursor: default; }
.bz-actions button:focus-visible { outline: 2px solid var(--sec-700); outline-offset: 2px; }
.bz-actions svg { width: 22px; height: 22px; }
.bz-scroll { flex: 1; overflow: auto; padding: 0 16px 24px; text-align: center; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.bz-scroll img { display: inline-block; width: min(100%, 1300px); height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); background: #fff; }
.book-zoom.fit-page .bz-scroll img { width: auto; max-width: 100%; max-height: calc(100vh - 90px); }

@media (max-width: 960px) {
  .profile-book { padding: 48px 0 80px; }
  .profile-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
  .profile-intro h2 { font-size: 26px; }
  .book-stage { padding: 52px 12px 32px; border-radius: 20px; margin-inline: 0; }
  .book-zoom-chip { top: 10px; right: 12px; }
  .book-nav { width: 40px; height: 40px; margin-top: -20px; }
  .book-nav.prev { left: 4px; }
  .book-nav.next { right: 4px; }
}
@media (max-width: 560px) {
  .book-wrap { max-width: min(100%, calc((100svh - 230px) * .7072)); }
  .book-wrap:not(.ready) .book { aspect-ratio: 500 / 707; }
  .profile-tabs { align-self: stretch; }
  .profile-tabs button { flex: 1; justify-content: center; padding: 9px 10px; }
  .book-bar { justify-content: center; }
  .book-stage.is-full { padding: 16px 8px; }
  .book-stage.is-full .book-wrap { max-width: min(100%, calc((100vh - 32px) * .7072)); }
}

/* ==========================================================================
   Đối chiếu Figma lần 2 — các chỉnh sửa đặt cuối file để ghi đè quy tắc phía trên
   ========================================================================== */
@media (min-width: 961px) {
  .site-header .header-inner { padding-inline: 31px; }
  /* Menu 8 mục: thu khoảng cách để cụm bên phải không tràn khỏi khung 1200px */
  .header-inner { gap: 24px; }
  .main-nav > ul { gap: 15px; }
  .header-actions { gap: 28px; }
  .hotline-pill { min-width: 132px; text-align: center; }
  .quick-tab-main { justify-content: flex-start; padding-left: 80px; }
  .crop-orbit::before { top: 205px; opacity: .4; }
  .home-page .crop-orbit::after { top: -150px; left: calc(50% - 197px); transform: none; }
  .crop-orbit-title { transform: translateX(calc(-50% - 38px)); }
  .oem-home .btn { min-width: 165px; }
  .tech-home .section-title { margin-bottom: 58px; }
  .home-page .projects-home { padding-bottom: 79px; }
}
.tech-tabs { gap: 8px; }
.tech-tabs button:nth-child(1) { min-width: 60px; }
.tech-tabs button:nth-child(2) { min-width: 136px; }
.products-visual picture { display: block; position: relative; }
.products-visual picture img { position: relative; width: 100%; height: auto; }

@media (max-width: 960px) {
  /* Header & banner trang chủ */
  .header-inner { gap: 14px; }
  .nav-toggle { margin-left: 0; width: 35px; }
  .topbar a { letter-spacing: .05em; }
  .quick-tabs .container::before { border-radius: 4px; }
  .quick-tabs a { font-size: 12px; line-height: 14px; letter-spacing: .05em; }
  .quick-tabs a img { width: 11px; height: 11px; }

  /* Trang chủ */
  .about-home .right .rich p:first-child { text-align: left; }
  .about-home .sub { font-size: 22px; line-height: 26px; }
  .crop-orbit-title { margin-bottom: 32px; position: relative; left: -28px; }
  .crop-orbit-title span { font-size: 42px; line-height: 50px; }
  .split-126 { align-items: stretch; gap: 63px; }
  .tech-home .section-title { margin-bottom: 38px; }
  .tech-home { padding-bottom: 119px; }
  .tech-gallery { align-items: flex-start; gap: 16px; }
  .tech-gallery .imgs { gap: 15px; }
  .step-cards { margin-top: -168px; gap: 10px; }
  .oem-home .step-card:nth-child(2) { margin-left: 3px; }
  .oem-stats { gap: 32px; }
  .oem-stat { min-height: 0; }
  .oem-stats-block { gap: 40px; }
  .oem-stat p { font-weight: 400; color: #989898; margin-top: 12px; }
  .consult-bg { left: -123px; top: 0; width: 1724px; max-width: none; height: 884px; opacity: 1; }
  .consult::after { background: linear-gradient(90deg, #f7f7f7 0%, rgba(255, 255, 255, .7) 100%); }
  .consult .container { padding-top: 58px; padding-bottom: 58px; }
  .consult .sub b { line-height: 29px; margin-bottom: 8px; }
  .consult .inner { gap: 24px; }
  .consult .actions { row-gap: 8px; }
  .consult .actions .link-u + .link-u { margin-left: 0; }
  .lead-head .rich { font-size: 16px; line-height: 21px; }
  .lead-box { padding: 48px 20px 60px; }
  .lead-head .rich { color: var(--text-body); }
  .footer-links li { font-size: 13px; line-height: 17px; }
  .footer-brand strong { max-width: 290px; }
  .home-page .consult .container { padding-top: 72px; padding-bottom: 68px; }
  .oem-text .heads .rich { text-align: justify; }
  .project-row .info p, .project-row .info .desc { text-align: justify; }
  .site-footer { padding-top: 108px; }

  /* Trang con — phần mở đầu */
  .page-intro { padding-bottom: 64px; }
  .tech-page .page-intro { padding-bottom: 64px; }
  .tech-page .intro-text, .tech-page .intro-grid, .intro-grid { gap: 48px; }
  .intro-text.wide { gap: 48px; }
  .intro-lead .rich p { text-align: justify; }
  .intro-extra, .about-overview .intro-extra { margin-top: 0; }
  .tech-visual .glow { width: 227px; height: 227px; right: 0; }

  /* Công nghệ */
  .tech-list { padding-top: 56px; background: var(--bg-m, var(--bg, none)) center top / 100% 100% no-repeat, #f7f7f7; }
  .tech-list .section-title { margin-bottom: 38px; }
  .tech-list .dots { margin-top: 38px; }
  .tech-item { padding: 10px; border-radius: 4px; }
  .tech-item .thumb { aspect-ratio: 350 / 265; }
  .features { padding-top: 48px; }
  .features .section-title, .process .section-title { margin-bottom: 38px; }
  .feature-grid, .process .feature-grid { gap: 10px; padding-bottom: 38px; }

  /* Giải pháp */
  .page-intro .crop-card { border-radius: 5px; background: #efefef; }
  .projects-home { padding-top: 48px; }
  .projects-home .section-title { margin-bottom: 38px; }
  .project-list { gap: 38px; }
  .project-row { row-gap: 20px; }
  .project-row .info { max-width: 306px; }
  .sol-bottom { background: linear-gradient(180deg, #efefef 0%, #f4f6f6 20%, #e5f2f1 100%); }
  .sol-bottom .projects-home { padding-bottom: 24px; }
  .faq { padding: 40px 0 67px; }
  .faq .section-title { margin-bottom: 38px; }
  .faq-item + .faq-item { margin-top: 24px; }
  .faq-item summary { gap: 40px; padding-right: 8px; }
  .faq-item .rich { padding-right: 40px; }

  /* Gia công */
  .oem-capacity .capacity-slider { width: 100%; align-self: stretch; }
  .oem-capacity .slideshow { aspect-ratio: 370 / 364; }
  .oem-intro-img { margin-top: 62px; }
  .oem-intro-visual .glow { width: 252px; height: 252px; right: 0; top: 0; }
  .oem-capacity .oem-text { gap: 32px; }
  .oem-stats-block { gap: 50px; }
  .process { padding-top: 48px; background: linear-gradient(180deg, #efefef 0%, #f4f6f6 30%, #e5f2f1 100%); }

  /* Sản phẩm */
  .products-page .products-intro + .product-sections { padding-top: 107px; }
  .product-grid, .product-grid.cols-3 { row-gap: 64px; }
  .product-group { margin-bottom: 120px; }
  .product-group:last-child { margin-bottom: 0; }
  .product-group .section-title { margin-bottom: 38px; }
  .sub-tabs { gap: 10px; margin: 0 -16px 24px; }

  /* Giới thiệu */
  .about-rice { left: 0; width: 100%; margin-top: 48px; }
  .about-mindset { padding: 72px 0 100px; background: linear-gradient(rgba(247, 247, 247, .72), rgba(247, 247, 247, .72)), var(--bg, none) center top / cover no-repeat, #f7f7f7; }
  .mindset-head { gap: 24px; margin-bottom: 38px; }
  .mindset-head .rich p { margin-bottom: 24px; }
  .stat-cards { gap: 24px; }
  .stat-card { padding: 10px; border-radius: 6px; }
  .rnd-inner { padding: 45px 16px 60px 17px; }
  .rnd-inner .rich ol { margin: 4px 0 24px; }
  .rnd-inner .rich ol li { padding: 8px 16px 8px 33px; text-indent: -16px; }
  .about-crops { padding-top: 39px; }
  .about-crops .crop-orbit { gap: 24px; }
  .about-crops .crop-orbit .crop-card { padding: 25px 10px; gap: 20px; }
  .about-crops .crop-orbit-visual { margin: 40px 0 16px; }
  .catalogue-inner { padding-top: 60px; }
  .catalogue-cover img { width: 100%; }
  .oem-capacity .oem-timeline { margin-left: 0; }
  .oem-page .lead { padding-top: 60px; }
  .catalogue-cover { width: 100%; padding: 75px 16px 88px; }
  .catalogue-panel { width: calc(100% - 16px); }
  .video-poster > img:first-child { aspect-ratio: 402 / 226; }
  .video-poster .play { width: 26px; height: 20px; }
  .about-gallery { padding-top: 41px; }
  .gallery-box { padding-top: 38px; }
  .gallery-box .section-title, .gallery-box h2 { margin-bottom: 32px; }
  .gallery-box .carousel-track { grid-auto-columns: 100%; }
}
@media (max-width: 560px) {
  .products-visual picture.has-mobile ~ .callout { display: none; }
  .products-visual { aspect-ratio: auto; }
}
.card-actions { justify-content: center; }
.card-actions .btn { flex: 0 0 auto; }
.card-actions .btn.btn-glass { width: 116px; }
.card-actions .btn:not(.btn-glass) { width: 153px; }

/* ==========================================================================
   Góp ý 11/10: nút thẻ sản phẩm, tìm kiếm trên điện thoại, nền riêng cho điện thoại
   ========================================================================== */
/* Hai nút trong thẻ sản phẩm không chạm mép khung (tránh bị cắt bóng/viền ở carousel) */
.card-actions { gap: 10px; padding-bottom: 3px; }
.card-actions .btn.btn-glass { width: 112px; }
.card-actions .btn:not(.btn-glass) { width: 150px; }

@media (max-width: 960px) {
  /* Nút tìm kiếm (chỉ biểu tượng) cạnh cờ ngôn ngữ */
  .search-link { display: inline-flex; padding: 4px; }
  .search-link span { display: none; }
  .search-link img { width: 20px; height: 20px; }

  /* Trang chủ: nền xuất riêng cho điện thoại */
  .home-page .crops-home { background: url(../img/figma/home-crops-bg-m.webp) center top / 100% auto no-repeat; }
  .home-page .crops-home { padding-bottom: 128px; }
  .home-page .crops-home .crop-orbit::before, .home-page .crops-home .crop-orbit::after { display: none; }
  .tech-home.has-m-bg { padding-bottom: 80px; background: url(../img/figma/home-tech-bg-m.webp) center top / 100% 100% no-repeat, var(--page-bg); }
  .consult.has-m-bg { min-height: 391px; }
  .consult.has-m-bg .consult-bg { top: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 1; object-fit: cover; object-position: center top; }
  .consult.has-m-bg::after { display: none; }

  /* Giới thiệu – R&D: nền + hoa riêng, khối xanh thò xuống dưới nền như thiết kế */
  .about-rnd.has-m-bg { background: url(../img/figma/about-rnd-bg-m.webp) center top / 100% 1224px no-repeat; }
  .about-rnd picture { display: block; }
  .about-rnd.has-m-bg .rnd-flower { margin-top: 40px; height: 503px; object-fit: cover; object-position: center; }

  /* Giới thiệu – catalogue: nền riêng, bìa catalogue to và căn giữa */
  .about-catalogue.has-m-bg { background: url(../img/figma/about-catalogue-bg-m.webp) center top / 100% 100% no-repeat; }
  .catalogue-inner { padding-top: 51px; padding-bottom: 42px; }
  .catalogue-cover { justify-content: center; }
  .catalogue-cover a { display: block; width: 100%; }
  .catalogue-cover img { display: block; width: 100%; max-width: 370px; margin: 0 auto; }
  .catalogue-cover picture { display: block; }
  .about-catalogue.has-m-bg .catalogue-cover img { box-shadow: 3px 2px 8px rgba(0, 86, 97, .1), 11px 8px 14px rgba(0, 86, 97, .09), 26px 19px 19px rgba(0, 86, 97, .05); }
}

/* Góp ý 12/10 */
/* Thẻ bước nằm cố định đè lên ảnh (theo thiết kế), không nhấc lên/đổ bóng khi rê/chạm */
.step-card { transform: none; }
@media (max-width: 960px) {
  /* Giới thiệu – khối 2 chai: dùng ảnh xuất từ Figma (chai + nền mờ phủ lên vòng tròn) */
  .about-crops { padding-top: 0; }
  .about-crops .crop-orbit::before, .about-crops .crop-orbit::after { display: none; }
  .about-crops .crop-orbit-pic { display: block; grid-column: 1 / -1; order: 0; margin: 65px calc(var(--gutter) * -1) 0; }
  .about-crops .crop-orbit-pic .crop-orbit-visual { margin: 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
}
@media (max-width: 960px) {
  /* Thanh tab nhanh dưới banner: luôn nằm trên 1 dòng, kể cả điện thoại hẹp */
  .quick-tabs a { white-space: nowrap; letter-spacing: .02em; padding: 0 6px; gap: 4px; font-size: min(12px, 3.2vw); min-width: 0; }
  .quick-tab-rest { justify-content: space-evenly; }
}
@media (max-width: 400px) {
  .quick-tabs a { font-size: 11px; letter-spacing: 0; padding: 0 4px; }
}
@media (max-width: 340px) {
  .quick-tabs a { font-size: 10px; }
  .quick-tabs a img { display: none; }
}

/* Hình xưởng: đóng logo Nam Phương (góc phải dưới) như trên catalogue */
.gallery-box .carousel-item, .lb-frame { position: relative; display: block; }
.lb-frame { display: inline-block; max-width: 92vw; max-height: 88vh; line-height: 0; }
.lb-frame img { max-width: 92vw; max-height: 88vh; }
.gallery-box .carousel-item::after, .capacity-slider .slideshow::after, .lb-frame::after {
  content: ""; position: absolute; right: 7%; bottom: 7%; width: 30%; max-width: 220px; aspect-ratio: 720 / 270;
  background: url(../img/figma/logo.png) center / contain no-repeat; filter: drop-shadow(0 1px 4px rgba(0, 40, 60, .45));
  pointer-events: none; z-index: 1;
}
.capacity-slider .slideshow::after { width: 26%; }