/* Ô Tô Phương Nam (banxe) — trang trong theo mockup 10-01: danh sách xe, chi tiết xe, giới thiệu, liên hệ, bảng giá, trả góp. Dùng lại lớp trang chủ (px-btn, px-more, px-link, px-checks, px-cf, px-hd-ic, px-fi). */
.pxi-page, .pxi-page p, .pxi-page li, .pxi-page td, .pxi-page th { font-family: "Inter", sans-serif; }
.pxi-h1, .pxi-h2, .pxi-page h3, .pxi-sec h3, .pxi-ptitle, .pxi-pprice, .pxi-card-b strong, .pxi-icard-big, .pxi-ask-tel, .pxi-bigtel, .px-sec h3 { font-family: "Roboto", sans-serif !important; }
#content.pxi-page { padding: 0 !important; background: #fff; }
body:has(.pxi-crumb) .portfolio-breadcrumb-title, body:has(.pxi-crumb) .page-title { display: none !important; }
.pxi-wrap { max-width: 1312px; margin: 0 auto; padding: 0 15px; box-sizing: content-box; }
.pxi-page img[src=""], .px-sec img[src=""] { opacity: 0; }
.pxi-crumb { font-size: 16px; color: #555; margin: 0 0 18px; } .pxi-crumb a { color: #555 !important; } .pxi-crumb i { font-style: normal; margin: 0 10px; color: #999; } .pxi-crumb span { color: #333; }
.pxi-h1 { color: var(--px-ink) !important; font-size: 56px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em; margin: 0 0 12px !important; }
.pxi-h1 em, .pxi-h2 em { font-style: normal; color: var(--px-red2); }
.pxi-h2 { color: var(--px-ink) !important; font-size: 44px !important; font-weight: 700 !important; line-height: 1.18 !important; letter-spacing: -.02em; margin: 0 0 6px !important; }
.pxi-lead { color: #555; font-size: 24px; line-height: 1.45; }
.pxi-uline { width: 66px; height: 5px; border-radius: 3px; background: var(--px-org); margin: 14px 0 22px; }
.pxi-ptxt { color: #555; font-size: 18px; line-height: 1.65; margin: 0 0 16px; }
.pxi-btn-line { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border: 2px solid var(--px-red2); border-radius: 6px; color: var(--px-red2) !important; font-size: 19px; font-weight: 700; background: #fff; }
.pxi-btn-line:hover { background: #FFF2F2; }
.pxi-mi { display: inline-block; flex: 0 0 auto; width: 32px; height: 32px; background: var(--px-red2); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.pxi-ic { display: block; width: 64px; height: 64px; background: center/contain no-repeat; margin: 0 auto 12px; }
.pxi-note { color: #6B6B6B; font-size: 14.5px; margin: 18px 0; text-align: center; font-style: italic; } .pxi-note-r { text-align: right; }
.px-center { text-align: center; } .pxi-csub { margin: 0 0 26px !important; font-size: 20px !important; }
/* ---------- danh sách xe ---------- */
.pxi-band { background: var(--px-soft); padding: 26px 0 30px; } .pxi-band .pxi-wrap { padding-left: 45px; }
.pxi-shop-in { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 30px; padding-top: 24px; padding-bottom: 24px; }
.pxi-filter { border: 1px solid #E4E4E4; border-radius: 4px; margin: 0; padding: 0 0 18px; }
.pxi-ftitle { display: flex; align-items: center; gap: 20px; font-size: 24px; font-weight: 700; color: var(--px-ink); padding: 18px 24px; border-bottom: 1px solid #E4E4E4; font-family: "Roboto", sans-serif; }
.pxi-fg { border-bottom: 1px solid #E4E4E4; padding: 16px 24px 12px; }
.pxi-fh { display: flex; justify-content: space-between; align-items: center; color: var(--px-ink) !important; font-size: 20px; font-weight: 700; margin-bottom: 12px; font-family: "Roboto", sans-serif; } .pxi-fh::after { content: ""; width: 9px; height: 9px; border-left: 2px solid #333; border-top: 2px solid #333; transform: rotate(45deg); margin-top: 4px; } .is-closed .pxi-fh::after { transform: rotate(-135deg); margin-top: -6px; } .is-closed .pxi-fb { display: none; }
.pxi-ck, .pxi-rd { display: flex !important; align-items: center; gap: 14px; margin: 0 0 12px !important; font-size: 18px; color: #333; font-weight: 400; cursor: pointer; }
.pxi-ck input, .pxi-rd input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: 0 0 24px; margin: 0 !important; border: 1.5px solid #C9C9C9; border-radius: 3px; background: #fff; cursor: pointer; }
.pxi-rd input { border-radius: 50%; } .pxi-rd input:checked { border: 2px solid var(--px-red2); box-shadow: inset 0 0 0 4px #fff; background: var(--px-red2); }
.pxi-ck input:checked { background: var(--px-red2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/17px no-repeat; border-color: var(--px-red2); }
.pxi-in { height: 46px !important; margin: 0 0 10px !important; border: 1px solid #DCDCDC !important; border-radius: 3px !important; box-shadow: none !important; font-size: 16px !important; padding: 0 16px !important; }
.pxi-range { height: 4px; background: #D4D4D4; border-radius: 2px; margin: 18px 10px 10px; position: relative; } .pxi-range i { position: absolute; left: 0; width: 45%; height: 4px; background: var(--px-red2); } .pxi-range::before, .pxi-range::after { content: ""; position: absolute; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--px-red2); z-index: 1; } .pxi-range::before { left: -8px; } .pxi-range::after { right: -8px; }
.pxi-apply { display: block; width: calc(100% - 48px); height: 50px; margin: 18px 24px 10px !important; border-radius: 4px; background: var(--px-red) !important; color: #fff !important; font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.pxi-clear { display: block; text-align: center; color: #444 !important; font-size: 16px; text-decoration: underline !important; }
.pxi-ask { background: var(--px-soft); border-radius: 4px; padding: 20px 20px 18px; margin-top: 20px; text-align: center; }
.pxi-ask-ic { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin: 0 auto 10px; border: 3px solid var(--px-red2); border-radius: 50%; } .pxi-ask-ic .px-hd-ic { width: 34px; height: 34px; flex-basis: 34px; }
.pxi-ask h3 { font-size: 24px !important; font-weight: 700 !important; color: var(--px-ink) !important; margin: 0 0 6px !important; } .pxi-ask > div { color: #555; font-size: 18px; line-height: 1.5; }
.pxi-ask-tel { display: block; color: var(--px-red2) !important; font-size: 32px; font-weight: 700; margin: 10px 0 14px; }
.pxi-ask .px-btn { width: 100%; min-height: 48px; font-size: 18px; }
.pxi-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .pxi-bar .pxi-h2 { font-size: 30px !important; margin: 0 !important; } .pxi-sub { color: #555; font-size: 18px; margin-top: 4px; }
.pxi-sort { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; } .pxi-sort span { color: #444; font-size: 16px; } .pxi-sort select { width: 184px; height: 46px !important; margin: 0 !important; border: 1px solid #DCDCDC !important; border-radius: 3px !important; box-shadow: none !important; font-size: 16px !important; padding: 0 16px !important; }
.pxi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pxi-card { border: 1px solid #E4E4E4; border-radius: 4px; background: #fff; overflow: hidden; }
.pxi-card-img { display: block; height: 190px; background: #E9EAEC; } .pxi-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxi-card-b { padding: 14px 18px 18px; } .pxi-card-b h3 { font-size: 20px !important; font-weight: 700 !important; margin: 0 0 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pxi-card-b h3 a { color: var(--px-ink) !important; }
.pxi-card-b small { display: block; color: #777; font-size: 15px; } .pxi-card-b strong { display: block; color: var(--px-red2); font-size: 22px; font-weight: 700; margin: 2px 0 10px; } .pxi-card-b .px-more { font-size: 16px; }
.pxi-empty { padding: 40px; background: var(--px-soft); border-radius: 4px; font-size: 18px; }
.pxi-main .nav-links { display: flex; justify-content: center; gap: 10px; } .pxi-main .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; border: 1px solid #DCDCDC; border-radius: 4px; color: #333 !important; font-size: 18px; } .pxi-main .page-numbers.current { background: var(--px-red); border-color: var(--px-red); color: #fff !important; }
.pxi-perks { background: var(--px-soft); } .pxi-perks-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 26px; padding-bottom: 30px; text-align: center; }
.pxi-perks-in > div { padding: 0 16px; border-left: 1px solid #D9D9D9; } .pxi-perks-in > div:first-child { border-left: 0; } .pxi-perks-in .pxi-ic { width: 60px; height: 60px; }
.pxi-perks-in h3 { font-size: 20px !important; font-weight: 700 !important; color: var(--px-ink) !important; margin: 0 0 6px !important; } .pxi-perks-in h3 + div { color: #555; font-size: 18px; }
/* ---------- chi tiết xe ---------- */
.pxi-prod .pxi-crumb { margin: 24px 0 18px; font-size: 15px; }
.pxi-pgrid { display: grid; grid-template-columns: 763px minmax(0, 1fr); gap: 38px; }
.pxi-gmain { aspect-ratio: 763 / 470; border-radius: 4px; overflow: hidden; background: #E9EAEC; } .pxi-gmain img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxi-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .pxi-thumbs a { display: block; aspect-ratio: 178 / 125; border-radius: 3px; overflow: hidden; border: 2px solid transparent; background: #E9EAEC; } .pxi-thumbs a.on { border-color: var(--px-red2); } .pxi-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxi-kick { display: inline-block; background: var(--px-org); color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; padding: 4px 12px; border-radius: 3px; margin-bottom: 8px; }
.pxi-ptitle { color: var(--px-ink) !important; font-size: 44px !important; font-weight: 700 !important; line-height: 1.15 !important; margin: 0 0 6px !important; }
.pxi-meta { color: #333; font-size: 22px; } .pxi-meta b { font-weight: 400; margin: 0 12px; }
.pxi-rate { display: flex; gap: 14px; align-items: center; color: #777; font-size: 17px; margin: 8px 0 14px; } .pxi-rate span { color: #999; letter-spacing: 4px; font-size: 21px; }
.pxi-plabel { color: #555; font-size: 16px; } .pxi-pprice { color: var(--px-red2); font-size: 46px; font-weight: 700; line-height: 1.1; margin: 0 0 10px; }
.pxi-short { color: #444; font-size: 19px; line-height: 1.5; padding-bottom: 18px; border-bottom: 1px solid #E4E4E4; margin-bottom: 18px; } .pxi-short p { margin: 0; }
.pxi-buyf { margin: 0; } .pxi-opts { display: grid; grid-template-columns: 162px 194px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; } .pxi-olabel { color: #333; font-size: 16px; margin-bottom: 10px; }
.pxi-colors { display: flex; gap: 14px; } .pxi-color { width: 44px; height: 44px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 1px #CFCFCF; } .pxi-color.on { box-shadow: 0 0 0 2px var(--px-red2); } .pxi-cname { color: #444; font-size: 14px; margin: 4px 0 0 12px; }
.pxi-opts select { height: 48px !important; margin: 0 !important; border: 1px solid #DCDCDC !important; border-radius: 3px !important; box-shadow: none !important; font-size: 16px !important; padding: 0 16px !important; }
.pxi-qty { display: inline-flex; align-items: center; gap: 0; } .pxi-qty button { width: 44px; height: 44px; margin: 0 !important; min-height: 0; border: 1px solid #DCDCDC !important; border-radius: 3px; background: #fff !important; color: #333 !important; font-size: 22px; padding: 0; } .pxi-qty input { width: 44px !important; height: 44px !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; text-align: center; padding: 0 !important; font-size: 17px !important; -moz-appearance: textfield; } .pxi-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pxi-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pxi-acts .px-btn, .pxi-acts .pxi-btn-line { width: 100%; min-height: 52px; height: 52px; font-size: 19px; border-radius: 4px; }
.pxi-drive { width: 100%; min-height: 52px; margin-top: 10px; font-size: 19px; border-radius: 4px; }
.pxi-pnote { color: #666; font-size: 14px; font-style: italic; margin: 12px 0 30px; }
.pxi-perk3 { display: flex; justify-content: space-between; gap: 8px; } .pxi-perk3 > div { display: flex; gap: 10px; align-items: flex-start; } .pxi-perk3 .pxi-ic { width: 40px; height: 40px; margin: 0; flex: 0 0 40px; } .pxi-perk3 strong { display: block; color: #222; font-size: 15px; } .pxi-perk3 small { display: block; color: #777; font-size: 12.5px; }
.pxi-tabs { display: flex; gap: 0; border-bottom: 1px solid #DCDCDC; margin: 40px 0 34px; } .pxi-tabs a { color: #333 !important; font-size: 20px; padding: 0 34px 16px; border-bottom: 4px solid transparent; margin-bottom: -1px; } .pxi-tabs a.on { color: var(--px-red2) !important; font-weight: 700; border-bottom-color: var(--px-red2); }
.pxi-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 700px; gap: 76px; align-items: start; }
.pxi-content h2 { font-size: 38px !important; font-weight: 700 !important; color: var(--px-ink) !important; margin: 0 0 8px !important; } .pxi-content p { color: #555; font-size: 19px; line-height: 1.5; margin: 0 0 16px; } .pxi-content .pxi-hint { color: #777; font-size: 15px; font-style: italic; margin-top: 8px; }
.pxi-ticks { list-style: none; margin: 0 !important; padding: 0; } .pxi-ticks li { display: flex; align-items: center; gap: 18px; color: #444; font-size: 18px; margin: 0 0 10px !important; }
.pxi-ticks li::before { content: ""; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--px-org) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat; }
.pxi-dpic { height: 420px; border-radius: 4px; overflow: hidden; background: #E9EAEC; } .pxi-dpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxi-spec { width: 100%; border-collapse: collapse; margin: 0 !important; } .pxi-spec th, .pxi-spec td { border: 0; border-bottom: 1px solid #E4E4E4; padding: 12px 0; font-size: 18px; text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400; color: #333; } .pxi-spec th { width: 36%; color: #666; }
.pxi-noreview { background: var(--px-soft); padding: 26px; border-radius: 4px; font-size: 18px; }
.pxi-cost { display: flex; align-items: center; gap: 18px; background: var(--px-soft); border-radius: 4px; padding: 30px 54px 30px 58px; margin: 40px 0 30px; } .pxi-cost > div { flex: 1 1 auto; }
.pxi-cost h3 { color: var(--px-red2) !important; font-size: 32px !important; font-weight: 700 !important; margin: 0 0 4px !important; } .pxi-cost > div > div { color: #444; font-size: 19px; } .pxi-cost .px-btn { min-width: 242px; min-height: 54px; font-size: 19px; border-radius: 3px; }
.pxi-relhead { margin-bottom: 18px; } .pxi-h2l { font-size: 38px !important; }
.pxi-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .pxi-grid4 .pxi-card-img { height: 165px; } .pxi-grid4 .pxi-card-b h3 { font-size: 18px !important; } .pxi-grid4 .pxi-card-b strong { font-size: 20px; }
/* ---------- giới thiệu ---------- */
.section.pxi-ahero { padding: 0 !important; overflow: hidden; } .pxi-ahero .row, .pxi-ahero .col, .pxi-ahero .col-inner { position: static !important; }
.pxi-ahero-pic { position: absolute; inset: 0; background: linear-gradient(180deg, #F3F4F6, #E3E4E7); } .pxi-ahero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; display: block; }
.pxi-ahero-txt { position: relative; z-index: 2; display: inline-block; background: rgba(255,255,255,.88); padding: 22px 40px 26px 0; margin-left: -200px; padding-left: 230px; margin-bottom: 350px; }
.pxi-ah1 { font-size: 60px !important; margin: 0 0 8px !important; }
.section.pxi-story-sec { padding: 26px 0 40px !important; overflow: hidden; } .pxi-story-sec .row, .pxi-story-sec .col, .pxi-story-sec .col-inner { position: static !important; }
.pxi-story { display: grid; grid-template-columns: 594px minmax(0, 1fr); gap: 40px; position: relative; }
.pxi-eb { font-size: 18px; margin-top: 16px; } .pxi-h2x { font-size: 48px !important; line-height: 1.2 !important; margin-bottom: 18px !important; }
.pxi-checks { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; margin-top: 22px !important; } .pxi-checks li { font-size: 20px !important; gap: 22px !important; color: #444 !important; } .pxi-checks li::before { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
.pxi-story-pic { height: 485px; margin-right: calc(-50vw + 655px); background: #E9EAEC; overflow: hidden; } .pxi-story-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section.pxi-vmv-sec, .section.pxi-cm-sec { padding: 40px 0 34px !important; }
.pxi-vmv, .pxi-cm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .pxi-cm { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.pxi-vmv > div, .pxi-cm > div { background: #fff; border: 1px solid #E8E8E8; border-radius: 4px; text-align: center; padding: 26px 22px 26px; } .pxi-vmv .pxi-ic, .pxi-cm .pxi-ic { width: 82px; height: 82px; }
.pxi-vmv h3 { font-size: 26px !important; font-weight: 700 !important; color: var(--px-ink) !important; margin: 0 0 12px !important; } .pxi-vmv h3 + div { color: #555; font-size: 19px; line-height: 1.6; }
.pxi-cm h3 { font-size: 21px !important; font-weight: 700 !important; color: var(--px-ink) !important; margin: 0 0 8px !important; } .pxi-cm h3 + div { color: #555; font-size: 18px; line-height: 1.55; }
.section.pxi-space-sec { padding: 36px 0 30px !important; }
.pxi-space { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .pxi-space > div { border: 1px solid #E8E8E8; border-radius: 4px; overflow: hidden; } .pxi-space-img { height: 255px; background: #E9EAEC; } .pxi-space-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxi-space-b { padding: 16px 28px 18px; } .pxi-space-b h3 { font-size: 22px !important; font-weight: 700 !important; color: var(--px-ink) !important; margin: 0 0 6px !important; } .pxi-space-b h3 + div { color: #555; font-size: 17px; }
.section.pxi-start-sec { padding: 26px 0 26px !important; }
.pxi-start { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 30px; align-items: start; } .pxi-start .pxi-h2x { font-size: 44px !important; margin-top: 16px; }
.pxi-bigtel { display: flex; align-items: center; gap: 22px; color: var(--px-red2) !important; font-size: 36px; font-weight: 700; margin-top: 30px; } .pxi-bigtel .px-hd-ic { width: 38px; height: 38px; flex-basis: 38px; }
.pxi-fbox { border: 1px solid #E4E4E4; border-radius: 4px; padding: 26px 28px 22px; background: #fff; }
.pxi-cf .px-f2 { gap: 0 26px; margin-bottom: 14px; } .pxi-cf label > span:first-child { font-size: 16px; color: #333; } .pxi-cf label > span i { color: var(--px-red2); font-style: normal; }
.pxi-cf input[type="email"] { height: 46px !important; margin: 0 !important; border: 1px solid #DCDCDC !important; border-radius: 4px !important; box-shadow: none !important; font-size: 15px !important; padding: 0 16px !important; }
.pxi-cf input[type="submit"] { height: 52px; font-size: 18px; }
/* ---------- liên hệ / bảng giá / trả góp ---------- */
.section.pxi-cband { padding: 26px 0 30px !important; } .pxi-cband .pxi-h1 { margin-top: 30px !important; margin-bottom: 0 !important; }
.section.pxi-ct-sec { padding: 34px 0 30px !important; }
.pxi-ct { display: grid; grid-template-columns: 717px minmax(0, 1fr); gap: 37px; } .pxi-ct-sub { color: #555; font-size: 19px; margin: 0 0 18px; }
.pxi-ct .pxi-fbox { padding: 28px 30px 22px; } .pxi-ct .pxi-cf input[type="text"], .pxi-ct .pxi-cf input[type="tel"], .pxi-ct .pxi-cf input[type="email"], .pxi-ct .pxi-cf select { height: 50px !important; } .pxi-ct .pxi-cf textarea { height: 96px !important; } .pxi-ct .pxi-cf label > span:first-child { font-size: 17px; font-weight: 600; } .pxi-ct .pxi-cf input[type="submit"] { height: 56px; }
.pxi-icard { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 32px; align-items: center; border: 1px solid #E4E4E4; border-radius: 4px; padding: 22px 24px; margin-bottom: 18px; font-size: 17px; color: #555; }
.pxi-icard-b { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 6px; background: #FDECEC; } .pxi-icard-b .px-fi { width: 44px; height: 44px; flex-basis: 44px; background: var(--px-red2); margin: 0; }
.pxi-fi-clock { --px-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.pxi-icard small { display: block; color: #333; font-size: 17px; } .pxi-icard-big { display: block; color: var(--px-red2) !important; font-size: 34px; font-weight: 700; line-height: 1.3; } .pxi-icard-mail { display: block; color: var(--px-red2) !important; font-size: 23px; font-weight: 700; margin-top: 4px; } .pxi-icard-addr { display: block; color: var(--px-red2); font-size: 23px; font-weight: 700; line-height: 1.4; margin-top: 4px; font-family: "Roboto", sans-serif; }
.section.pxi-map-sec { padding: 26px 0 26px !important; } .pxi-map-sec .pxi-ct-sub { margin-bottom: 14px; }
.pxi-map { position: relative; height: 282px; border: 2px solid #fff; border-radius: 4px; overflow: hidden; background: #E9EAEC; } .pxi-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.pxi-go { position: absolute; right: 12px; bottom: 12px; background: #fff; color: var(--px-red2) !important; font-weight: 700; font-size: 17px; padding: 12px 26px; border-radius: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.12); } .pxi-go i { font-style: normal; margin-left: 8px; }
.section.pxi-faq-sec { padding: 26px 0 26px !important; }
.pxi-faq { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 0; align-items: start; } .pxi-faq > div:first-child { padding-top: 34px; } .pxi-faq .pxi-uline { margin: 10px 0 30px; }
.pxi-acc { background: #fff; border: 1px solid #E4E4E4; border-radius: 4px; } .pxi-acc details { border-top: 1px solid #E4E4E4; padding: 0 24px; } .pxi-acc details:first-child { border-top: 0; }
.pxi-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; padding: 18px 0; font-size: 19px; font-weight: 500; color: #222; } .pxi-acc summary::-webkit-details-marker { display: none; } .pxi-acc details[open] summary { color: var(--px-red2); }
.pxi-acc summary::after { content: "+"; font-size: 30px; font-weight: 300; color: #333; line-height: 1; } .pxi-acc details[open] summary::after { content: "–"; color: var(--px-red2); }
.pxi-acc details > div { color: #555; font-size: 16px; line-height: 1.6; margin: -8px 0 16px; }
.section.pxi-doc-sec { padding: 34px 0 20px !important; }
.pxi-ptable { width: 100%; border-collapse: collapse; margin: 0 0 6px !important; border: 1px solid #E4E4E4; } .pxi-ptable th { background: var(--px-red); color: #fff !important; font-size: 17px; text-transform: none; letter-spacing: 0; padding: 14px 18px; text-align: left; border: 0; } .pxi-ptable td { padding: 14px 18px; font-size: 17px; border: 0; border-top: 1px solid #E4E4E4; } .pxi-ptable td a { color: #222 !important; font-weight: 600; } .pxi-ptable td b { color: var(--px-red2); } .pxi-ptable tr:nth-child(even) td { background: #FAFAFA; }
.pxi-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .pxi-steps > div { border: 1px solid #E4E4E4; border-radius: 4px; padding: 24px 22px; } .pxi-steps span { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--px-org); color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 14px; } .pxi-steps h3 { font-size: 21px !important; font-weight: 700 !important; color: var(--px-ink) !important; margin: 0 0 8px !important; } .pxi-steps h3 + div { color: #555; font-size: 17px; line-height: 1.55; }
/* ---------- mobile + khoảng giữa ---------- */
@media (max-width: 849px) {
  .pxi-h1, .pxi-ah1 { font-size: 32px !important; } .pxi-h2, .pxi-h2x, .pxi-start .pxi-h2x, .pxi-h2l { font-size: 28px !important; } .pxi-lead { font-size: 17px; } .pxi-csub { font-size: 16px !important; } .pxi-ptxt { font-size: 16px; }
  .pxi-band .pxi-wrap { padding-left: 15px; } .pxi-shop-in { grid-template-columns: minmax(0, 1fr); gap: 22px; } .pxi-side { order: 2; } .pxi-bar { flex-direction: column; gap: 8px; } .pxi-sort { margin: 0; }
  .pxi-grid, .pxi-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pxi-card-img, .pxi-grid4 .pxi-card-img { height: 110px; } .pxi-card-b { padding: 10px 10px 12px; } .pxi-card-b h3, .pxi-grid4 .pxi-card-b h3 { font-size: 15px !important; white-space: normal; } .pxi-card-b strong, .pxi-grid4 .pxi-card-b strong { font-size: 16px; } .pxi-card-b small { font-size: 13px; } .pxi-card-b .px-more { font-size: 14px; }
  .pxi-perks-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; } .pxi-perks-in > div:nth-child(3) { border-left: 0; } .pxi-perks-in h3 { font-size: 16px !important; } .pxi-perks-in h3 + div { font-size: 14px; }
  .pxi-pgrid, .pxi-dgrid, .pxi-story, .pxi-start, .pxi-ct, .pxi-faq, .pxi-vmv, .pxi-space { grid-template-columns: minmax(0, 1fr); gap: 20px; } .pxi-thumbs { gap: 8px; } .pxi-ptitle { font-size: 30px !important; } .pxi-pprice { font-size: 32px; } .pxi-meta { font-size: 17px; }
  .pxi-opts { grid-template-columns: 1fr 1fr; } .pxi-opts > div:first-child { grid-column: 1 / -1; } .pxi-perk3 { flex-direction: column; gap: 12px; }
  .pxi-tabs a { padding: 0 14px 12px; font-size: 17px; } .pxi-content h2 { font-size: 26px !important; } .pxi-content p, .pxi-ticks li { font-size: 16px; } .pxi-dpic { height: 220px; }
  .pxi-cost { flex-direction: column; align-items: stretch; padding: 22px 18px; gap: 12px; } .pxi-cost h3 { font-size: 23px !important; } .pxi-cost .px-btn { min-width: 0; }
  .pxi-ahero-txt { display: block; margin: 0; padding: 18px 0 20px; background: transparent; } .pxi-ahero-pic { position: relative; inset: auto; height: 230px; margin: 0 -15px; } .section.pxi-ahero .col-inner { display: flex; flex-direction: column-reverse; }
  .pxi-story-pic { margin: 0; height: 240px; } .pxi-checks li { font-size: 16px !important; }
  .pxi-cm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pxi-cm > div, .pxi-vmv > div { padding: 18px 12px; } .pxi-cm h3 { font-size: 16px !important; } .pxi-cm h3 + div, .pxi-vmv h3 + div { font-size: 14px; } .pxi-cm h3 + div br, .pxi-vmv h3 + div br { display: none; } .pxi-vmv h3 { font-size: 21px !important; } .pxi-cm .pxi-ic, .pxi-vmv .pxi-ic { width: 54px; height: 54px; }
  .pxi-space-img { height: 190px; } .pxi-space-b { padding: 14px 16px; } .pxi-space-b h3 { font-size: 18px !important; }
  .pxi-bigtel { font-size: 28px; } .pxi-fbox, .pxi-ct .pxi-fbox { padding: 18px 14px; } .pxi-cf .px-f2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pxi-icard { grid-template-columns: 60px minmax(0, 1fr); gap: 16px; padding: 16px; } .pxi-icard-b { width: 60px; height: 60px; } .pxi-icard-b .px-fi { width: 30px; height: 30px; flex-basis: 30px; } .pxi-icard-big { font-size: 26px; } .pxi-icard-mail { font-size: 17px; } .pxi-icard-addr { font-size: 18px; }
  .pxi-map { height: 240px; } .pxi-faq > div:first-child { padding-top: 0; } .pxi-acc details { padding: 0 14px; } .pxi-acc summary { font-size: 16px; }
  .pxi-ptable { display: block; overflow-x: auto; } .pxi-ptable th, .pxi-ptable td { padding: 10px; font-size: 14px; white-space: nowrap; } .pxi-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 850px) and (max-width: 1399px) {
  .pxi-shop-in { grid-template-columns: 280px minmax(0, 1fr); gap: 22px; } .pxi-pgrid { grid-template-columns: 54% minmax(0, 1fr); gap: 28px; } .pxi-opts { grid-template-columns: 1fr 1fr; } .pxi-opts > div:first-child { grid-column: 1 / -1; } .pxi-perk3 { flex-wrap: wrap; }
  .pxi-dgrid { grid-template-columns: minmax(0, 1fr) 46%; gap: 36px; } .pxi-cost { flex-wrap: wrap; padding: 26px 30px; } .pxi-cost .px-btn { min-width: 0; } .pxi-story { grid-template-columns: 48% minmax(0, 1fr); } .pxi-story-pic { margin-right: 0; } .pxi-ahero-txt { margin-left: -15px; padding-left: 15px; }
  .pxi-start { grid-template-columns: 42% minmax(0, 1fr); } .pxi-ct { grid-template-columns: 56% minmax(0, 1fr); } .pxi-faq { grid-template-columns: 36% minmax(0, 1fr); } .pxi-icard-big { font-size: 28px; } .pxi-icard-mail, .pxi-icard-addr { font-size: 19px; word-break: break-word; }
}
@media (min-width: 850px) and (max-width: 1099px) {
  .pxi-grid, .pxi-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pxi-pgrid, .pxi-dgrid, .pxi-story, .pxi-start, .pxi-ct, .pxi-faq { grid-template-columns: minmax(0, 1fr); } .pxi-cm, .pxi-perks-in, .pxi-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .pxi-perks-in > div:nth-child(3) { border-left: 0; }
}
/* sửa sau lượt chụp 1 */
.pxi-cost .px-btn-orange { width: auto; } .pxi-cost h3 { white-space: nowrap; }
.pxi-ptitle { font-size: 46px !important; }
@media (max-width: 1399px) { .pxi-cost h3 { white-space: normal; } }
@media (max-width: 849px) { .pxi-ptitle { font-size: 30px !important; } .pxi-cost .px-btn-orange { width: 100%; } }
/* ruler:manual (10-02) — theo bề rộng dòng (_cmpw): tiêu đề mô tả SP x1.22, "Bắt đầu hành trình" x1.08; logo chân trang NHO chỉ trên mockup trang trong (trang chủ đã khớp) -> giữ */
@media (min-width: 850px) { .pxi-content h2 { font-size: 46px !important; } .pxi-start .pxi-h2x { font-size: 47px !important; } }
/* ---------- (10-02) dịch vụ, bài khuyến mãi, chuyên mục ---------- */
.section.pxi-svc-sec { padding: 40px 0 10px !important; }
.pxi-svc2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .pxi-svc2 > div { border: 1px solid #E8E8E8; border-radius: 4px; padding: 28px 30px; background: #FAFAFA; } .pxi-svc2 .pxi-ic { margin: 0 0 14px; width: 66px; height: 66px; }
.pxi-svc2 h3 { font-size: 24px !important; font-weight: 700 !important; color: var(--px-ink) !important; margin: 0 0 8px !important; } .pxi-svc2 h3 + div { color: #555; font-size: 18px; line-height: 1.6; margin-bottom: 12px; }
.pxi-post-h1 { font-size: 46px !important; } .pxi-post .pxi-band, .pxi-blog .pxi-band { padding: 26px 0 8px; }
.pxi-postgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; padding-top: 30px; align-items: start; }
.pxi-article-img { border-radius: 4px; overflow: hidden; margin-bottom: 22px; } .pxi-article-img img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; }
.pxi-article-c h2 { font-size: 30px !important; margin: 20px 0 8px !important; } .pxi-article-c p { font-size: 19px; color: #444; line-height: 1.6; margin: 0 0 14px; }
.pxi-post .pxi-ask { margin-top: 0; } .pxi-relposts { padding-top: 26px; padding-bottom: 40px; }
.pxi-pgrid2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pxi-pc2 { display: block; border: 1px solid #E4E4E4; border-radius: 4px; overflow: hidden; background: #fff; color: inherit !important; } .pxi-pc2-img { display: block; height: 210px; background: #E9EAEC; overflow: hidden; } .pxi-pc2-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pxi-pc2-b { display: block; padding: 16px 24px 20px; } .pxi-pc2-b small { display: block; color: var(--px-org); font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; } .pxi-pc2-b strong { display: block; font-family: "Roboto", sans-serif; font-size: 24px; color: var(--px-ink); margin-bottom: 6px; } .pxi-pc2-b em { display: block; font-style: normal; color: #666; font-size: 16px; line-height: 1.5; }
@media (max-width: 849px) { .pxi-svc2, .pxi-pgrid2 { grid-template-columns: minmax(0, 1fr); gap: 14px; } .pxi-svc2 > div { padding: 20px 18px; } .pxi-svc2 h3 + div { font-size: 16px; } .pxi-post-h1 { font-size: 28px !important; } .pxi-postgrid { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 18px; } .pxi-article-c p { font-size: 16px; } }
@media (min-width: 850px) and (max-width: 1099px) { .pxi-postgrid { grid-template-columns: minmax(0, 1fr); } .pxi-pgrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }