/**
 * Vinpack — CSS CHỈ CỦA template "Dịch vụ - Landing"
 * (page-templates/dich-vu-landing.php, 29/09/2026).
 *
 * Nạp khi is_page_template( 'page-templates/dich-vu-landing.php' ) — xem
 * inc/enqueue.php. Mọi class mang tiền tố `.dvl-` để không đụng home.css
 * (cũng nạp trên trang này cho sáu khối mượn trang chủ; home.css không bọc
 * trong phạm vi nào nên `.cta`, `.hero`… của nó áp mọi nơi nó được nạp).
 *
 * Chỉ dùng token của global.css — không màu/khoảng cách viết cứng ngoài
 * rgba() của trắng trên nền navy. Mobile-first: 768 / 1024.
 */

/* ---- nhịp khối ---- */
.dvl-sec{ padding-block:var(--sp-8); }
.dvl-sec--nhat{ background:var(--bg-alt); }
.dvl-head{ max-width:760px; margin-inline:auto; text-align:center; }
.dvl-head > p:last-child{ margin-bottom:0; }
.dvl-note{ max-width:760px; margin:var(--sp-6) auto 0; color:var(--text-muted); text-align:center; font-size:15px; }
.dvl-note p{ margin:0 0 var(--sp-2); }
.dvl-eyebrow{
	display:inline-flex; align-items:center; gap:var(--sp-2);
	margin:0 0 var(--sp-3);
	font:700 13px/1.4 var(--font-head); letter-spacing:.08em; text-transform:uppercase;
	color:var(--on-navy-accent);
}
.dvl-eyebrow::before{ content:""; width:8px; height:8px; border-radius:var(--r-full); background:currentColor; }

/* ---- thẻ dùng chung ---- */
.dvl-card{
	position:relative;
	background:var(--white);
	border:1px solid var(--border);
	border-radius:var(--r-lg);
	padding:var(--sp-5);
	box-shadow:var(--sh-1);
	transition:transform var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.dvl-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }

/* ---- nút liên hệ ---- */
.dvl-actions{ display:flex; flex-direction:column; gap:var(--gap-inline); margin-top:var(--sp-5); }
.dvl-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
	min-height:48px; padding:12px 22px;
	border:2px solid transparent; border-radius:var(--r-btn);
	font:700 15.5px/1.2 var(--font-head); text-decoration:none;
	transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.dvl-btn:hover{ transform:translateY(-2px); }
.dvl-btn--chinh{ background:var(--white); color:var(--navy); }
.dvl-btn--chinh:hover{ background:var(--bg-alt); color:var(--navy-dark); }
.dvl-btn--zalo{ background:var(--fab-zalo); color:var(--white); }
.dvl-btn--zalo:hover{ background:var(--navy); color:var(--white); }
.dvl-btn--vien{ background:transparent; border-color:var(--white); color:var(--white); }
.dvl-btn--vien:hover{ background:rgba(255, 255, 255, .14); color:var(--white); }
.dvl-btn:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; }

/* ---- 1. đầu trang ---- */
.dvl-hero{
	background:
		radial-gradient(1200px 500px at 85% -10%, rgba(92, 144, 245, .35), transparent 60%),
		linear-gradient(135deg, var(--navy-dark), var(--navy));
	color:var(--white);
	padding-block:var(--sp-6) var(--sp-7);
	overflow:hidden;
}
.dvl-hero-in{ display:grid; gap:var(--sp-6); align-items:center; }
.dvl-hero .crumb{ font-size:13px; color:var(--on-navy-text); margin-bottom:var(--sp-5); }
.dvl-hero .crumb a{ color:var(--on-navy-text-2); text-decoration:none; }
.dvl-hero .crumb a:hover{ color:var(--white); text-decoration:underline; }
.dvl-hero-title{
	margin:0 0 var(--sp-4);
	font:800 clamp(28px, 6vw, 46px)/1.15 var(--font-head);
	color:var(--white); text-wrap:balance;
}
.dvl-hero-lead{ color:var(--on-navy-text-2); font-size:16px; line-height:1.7; max-width:620px; }
.dvl-hero-lead p{ margin:0 0 var(--sp-3); }
.dvl-checks{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-2); }
.dvl-checks li{ position:relative; padding-left:30px; font-weight:600; color:var(--white); }
.dvl-checks li::before{
	content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:var(--r-full);
	background:var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 10.5 3 3 6-7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.dvl-hero-media img{
	display:block; width:100%; height:auto;
	border-radius:var(--r-xl); box-shadow:var(--sh-4);
	border:1px solid rgba(255, 255, 255, .18);
}

/* ---- 4. thẻ danh mục ---- */
.dvl-dm-grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap-card); }
.dvl-dm-ico{
	flex:none; display:grid; place-items:center; width:52px; height:52px;
	border-radius:var(--r-card); background:var(--bg-alt); color:var(--navy);
}
.dvl-dm-ico img{ width:32px; height:32px; object-fit:contain; }

/* ---- 5. tab ---- */
.dvl-tabs.is-js .dvl-tablist[hidden]{ display:flex; }
.dvl-tablist{
	display:flex; gap:var(--sp-2); margin-bottom:var(--sp-5);
	overflow-x:auto; scrollbar-width:none; padding:4px;
	background:var(--bg-alt); border-radius:var(--r-pill); width:100%; max-width:100%; margin-inline:auto;
}
.dvl-tablist::-webkit-scrollbar{ display:none; }
/* Điện thoại (30/09/2026, chủ site: "tối ưu cho mobile"): thanh tab phủ hết
   chiều ngang, các tab chia đều — không còn thanh cuộn ngang với 2–3 tab.
   Tab không co dưới bề rộng chữ, nên nhiều tab hơn thì vẫn cuộn được. */
.dvl-tab{
	flex:1 0 auto; min-height:44px; padding:10px 16px; border:0; border-radius:var(--r-pill);
	background:transparent; color:var(--navy); font:700 15px/1.2 var(--font-head); cursor:pointer;
	transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.dvl-tab[aria-selected="true"]{ background:var(--navy); color:var(--white); box-shadow:var(--sh-2); }
.dvl-tab:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.dvl-panel{
	background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
	padding:var(--sp-5); box-shadow:var(--sh-1);
}
.dvl-panel + .dvl-panel{ margin-top:var(--sp-5); }
.dvl-tabs.is-js .dvl-panel + .dvl-panel{ margin-top:0; }
.dvl-tabs.is-js .dvl-panel[hidden]{ display:none; }
.dvl-panel:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.dvl-panel > :first-child{ margin-top:0; }
.dvl-panel table{ display:block; overflow-x:auto; }

/* ---- 6. gia công ---- */
.dvl-step h3{ margin:0 0 var(--sp-2); font:800 18px/1.35 var(--font-head); color:var(--text); }
.dvl-step p{ margin:0; color:var(--text-muted); font-size:15px; line-height:1.65; }

/* ---- 9. quy trình ---- */
.dvl-steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-5); counter-reset:none; }
.dvl-step{ position:relative; padding-left:64px; }
.dvl-step-num{
	position:absolute; left:0; top:0; display:grid; place-items:center;
	width:48px; height:48px; border-radius:var(--r-full);
	background:var(--white); border:2px solid var(--cobalt); color:var(--navy);
	font:800 18px/1 var(--font-head); z-index:1;
}
.dvl-step:not(:last-child)::before{
	content:""; position:absolute; left:23px; top:52px; bottom:calc(-1 * var(--sp-5));
	width:2px; background:var(--decor);
}

/* ---- 11. đội ngũ ---- */
/* Đội ngũ: xem mục 11 (bản 30/09/2026) cuối file. */

/* ---- 12. đánh giá ---- */
.dvl-rv{
	list-style:none; margin:0; padding:4px 4px var(--sp-4); display:grid; grid-auto-flow:column;
	grid-auto-columns:minmax(280px, 86%); gap:var(--gap-card);
	overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
}
.dvl-rv:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.dvl-rv-card{ scroll-snap-align:start; display:flex; flex-direction:column; gap:var(--sp-4); }
.dvl-rv-quote{ margin:0; color:var(--text); font-size:15.5px; line-height:1.7; }
.dvl-rv-quote::before{ content:"“"; display:block; font:800 44px/0.8 var(--font-head); color:var(--cobalt); }
.dvl-rv-who{ margin-top:auto; display:flex; align-items:center; gap:var(--sp-3); }
.dvl-rv-who strong{ display:block; font-family:var(--font-head); }
.dvl-rv-who small{ color:var(--text-muted); }
.dvl-rv-ava{
	flex:none; width:44px; height:44px; border-radius:var(--r-full); overflow:hidden;
	display:grid; place-items:center; background:var(--navy); color:var(--white); font:800 17px/1 var(--font-head);
}
.dvl-rv-ava img{ width:100%; height:100%; object-fit:cover; }

/* ---- 13. bài tư vấn ---- */
.dvl-baiviet{ padding-block:var(--sp-7); }

/* ---- 14. câu hỏi ---- */
.dvl-faq-wrap{ max-width:880px; }
.dvl-faq{ display:grid; gap:var(--sp-3); }
.dvl-faq-item{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh-1); }
.dvl-faq-item summary{
	list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--sp-3);
	padding:var(--sp-4) var(--sp-5); min-height:56px;
}
.dvl-faq-item summary::-webkit-details-marker{ display:none; }
.dvl-faq-item summary::after{
	content:""; flex:none; margin-left:auto; width:12px; height:12px;
	border-right:2.5px solid var(--navy); border-bottom:2.5px solid var(--navy);
	transform:rotate(45deg) translateY(-3px); transition:transform var(--dur-state) var(--ease);
}
.dvl-faq-item[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.dvl-faq-item summary:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-card); }
.dvl-faq-q{ margin:0; font:700 16.5px/1.45 var(--font-head); color:var(--text); }
.dvl-faq-a{ padding:0 var(--sp-5) var(--sp-4); color:var(--text-muted); line-height:1.7; }
.dvl-faq-a p{ margin:0 0 var(--sp-2); }

/* ---- 15. form báo giá (30/09/2026: khối 3 nút cũ -> form + cột trái) ---- */
.dvl-cta{ scroll-margin-top:var(--sp-7); }
.dvl-cta-box{
	display:grid; gap:var(--sp-6);
	color:var(--white);
	background:
		radial-gradient(700px 300px at 10% 0%, rgba(92, 144, 245, .35), transparent 60%),
		linear-gradient(135deg, var(--navy-dark), var(--navy));
	border-radius:var(--r-xl); padding:var(--sp-6) var(--sp-4); box-shadow:var(--sh-4);
}
.dvl-cta-copy h2{ color:var(--white); margin:0 0 var(--sp-3); text-wrap:pretty; }
.dvl-cta-copy p{ color:var(--on-navy-text-2); margin:0 0 var(--sp-3); line-height:1.7; }
.dvl-form{
	background:var(--white); color:var(--text);
	border-radius:var(--r-lg); padding:var(--sp-5) var(--sp-4); box-shadow:var(--sh-3);
	display:grid; gap:var(--sp-4); align-content:start;
}
.dvl-form-row{ display:grid; gap:var(--sp-4); }
.dvl-field{ display:grid; gap:6px; }
.dvl-field label{ font:700 14px/1.4 var(--font-head); color:var(--text); }
.dvl-field .req{ color:var(--danger); }
.dvl-field input, .dvl-field select, .dvl-field textarea{
	width:100%; min-height:48px; padding:12px 14px;
	border:1px solid var(--border); border-radius:var(--r-card);
	background:var(--white); color:var(--text); font:400 16px/1.4 var(--font-body);
}
.dvl-field textarea{ min-height:112px; resize:vertical; }
.dvl-field input:focus-visible, .dvl-field select:focus-visible, .dvl-field textarea:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:1px; border-color:var(--navy); }
.dvl-form-gui{ width:100%; }
.dvl-form-note{ margin:0; font-size:13px; color:var(--text-muted); text-align:center; }
.dvl-form-bao{ margin:0; padding:12px 14px; border-radius:var(--r-card); font-weight:600; line-height:1.55; }
.dvl-form-bao--ok{ background:var(--bg-alt); color:var(--navy); border:1px solid var(--cobalt); }
.dvl-form-bao--loi{ background:color-mix(in srgb, var(--danger) 8%, var(--white)); color:var(--danger); border:1px solid var(--danger); }
/* Honeypot: ngoài khung nhìn, KHÔNG display:none — cùng cách page-lienhe.css (không nạp ở trang này). */
.dvl-form .vp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* nút đặc navy trên nền sáng (form, dòng hỏi tư vấn dưới thẻ giá) */
.dvl-btn--dac{ background:var(--navy); color:var(--white); border:0; cursor:pointer; }
.dvl-btn--dac:hover{ background:var(--navy-dark); color:var(--white); }

/* ---- 4b. thẻ nổi bật + dòng hỏi tư vấn (30/09/2026) ---- */
.dvl-dm-hoi{
	margin:var(--sp-6) auto 0; max-width:760px;
	display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); text-align:center;
}
.dvl-dm-hoi p{ margin:0; font:700 17px/1.5 var(--font-head); color:var(--text); }

/* ---- ≥ 768px ---- */
@media (min-width:768px){
	.dvl-actions{ flex-direction:row; flex-wrap:wrap; }
	.dvl-dm-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.dvl-rv{ grid-auto-columns:calc(50% - var(--gap-card) / 2); }
	.dvl-tablist{ width:max-content; }
	.dvl-tab{ flex:none; padding-inline:20px; }
	.dvl-panel{ padding:var(--sp-6); }
	.dvl-form-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.dvl-form{ padding:var(--sp-6); }
	.dvl-cta-box{ padding:var(--sp-7) var(--sp-6); }
}

/* ---- ≥ 1024px ---- */
@media (min-width:1024px){
	.dvl-hero{ padding-block:var(--sp-6) var(--sp-8); }
	.dvl-hero-in{ grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:var(--sp-7); }
	.dvl-hero-in--1cot{ grid-template-columns:minmax(0, 1fr); max-width:860px; }

	/* 5 thẻ: 3 trên + 2 dưới căn giữa — lưới 6 cột, mỗi thẻ 2 cột. */
	.dvl-dm-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
	.dvl-dm-card{ grid-column:span 2; }
	.dvl-dm-card:nth-last-child(2):nth-child(3n + 1){ grid-column:2 / span 2; }


	/* Quy trình nằm ngang: số tròn trên một đường nối. */
	.dvl-steps{ grid-template-columns:repeat(var(--dvl-so-buoc, 4), minmax(0, 1fr)); gap:var(--gap-card); }
	.dvl-step{ padding-left:0; padding-top:64px; text-align:center; }
	.dvl-step-num{ left:50%; transform:translateX(-50%); }
	.dvl-step:not(:last-child)::before{ left:calc(50% + 28px); right:calc(-50% + 28px); top:23px; bottom:auto; width:auto; height:2px; }

	.dvl-rv{ grid-auto-columns:calc((100% - 2 * var(--gap-card)) / 3); }
	.dvl-cta-box{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:var(--sp-7); align-items:start; padding:var(--sp-8) var(--sp-7); }
	.dvl-cta-box .dvl-actions{ flex-direction:column; align-items:stretch; max-width:340px; }
}

@media (prefers-reduced-motion:reduce){
	.dvl-card, .dvl-btn, .dvl-tab, .dvl-faq-item summary::after{ transition:none; }
	.dvl-card:hover, .dvl-btn:hover{ transform:none; }
}

/* ==================================================================
   BẢN 30/09/2026 — chủ site góp ý nháp 148233 (5 điểm). Khai CUỐI file
   để đứng sau mọi rule gốc cùng độ ưu tiên (kể cả rule trong @media).
   ================================================================== */

/* ---- A. chữ mồ côi: một chữ trơ trọi ở dòng cuối ----
   Áp cả khối mượn của trang chủ (home.css dùng balance ở vài tiêu đề). #vp-main
   chỉ có ở template này (CSS này chỉ nạp ở đây) nên không lan sang trang khác.
   Tiêu đề trong part dvl-* còn dính 2 chữ cuối bằng   (vinpack_dvl_nbsp)
   cho trình duyệt chưa hỗ trợ pretty. */
#vp-main :is(h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote, summary){ text-wrap:pretty; }

/* ---- B. nhịp giữa các khối ----
   Khoảng trắng lớn = HAI padding cộng lại (khối trên pb + khối dưới pt), không
   phải một khối khai số to. Chuẩn dự án: --sp-8 (96px ≥901px, 64px dưới), mỗi
   dải trống chỉ MỘT chủ — hai khối CÙNG nền đứng liền thì khối sau nhường
   padding-top. Khác nền thì giữ cả hai (ranh giới màu tự tách khối).
   Nền xanh nhạt: .stats (mượn trang chủ) + .dvl-sec--nhat; còn lại nền trắng. */
#vp-main > section:not(.dvl-hero){ padding-block:var(--sp-8); }
#vp-main > section:not(.dvl-hero, .stats, .dvl-sec--nhat) + section:not(.dvl-hero, .stats, .dvl-sec--nhat),
#vp-main > :is(.stats, .dvl-sec--nhat) + :is(.stats, .dvl-sec--nhat){ padding-top:0; }
/* --text-muted trên --bg-alt chỉ 4.24:1 (trượt AA chữ 16px) — cùng lý do page-nangluc.css mục 2. */
.dvl-sec--nhat .dvl-head p{ color:var(--text); }

/* ---- C. băng chuyền thẻ giá (túi nilon ở giữa, nút ‹ › hai bên) ----
   Chưa có JS: giữ lưới 5 thẻ ở trên. Có JS (.is-js): thẻ chồng một ô lưới —
   chiều cao khối = thẻ cao nhất, không cần đo — mỗi thẻ dịch theo --pos. */
.dvl-dm-slider{ position:relative; }
.dvl-dm-slider.is-js{
	--dvl-dm-w:calc(100vw - 104px);
	--dvl-dm-cach:8px;
	overflow-x:clip;
	padding-top:18px;
	/* 01/10/2026 mẫu A: nút ‹ › và chấm cùng một hàng DƯỚI thẻ. */
	display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--sp-5) 14px;
}
.dvl-dm-slider.is-js .dvl-dm-grid{ flex:0 0 100%; }
.dvl-dm-slider.is-js .dvl-dm-nav--truoc{ order:1; }
.dvl-dm-slider.is-js .dvl-dm-dots{ order:2; }
.dvl-dm-slider.is-js .dvl-dm-nav--sau{ order:3; }
.dvl-dm-slider.is-js .dvl-dm-grid{ display:grid; grid-template-columns:minmax(0, 1fr); justify-items:center; }
.dvl-dm-slider.is-js .dvl-dm-card{
	grid-area:1 / 1;
	width:var(--dvl-dm-w);
	transform:translateX(calc(var(--pos, 0) * (var(--dvl-dm-w) * .95 + var(--dvl-dm-cach)))) scale(.9);
	opacity:.55;
	z-index:1;
	cursor:pointer;
	transition:transform .45s var(--ease), opacity .3s var(--ease), box-shadow var(--dur-state) var(--ease);
}
.dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]{ transform:none; opacity:1; z-index:3; cursor:auto; }
.dvl-dm-slider.is-js .dvl-dm-card[data-pos="2"]{ opacity:0; visibility:hidden; z-index:0; }
.dvl-dm-slider.is-js .dvl-dm-card[data-pos="1"]:hover{ opacity:.8; }
/* Chữ mồ côi ở chỗ hẹp (đo 375px, 30/09/2026): link "Xem tất cả dự án" của khối
   mượn trang chủ bị bó 126px -> "án" rớt dòng; cột tên công nghệ trong bảng
   103px -> "số" rớt dòng. Bảng đã tự cuộn ngang trong khung (.dvl-panel table). */
#vp-main .home-duan-all a{ white-space:nowrap; }
.dvl-panel td:first-child{ white-space:nowrap; }
.dvl-dm-nav{
	width:46px; height:46px; padding:0;
	border:1px solid var(--border); border-radius:var(--r-full);
	background:var(--white); color:var(--navy); box-shadow:var(--sh-3);
	cursor:pointer; transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.dvl-dm-slider.is-js .dvl-dm-nav{ display:grid; place-items:center; }
.dvl-dm-nav:hover{ background:var(--navy); color:var(--white); }
.dvl-dm-nav:focus-visible, .dvl-dm-dot:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.dvl-dm-slider.is-js .dvl-dm-dots{ display:flex; justify-content:center; gap:6px; }
.dvl-dm-dot{ width:28px; height:28px; padding:0; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; }
.dvl-dm-dot::before{ content:""; width:10px; height:10px; border-radius:var(--r-full); background:var(--decor); transition:width var(--dur-state) var(--ease), background var(--dur-state) var(--ease); }
.dvl-dm-dot[aria-current="true"]::before{ width:26px; background:var(--navy); }

/* ---- D. chứng nhận (thẻ .nl-cert dùng chung — assets/css/cert-cards.css) ---- */
/* Điện thoại: 6 chứng nhận xếp 1 cột cao ~3.750px — landing cho 2 cột (trang Năng lực giữ 1 cột, rule ở cert-cards.css). */
@media (max-width:600px){
	.dvl-certs .nl-certs{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
	.dvl-certs .nl-cert-img{ padding:var(--sp-3); }
	.dvl-certs .nl-cert-body{ padding:var(--sp-3); }
	.dvl-certs .nl-cert-body h4{ font-size:15px; }
	.dvl-certs .nl-cert-note{ font-size:12.5px; }
}
/* Desktop: 3 thẻ/hàng trên cả khung 1180px (chủ site: "3 trên 3 dưới cho hình được to hơn";
   bản trước để 6 thẻ một hàng, ảnh quá nhỏ). */
@media (min-width:1024px){
	.dvl-certs .nl-certs{ max-width:none; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-6); }
}
.dvl-certs-more{ margin:var(--sp-6) 0 0; text-align:center; }
.dvl-certs-link{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font:700 15px/1 var(--font-head); color:var(--cobalt-ink); text-decoration:none; }
.dvl-certs-link:hover{ color:var(--navy); text-decoration:underline; }

/* ---- 11. đội ngũ (bản 30/09/2026: thẻ người đầu nằm ngang + mô tả từng người) ---- */
.dvl-team-lead{
	display:grid; gap:var(--sp-5); align-items:center;
	max-width:980px; margin:0 auto var(--gap-card);
}
.dvl-team-lead-photo{
	width:132px; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden;
	display:grid; place-items:center; background:var(--bg-alt); color:var(--icon-muted);
}
.dvl-team-lead-photo img{ width:100%; height:100%; object-fit:cover; }
.dvl-team-lead-photo svg, .dvl-team-photo svg{ width:58%; height:58%; }
.dvl-team-lead .dvl-team-name{ font-size:24px; }
.dvl-team-role{ margin:0 0 6px; color:var(--cobalt-ink); font:700 12.5px/1.45 var(--font-head); letter-spacing:.06em; text-transform:uppercase; }
.dvl-team-name{ margin:0; font:800 18px/1.3 var(--font-head); color:var(--text); }
.dvl-team-desc{ margin:var(--sp-3) 0 0; color:var(--text-muted); font-size:15px; line-height:1.7; }
.dvl-team-more{ display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:var(--sp-2); font:700 15px/1 var(--font-head); color:var(--cobalt-ink); text-decoration:none; }
.dvl-team-more:hover{ color:var(--navy); text-decoration:underline; }
.dvl-team{ list-style:none; margin:0 auto; padding:0; display:grid; gap:var(--gap-card); max-width:980px; }
.dvl-team-card{ display:flex; flex-direction:column; }
/* Ảnh trên, tên dưới: đặt ngang thì tên 4 chữ gãy 2 dòng trong cột 1/3 (đo 30/09/2026). */
.dvl-team-top{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
.dvl-team-top .dvl-team-role{ margin:4px 0 0; }
.dvl-team-photo{
	flex:none; width:72px; height:72px; border-radius:var(--r-full); overflow:hidden;
	display:grid; place-items:center; background:var(--bg-alt); color:var(--icon-muted);
}
.dvl-team-photo img{ width:100%; height:100%; object-fit:cover; }

@media (min-width:768px){
	.dvl-dm-slider.is-js{ --dvl-dm-w:min(380px, 46vw); --dvl-dm-cach:var(--sp-5); }
	.dvl-team-lead{ grid-template-columns:200px minmax(0, 1fr); gap:var(--sp-6); padding:var(--sp-6); }
	.dvl-team-lead-photo{ width:200px; }
	.dvl-team{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1024px){
	.dvl-team{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion:reduce){
	.dvl-dm-slider.is-js .dvl-dm-card, .dvl-dm-dot::before, .dvl-dm-nav{ transition:none; }
}

/* ==================================================================
   ĐỢT 3 — 30/09/2026 (chủ site góp ý lần 2: ảnh đầu trang, dự án +
   gallery, chứng nhận 3×2, tách xưởng/công nghệ/gia công, thẻ giá).
   ================================================================== */

/* ---- E. thẻ giá kiểu bảng giá dịch vụ: giá lên đầu, nút lớn ----
   Thẻ ĐANG CHỌN (giữa băng chuyền; chưa có JS thì thẻ có nhãn nổi bật) nền
   navy, nút trắng — cùng cặp màu nút chính ở đầu trang. Thẻ còn lại nền
   trắng, nút navy đặc. Nhãn nổi bật là thanh ngang trên đỉnh thẻ. */
.dvl-dm-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; text-align:center; }
.dvl-dm-in{ flex:1; display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); }
.dvl-dm-badge{
	display:block; padding:9px var(--sp-4);
	background:var(--navy); color:var(--white);
	font:800 12.5px/1.2 var(--font-head); letter-spacing:.08em; text-transform:uppercase;
}
.dvl-dm-name{ margin:0; font:800 21px/1.3 var(--font-head); color:var(--navy); }
.dvl-dm-gia{ margin:var(--sp-2) 0 0; font-family:var(--font-head); color:var(--navy); line-height:1.15; }
.dvl-dm-gia strong{ font-size:30px; font-weight:800; }
.dvl-dm-dv{ margin-left:4px; font-size:15px; font-weight:600; color:var(--text-muted); }
.dvl-dm-cta{ width:100%; margin-top:var(--sp-2); background:var(--navy); color:var(--white); box-shadow:var(--sh-2); }
.dvl-dm-cta:hover{ background:var(--navy-dark); color:var(--white); }
.dvl-dm-list{
	list-style:none; margin:var(--sp-2) 0 0; padding:var(--sp-4) 0 0;
	border-top:1px solid var(--border);
	display:grid; gap:8px; text-align:left; font-size:14.5px; color:var(--text);
}
.dvl-dm-list li, .dvl-list li{ position:relative; padding-left:28px; line-height:1.55; }
.dvl-dm-list li::before, .dvl-list li::before{
	content:""; position:absolute; left:0; top:2px; width:19px; height:19px; border-radius:var(--r-full);
	background:var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 10.5 3 3 6-7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.dvl-dm-tu{ font-size:15px; font-weight:600; color:var(--text-muted); }
.dvl-dm-muc{ margin:var(--sp-2) 0 0; padding-top:var(--sp-4); border-top:1px solid var(--border); text-align:left; font:800 13px/1.3 var(--font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--cobalt-ink); }
.dvl-dm-muc + .dvl-dm-list{ margin-top:0; padding-top:0; border-top:0; }
/* Cam kết: icon khiên thay dấu tích. */
.dvl-dm-list--ck li::before{ background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 4 5v4.5c0 3.7 2.6 6.6 6 8 3.4-1.4 6-4.3 6-8V5z'/%3E%3Cpath d='m7.5 10 2 2 3.5-4'/%3E%3C/svg%3E") center/13px no-repeat; }
/* Hỗ trợ: icon tai nghe. */
/* Dòng thương hiệu đã làm: icon ngôi sao, tên thương hiệu đậm. */
.dvl-dm-th::before{ background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='m10 3 2.1 4.3 4.7.7-3.4 3.3.8 4.7L10 13.8 5.8 16l.8-4.7L3.2 8l4.7-.7z'/%3E%3C/svg%3E") center/13px no-repeat; }
.dvl-dm-th span{ color:var(--text-muted); }
.dvl-dm-th strong{ color:var(--navy); }
/* Dòng thương hiệu đã làm: đoạn riêng dưới 3 nhóm (01/10/2026), icon ngôi sao. */
.dvl-dm-th{ position:relative; margin:var(--sp-2) 0 0; padding:var(--sp-4) 0 0 28px; border-top:1px solid var(--border); text-align:left; font-size:14.5px; line-height:1.55; }
.dvl-dm-th::before{ content:""; position:absolute; left:0; top:calc(var(--sp-4) + 2px); width:19px; height:19px; border-radius:var(--r-full); }
.dvl-dm-xem{
	/* inline-block chứ không flex: flex tách chữ và mũi tên thành 2 ô, xuống dòng thì → trôi ra mép. */
	margin-top:auto; align-self:center; display:inline-block; min-height:44px; padding:13px 0;
	font:700 14.5px/1.2 var(--font-head); color:var(--cobalt-ink); text-decoration:none;
	text-align:center; text-wrap:balance;
}
.dvl-dm-xem:hover{ color:var(--navy); text-decoration:underline; }
.dvl-dm-xem:focus-visible, .dvl-dm-cta:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }

:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]){
	background:linear-gradient(160deg, var(--navy), var(--navy-dark));
	border-color:transparent; box-shadow:var(--sh-4);
}
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) :is(.dvl-dm-name, .dvl-dm-gia, .dvl-dm-list, .dvl-dm-xem){ color:var(--white); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) :is(.dvl-dm-tu, .dvl-dm-dv, .dvl-dm-th span){ color:var(--on-navy-text-2); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-th strong{ color:var(--white); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-muc{ color:var(--on-navy-accent); border-top-color:rgba(255, 255, 255, .2); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-th{ border-top-color:rgba(255, 255, 255, .2); }
/* Thẻ navy: mọi icon nền trắng mờ, phân biệt nhóm bằng hình (dấu tích, tai nghe, khiên, ngôi sao). */
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) :is(.dvl-dm-list li, .dvl-dm-th)::before{ background-color:rgba(255, 255, 255, .18); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-list{ border-top-color:rgba(255, 255, 255, .2); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-cta{ background:var(--white); color:var(--navy); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-cta:hover{ background:var(--bg-alt); color:var(--navy-dark); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-badge{ background:var(--on-navy-accent); color:var(--navy-dark); }

/* ---- F. khối thẻ ảnh: xưởng & công nghệ in, gia công sau in ---- */
.dvl-gc-dau{ display:grid; gap:var(--sp-5); align-items:center; margin-bottom:var(--sp-7); }
.dvl-gc-dau-anh img{ display:block; width:100%; height:auto; border-radius:var(--r-xl); box-shadow:var(--sh-3); }
.dvl-gc-dau-chu h2{ margin:0 0 var(--sp-4); }
.dvl-gc-dau-chu > p{ margin:0 0 var(--sp-3); color:var(--text); line-height:1.75; }
.dvl-list{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:8px; }
.dvl-gc-dau-chu .dvl-list{ font-weight:600; color:var(--navy); }
.dvl-head .dvl-list{ display:inline-grid; text-align:left; }
.dvl-gc-grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap-card); }
.dvl-gc-card{ display:flex; flex-direction:column; }
.dvl-gc-card--anh{ padding:0; overflow:hidden; }
.dvl-gc-photo{ aspect-ratio:16 / 10; overflow:hidden; background:var(--img-bg); }
.dvl-gc-photo img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.dvl-gc-card--anh:hover .dvl-gc-photo img{ transform:scale(1.04); }
.dvl-gc-card--anh .dvl-gc-body{ padding:var(--sp-5); }
.dvl-gc-ico{
	display:grid; place-items:center; width:48px; height:48px; margin-bottom:var(--sp-3);
	border-radius:var(--r-card); background:var(--navy); color:var(--white);
	font:800 16px/1 var(--font-head);
}
.dvl-gc-body h3{ margin:0 0 var(--sp-2); font:800 18px/1.35 var(--font-head); color:var(--text); }
.dvl-gc-body p{ margin:0 0 var(--sp-2); color:var(--text-muted); font-size:15px; line-height:1.65; }
.dvl-gc-body .dvl-list{ margin-top:var(--sp-2); font-size:14.5px; color:var(--text); }

/* ---- G. dự án tiêu biểu: đầu khối căn giữa, "Xem tất cả" xuống dưới lưới ---- */
#vp-main .home-duan{ display:flex; flex-direction:column; }
#vp-main .home-duan .section-head{ max-width:1000px; margin-inline:auto; text-align:center; }
#vp-main .home-duan .section-head p{ margin-inline:auto; }
#vp-main .home-duan-all{ order:2; justify-content:center; margin-top:var(--sp-6); }

/* ---- H. gallery tràn hai mép như khối đối tác + ảnh lớn hơn ----
   home.css để khối .wrap đệm hai bên (ảnh chạy trong 1.116px, mỗi ảnh 260×168);
   ở landing dải ảnh chạy hết bề ngang, mép mờ dần như dải logo đối tác. */
#vp-main .gallery{ padding-inline:0; max-width:none; }
#vp-main .gallery .section-head{ max-width:1180px; margin-inline:auto; padding-inline:16px; }
#vp-main .gallery .gallery-row{
	width:100%;
	-webkit-mask-image:linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
	mask-image:linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}

@media (min-width:768px){
	.dvl-gc-dau{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:var(--sp-7); }
	.dvl-gc-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
	#vp-main .gallery .gallery-item{ flex:0 0 380px; width:380px; height:246px; }
}
@media (min-width:1024px){
	.dvl-gc-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
	.dvl-gc-grid[data-n="4"]{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
	/* 5 thẻ: 3 trên + 2 dưới căn giữa (lưới 6 cột, mỗi thẻ 2 cột). */
	.dvl-gc-grid[data-n="5"]{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
	.dvl-gc-grid[data-n="5"] > li{ grid-column:span 2; }
	.dvl-gc-grid[data-n="5"] > li:nth-child(4){ grid-column:2 / span 2; }
}
@media (prefers-reduced-motion:reduce){
	.dvl-gc-photo img{ transition:none; }
	.dvl-gc-card--anh:hover .dvl-gc-photo img{ transform:none; }
}

/* ==================================================================
   ĐỢT 4 — 01/10/2026
   ================================================================== */

/* ---- I. quy trình + video trong MỘT khối (chủ site: không tách 2 khối) ----
   Video bên trái (markup .video-shell/.video-frame của home/video.php, CSS ở
   home.css), các bước xếp dọc bên phải. */
.dvl-qt-grid{ display:grid; gap:var(--sp-6); align-items:center; }
.dvl-qt-video{ margin:0; }
.dvl-qt--video .dvl-steps{ grid-template-columns:minmax(0, 1fr); gap:var(--sp-5); }
.dvl-qt--video .dvl-step{ padding:0 0 0 64px; text-align:left; }
.dvl-qt--video .dvl-step-num{ left:0; transform:none; }
.dvl-qt--video .dvl-step:not(:last-child)::before{ left:23px; right:auto; top:52px; bottom:calc(-1 * var(--sp-5)); width:2px; height:auto; }

/* ---- J. (đã thay bằng mục M đợt 7: nhãn ảnh hiện lại, kiểu nhãn nhỏ nền trắng) ---- */

@media (min-width:1024px){
	.dvl-qt-grid{ grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:var(--sp-7); }
}

/* ==================================================================
   ĐỢT 5 — 01/10/2026 (chủ site chọn mẫu giá A + khối xưởng X2 có thêm tab In lụa)
   ================================================================== */

/* ---- K. khối xưởng kiểu "tab theo công đoạn" (dvl-giacong, kieu_hien = tab) ----
   Dùng chung JS tab của khối dvl-vatlieu (assets/js/dichvu-landing.js, [data-dvl-tabs]):
   chưa có JS thì mọi khung hiện nối tiếp và thanh tab ẩn. */
.dvl-gc-tablist{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 6px; margin-bottom:var(--sp-5); }
.dvl-gc-tablist::-webkit-scrollbar{ display:none; }
.dvl-gc-tab{
	flex:1 0 auto; min-height:56px; padding:10px 16px; text-align:left; cursor:pointer;
	border:1px solid var(--border); border-radius:var(--r-card); background:var(--white);
	transition:background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
/* Tên tab một dòng: chia đều 6 tab thì "Cắt dán và gia / công" gãy dòng (đo 1440px). Hẹp thì thanh tab tự cuộn ngang. */
.dvl-gc-tab b{ display:block; font:800 15px/1.3 var(--font-head); color:var(--navy); white-space:nowrap; }
.dvl-gc-tab span{ display:block; margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--text-muted); }
.dvl-gc-tab:hover{ border-color:var(--cobalt); }
.dvl-gc-tab[aria-selected="true"]{ background:var(--navy); border-color:var(--navy); box-shadow:var(--sh-2); }
.dvl-gc-tab[aria-selected="true"] b{ color:var(--white); }
.dvl-gc-tab[aria-selected="true"] span{ color:var(--on-navy-text-2); }
.dvl-gc-tab:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.dvl-gc-panel{
	display:grid; gap:var(--sp-5); align-items:center;
	background:var(--white); border-radius:var(--r-xl); padding:var(--sp-4); box-shadow:var(--sh-2);
}
.dvl-gc-panel[hidden]{ display:none; }
.dvl-gc-panel + .dvl-gc-panel{ margin-top:var(--sp-5); }
.dvl-gc-tabs.is-js .dvl-gc-panel + .dvl-gc-panel{ margin-top:0; }
.dvl-gc-panel:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.dvl-gc-panel img{ display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:var(--r-lg); }
.dvl-gc-panel h3{ margin:0 0 var(--sp-3); font:800 24px/1.3 var(--font-head); color:var(--navy); }
.dvl-gc-panel p{ margin:0 0 var(--sp-3); line-height:1.7; color:var(--text); }
.dvl-gc-panel .dvl-list{ font-weight:600; color:var(--text); }

@media (min-width:768px){
	.dvl-gc-panel{ grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:var(--sp-7); padding:var(--sp-5); }
}
@media (min-width:1024px){
	/* Mẫu A: đủ 3 thẻ cạnh nhau trong khung 1180px, thẻ giữa nền navy. */
	/* Bề rộng tính theo % khung thật (.wrap còn 1116px sau đệm, không phải 1180px — tính theo
	   1180 thì hai thẻ bên bị cắt 32px, đo 01/10/2026). translateX % = bề rộng chính thẻ. */
	.dvl-dm-slider.is-js{ --dvl-dm-cach:var(--sp-6); }
	.dvl-dm-slider.is-js .dvl-dm-card{ width:calc((100% - 2 * var(--dvl-dm-cach)) / 3); transform:translateX(calc(var(--pos, 0) * (100% + var(--dvl-dm-cach)))); opacity:1; }
	.dvl-dm-slider.is-js .dvl-dm-card[data-pos="1"]:hover{ opacity:1; box-shadow:var(--sh-3); }
	.dvl-gc-tab{ flex:1 0 auto; }
}

/* ==================================================================
   ĐỢT 7 — 01/10/2026 (chủ site góp ý lần 3)
   ================================================================== */

/* ---- L. đầu trang kiểu banner trang chủ ----
   Ảnh nhà xưởng tràn khối nằm dưới cùng (z-index -1 trong section isolate —
   chữ là phần tử tĩnh nên phải nằm TRÊN, không được để ảnh absolute đè, xem bẫy
   hero trang chủ 11/09), gradient navy phủ giữa, chữ trái trên cùng. Điện thoại:
   phủ đều để chữ trắng đủ tương phản trên mọi vùng ảnh. */
.dvl-hero--nen{ position:relative; isolation:isolate; background:var(--navy-dark); }
.dvl-hero--nen .dvl-hero-media{ position:absolute; inset:0; z-index:-1; }
.dvl-hero--nen .dvl-hero-media img{
	display:block; width:100%; height:100%; object-fit:cover; object-position:60% 45%;
	border:0; border-radius:0; box-shadow:none;
}
.dvl-hero--nen .dvl-hero-media::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg, color-mix(in srgb, var(--navy) 94%, transparent) 0%, color-mix(in srgb, var(--navy-dark) 86%, transparent) 100%);
}
.dvl-hero-t1, .dvl-hero-t2{ display:block; }
.dvl-hero-t2{ color:var(--on-navy-accent); }
.dvl-hero--nen .dvl-hero-in{ grid-template-columns:minmax(0, 1fr); }

@media (min-width:1024px){
	.dvl-hero--nen{ min-height:600px; display:flex; align-items:center; padding-block:var(--sp-7) var(--sp-8); }
	.dvl-hero--nen .dvl-hero-in{ width:100%; }
	.dvl-hero--nen .dvl-hero-copy{ max-width:700px; }
	.dvl-hero--nen .dvl-hero-media::after{
		background:linear-gradient(90deg,
			color-mix(in srgb, var(--navy) 96%, transparent) 0%,
			color-mix(in srgb, var(--navy) 88%, transparent) 40%,
			color-mix(in srgb, var(--navy) 45%, transparent) 70%,
			color-mix(in srgb, var(--navy) 12%, transparent) 100%);
	}
}

/* ---- M. ảnh mẫu: nhãn tên sản phẩm nhỏ trên ảnh (chủ site: "khách không cần
   phải đoán"). Nền trắng chữ navy, góc dưới trái — thay nhãn navy 11px của
   home.css từng bị chê là "caption xanh". Chữ lấy từ chú thích ảnh trong Thư viện. */
#vp-main .gallery .gallery-tag{
	left:12px; bottom:12px; max-width:calc(100% - 24px);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	padding:6px 12px; border-radius:var(--r-pill);
	background:rgba(255, 255, 255, .94); color:var(--navy);
	font:700 13px/1.3 var(--font-head); box-shadow:var(--sh-2);
}

/* ---- N. tiêu đề phụ dưới H2: khung 640px của global làm câu xuống dòng sớm và
   rớt chữ — nới khung đầu khối, đoạn dẫn chạy hết bề ngang khung. ---- */
#vp-main .section-head, #vp-main .dvl-head{ max-width:1000px; }
#vp-main :is(.section-head, .dvl-head) p{ max-width:none; text-wrap:pretty; }
/* Khối đối tác: đầu khối có đệm --wrap-x hai bên nên cần khung rộng hơn để tiêu đề nằm một dòng. */
#vp-main .partners .section-head{ max-width:1116px; }

/* ---- O. thẻ giá lần 3: bỏ nhóm Hỗ trợ, thêm các dòng sản phẩm in (danh mục con) ---- */
.dvl-dm-con{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.dvl-dm-con a{
	display:inline-flex; align-items:center; min-height:30px; padding:4px 11px;
	border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-alt);
	font:600 13px/1.3 var(--font-head); color:var(--navy); text-decoration:none;
	transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.dvl-dm-con a:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.dvl-dm-con a:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-con a{
	background:rgba(255, 255, 255, .1); border-color:rgba(255, 255, 255, .3); color:var(--white);
}
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-con a:hover{ background:var(--white); color:var(--navy); }

/* Thanh tên 5 nhóm phía trên thẻ — chỉ ở điện thoại/máy tính bảng: thẻ cao hơn
   màn hình nên chấm dưới thẻ khách không thấy, không biết còn nhóm để lướt. */
.dvl-dm-chon{ display:none; }
@media (max-width:1023.98px){
	.dvl-dm-slider.is-js .dvl-dm-chon{
		position:relative; flex:0 0 100%; display:flex; gap:8px;
		overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; margin-bottom:-6px;
		-webkit-mask-image:linear-gradient(90deg, black 85%, transparent);
		mask-image:linear-gradient(90deg, black 85%, transparent);
	}
	.dvl-dm-chon::-webkit-scrollbar{ display:none; }
	.dvl-dm-chip{
		flex:none; min-height:40px; padding:8px 16px;
		border:1px solid var(--border); border-radius:var(--r-pill); background:var(--white);
		font:700 14px/1.2 var(--font-head); color:var(--navy); white-space:nowrap; cursor:pointer;
	}
	.dvl-dm-chip[aria-current="true"]{ background:var(--navy); border-color:var(--navy); color:var(--white); }
	.dvl-dm-chip:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
}
/* Điện thoại: thẻ gọn để lướt nhanh. Thanh tên nhóm đã báo còn nhóm khác nên thẻ
   giữa được rộng hơn (hai mép thẻ bên chỉ lộ một vệt): 271px -> 311px, bớt dòng gãy đôi. */
@media (max-width:767.98px){
	.dvl-dm-slider.is-js{ --dvl-dm-w:calc(100vw - 64px); }
	.dvl-dm-in{ gap:10px; padding:var(--sp-5) 18px; }
	.dvl-dm-list{ gap:8px; font-size:14.5px; }
	.dvl-dm-list li{ line-height:1.45; }
	.dvl-dm-muc{ padding-top:var(--sp-3); }
}

/* ---- P. dải "Bạn chưa biết chọn mẫu bao bì nào" dưới thẻ giá: chữ trái, nút Zalo phải ---- */
.dvl-dm-hoi{
	max-width:none; margin:var(--sp-7) 0 0; padding:var(--sp-5);
	flex-direction:column; align-items:stretch; gap:var(--sp-4); text-align:left;
	background:var(--bg-alt); border:1px solid var(--border); border-left:4px solid var(--navy); border-radius:var(--r-lg);
}
.dvl-dm-hoi .dvl-dm-hoi-tieu{ margin:0 0 6px; font:800 20px/1.35 var(--font-head); color:var(--navy); }
.dvl-dm-hoi .dvl-dm-hoi-mo{ margin:0; font:400 15.5px/1.65 var(--font-body); color:var(--text); }
.dvl-dm-hoi-nut{ flex:none; }
@media (min-width:768px){
	.dvl-dm-hoi{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--sp-6); padding:var(--sp-6) var(--sp-7); }
	.dvl-dm-hoi-chu{ max-width:760px; }
	.dvl-dm-hoi .dvl-dm-hoi-tieu{ font-size:22px; }
}

/* ==================================================================
   ĐỢT 8 — 01/10/2026 (chủ site góp ý lần 4)
   ================================================================== */

/* ---- Q. tiêu đề đầu trang: dòng 2 trắng sáng như dòng 1 (bỏ xanh nhạt) ---- */
.dvl-hero-t2{ color:var(--white); }

/* ---- R. thẻ giá dạng bảng thông số, gọn để cả thẻ nằm trong một màn hình ở 100%
   (1440×900: thẻ ≤ khoảng 760px) — nhãn trái, nội dung phải, mỗi dòng một vạch mảnh. ---- */
.dvl-dm-in{ gap:12px; padding:var(--sp-5) 22px; }
.dvl-dm-gia{ margin-top:0; }
.dvl-dm-gia strong{ font-size:28px; }
.dvl-dm-cta{ margin-top:4px; }
.dvl-dm-ts{ margin:4px 0 0; text-align:left; font-size:14px; line-height:1.45; }
.dvl-dm-ts > div{
	display:grid; grid-template-columns:112px minmax(0, 1fr); gap:10px;
	padding:7px 0; border-top:1px solid var(--border);
}
.dvl-dm-ts > div:last-child{ border-bottom:1px solid var(--border); }
.dvl-dm-ts dt{ font-weight:600; color:var(--text-muted); font-size:13px; line-height:1.55; }
.dvl-dm-ts dd{ margin:0; font-weight:600; color:var(--text); }
.dvl-dm-ts dt.screen-reader-text + dd{ grid-column:1 / -1; }
.dvl-dm-in > .dvl-dm-muc{ margin-top:2px; padding-top:0; border-top:0; }
.dvl-dm-con{ gap:5px; }
.dvl-dm-con a{ min-height:28px; padding:3px 10px; font-size:13px; }
.dvl-dm-th{ margin-top:0; padding-top:var(--sp-3); font-size:14px; }
.dvl-dm-th::before{ top:calc(var(--sp-3) + 2px); }
.dvl-dm-xem{ padding:8px 0; min-height:40px; }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-ts > div{ border-color:rgba(255, 255, 255, .18); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-ts dt{ color:var(--on-navy-text-2); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-ts dd{ color:var(--white); }
/* Điện thoại (đo 375×812): thẻ 831px -> 739px, vừa phần màn hình dưới thanh menu 75px. */
@media (max-width:767.98px){
	.dvl-dm-in{ padding:16px 14px; gap:8px; }
	.dvl-dm-name{ font-size:19px; }
	.dvl-dm-gia strong{ font-size:24px; }
	.dvl-dm-cta{ min-height:44px; padding-block:10px; }
	.dvl-dm-ts{ font-size:13.5px; line-height:1.4; }
	.dvl-dm-ts > div{ grid-template-columns:78px minmax(0, 1fr); gap:8px; padding:5px 0; }
	.dvl-dm-ts dt{ font-size:12.5px; line-height:1.45; }
	.dvl-dm-con{ gap:4px; }
	.dvl-dm-con a{ min-height:26px; padding:2px 9px; font-size:12.5px; }
	.dvl-dm-th{ font-size:13.5px; padding-top:10px; }
	.dvl-dm-xem{ padding:6px 0; min-height:36px; }
}

/* ---- S. (lần 5, 01/10/2026) thông số về gạch đầu dòng có icon như cũ, không kẻ bảng.
   Ul mang cả .dvl-dm-list (icon dấu tích, màu thẻ navy) lẫn .dvl-dm-ts. Nhãn in đậm. ---- */
.dvl-dm-list.dvl-dm-ts{ margin:4px 0 0; padding:0; border:0; gap:7px; font-size:14px; line-height:1.45; text-align:left; }
.dvl-dm-list.dvl-dm-ts strong{ font-weight:700; color:var(--navy); }
:is(.dvl-dm-slider:not(.is-js) .dvl-dm-card--noi-bat, .dvl-dm-slider.is-js .dvl-dm-card[data-pos="0"]) .dvl-dm-list.dvl-dm-ts strong{ color:var(--white); }
@media (max-width:767.98px){
	.dvl-dm-list.dvl-dm-ts{ gap:5px; font-size:13.5px; line-height:1.4; }
}

/* ---- T. (01/10/2026, chủ site) nút ‹ › ra hai bên thẻ để khách thấy và bấm; chấm vẫn dưới thẻ.
   Nút nằm trong .dvl-dm-khung (bọc dãy thẻ) nên top:50% là giữa chiều cao thẻ. Màn rộng: nút ra
   ngoài mép thẻ (lề hai bên khung 1116px đủ chỗ); màn hẹp: dời vào mép thẻ, không tràn ngang. ---- */
.dvl-dm-slider.is-js .dvl-dm-khung{ position:relative; flex:0 0 100%; }
.dvl-dm-slider.is-js .dvl-dm-nav{
	position:absolute; top:50%; z-index:5; transform:translateY(-50%);
	width:52px; height:52px; box-shadow:var(--sh-4);
}
.dvl-dm-slider.is-js .dvl-dm-nav--truoc{ left:max(calc((100% - 100vw) / 2 + 8px), -76px); }
.dvl-dm-slider.is-js .dvl-dm-nav--sau{ right:max(calc((100% - 100vw) / 2 + 8px), -76px); }
@media (max-width:767.98px){
	/* Sát mép màn hình (2px): thẻ cách mép 32px, nút 38px chỉ chạm 8px lề trong thẻ, không đè chữ (đo 367px). */
	.dvl-dm-slider.is-js .dvl-dm-nav{ width:40px; height:40px; }
	.dvl-dm-slider.is-js .dvl-dm-nav svg{ width:18px; height:18px; }
	.dvl-dm-slider.is-js .dvl-dm-nav--truoc{ left:calc((100% - 100vw) / 2 + 2px); }
	.dvl-dm-slider.is-js .dvl-dm-nav--sau{ right:calc((100% - 100vw) / 2 + 2px); }
}

/* ---- U. (01/10/2026, chủ site) bỏ dãy chấm; nút ‹ › LUÔN canh giữa chiều cao thẻ (kể cả điện
   thoại — không đẩy lên đầu thẻ); nút nổi rõ: nền navy, icon trắng. Điện thoại giữ 2 thẻ mờ hai
   bên và vuốt như cũ. ---- */
.dvl-dm-dots{ display:none !important; }
.dvl-dm-slider.is-js .dvl-dm-nav{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.dvl-dm-slider.is-js .dvl-dm-nav:hover{ background:var(--navy-dark); color:var(--white); }
@media (min-width:768px){
	.dvl-dm-slider.is-js .dvl-dm-nav{ width:56px; height:56px; }
	.dvl-dm-slider.is-js .dvl-dm-nav svg{ width:26px; height:26px; }
}
/* Phần cắt tràn ngang chuyển từ vỏ băng chuyền xuống dãy thẻ: vỏ cắt thì nút ‹ › đặt ngoài
   mép thẻ bị cắt mất (đo 901px và 1440px, 01/10/2026). */
.dvl-dm-slider.is-js{ overflow-x:visible; }
.dvl-dm-slider.is-js .dvl-dm-grid{ overflow-x:clip; overflow-clip-margin:0; padding-block:18px; margin-block:-18px; }

/* ---- V. (01/10/2026) nút báo giá cuối khối quy trình — căn giữa dưới đoạn kết. ---- */
.dvl-qt-nut{ margin:var(--sp-5) 0 0; text-align:center; }

/* ---- W. (01/10/2026, chủ site: "tối ưu các khoảng trắng") — đo 1440px sau khi sắp lại luồng:
   3 khối mượn trang chủ có phần tử cuối mang margin-bottom 16px -> dải trống sau khối 112px thay
   vì 96px (--sp-8). Hộp form cuối trang đệm trong 96px trên/dưới -> giảm còn --sp-7. ---- */
#vp-main .partners .partner-row:last-of-type,
#vp-main .gallery .gallery-row:last-of-type,
#vp-main .home-duan .home-duan-all{ margin-bottom:0; }
@media (min-width:1024px){
	.dvl-cta-box{ padding-block:var(--sp-7); }
}
/* Điện thoại: đáy khối đầu trang chỉ còn 36px dưới nút (đo 375px) — về cùng nhịp --sp-8 như mọi khối. */
@media (max-width:1023.98px){
	.dvl-hero--nen{ padding-bottom:var(--sp-8); }
}