/* Tablet / phone fixes for the inner pages exported from Figma (feedback doc, 2026-10-29).
   Selectors use the Figma layer names (data-n), which survive a re-export; class names do not. */

/* Hero label pills hug their text. */
.pgs-page--m [data-n="Hero"] > [data-n="Label"],
.pgs-page--t [data-n="Hero"] > [data-n="Label"] { align-self: flex-start !important; }

/* Hero figures under the device stage: a tidy 2 × 2 grid of outlined cards. */
.pgs-page--m [data-n="Hero"] > [data-n="Hàng"] { gap: 12px !important; height: auto !important; }
.pgs-page--m [data-n="Hero"] > [data-n="Hàng"] > [data-n="Ô"] { height: auto !important; }
.pgs-page--m [data-n="Hero"] > [data-n="Hàng"] > [data-n="Ô"] > * {
	flex: 1 0 auto !important; padding: 16px !important; gap: 6px !important; justify-content: flex-start !important;
	box-shadow: inset 0 0 0 1.5px #e3e3e3 !important; border-radius: 14px !important; background: #fff !important;
}

/* Figures (built by header.js from loose "figure + label" pairs and figure rows): 2-column outlined cards. */
.pgs-figgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: stretch; }
.pgs-figcard {
	display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 6px !important;
	padding: 16px !important; height: auto !important; min-width: 0; overflow: visible !important;
	box-shadow: inset 0 0 0 1.5px #e3e3e3; border-radius: 14px; background: #fff;
}
.pgs-figcard > * { font-size: 30px !important; line-height: 1.15 !important; white-space: nowrap !important; width: auto !important; }
.pgs-figcard > * + * { font-size: 14px !important; line-height: 20px !important; white-space: normal !important; color: #525252 !important; }

/* Chips under the USP illustrations ("3.000+ khách hàng", "24/7 tin nhắn"): outlined cards, equal and aligned. */
.pgs-page--m [data-n="Hàng"] > [data-n="Ô"] > [data-n="Chip"] {
	flex: 1 0 auto !important; padding: 16px !important; gap: 6px !important; justify-content: flex-start !important; align-items: flex-start !important;
	box-shadow: inset 0 0 0 1.5px #e3e3e3 !important; border-radius: 14px !important; background: #fff !important;
}
.pgs-page--m [data-n="Hàng"]:has(> [data-n="Ô"] > [data-n="Chip"]) { height: auto !important; gap: 12px !important; }
.pgs-page--m [data-n="Hàng"] > [data-n="Ô"]:has(> [data-n="Chip"]) { height: auto !important; }

/* Phone swipe strips (reviews, news, projects): one full-width card at a time, snapping. */
.pgs-page--m [data-n="Thanh trượt"] { height: auto !important; scroll-snap-type: x mandatory; overflow-x: auto !important; scrollbar-width: none; }
.pgs-page--m [data-n="Thanh trượt"]::-webkit-scrollbar { display: none; }
.pgs-page--m [data-n="Thanh trượt"] > [data-n="Thẻ trượt"] { flex: 0 0 100% !important; width: 100% !important; scroll-snap-align: start; }
.pgs-page--m [data-n="Thẻ trượt"] > * { width: auto !important; align-self: stretch !important; }

/* Case study cards: photo always on top (no zigzag), soft outline, one size for all figures. */
.pgs-page--m [data-n^="Case "]:has(> [data-n="Ảnh"]) {
	height: auto !important; gap: 18px !important; padding: 16px 16px 22px !important;
	box-shadow: inset 0 0 0 1.5px #dedede !important; border-radius: 16px !important; background: #fff !important;
}
.pgs-page--m [data-n^="Case "] > [data-n="Ảnh"] { order: -1; border-radius: 12px !important; align-self: stretch !important; width: auto !important; }
.pgs-page--m [data-n^="Case "] > [data-n="Nội dung"] { align-self: stretch !important; width: auto !important; height: auto !important; padding: 0 4px !important; }
.pgs-page--m [data-n^="Case "] [data-n="Số"] > [data-n="Hàng"],
.pgs-page--m [data-n^="Case "] [data-n="Số"] [data-n="Ô"],
.pgs-page--m [data-n^="Case "] [data-n="Số"] [data-n="Ô trống"] { height: auto !important; }
.pgs-page--m [data-n^="Case "] [data-n="Chỉ số"] { gap: 2px !important; height: auto !important; }
.pgs-page--m [data-n^="Case "] [data-n="Chỉ số"] > :first-child { font-size: 28px !important; line-height: 34px !important; }
.pgs-page--m [data-n^="Case "] [data-n="Chỉ số"] > :last-child { font-size: 14px !important; line-height: 20px !important; color: #6b6b6b !important; }

/* USP cards: one soft outline and rounded corners for every card, highlighted (yellow) ones included. */
.pgs-page--m [data-n^="USP "]:not([data-n="USP PGS"]):not(:has([data-n^="USP "])):has(> [data-n="Số"] > *) {
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .1) !important; border-radius: 16px !important; height: auto !important;
}

/* Pricing columns: no spacer blocks (they kept the desktop columns level), the button follows the list. */
.pgs-page--m [data-n]:has(> [data-n="Danh sách"]):has(> [data-n^="Nút"]) { height: auto !important; padding: 24px 20px !important; border-radius: 16px !important; }
.pgs-page--m [data-n]:has(> [data-n="Danh sách"]):has(> [data-n^="Nút"]) > [data-n="Đệm"],
.pgs-page--m [data-n]:has(> [data-n="Danh sách"]):has(> [data-n^="Nút"]) > [data-n="sp"]:empty { display: none !important; }
.pgs-page--m [data-n]:has(> [data-n="Danh sách"]):has(> [data-n^="Nút"]) > [data-n^="Nút"] { margin-top: 10px; }

/* Hero steps of the verified-badge pages ("● 01 Rà soát điều kiện"): the number sits on its black disc. */
.pgs-page--m [data-n^="Bước "] > [data-n="Số"] + * { flex: 0 0 36px !important; margin-left: -42px !important; margin-right: 6px !important; justify-content: center !important; align-items: center !important; font-weight: 700; }
.pgs-page--m [data-n^="Bước "]:has(> [data-n="Số"] + *) { align-items: center !important; gap: 12px !important; padding: 14px !important; }
.pgs-page--m [data-n^="Bước "]:has(> [data-n="Số"] + *) > :last-child { flex: 1 1 0 !important; font-size: 14px !important; line-height: 19px !important; white-space: normal !important; width: auto !important; height: auto !important; }
.pgs-page--m [data-n="Ô"]:has(> [data-n="Bước 1"]) { order: 1; }
.pgs-page--m [data-n="Ô"]:has(> [data-n="Bước 2"]) { order: 2; }
.pgs-page--m [data-n="Ô"]:has(> [data-n="Bước 3"]) { order: 3; }
.pgs-page--m [data-n="Ô"]:has(> [data-n="Bước 4"]) { order: 4; }

/* "Phạm vi công việc" steps (number · title · text side by side on desktop): number and title on one line,
   the text under them; the cards after the first (yellow) one are white with an outline so they stand out. */
.pgs-page--m [data-n="Hàng"] > [data-n="Hàng icon"]:has(> [data-n="Icon"] + * + *) {
	display: grid !important; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 10px; align-items: center !important; height: auto !important;
}
.pgs-page--m [data-n="Hàng"] > [data-n="Hàng icon"]:has(> [data-n="Icon"] + * + *) > :not([data-n="Icon"]) { width: auto !important; height: auto !important; white-space: normal !important; }
.pgs-page--m [data-n="Hàng"] > [data-n="Hàng icon"]:has(> [data-n="Icon"] + * + *) > :last-child { grid-column: 1 / -1; }
.pgs-page--m [data-n="Hàng"]:has(> [data-n="Hàng icon"] > [data-n="Icon"] + * + *) { height: auto !important; border-radius: 16px !important; }
.pgs-page--m [data-n="Hàng"]:has(> [data-n="Hàng icon"] > [data-n="Icon"] + * + *) ~ [data-n="Hàng"]:has(> [data-n="Hàng icon"]) {
	background: #fff !important; box-shadow: inset 0 0 0 1.5px #e3e3e3 !important;
}

/* Buttons with a single label: centred both ways, whichever way the Figma frame stacks. */
.pgs-page--m [data-n^="Nút"]:has(> [data-th]:only-child),
.pgs-page--t [data-n^="Nút"]:has(> [data-th]:only-child) { justify-content: center !important; align-items: center !important; }
.pgs-page--m [data-n="Cột"] > [data-n^="Nút"]:has(> [data-th]:only-child) { padding: 16px 20px !important; height: auto !important; }

/* Comparison table rebuilt as cards by header.js ("Tự làm hay cùng PGS?"). */
.pgs-cmp { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.pgs-cmp__row { background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1.5px #e3e3e3; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.pgs-cmp__row b { font: 700 18px/1.3 'Space Grotesk', sans-serif; color: #030303; }
.pgs-cmp__row p { margin: 0; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; font-family: 'Kanit', sans-serif; font-size: 15px; line-height: 21px; }
.pgs-cmp__row p::before { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 13px/1 sans-serif; }
.pgs-cmp__no::before { content: '✕'; background: #f0f0f0; color: #8a8a8a; }
.pgs-cmp__yes::before { content: '✓'; background: #f8d000; color: #030303; }
.pgs-cmp__row span { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .04em; color: #8a8a8a; }
.pgs-cmp__no em { font-style: normal; color: #6b6b6b; }
.pgs-cmp__yes em { font-style: normal; color: #030303; font-weight: 500; }
.pgs-cmp__yes { padding-top: 10px; border-top: 1px dashed #e3e3e3; }
.pgs-cmp__yes::before { margin-top: 10px; }

/* Review strips whose cards had no frame of their own: white outlined cards, name row from the left. */
.pgs-page--m [data-n="Thẻ trượt"] > [data-n="Trên"] {
	flex: 1 0 auto !important; height: auto !important; padding: 22px 20px !important; gap: 14px !important;
	background: #fff !important; border-radius: 16px !important; box-shadow: inset 0 0 0 1.5px #e3e3e3 !important;
}
.pgs-page--m [data-n="Thẻ trượt"] [data-n="Người"] { justify-content: flex-start !important; width: auto !important; align-self: stretch !important; }
.pgs-page--m [data-n="Thẻ trượt"] [data-n="Người"] > * { flex-shrink: 0; }
.pgs-page--m [data-n="Thẻ trượt"] [data-n="Người"] > [data-n="T"] { width: auto !important; flex: 1 1 0 !important; }

/* Client logos (PNG, put in by header.js): contained in their slots. */
.pgs-logo-img { max-width: 72%; max-height: 46%; object-fit: contain; display: block; margin: auto; }
.pgs-page--m [data-n="Logo"]:has(> .pgs-logo-img) { box-shadow: inset 0 0 0 1.5px #e3e3e3 !important; border-radius: 12px !important; }

/* Weekly rhythm timeline (built by header.js). */
.pgs-tl { display: flex; flex-direction: column; align-self: stretch; padding-left: 8px; }
.pgs-tl__item { position: relative; padding: 0 0 24px 26px; border-left: 2px solid #e3e3e3; display: flex; flex-direction: column; gap: 4px; }
.pgs-tl__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.pgs-tl__item::before { content: ''; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #f8d000; box-shadow: 0 0 0 4px #fff7cc; }
.pgs-tl__item > * { width: auto !important; white-space: normal !important; }
.pgs-tl__item > :first-child { line-height: 24px !important; }

/* Project rows: name on the left, "XEM WEBSITE ↗" flush right. */
.pgs-page--m [data-n="Dự án"] > [data-n="Hàng nút"] { justify-content: space-between !important; align-items: flex-start !important; flex-wrap: nowrap !important; gap: 12px !important; }
.pgs-page--m [data-n="Dự án"] > [data-n="Hàng nút"] > [data-n="T"] { flex: 1 1 0 !important; width: auto !important; min-width: 0; }
.pgs-page--m [data-n="Dự án"] > [data-n="Hàng nút"] > [data-n="Link"] { margin-left: auto !important; flex: 0 0 auto !important; padding-top: 3px; }

/* Filter chips (theme library, news categories): wrap onto two lines, same padding and fully round ends. */
.pgs-page--m [data-n="Thanh tab"]:has(> [data-n="Chip"]) { flex-wrap: nowrap !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 8px !important; scrollbar-width: none; margin-right: -15px; padding-right: 15px !important; }
.pgs-page--m [data-n="Thanh tab"] > [data-n="Chip"] { padding: 8px 16px !important; border-radius: 999px !important; width: auto !important; height: auto !important; flex: 0 0 auto !important; }

/* Chăm sóc website, "Dự án đã triển khai" (reordered by header.js): point, then its project picture. */
.pgs-page--m [data-n="Dự án đã triển khai"] > .pgs-point { margin-top: 20px; gap: 12px !important; height: auto !important; }
.pgs-page--m [data-n="Dự án đã triển khai"] > .pgs-point > [data-n="Số"] { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
.pgs-page--m [data-n="Dự án đã triển khai"] > [data-n="Ảnh"] { border-radius: 16px !important; }
.pgs-page--m [data-n="Dự án đã triển khai"] [data-n="Tên dự án"] {
	flex-direction: row !important; align-items: center !important; gap: 8px !important; width: auto !important; height: auto !important;
	align-self: flex-start !important; padding: 8px 10px 8px 14px !important; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .12) !important;
}
.pgs-page--m [data-n="Dự án đã triển khai"] [data-n="Tên dự án"] > :first-child { font-size: 14px !important; font-weight: 700 !important; }
.pgs-page--m [data-n="Dự án đã triển khai"] [data-n="Tên dự án"] > :last-child { font-size: 12px !important; line-height: 16px !important; padding: 3px 10px; border-radius: 999px; background: #f8d000; color: #030303 !important; }

/* Less empty space under the hero banners. */
.pgs-page--m .pgs-fig > div > [data-n="Hero"] { padding-bottom: 44px !important; }

/* Case study list: more air between projects, the pager after the last one. */
.pgs-page--m [data-n="Danh sách dự án"] { gap: 36px !important; }
.pgs-page--m [data-n="Danh sách dự án"] > [data-n="Thẻ dự án"] { height: auto !important; gap: 14px !important; }
.pgs-page--m [data-n="Danh sách dự án"] > [data-n="Hàng nút"]:has(> [data-n="Trang"]) { order: 99; justify-content: center !important; margin-top: 4px; }

/* News page: "Tất cả 198" on one line, posts edge to edge in their cards, the pager on one line. */
.pgs-page--m [data-n="Thanh tab"] > [data-n="Chip"]:has(> :nth-child(2)) { flex-direction: row !important; align-items: center !important; gap: 6px !important; }
.pgs-page--m [data-n="Thanh tab"] > [data-n="Chip"] > * { width: auto !important; height: auto !important; white-space: nowrap !important; }
.pgs-page--m [data-n="Bài nổi bật"],
.pgs-page--m [data-n="Thẻ trượt"] > [data-n="Bài viết"] {
	padding: 0 !important; gap: 0 !important; overflow: hidden !important; border-radius: 16px !important; height: auto !important;
	box-shadow: inset 0 0 0 1.5px #e3e3e3 !important; background: #fff !important;
}
.pgs-page--m [data-n="Bài nổi bật"] > [data-n="Ảnh"],
.pgs-page--m [data-n="Thẻ trượt"] > [data-n="Bài viết"] > [data-n="Ảnh"] { align-self: stretch !important; width: auto !important; border-radius: 0 !important; }
.pgs-page--m [data-n="Bài nổi bật"] > [data-n="Nội dung"],
.pgs-page--m [data-n="Thẻ trượt"] > [data-n="Bài viết"] > [data-n="Nội dung"] { align-self: stretch !important; width: auto !important; height: auto !important; padding: 16px 18px 20px !important; }
.pgs-page--m [data-n="Bài viết"] [data-n="Danh mục"], .pgs-page--m [data-n="Bài nổi bật"] [data-n="Danh mục"] { max-width: 100%; }
.pgs-page--m [data-n="Hàng nút"]:has(> [data-n="Trang"]) { flex-wrap: nowrap !important; gap: 8px !important; height: auto !important; justify-content: center !important; }
.pgs-page--m [data-n="Hàng nút"] > [data-n="Trang"] { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }

/* News search (built by header.js from the exported search row): a real field with its button. */
.pgs-search { display: flex; align-self: stretch; gap: 8px; }
.pgs-search input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 1.5px solid #cfcfcf; border-radius: 14px; font: 400 16px 'Kanit', sans-serif; background: #fff; }
.pgs-search input:focus { outline: none; border-color: #030303; }
.pgs-search button { flex: 0 0 auto; height: 50px; padding: 0 18px; border: 0; border-radius: 14px; background: #f8d000; color: #030303; font: 700 14px 'Space Grotesk', sans-serif; text-transform: uppercase; cursor: pointer; }
.pgs-page--m [data-n="Bài nổi bật"] [data-n="Nội dung"] > [data-n="Danh mục"] { align-self: flex-start !important; width: auto !important; }
.pgs-page--m [data-n="Bài nổi bật"] [data-n="Nội dung"] > [data-th],
.pgs-page--m [data-n="Bài viết"] [data-n="Nội dung"] > [data-th] { width: auto !important; align-self: stretch !important; white-space: normal !important; }
.pgs-page--m [data-n="Bài viết"] [data-n="Ảnh"] > [data-n="Danh mục"] { width: auto !important; overflow: visible !important; }
.pgs-page--m [data-n="Bài viết"] [data-n="Ảnh"] > [data-n="Danh mục"] > * { width: auto !important; overflow: visible !important; }

/* Liên hệ. */
.pgs-fig--lien-he--m [data-n="3 kênh liên hệ"] { gap: 14px !important; }
.pgs-fig--lien-he--m [data-n="Kênh"] { height: auto !important; gap: 8px !important; border-radius: 16px !important; box-shadow: inset 0 0 0 1.5px #d4d4d4 !important; padding: 22px 20px !important; }
.pgs-fig--lien-he--m [data-n="Kênh"] > [data-n="Top"] { margin-bottom: 6px; }
.pgs-fig--lien-he--m [data-n="Văn phòng & Form"] > [data-n="Mục"] { height: auto !important; padding: 10px 0 !important; margin-top: -8px; gap: 4px !important; }
.pgs-fig--lien-he--m [data-n="Văn phòng & Form"] > [data-n="Mục"] > :first-child { letter-spacing: .04em; }
.pgs-fig--lien-he--m [data-n="Văn phòng & Form"] > [data-n="Form"] { margin-top: 20px; height: auto !important; padding: 24px 18px !important; gap: 18px !important; border-radius: 18px !important; box-shadow: inset 0 0 0 1.5px #d4d4d4 !important; }
.pgs-fig--lien-he--m [data-n="Form"] [data-n="Hàng"], .pgs-fig--lien-he--m [data-n="Form"] [data-n="Trường"] { height: auto !important; gap: 8px !important; }
.pgs-fig--lien-he--m [data-n="Form"] > [data-n="Hàng"] { gap: 18px !important; }
.pgs-fig--lien-he--m [data-n="Form"] [data-n="Đếm"] { flex-direction: row !important; justify-content: space-between !important; height: auto !important; margin-top: -10px; }
.pgs-fig--lien-he--m [data-n="Form"] [data-n="Loại khách"] { height: auto !important; gap: 8px !important; }
.pgs-page--m [data-n="Form"] input, .pgs-page--m [data-n="Form"] select, .pgs-page--m [data-n="Form"] textarea,
.pgs-page--m [data-n="Khung form"] input, .pgs-page--m [data-n="Khung form"] select, .pgs-page--m [data-n="Khung form"] textarea { border-radius: 12px !important; }
.pgs-fig--lien-he--m [data-n="Google Maps"] [data-n*="Bản đồ"], .pgs-fig--lien-he--m [data-n="Google Maps"] [data-n="Map"] { border-radius: 16px !important; overflow: hidden !important; }
.pgs-page--m [data-n="Trường"] > [data-n="Ô"], .pgs-page--m [data-n="Ô nhập"] { border-radius: 12px !important; }

/* Team photos: one crop for everyone (same head size, faces near the top), equal boxes. */
.pgs-page--m [data-n="Thành viên"] [data-n="Ảnh"], .pgs-page--t [data-n="Thành viên"] [data-n="Ảnh"] {
	background-size: cover !important; background-position: 50% 18% !important; width: 100% !important; aspect-ratio: 4 / 5; height: auto !important;
}
.pgs-page--m [data-n="Thành viên"] [data-n="Ảnh"]:has(> [data-n="Ảnh"]) { background: none !important; position: relative; }
.pgs-page--m [data-n="Thành viên"] [data-n="Ảnh"] > [data-n="Ảnh"] { position: absolute !important; inset: 0; }

/* Giới thiệu, "Hành trình phát triển" milestones: calmer years, visible dots. */
.pgs-page--m [data-n="Dòng thời gian"] [data-n="Mốc"] > [data-th]:not(:last-child) { font-size: 36px !important; line-height: 42px !important; }
.pgs-page--m [data-n="Dòng thời gian"] [data-n="Mốc"] > :first-child:not([data-th]) { width: 16px !important; height: 16px !important; left: -9px !important; top: 14px !important; box-shadow: 0 0 0 4px #fff !important; }
.pgs-page--m [data-n="Cột"]:has(> [data-n^="Nút"]) { height: auto !important; }
.pgs-page--m [data-n="Cột"] > [data-n="Hàng icon"] { height: auto !important; min-height: 26px; }
.pgs-page--m [data-n="Thành viên"], .pgs-page--t [data-n="Thành viên"] { height: auto !important; }
.pgs-page--m [data-n="Hàng"]:has(> [data-n="Ô"] > [data-n="Thành viên"]), .pgs-page--m [data-n="Ô"]:has(> [data-n="Thành viên"]) { height: auto !important; }

/* Tablet: the same case study and USP cards. */
.pgs-page--t [data-n^="Case "] > [data-n="Ảnh"] { order: -1; border-radius: 12px !important; align-self: stretch !important; width: auto !important; }
.pgs-page--t [data-n^="Case "] > [data-n="Nội dung"] { align-self: stretch !important; width: auto !important; height: auto !important; padding: 0 4px !important; }
.pgs-page--t [data-n^="Case "] [data-n="Số"] > [data-n="Hàng"], .pgs-page--t [data-n^="Case "] [data-n="Số"] [data-n="Ô"], .pgs-page--t [data-n^="Case "] [data-n="Số"] [data-n="Ô trống"] { height: auto !important; }
.pgs-page--t [data-n^="Case "] [data-n="Chỉ số"] { gap: 2px !important; height: auto !important; }
.pgs-page--t [data-n^="Case "] [data-n="Chỉ số"] > :first-child { font-size: 28px !important; line-height: 34px !important; }
.pgs-page--t [data-n^="Case "] [data-n="Chỉ số"] > :last-child { font-size: 14px !important; line-height: 20px !important; color: #6b6b6b !important; }
.pgs-page--t [data-n^="Case "]:has(> [data-n="Ảnh"]) {
	height: auto !important; gap: 18px !important; padding: 20px 20px 26px !important;
	box-shadow: inset 0 0 0 1.5px #dedede !important; border-radius: 18px !important; background: #fff !important;
}
.pgs-page--t [data-n^="USP "]:not([data-n="USP PGS"]):not(:has([data-n^="USP "])):has(> [data-n="Số"] > *) {
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .1) !important; border-radius: 18px !important; height: auto !important; gap: 14px !important;
}
.pgs-page--t [data-n^="USP "]:has(> [data-n="Số"] > *) > [data-th], .pgs-page--m [data-n^="USP "]:has(> [data-n="Số"] > *) > [data-th] { height: auto !important; }
.pgs-page--t [data-n^="USP "]:has(> [data-n="Số"] > *) > [data-n="sp"]:empty, .pgs-page--m [data-n^="USP "]:has(> [data-n="Số"] > *) > [data-n="sp"]:empty { display: none !important; }

/* Empty spacer blocks kept the desktop cards level; on tablet / phone they only leave holes. */
.pgs-page--m [data-n="sp"]:empty, .pgs-page--t [data-n="sp"]:empty { display: none !important; }
.pgs-page--m [data-n^="Bước "]:has(> [data-n="sp"]) { height: auto !important; gap: 10px !important; }

/* Ads case studies: the photo keeps its height; the result card sits small at its bottom-left corner. */
.pgs-page--m [data-n^="Case "] > [data-n="Ảnh"]:has(> [data-n="Thẻ kết quả"]) {
	min-height: 230px; height: auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; padding: 14px !important;
}
.pgs-page--m [data-n="Ảnh"] > [data-n="Thẻ kết quả"] { width: auto !important; height: auto !important; padding: 12px 16px !important; gap: 2px !important; border-radius: 12px !important; }
.pgs-page--m [data-n="Ảnh"] > [data-n="Thẻ kết quả"] > * { width: auto !important; }

/* ===== Service page layout for tablet / phone (resp.js, approved 2026-10-29) ===== */

/* Even rhythm between sections. */
.pgs-page--m .pgs-fig > div > [data-n]:not([data-n="Hero"]):not([data-n="Header"]):not([data-n="Footer"]) { padding-top: 52px !important; padding-bottom: 52px !important; }
.pgs-page--m .pgs-fig > div > [data-n="Hero"] { padding-bottom: 40px !important; }

/* Swipe strips: a card and a peek of the next on phones, two cards on tablets. */
.pgs-strip { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-self: stretch; align-items: flex-start; margin: 0 -15px; padding: 2px 15px 4px; scroll-padding: 0 15px; }
.pgs-strip::-webkit-scrollbar { display: none; }
.pgs-strip > * { flex: 0 0 86% !important; width: auto !important; max-width: none !important; scroll-snap-align: start; margin: 0 !important; }
.pgs-page--t .pgs-strip { margin: 0 -114px; padding: 2px 114px 4px; scroll-padding: 0 114px; }
.pgs-page--t .pgs-strip > * { flex-basis: calc(50% - 7px) !important; }
.pgs-strip--project > *, .pgs-strip--theme > * { gap: 10px !important; }
.pgs-dots { display: flex; justify-content: center; gap: 8px; align-self: stretch; margin-top: -4px; }
.pgs-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #d4d4d4; cursor: pointer; transition: width .25s, background .25s; }
.pgs-dots button.is-on { width: 24px; background: #030303; }
.pgs-dots button[hidden] { display: none; }
[data-n="Thanh tab"] > [data-n="Chip"][role="button"] { cursor: pointer; }
.pgs-page--m [data-n="Thanh tab"] > [data-n="Chip"].is-on, .pgs-page--t [data-n="Thanh tab"] > [data-n="Chip"].is-on { background: #030303 !important; box-shadow: none !important; }
.pgs-page--m [data-n="Thanh tab"] > [data-n="Chip"].is-on *, .pgs-page--t [data-n="Thanh tab"] > [data-n="Chip"].is-on * { color: #fff !important; }
.pgs-page--m [data-n="Thanh tab"] > [data-n="Chip"]:not(.is-on)[role="button"], .pgs-page--t [data-n="Thanh tab"] > [data-n="Chip"]:not(.is-on)[role="button"] { background: #fff !important; box-shadow: inset 0 0 0 1.5px #d4d4d4 !important; }
.pgs-page--m [data-n="Thanh tab"] > [data-n="Chip"]:not(.is-on)[role="button"] *, .pgs-page--t [data-n="Thanh tab"] > [data-n="Chip"]:not(.is-on)[role="button"] * { color: #030303 !important; }
.pgs-page--m [data-n="Các dự án cũ"] [data-n="Dải cuộn tự động"], .pgs-page--t [data-n="Các dự án cũ"] [data-n="Dải cuộn tự động"] { height: auto !important; overflow: visible !important; }

/* Pricing: extra benefits folded. */
.pgs-more-item { display: none !important; }
.is-more .pgs-more-item { display: flex !important; }
.pgs-more { align-self: flex-start; margin: 2px 0 0; padding: 6px 0; border: 0; background: none; font: 600 14px 'Space Grotesk', sans-serif; color: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* FAQ: answers fold under their question. */
.pgs-acc > [data-n="Câu hỏi"] { cursor: pointer; }
.pgs-acc:not(.is-open) > :not([data-n="Câu hỏi"]) { display: none !important; }
.pgs-acc { height: auto !important; }
.pgs-faq { padding: 52px 15px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.pgs-faq__label { margin: 0; align-self: flex-start; padding: 7px 16px 7px 30px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px #c9c9c9; font: 500 16px 'Space Grotesk', sans-serif; color: #d1a800; position: relative; }
.pgs-faq__label::before { content: ''; position: absolute; left: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #f8d000; }
.pgs-faq__title { margin: 6px 0 8px; font: 700 30px/1.1 'Space Grotesk', sans-serif; text-transform: uppercase; color: #030303; }
.pgs-faq__item { border-radius: 14px; box-shadow: inset 0 0 0 1.5px #e3e3e3; }
.pgs-faq__q { display: flex; width: 100%; gap: 12px; align-items: center; justify-content: space-between; padding: 18px; border: 0; background: none; text-align: left; font: 600 17px/1.35 'Space Grotesk', sans-serif; color: #030303; cursor: pointer; }
.pgs-faq__q i { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #f3f3f3; position: relative; }
.pgs-faq__q i::before, .pgs-faq__q i::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: #030303; transition: transform .2s; }
.pgs-faq__q i::after { transform: rotate(90deg); }
.is-open > .pgs-faq__q i::after { transform: none; }
.pgs-faq__a { display: none; margin: -6px 0 0; padding: 0 18px 18px; font: 400 16px/1.6 'Kanit', sans-serif; color: #525252; }
.is-open > .pgs-faq__a { display: block; }

/* Long paragraphs: four lines and "Đọc thêm". */
.pgs-clamp:not(.is-open) { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden !important; height: auto !important; }
.pgs-readmore { align-self: flex-start; margin-top: -6px; padding: 4px 0; border: 0; background: none; font: 600 15px 'Space Grotesk', sans-serif; color: #876b00; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* Contact bar fixed at the bottom (tablet / phone service pages). */
.pgs-cbar { display: none; }
@media (max-width: 1199px) {
	.pgs-cbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 24px rgba(3, 3, 3, .1); transform: translateY(110%); transition: transform .3s; }
	.pgs-cbar.is-on { transform: none; }
	.pgs-cbar__item { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px; height: 48px; border: 0; border-radius: 12px; background: #f3f3f3; color: #030303; font: 700 14px 'Space Grotesk', sans-serif; text-decoration: none; cursor: pointer; }
	.pgs-cbar__item--main { flex: 1.5 1 0; background: #f8d000; text-transform: uppercase; }
	html.has-cbar .pgs-hub { display: none !important; }
	html.has-cbar .pgs-chat { bottom: 80px !important; }
	html.has-cbar .pgs-backtop { bottom: 152px !important; }
}
.pgs-page--m .pgs-fig > div, .pgs-page--t .pgs-fig > div { height: auto !important; min-height: 0 !important; }
.pgs-page--t .pgs-strip > * { flex-basis: 78% !important; }
.pgs-page--t .pgs-fig > div > [data-n]:not([data-n="Hero"]):not([data-n="Header"]):not([data-n="Footer"]) { padding-top: 72px !important; padding-bottom: 72px !important; }
.pgs-page--t .pgs-fig > div > [data-n="Hero"] { padding-bottom: 56px !important; }
.pgs-page--t .pgs-strip--review > *, .pgs-page--t .pgs-strip--news > * { flex-basis: calc(50% - 7px) !important; height: auto !important; }
.pgs-page--t .pgs-strip--news > * > [data-n="Ảnh"], .pgs-page--t .pgs-strip--news > * > [data-n="Nội dung"] { width: auto !important; align-self: stretch !important; }
.pgs-page--t .pgs-strip--news > * > [data-n="Ảnh"] { height: 200px !important; border-radius: 14px; }
.pgs-page--t .pgs-strip--news [data-th] { white-space: normal !important; width: auto !important; }

/* Short tag pills ("Chiến lược · Đa nền tảng · Dữ liệu"): one row. */
.pgs-page--m [data-n="Hàng nút"]:has(> [data-n="Pill"]) { flex-wrap: nowrap !important; gap: 8px !important; height: auto !important; }
.pgs-page--m [data-n="Hàng nút"] > [data-n="Pill"] { flex: 0 0 auto !important; min-width: 0; padding-left: 14px !important; padding-right: 14px !important; width: auto !important; }
.pgs-page--m [data-n="Hàng nút"] > [data-n="Pill"] > * { white-space: nowrap !important; }

/* A lone call-to-action button in its row sits in the middle (Về CEO "Trao đổi cùng Founder"). */
.pgs-page--m [data-n="Hàng nút"]:has(> [data-n^="Nút"]:only-child) > [data-n^="Nút"] { flex: 1 1 auto !important; width: auto !important; justify-content: center !important; }

/* Three figure cards in one row (Về CEO 9+ · 120+ · 320+): a little less side padding so the labels
   ("Chiến dịch đã triển khai") break into two even lines. */
.pgs-page--m [data-n="Hàng"]:has(> [data-n="Ô"]:nth-child(3)) > [data-n="Ô"] > [data-n="Vòng"] { padding-left: 10px !important; padding-right: 8px !important; }
.pgs-page--m [data-n="Hàng"]:has(> [data-n="Ô"]:nth-child(3)) > [data-n="Ô"] > [data-n="Vòng"] > [data-th]:last-child { width: auto !important; align-self: stretch !important; font-size: 13.5px !important; }

/* Pill rows longer than the screen: full labels, running sideways (built by header.js). */
.pgs-page--m [data-n="Hàng nút"]:has(> [data-n="Pill"]) { overflow: hidden !important; }
.pgs-page--m [data-n="Hàng nút"].pgs-run { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.pgs-run__track { display: flex; gap: 8px; flex: 0 0 auto; padding-right: 8px; animation: pgs-run var(--d, 14s) linear infinite; }
.pgs-run:hover .pgs-run__track, .pgs-run:active .pgs-run__track { animation-play-state: paused; }
@keyframes pgs-run { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .pgs-run__track { animation: none; } .pgs-page--m [data-n="Hàng nút"].pgs-run { overflow-x: auto !important; } }
.pgs-page--m [data-n="Thanh tab"]:has(> [data-n="Pill"]) { flex-wrap: nowrap !important; overflow: hidden !important; gap: 8px !important; height: auto !important; }
.pgs-page--m [data-n="Thanh tab"] > [data-n="Pill"], .pgs-run__track > [data-n="Pill"] { flex: 0 0 auto !important; width: auto !important; }
.pgs-run__track > [data-n="Pill"] > * { white-space: nowrap !important; }
.pgs-page--m [data-n="Thanh tab"].pgs-run { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.pgs-page--m .pgs-run { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; justify-content: flex-start !important; }

/* The shared lead form in the tablet / phone designs (inc/lead-form.php replaces the exported form box). */
.pgs-leadbox { --ink: #030303; --gold: #F8D000; --grey: #525252; --line: #cfcfcf; align-self: stretch; width: auto !important; flex: 0 0 auto; }
.pgs-leadbox .al-form { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 20px; border: 1.5px solid var(--gold); border-radius: 16px; background: #fff; text-align: left; }
.pgs-page--t .pgs-leadbox .al-form { grid-template-columns: 1fr 1fr; padding: 34px 30px; }
.pgs-leadbox .al-form label { gap: 8px; line-height: 1.3; color: var(--ink); }
.pgs-leadbox .al-form input, .pgs-leadbox .al-form textarea, .pgs-leadbox .al-dd__btn { border: 1.5px solid #cfcfcf !important; border-radius: 12px; min-width: 0; }
.pgs-leadbox .al-form button[type="submit"] { width: 100%; }
.pgs-leadbox .al-form > *, .pgs-leadbox .al-form label { min-width: 0; }
.pgs-leadbox *, .pgs-leadbox *::before, .pgs-leadbox *::after { box-sizing: border-box; }
/* Về CEO, phone: no hotline block above the form (feedback). */
.pgs-page--m [data-n="Nhóm dưới"] > [data-n="Hàng nút"]:has([data-n="Hotline tư vấn"]) { display: none !important; }


/* ===== Feedback doc 2 (2026-10-29), phone ===== */
.pgs-page--m [data-n="Thanh tab"]::-webkit-scrollbar { display: none; }
/* Giới thiệu timeline: each line of text on one line */
.pgs-page--m [data-n="Dòng thời gian"] [data-n="Mốc"] > [data-th]:last-child { font-size: 15px !important; white-space: nowrap !important; }
/* Về CEO stats: less air, softer cards */
.pgs-page--m [data-n="Số liệu thành tích"] { padding-top: 28px !important; padding-bottom: 28px !important; }
.pgs-page--m [data-n="Số liệu thành tích"] [data-n="Vòng"] { border-radius: 14px !important; padding-top: 16px !important; padding-bottom: 16px !important; box-shadow: inset 0 0 0 1.5px #e3e3e3 !important; }
/* Đội ngũ: less air under the opening figures */
.pgs-page--m .pgs-fig > div > [data-n="Tiêu đề"] { padding-bottom: 28px !important; }
.pgs-page--m .pgs-fig > div > [data-n="Các nhóm chuyên môn"] { padding-top: 28px !important; }
/* "500+ Website đã thiết kế" on one line */
.pgs-page--m [data-n="Đếm"] { flex-direction: row !important; align-items: baseline !important; gap: 10px !important; height: auto !important; }
.pgs-page--m [data-n="Đếm"] > * { width: auto !important; flex: 0 0 auto !important; }
/* case studies: the figure card on the photo hugs its figure */
.pgs-page--m [data-n="Chỉ số kết quả"] { width: auto !important; align-self: flex-start !important; right: auto !important; padding: 10px 14px !important; gap: 2px !important; height: auto !important; }
/* breadcrumbs on one line */
.pgs-page--m [data-n="Breadcrumb"] { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; height: auto !important; overflow: hidden; white-space: nowrap; }
.pgs-page--m [data-n="Breadcrumb"] > * { flex: 0 0 auto !important; width: auto !important; font-size: 14px !important; }
.pgs-page--m [data-n="Breadcrumb"] > :last-child { flex: 0 1 auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* phone: no share bar, no "Chỉ đường" button */
.pgs-page--m [data-n="Chia sẻ"], .pgs-page--m .pgs-fig > div > [data-n="Google Maps"] > [data-n="Chỉ đường"] { display: none !important; }
/* case study facts (Khách hàng · Ngành · Dịch vụ · Thời gian): one strip of cards */
.pgs-facts { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; align-self: stretch; margin-right: -15px; padding-right: 15px; }
.pgs-facts::-webkit-scrollbar { display: none; }
.pgs-facts > div { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px #e3e3e3; background: #fff; }
.pgs-facts > div > * { width: auto !important; white-space: nowrap !important; }
/* news: the featured post's category chip sits on the photo */
.pgs-page--m [data-n="Bài nổi bật"] > [data-n="Ảnh"] { position: relative !important; }
.pgs-page--m [data-n="Ảnh"] > .pgs-cat { position: absolute !important; left: 12px; top: 12px; z-index: 2; margin: 0 !important; }
/* "Xem tất cả thành viên" (Giới thiệu) */
.pgs-morebtn { display: flex; align-items: center; justify-content: center; gap: 8px; align-self: stretch; height: 52px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px #030303; font: 700 15px 'Space Grotesk', sans-serif; text-transform: uppercase; color: #030303; text-decoration: none; }
/* two hero buttons side by side share the row */
.pgs-page--m [data-n="Hero"] > [data-n="Hàng nút"]:has(.pgs-hero-2nd) > * { flex: 1 1 0 !important; width: auto !important; justify-content: center !important; }
.pgs-hero-2nd { background: #fff !important; box-shadow: inset 0 0 0 1.5px #030303 !important; cursor: pointer; }
.pgs-page--m .pgs-fig > div > [data-n="Hero & bộ lọc"], .pgs-page--m .pgs-fig > div > [data-n="Hero & tìm kiếm"] { padding-bottom: 20px !important; }
.pgs-page--m .pgs-fig > div > [data-n="Danh sách dự án"], .pgs-page--m .pgs-fig > div > [data-n="Danh sách bài viết"] { padding-top: 16px !important; }
.pgs-page--m .pgs-fig > div > [data-n="Tiêu đề case study"], .pgs-page--m .pgs-fig > div > [data-n="Đầu bài"] { padding-bottom: 24px !important; }
.pgs-page--m .pgs-fig > div > [data-n="Ảnh bìa"] { padding-top: 0 !important; padding-bottom: 24px !important; }
.pgs-strip, .pgs-facts, .pgs-page--t [data-n="Thanh trượt"], .pgs-page--m [data-n="Thanh trượt"] { cursor: grab; }
.is-drag { cursor: grabbing !important; scroll-snap-type: none !important; user-select: none; }
.is-drag * { pointer-events: none; }

/* Desktop fixes (user feedback 2026-10-30) */
/* Đội ngũ / Giới thiệu: every team photo fills its frame the same way */
.pgs-page [data-n="Thành viên"] > [data-n="Ảnh"] { background-size: cover !important; background-position: 50% 15% !important; }
/* desktop designs use the same home form */
.pgs-page--d .pgs-leadbox { align-self: stretch; }
.pgs-page--d .pgs-leadbox .al-form { grid-template-columns: 1fr 1fr; gap: 22px; padding: 40px 36px; }
/* Case Study filter rows (assets/cases.js): full width, one line, dragged sideways */
.pgs-chiprow { width: auto !important; max-width: none !important; align-self: stretch !important; }

/* touch targets in the lead form: tall enough and apart */
.pgs-leadbox .al-form input, .pgs-leadbox .al-form select, .pgs-leadbox .al-dd__btn, .pgs-leadbox .al-form button[type="submit"] { min-height: 52px; }
.pgs-leadbox .al-form { row-gap: 22px; }