/* =========================================================
* PHẪU THUẬT THẨM MỸ – LANDING PAGE
* Prefix: pttm- (kế thừa design system + component từ LP Công nghệ phun mày)
* Breakpoints: mobile ≤ 768px | tablet 769–1024px | desktop ≥ 1025px
* ========================================================= */
/* ---------- 1. DESIGN TOKENS ---------- */
#pttm-landing {
/* Màu thương hiệu */
--pttm-primary: #710dac;
--pttm-deep: #451180;
--pttm-violet: #9615d2;
--pttm-white: #fff;
--pttm-bg: #f4eeff;
/* Font */
--pttm-font-serif: "IvyPrestoDisplay", serif;
--pttm-font-sans: "Geomanist", sans-serif;
/* Gradient */
--pttm-grad-title-1: linear-gradient(180deg, #de4c33 0%, #9615d2 100%);
--pttm-grad-title-2: linear-gradient(180deg, #ac59ff 0%, #f74289 100%);
--pttm-grad-cta: linear-gradient(
90deg,
#f5935c 0%,
#e0668a 25%,
#a45cf2 50%,
#e0668a 75%,
#f5935c 100%
);
--pttm-cta-shadow: 0 5px 10px -3px rgba(113, 13, 172, 0.4);
/* Text mô tả / body */
--pttm-text-size: 20px;
--pttm-text-color: #710dac;
/* Radius */
--pttm-radius-pill: 999px;
--pttm-radius-card: 30px;
--pttm-radius-tab: 18px;
width: 100%;
overflow: hidden; /* fallback trình duyệt cũ */
isolation: isolate; /* lớp nền z-index:-1 của các section nằm dưới mọi nội dung */
background: var(--pttm-bg);
}
/* Chỉ cắt tràn ngang (chống cuộn ngang do phần tử trang trí),
* position: sticky vẫn hoạt động */
@supports (overflow: clip) {
#pttm-landing {
overflow: visible;
overflow-x: clip;
}
}
@media (max-width: 768px) {
#pttm-landing {
--pttm-text-size: 16px;
}
}
/* ---------- 2. BASE (scoped) ---------- */
#pttm-landing *,
#pttm-landing *::before,
#pttm-landing *::after {
box-sizing: border-box;
}
#pttm-landing img {
display: block;
max-width: 100%;
height: auto;
}
/* Geomanist chỉ dùng 400 / 500 (playbook) – chữ đậm trong câu cũng 500 */
#pttm-landing strong,
#pttm-landing b {
font-weight: 500;
}
.pttm-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Xuống dòng / nội dung theo thiết bị:
*
chỉ xuống dòng trên mobile
*
chỉ xuống dòng trên desktop + tablet
* .pttm-m-only chỉ hiện trên mobile
* .pttm-d-only chỉ hiện trên desktop + tablet */
.pttm-br-m,
.pttm-m-only {
display: none;
}
@media (max-width: 768px) {
.pttm-br-m,
.pttm-m-only {
display: inline;
}
.pttm-br-d,
.pttm-d-only {
display: none;
}
}
/* ---------- 3. UTILITIES ---------- */
/* Chữ gradient. Lưu ý: dấu chồng tầng (ổ, ế, Ô…) có thể nhô khỏi hộp chữ và
* bị tàng hình → element dùng class này cần chừa padding-top (xem .pttm-grad-safe) */
.pttm-text-grad-1,
.pttm-text-grad-2 {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.pttm-text-grad-1 {
background-image: var(--pttm-grad-title-1);
}
.pttm-text-grad-2 {
background-image: var(--pttm-grad-title-2);
}
/* Chừa chỗ cho dấu tiếng Việt, bù lại bằng margin âm → bố cục không đổi */
.pttm-grad-safe {
padding-top: 0.24em;
padding-bottom: 0.1em;
margin-top: -0.24em;
margin-bottom: -0.1em;
}
/* Text mô tả / body: 20px, #710DAC (mobile 16px) */
#pttm-landing .pttm-text {
margin: 0;
color: var(--pttm-text-color);
font-family: var(--pttm-font-sans);
font-size: var(--pttm-text-size);
font-weight: 400;
line-height: 1.3;
}
/* ---------- 4. COMPONENT – CTA BUTTON (dùng chung toàn trang) ----------
* Chuẩn ~279 x 66. Mỗi nơi dùng chỉ cần set --pttm-btn-w,
* chiều cao + cỡ chữ tự scale theo.
*/
.pttm-btn {
--pttm-btn-w: 279px;
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--pttm-btn-w);
height: calc(var(--pttm-btn-w) * 0.235);
padding: 0 calc(var(--pttm-btn-w) * 0.07);
overflow: hidden;
border: 1.5px solid rgba(255, 255, 255, 0.85);
border-radius: var(--pttm-radius-pill);
background: var(--pttm-grad-cta);
background-size: 200% 100%;
background-position: 0 0;
box-shadow: var(--pttm-cta-shadow);
color: var(--pttm-white);
font-family: var(--pttm-font-sans);
font-size: calc(var(--pttm-btn-w) * var(--pttm-btn-fs, 0.078));
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
animation: pttm-btn-pulse 2.2s ease-in-out infinite;
animation-delay: var(--pttm-delay, 0s);
transition: transform 0.25s ease, background-position 0.5s ease,
box-shadow 0.25s ease;
}
/* Vệt sáng quét tự động */
.pttm-btn::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 40%;
height: 100%;
content: "";
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-150%) skewX(-20deg);
animation: pttm-btn-shine 3.2s ease-in-out infinite;
animation-delay: var(--pttm-delay, 0s);
pointer-events: none;
}
.pttm-btn__label {
position: relative;
z-index: 1;
text-shadow: 0 1px 2px rgba(69, 17, 128, 0.25);
}
/* Nút tự giãn theo text dài, giữ nguyên chiều cao + cỡ chữ */
.pttm-btn--auto {
width: auto;
min-width: var(--pttm-btn-w);
padding: 0 calc(var(--pttm-btn-w) * 0.14);
}
.pttm-btn:hover,
.pttm-btn:focus-visible {
color: var(--pttm-white);
background-position: 100% 0;
transform: translateY(-2px);
}
.pttm-btn:focus-visible {
outline: 3px solid var(--pttm-white);
outline-offset: 3px;
}
/* Mobile: chữ nút to hơn cho dễ đọc */
@media (max-width: 768px) {
.pttm-btn {
--pttm-btn-fs: 0.092;
}
}
@keyframes pttm-btn-pulse {
0% {
box-shadow: var(--pttm-cta-shadow), 0 0 0 0 rgba(113, 13, 172, 0.35);
}
70% {
box-shadow: var(--pttm-cta-shadow), 0 0 0 9px rgba(113, 13, 172, 0);
}
100% {
box-shadow: var(--pttm-cta-shadow), 0 0 0 0 rgba(113, 13, 172, 0);
}
}
@keyframes pttm-btn-shine {
0% {
transform: translateX(-150%) skewX(-20deg);
}
55%,
100% {
transform: translateX(350%) skewX(-20deg);
}
}
/* ---------- 5. COMPONENT – STAGE (ảnh banner + CTA HTML đặt đè theo %) ----------
* --pttm-stage-x / --pttm-stage-y : tâm nút CTA (% của ảnh)
* --pttm-stage-cta-w : chiều rộng nút (cqw = % chiều rộng ảnh)
*/
.pttm-stage {
--pttm-stage-x: 50%;
--pttm-stage-y: 80%;
--pttm-stage-cta-w: 279px;
position: relative;
width: 100%;
container-type: inline-size;
}
.pttm-stage__picture {
display: block;
width: 100%;
}
#pttm-landing .pttm-stage__image {
width: 100%;
height: auto;
}
.pttm-stage__cta {
position: absolute;
top: var(--pttm-stage-y);
left: var(--pttm-stage-x);
z-index: 2;
transform: translate(-50%, -50%);
}
.pttm-stage__cta .pttm-btn {
--pttm-btn-w: var(--pttm-stage-cta-w);
}
/* ---------- 6. COMPONENT – PILL TITLE (2 ngôi sao góc) ---------- */
.pttm-pill-title {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 34px 5px;
border: 1.5px solid #d4b8f5;
border-radius: var(--pttm-radius-pill);
background: linear-gradient(180deg, #fff 0%, #f5edff 100%);
box-shadow: 0 4px 12px rgba(113, 13, 172, 0.14),
0 0 8px 2px rgba(255, 255, 255, 0.9) inset;
}
.pttm-pill-title__text {
color: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: 28px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.01em;
text-transform: uppercase;
white-space: nowrap;
}
/* Ngôi sao đã đúng góc theo Figma → không xoay, không nhấp nháy */
#pttm-landing .pttm-pill-title__star {
position: absolute;
z-index: 1;
height: auto;
pointer-events: none;
}
#pttm-landing .pttm-pill-title__star--left {
bottom: -12px;
left: -13px;
width: 40px;
}
#pttm-landing .pttm-pill-title__star--right {
top: -15px;
right: -12px;
width: 40px;
}
@media (max-width: 768px) {
.pttm-pill-title {
padding: 5px 20px 4px;
}
.pttm-pill-title__text {
font-size: 19px;
}
#pttm-landing .pttm-pill-title__star--left {
bottom: -9px;
left: -10px;
width: 26px;
}
#pttm-landing .pttm-pill-title__star--right {
top: -11px;
right: -9px;
width: 26px;
}
}
@media (max-width: 400px) {
.pttm-pill-title {
padding: 5px 16px 4px;
}
.pttm-pill-title__text {
font-size: 17px;
}
}
/* ---------- 6b. COMPONENT – HEADING ----------
* Dòng "tiền tố/hậu tố" (sans) + "Keyword" (serif italic gradient) + pill.
* Thứ tự tiền tố/hậu tố quyết định bằng thứ tự HTML, CSS dùng chung.
*/
.pttm-heading {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 42px;
text-align: center;
}
.pttm-heading__line {
display: flex;
align-items: baseline;
justify-content: center;
gap: 12px;
}
.pttm-heading__keyword {
padding-right: 0.08em;
padding-left: 0.04em;
font-family: var(--pttm-font-serif);
font-size: 96px;
font-style: italic;
font-weight: 400;
line-height: 1.05;
}
.pttm-heading__sub {
color: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: 32px;
font-weight: 500;
line-height: 1;
}
.pttm-heading .pttm-pill-title {
margin-top: 6px; /* chừa chỗ cho chân chữ g, y… của keyword */
}
/* Hậu tố xếp 2 dòng bên phải keyword (vd "khách hàng / tin chọn") */
.pttm-heading__line--center {
align-items: center;
}
.pttm-heading__sub--stack {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.05;
text-align: left;
}
/* Dòng chữ sans bên dưới pill (vd "Khắc phục mọi khuyết điểm", "là phù hợp?") */
.pttm-heading__tail {
margin-top: 10px;
color: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: 34px;
font-weight: 500;
line-height: 1.2;
}
@media (max-width: 768px) {
.pttm-heading {
margin-bottom: 24px;
}
.pttm-heading__line {
gap: 6px;
}
.pttm-heading__keyword {
font-size: 64px;
}
.pttm-heading__sub {
font-size: 20px;
}
.pttm-heading__tail {
margin-top: 8px;
font-size: 20px;
}
}
@media (max-width: 400px) {
.pttm-heading__keyword {
font-size: 56px;
}
}
/* ---------- 7. UTILITY – SCROLL REVEAL ----------
* Gắn data-pttm-reveal (+ style="--i:n" để lệch nhịp).
* Chỉ ẩn khi JS chạy (#pttm-landing.is-js) → không JS vẫn hiện đủ nội dung.
*/
#pttm-landing.is-js [data-pttm-reveal] {
opacity: 0;
transform: translateY(34px);
transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--i, 0) * 0.13s);
}
#pttm-landing.is-js [data-pttm-reveal].is-in {
opacity: 1;
transform: none;
}
/* =========================================================
* SECTION: HERO
* Desktop 1920 x 951 | Mobile 420 x 769 (ảnh cắt trọn, KHÔNG kèm nút)
* Nút CTA đặt theo % ảnh → luôn khớp artwork mọi màn hình.
* Lệch so với ảnh thì chỉnh 3 biến --pttm-stage-* bên dưới:
* --pttm-stage-x / -y : tâm nút (% chiều rộng / chiều cao ảnh)
* --pttm-stage-cta-w : độ rộng nút (cqw = % chiều rộng ảnh)
* ========================================================= */
.pttm-hero {
position: relative;
width: 100%;
background: var(--pttm-bg);
}
.pttm-hero .pttm-stage {
--pttm-stage-x: 25.7%;
--pttm-stage-y: 90.7%;
/* 279 / 1920 = 14.53% chiá»u rá»™ng banner */
--pttm-stage-cta-w: clamp(150px, 14.53vw, 400px);
}
@supports (width: 1cqw) {
.pttm-hero .pttm-stage {
--pttm-stage-cta-w: clamp(150px, 14.53cqw, 400px);
}
}
@media (max-width: 768px) {
.pttm-hero .pttm-stage {
--pttm-stage-x: 51.2%;
--pttm-stage-y: 95.8%;
/* ~214px tại màn 420 (51% chiều rộng banner) */
--pttm-stage-cta-w: clamp(160px, 51vw, 340px);
}
@supports (width: 1cqw) {
.pttm-hero .pttm-stage {
--pttm-stage-cta-w: clamp(160px, 51cqw, 340px);
}
}
}
/* =========================================================
* SECTION: VẤN ĐỀ VÙNG MẮT (Điều khiến bạn bận tâm?)
* Desktop ≥1200: 5 card 1 hàng | 769–1199: 3 trên + 2 dưới (căn giữa)
* Mobile: 2 cột, card lẻ cuối căn giữa.
* Card = button chọn/bỏ chọn (aria-pressed). Chọn → viền gradient, tick,
* chip "Đã chọn"; card chưa chọn mờ nhẹ để khách thấy rõ vấn đề của mình.
* Biến chỉnh nhanh: --pttm-issues-w (container), --pttm-issues-gap,
* --pttm-issues-cols (số card/hàng), --pttm-issues-dim (độ mờ card chưa chọn).
* ========================================================= */
.pttm-issues {
--pttm-issues-w: 1434px;
--pttm-issues-gap: 24px;
--pttm-issues-cols: 5;
--pttm-issues-dim: 0.62;
position: relative;
width: 100%;
padding: 64px 24px 64px;
}
.pttm-issues__inner {
position: relative;
z-index: 1;
max-width: var(--pttm-issues-w);
margin: 0 auto;
}
/* ----- Heading: pill nằm trên dòng keyword ----- */
.pttm-heading--pill-top .pttm-pill-title {
margin: 0 0 18px;
}
.pttm-issues .pttm-heading {
margin-bottom: 18px;
}
/* Không cắt đôi cụm chữ; màn hẹp thì "Điều khiến bạn" tự xuống dòng riêng */
.pttm-issues .pttm-heading__line {
flex-wrap: wrap;
row-gap: 0;
}
.pttm-issues .pttm-heading__sub,
.pttm-issues .pttm-heading__keyword {
white-space: nowrap;
}
/* ----- Gợi ý thao tác ----- */
#pttm-landing .pttm-issues__hint {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 0 44px;
padding: 0;
color: var(--pttm-violet);
font-family: var(--pttm-font-sans);
font-size: 20px;
font-weight: 400;
line-height: 1.3;
text-align: center;
}
.pttm-issues__hint-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--pttm-primary);
animation: pttm-tap 1.8s ease-in-out infinite;
}
@keyframes pttm-tap {
0%, 100% { translate: 0 0; }
40% { translate: 0 -4px; }
55% { translate: 0 1px; }
}
/* ----- Lưới: flex-wrap + căn giữa → hàng lẻ tự nằm giữa ----- */
#pttm-landing .pttm-issues__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--pttm-issues-gap);
margin: 0;
padding: 0;
list-style: none;
}
#pttm-landing .pttm-issues__item {
display: flex;
flex: 0 0 calc((100% - (var(--pttm-issues-cols) - 1) * var(--pttm-issues-gap)) / var(--pttm-issues-cols));
margin: 0;
padding: 0;
list-style: none;
}
/* ----- Card (button) – reset Flatsome ----- */
#pttm-landing .pttm-issues__card {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: stretch;
width: 100%;
min-height: 0;
margin: 0;
padding: 12px 12px 20px;
border: 0.6px solid #fff;
border-radius: var(--pttm-radius-card);
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 10px 28px rgba(113, 13, 172, 0.1);
color: var(--pttm-primary);
font: inherit;
letter-spacing: 0;
line-height: 1.3;
text-align: center;
text-transform: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease,
background-color 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}
/* Viền gradient tím 1 – hiện khi được chọn */
.pttm-issues__card::before {
position: absolute;
inset: 0;
z-index: 2;
padding: 2.5px;
content: "";
border-radius: inherit;
background: var(--pttm-grad-title-1);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
#pttm-landing .pttm-issues__card:hover {
translate: 0 -8px;
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 22px 40px rgba(113, 13, 172, 0.2);
}
#pttm-landing .pttm-issues__card:focus-visible {
outline: 3px solid var(--pttm-violet);
outline-offset: 4px;
}
/* Ảnh */
.pttm-issues__media {
position: relative;
display: block;
overflow: hidden;
border-radius: 22px;
background: #ead9ff;
}
#pttm-landing .pttm-issues__image {
width: 100%;
height: auto;
aspect-ratio: 520 / 580;
object-fit: cover;
transition: scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
}
.pttm-issues__card:hover .pttm-issues__image {
scale: 1.07;
}
/* Tick góc ảnh */
.pttm-issues__check {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1.5px solid #d4b8f5;
border-radius: 50%;
background: rgba(255, 255, 255, 0.88);
color: rgba(113, 13, 172, 0.28);
box-shadow: 0 4px 10px rgba(69, 17, 128, 0.18);
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Tên vấn đề */
.pttm-issues__name {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-height: 2.6em;
margin: 16px 4px 14px;
color: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: var(--pttm-text-size);
font-weight: 500;
line-height: 1.3;
text-wrap: balance;
}
/* Chip "Tôi đang gặp" / "Đã chọn" */
.pttm-issues__pick {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: center;
padding: 7px 16px;
border: 1px dashed #c39be9;
border-radius: var(--pttm-radius-pill);
background: rgba(255, 255, 255, 0.55);
color: var(--pttm-violet);
font-family: var(--pttm-font-sans);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.pttm-issues__pick-icon {
position: relative;
width: 12px;
height: 12px;
}
/* Dấu + → xoay thành dấu × khi đã chọn (để khách biết có thể bỏ chọn) */
.pttm-issues__pick-icon::before,
.pttm-issues__pick-icon::after {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
content: "";
border-radius: 2px;
background: currentColor;
translate: 0 -50%;
transition: rotate 0.35s ease;
}
.pttm-issues__pick-icon::after {
rotate: 90deg;
}
.pttm-issues__pick-on {
display: none;
}
/* ----- Trạng thái ĐÃ CHỌN ----- */
#pttm-landing .pttm-issues__card[aria-pressed="true"] {
background-color: rgba(255, 255, 255, 0.62);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 18px 40px rgba(150, 21, 210, 0.28);
}
.pttm-issues__card[aria-pressed="true"]::before {
opacity: 1;
}
.pttm-issues__card[aria-pressed="true"] .pttm-issues__check {
border-color: #fff;
background: var(--pttm-grad-title-1);
color: #fff;
animation: pttm-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pttm-issues__card[aria-pressed="true"] .pttm-issues__pick {
border: 1px solid rgba(255, 255, 255, 0.85);
background: var(--pttm-grad-cta);
background-size: 200% 100%;
color: #fff;
box-shadow: var(--pttm-cta-shadow);
}
.pttm-issues__card[aria-pressed="true"] .pttm-issues__pick-icon::before {
rotate: 45deg;
}
.pttm-issues__card[aria-pressed="true"] .pttm-issues__pick-icon::after {
rotate: 135deg;
}
.pttm-issues__card[aria-pressed="true"] .pttm-issues__pick-off {
display: none;
}
.pttm-issues__card[aria-pressed="true"] .pttm-issues__pick-on {
display: inline;
}
/* Đã có lựa chọn → card chưa chọn lùi lại */
.pttm-issues.has-pick .pttm-issues__card[aria-pressed="false"] {
opacity: var(--pttm-issues-dim);
filter: saturate(0.55);
}
.pttm-issues.has-pick .pttm-issues__card[aria-pressed="false"]:hover {
opacity: 1;
filter: none;
}
@keyframes pttm-pop {
0% { scale: 0.4; }
100% { scale: 1; }
}
/* ----- Ô tổng kết + CTA ----- */
.pttm-issues__verdict {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
max-width: 1040px;
margin: 40px auto 0;
padding: 22px 24px 22px 36px;
border: 0.6px solid #fff;
border-radius: var(--pttm-radius-card);
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 10px 28px rgba(113, 13, 172, 0.1);
}
#pttm-landing .pttm-issues__verdict-text {
flex: 1 1 auto;
text-align: left;
}
.pttm-issues__count {
display: inline-block;
padding: 0 0.1em;
font-family: var(--pttm-font-serif);
font-size: 1.6em;
font-style: italic;
font-weight: 400;
line-height: 1;
}
.pttm-issues__count.is-bump {
animation: pttm-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pttm-issues__cta {
--pttm-btn-w: 279px;
flex: 0 0 auto;
}
/* ----- Laptop / tablet: 3 trên + 2 dưới ----- */
@media (max-width: 1199px) {
.pttm-issues {
--pttm-issues-cols: 3;
--pttm-issues-gap: 22px;
}
.pttm-issues__inner {
max-width: 960px;
}
}
/* ----- Mobile: 2 cột, card lẻ căn giữa ----- */
@media (max-width: 768px) {
.pttm-issues {
--pttm-issues-cols: 2;
--pttm-issues-gap: 12px;
padding: 40px 16px 40px;
}
.pttm-issues__inner {
max-width: 420px;
}
.pttm-heading--pill-top .pttm-pill-title {
margin-bottom: 12px;
}
.pttm-issues .pttm-heading {
margin-bottom: 12px;
}
#pttm-landing .pttm-issues__hint {
gap: 6px;
margin-bottom: 24px;
padding: 0 8px;
font-size: 15px;
}
.pttm-issues__hint-icon svg {
width: 18px;
height: 18px;
}
#pttm-landing .pttm-issues__card {
padding: 7px 7px 12px;
border-radius: 20px;
}
#pttm-landing .pttm-issues__card:hover {
translate: none;
}
.pttm-issues__card:hover .pttm-issues__image {
scale: 1;
}
.pttm-issues__media {
border-radius: 15px;
}
.pttm-issues__check {
top: 8px;
right: 8px;
width: 28px;
height: 28px;
}
.pttm-issues__check svg {
width: 15px;
height: 15px;
}
.pttm-issues__name {
min-height: 2.6em;
margin: 10px 2px 10px;
line-height: 1.25;
}
.pttm-issues__pick {
gap: 6px;
padding: 6px 12px;
font-size: 13px;
}
.pttm-issues__pick-icon {
width: 10px;
height: 10px;
}
.pttm-issues__verdict {
flex-direction: column;
gap: 16px;
margin-top: 28px;
padding: 20px 18px 22px;
border-radius: 24px;
}
#pttm-landing .pttm-issues__verdict-text {
text-align: center;
}
.pttm-issues__cta {
--pttm-btn-w: 240px;
}
}
/* =========================================================
* SECTION: GIẢI PHÁP (Phiên bản đẹp hơn của chính mình)
* Mỗi nhóm = 1 panel kính: ảnh minh họa lớn | tiêu đề nhóm + 2 phương pháp + CTA.
* Desktop: 2 cột, nhóm thứ 2 đảo ảnh sang phải (--reverse).
* Mobile: tiêu đề → ảnh → phương pháp → CTA.
* Biến chỉnh nhanh (trên .pttm-sol):
* --pttm-sol-w độ rộng container
* --pttm-sol-cols tỉ lệ cột ảnh | cột nội dung
* --pttm-sol-gap khoảng cách 2 cột
* --pttm-sol-title cỡ tiêu đề nhóm (serif)
* --pttm-sol-name / --pttm-sol-brand cỡ tên phương pháp / tên công nghệ
* ========================================================= */
.pttm-sol {
--pttm-sol-w: 1434px;
--pttm-sol-cols: minmax(0, 0.92fr) minmax(0, 1fr);
--pttm-sol-gap: 64px;
--pttm-sol-title: 72px;
--pttm-sol-name: 24px;
--pttm-sol-brand: 36px;
--pttm-sol-ratio: 1160 / 1240;
position: relative;
width: 100%;
padding: 24px 24px 64px;
}
.pttm-sol__inner {
position: relative;
z-index: 1;
max-width: var(--pttm-sol-w);
margin: 0 auto;
}
.pttm-sol .pttm-heading {
margin-bottom: 22px;
}
.pttm-sol .pttm-heading__line {
flex-wrap: wrap;
row-gap: 0;
}
.pttm-sol .pttm-heading__sub,
.pttm-sol .pttm-heading__keyword {
white-space: nowrap;
}
/* ----- Mô tả dưới tiêu đề ----- */
#pttm-landing .pttm-sol__lead {
max-width: 860px;
margin: 0 auto 44px;
font-size: 22px;
text-align: center;
text-wrap: balance;
}
#pttm-landing .pttm-sol__lead strong {
color: var(--pttm-violet);
font-weight: 500;
}
.pttm-sol__groups {
display: grid;
gap: 36px;
}
/* ----- Panel nhóm ----- */
.pttm-sol__group {
display: grid;
grid-template-areas:
"visual head"
"visual options"
"visual cta";
grid-template-columns: var(--pttm-sol-cols);
grid-template-rows: auto auto auto;
align-content: center;
column-gap: var(--pttm-sol-gap);
padding: 40px;
border: 0.6px solid #fff;
border-radius: 40px;
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 24px 60px rgba(113, 13, 172, 0.1);
}
.pttm-sol__group--reverse {
grid-template-areas:
"head visual"
"options visual"
"cta visual";
grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
}
.pttm-sol__head {
grid-area: head;
align-self: end;
}
.pttm-sol__visual {
grid-area: visual;
grid-row: 1 / span 3;
align-self: center;
}
.pttm-sol__options {
grid-area: options;
display: grid;
gap: 16px;
}
.pttm-sol__cta {
grid-area: cta;
align-self: start;
margin-top: 30px;
}
/* ----- Tiêu đề nhóm ----- */
#pttm-landing .pttm-sol__group-title {
margin-top: -0.24em;
margin-bottom: 4px;
padding: 0.24em 0.1em 0.1em 0.02em;
font-family: var(--pttm-font-serif);
font-size: var(--pttm-sol-title);
font-style: italic;
font-weight: 400;
line-height: 1.05;
letter-spacing: 0;
text-transform: none;
}
#pttm-landing .pttm-sol__hint {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 24px;
padding: 0;
color: var(--pttm-violet);
font-family: var(--pttm-font-sans);
font-size: 17px;
line-height: 1.3;
}
.pttm-sol__hint-dot {
position: relative;
flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--pttm-grad-title-1);
}
.pttm-sol__hint-dot::after {
position: absolute;
inset: 0;
content: "";
border-radius: 50%;
background: rgba(150, 21, 210, 0.45);
animation: pttm-ping 1.8s ease-out infinite;
}
@keyframes pttm-ping {
0% { scale: 1; opacity: 0.8; }
100% { scale: 2.8; opacity: 0; }
}
/* ----- Ảnh minh họa (crossfade) ----- */
.pttm-sol__frame {
position: relative;
overflow: hidden;
aspect-ratio: var(--pttm-sol-ratio);
border-radius: 30px;
background: #ead9ff;
box-shadow: 0 30px 60px rgba(113, 13, 172, 0.2);
}
#pttm-landing .pttm-sol__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
scale: 1.06;
transition: opacity 0.6s ease, scale 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#pttm-landing .pttm-sol__img.is-active {
opacity: 1;
scale: 1;
}
.pttm-sol__caption {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 2;
max-width: calc(100% - 40px);
padding: 10px 20px;
border: 0.6px solid #fff;
border-radius: var(--pttm-radius-pill);
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 8px 20px rgba(69, 17, 128, 0.18);
color: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: 18px;
font-weight: 500;
line-height: 1.2;
}
.pttm-sol__caption.is-swap {
animation: pttm-caption-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes pttm-caption-in {
0% { opacity: 0; translate: 0 10px; }
100% { opacity: 1; translate: 0 0; }
}
/* ----- Phương pháp (button) – reset Flatsome ----- */
#pttm-landing .pttm-sol__option {
position: relative;
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: start;
gap: 18px;
width: 100%;
min-height: 0;
margin: 0;
padding: 22px 26px 22px 22px;
border: 0.6px solid #fff;
border-radius: 24px;
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 0 11.76px 4.8px #fff inset;
color: var(--pttm-primary);
font: inherit;
letter-spacing: 0;
line-height: 1.3;
text-align: left;
text-transform: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease,
box-shadow 0.35s ease;
}
/* Viền gradient tím 1 khi đang chọn */
.pttm-sol__option::before {
position: absolute;
inset: 0;
padding: 2px;
content: "";
border-radius: inherit;
background: var(--pttm-grad-title-1);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
#pttm-landing .pttm-sol__option:hover {
background-color: rgba(255, 255, 255, 0.6);
}
#pttm-landing .pttm-sol__option:focus-visible {
outline: 3px solid var(--pttm-violet);
outline-offset: 3px;
}
#pttm-landing .pttm-sol__option[aria-pressed="true"] {
translate: 8px 0;
background-color: rgba(255, 255, 255, 0.78);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 16px 34px rgba(150, 21, 210, 0.22);
}
#pttm-landing .pttm-sol__group--reverse .pttm-sol__option[aria-pressed="true"] {
translate: -8px 0;
}
.pttm-sol__option[aria-pressed="true"]::before {
opacity: 1;
}
/* Nút radio */
.pttm-sol__radio {
position: relative;
width: 26px;
height: 26px;
margin-top: 6px;
border: 2px solid #c9a6ef;
border-radius: 50%;
background: #fff;
transition: border-color 0.3s ease, background 0.3s ease;
}
.pttm-sol__radio::after {
position: absolute;
inset: 5px;
content: "";
border-radius: 50%;
background: #fff;
scale: 0;
transition: scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pttm-sol__option[aria-pressed="true"] .pttm-sol__radio {
border-color: transparent;
background: var(--pttm-grad-title-1);
}
.pttm-sol__option[aria-pressed="true"] .pttm-sol__radio::after {
scale: 1;
}
.pttm-sol__content {
display: block;
min-width: 0;
}
/* Tên phương pháp – nổi bật hơn mô tả */
.pttm-sol__title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 10px;
}
.pttm-sol__name {
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: var(--pttm-sol-name);
font-weight: 500;
line-height: 1.2;
}
.pttm-sol__brand {
margin: -0.2em 0 -0.08em;
padding: 0.2em 0.1em 0.08em 0;
font-family: var(--pttm-font-serif);
font-size: var(--pttm-sol-brand);
font-style: italic;
font-weight: 400;
line-height: 1.05;
white-space: nowrap;
}
/* Badge "Phù hợp với bạn" – chỉ hiện khi trùng vấn đề đã chọn ở section trên */
.pttm-sol__match {
display: none;
align-self: center;
padding: 4px 12px;
border-radius: var(--pttm-radius-pill);
background: var(--pttm-grad-title-1);
color: #fff;
font-family: var(--pttm-font-sans);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
}
.pttm-sol__option.is-match .pttm-sol__match {
display: inline-block;
animation: pttm-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pttm-sol__desc {
display: block;
margin-top: 8px;
color: var(--pttm-text-color);
font-family: var(--pttm-font-sans);
font-size: 19px;
font-weight: 400;
line-height: 1.4;
}
/* Tag "Phù hợp khi" */
.pttm-sol__fits {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 14px;
}
.pttm-sol__fits-label {
margin-right: 2px;
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 14px;
font-weight: 500;
}
.pttm-sol__tag {
padding: 4px 12px;
border: 1px solid #dcc4f6;
border-radius: var(--pttm-radius-pill);
background: rgba(255, 255, 255, 0.7);
color: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: 13.5px;
line-height: 1.3;
white-space: nowrap;
transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.pttm-sol__tag.is-hit {
border-color: rgba(255, 255, 255, 0.9);
background: var(--pttm-grad-cta);
background-size: 200% 100%;
color: #fff;
}
/* ----- Laptop / tablet ----- */
@media (max-width: 1199px) {
.pttm-sol {
--pttm-sol-gap: 36px;
--pttm-sol-title: 56px;
--pttm-sol-name: 20px;
--pttm-sol-brand: 30px;
}
.pttm-sol__group {
padding: 28px;
border-radius: 34px;
}
#pttm-landing .pttm-sol__option {
gap: 14px;
padding: 18px 20px 18px 18px;
}
.pttm-sol__desc {
font-size: 17px;
}
}
/* ----- Mobile: xếp dọc ----- */
@media (max-width: 768px) {
.pttm-sol {
--pttm-sol-title: 46px;
--pttm-sol-name: 18px;
--pttm-sol-brand: 27px;
/* Mobile cắt thấp hơn để ảnh + 2 phương pháp gần nhau trong 1 màn hình
(ảnh object-fit: cover → giữ chủ thể ở vùng giữa ảnh) */
--pttm-sol-ratio: 1160 / 1000;
padding: 16px 16px 40px;
}
.pttm-sol__inner {
max-width: 420px;
}
.pttm-sol .pttm-heading {
margin-bottom: 14px;
}
#pttm-landing .pttm-sol__lead {
margin-bottom: 28px;
font-size: var(--pttm-text-size);
}
.pttm-sol__groups {
gap: 24px;
}
.pttm-sol__group,
.pttm-sol__group--reverse {
grid-template-areas:
"head"
"visual"
"options"
"cta";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
padding: 20px 12px 24px;
border-radius: 28px;
}
.pttm-sol__visual {
grid-row: auto;
margin-bottom: 16px;
}
.pttm-sol__head {
text-align: center;
}
#pttm-landing .pttm-sol__hint {
justify-content: center;
gap: 8px;
margin-bottom: 14px;
font-size: 14px;
}
.pttm-sol__frame {
border-radius: 22px;
}
.pttm-sol__caption {
bottom: 12px;
left: 12px;
max-width: calc(100% - 24px);
padding: 8px 14px;
font-size: 14px;
}
.pttm-sol__options {
gap: 12px;
}
#pttm-landing .pttm-sol__option {
grid-template-columns: 22px minmax(0, 1fr);
gap: 12px;
padding: 16px 14px;
border-radius: 20px;
}
#pttm-landing .pttm-sol__option[aria-pressed="true"],
#pttm-landing .pttm-sol__group--reverse .pttm-sol__option[aria-pressed="true"] {
translate: none;
}
.pttm-sol__radio {
width: 22px;
height: 22px;
margin-top: 3px;
}
.pttm-sol__radio::after {
inset: 4px;
}
.pttm-sol__desc {
margin-top: 6px;
font-size: var(--pttm-text-size);
line-height: 1.35;
}
.pttm-sol__fits {
gap: 5px;
margin-top: 10px;
}
.pttm-sol__fits-label {
width: 100%;
font-size: 13px;
}
.pttm-sol__tag {
padding: 3px 10px;
font-size: 12.5px;
}
.pttm-sol__match {
padding: 3px 10px;
font-size: 12px;
}
.pttm-sol__cta {
margin-top: 22px;
text-align: center;
}
.pttm-sol__cta .pttm-btn {
--pttm-btn-w: 240px;
}
}
/* =========================================================
* SECTION: ƯU ĐIỂM (Không phải là "một khuôn" cho tất cả)
* Desktop: 3 card dọc, card giữa hạ thấp (nhịp so le). Ảnh có khung ngắm 4 góc
* tự vẽ khi cuộn tới + chip kính; số 01/02/03 serif gradient đè mép ảnh.
* Mobile: card ngang (ảnh trái | chữ phải) → đọc đủ 3 ý không cần cuộn ngang.
* Biến chỉnh nhanh (trên .pttm-usp):
* --pttm-usp-w độ rộng container
* --pttm-usp-gap khoảng cách card
* --pttm-usp-offset độ hạ thấp card giữa (0 = thẳng hàng)
* --pttm-usp-num cỡ số thứ tự
* --pttm-usp-media-w độ rộng cột ảnh trên mobile
* ========================================================= */
.pttm-usp {
--pttm-usp-w: 1434px;
--pttm-usp-gap: 32px;
--pttm-usp-offset: 56px;
--pttm-usp-num: 104px;
--pttm-usp-media-w: 40%;
position: relative;
width: 100%;
padding: 24px 24px 64px;
}
.pttm-usp__inner {
position: relative;
z-index: 1;
max-width: var(--pttm-usp-w);
margin: 0 auto;
}
.pttm-usp .pttm-heading {
margin-bottom: 44px;
}
.pttm-usp .pttm-heading__line {
flex-wrap: wrap;
row-gap: 0;
}
.pttm-usp .pttm-heading__sub,
.pttm-usp .pttm-heading__keyword {
white-space: nowrap;
}
.pttm-usp .pttm-heading__tail {
margin-top: 0;
}
/* ----- Danh sách ----- */
#pttm-landing .pttm-usp__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: var(--pttm-usp-gap);
margin: 0;
padding: 0 0 var(--pttm-usp-offset);
list-style: none;
}
#pttm-landing .pttm-usp__item {
margin: 0;
padding: 0;
list-style: none;
}
/* Nhịp so le: card giữa hạ thấp */
#pttm-landing .pttm-usp__item:nth-child(3n + 2) {
margin-top: var(--pttm-usp-offset);
}
/* ----- Card ----- */
.pttm-usp__card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 14px;
border: 0.6px solid #fff;
border-radius: var(--pttm-radius-card);
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 20px 48px rgba(113, 13, 172, 0.12);
transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}
.pttm-usp__card:hover {
translate: 0 -10px;
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 30px 60px rgba(113, 13, 172, 0.22);
}
.pttm-usp__media {
position: relative;
overflow: hidden;
border-radius: 22px;
background: #ead9ff;
}
#pttm-landing .pttm-usp__image {
width: 100%;
height: auto;
aspect-ratio: 860 / 960;
object-fit: cover;
transition: scale 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pttm-usp__card:hover .pttm-usp__image {
scale: 1.06;
}
/* Lớp phủ đáy ảnh để số 01/02/03 nổi trên nền */
.pttm-usp__media::after {
position: absolute;
inset: auto 0 0;
height: 34%;
content: "";
background: linear-gradient(180deg, rgba(244, 238, 255, 0) 0%, rgba(244, 238, 255, 0.85) 100%);
pointer-events: none;
}
/* Khung ngắm 4 góc – "đo" riêng từng khuôn mặt.
* 4 SVG góc cố định kích thước (--pttm-usp-corner) → nét không bị méo theo ảnh. */
.pttm-usp__mark {
--pttm-usp-corner: 40px;
--pttm-usp-inset: 18px;
position: absolute;
inset: var(--pttm-usp-inset);
z-index: 1;
transition: inset 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
}
.pttm-usp__corner {
position: absolute;
width: var(--pttm-usp-corner);
height: var(--pttm-usp-corner);
overflow: visible;
}
.pttm-usp__corner--tl { top: 0; left: 0; }
.pttm-usp__corner--tr { top: 0; right: 0; rotate: 90deg; }
.pttm-usp__corner--br { right: 0; bottom: 0; rotate: 180deg; }
.pttm-usp__corner--bl { bottom: 0; left: 0; rotate: 270deg; }
.pttm-usp__corner path {
fill: none;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1 1;
stroke-dashoffset: 0;
filter: drop-shadow(0 1px 3px rgba(69, 17, 128, 0.35));
transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1);
transition-delay: calc(var(--i, 0) * 0.13s + 0.35s);
}
/* Có JS: góc ẩn → vẽ ra khi card vào màn hình */
#pttm-landing.is-js .pttm-usp__item:not(.is-in) .pttm-usp__corner path {
stroke-dashoffset: 1;
}
.pttm-usp__card:hover .pttm-usp__mark {
inset: calc(var(--pttm-usp-inset) - 8px);
}
.pttm-usp__tag {
position: absolute;
top: 30px;
left: 30px;
z-index: 2;
padding: 7px 16px;
border: 0.6px solid #fff;
border-radius: var(--pttm-radius-pill);
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 6px 16px rgba(69, 17, 128, 0.16);
color: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
/* ----- Nội dung ----- */
.pttm-usp__body {
position: relative;
z-index: 2;
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 0 14px 14px;
}
/* Số đè lên mép dưới ảnh */
.pttm-usp__num {
display: block;
margin: calc(var(--pttm-usp-num) * -0.62) 0 0 -4px;
padding: 0.12em 0.12em 0.04em 0.02em;
font-family: var(--pttm-font-serif);
font-size: var(--pttm-usp-num);
font-style: italic;
font-weight: 400;
line-height: 1;
letter-spacing: -0.01em;
}
#pttm-landing .pttm-usp__title {
margin: 6px 0 12px;
padding: 0;
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 26px;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
text-wrap: balance;
}
@media (min-width: 769px) {
#pttm-landing .pttm-usp__title {
min-height: 2.5em; /* giữ 3 card cao bằng nhau khi tiêu đề 1 hoặc 2 dòng */
}
}
#pttm-landing .pttm-usp__desc {
padding-top: 14px;
border-top: 1px solid rgba(150, 21, 210, 0.18);
text-wrap: pretty;
}
.pttm-usp__cta {
display: flex;
justify-content: center;
margin-top: 40px;
}
/* ----- Laptop / tablet ----- */
@media (max-width: 1199px) {
.pttm-usp {
--pttm-usp-gap: 22px;
--pttm-usp-offset: 40px;
--pttm-usp-num: 84px;
}
.pttm-usp__card {
padding: 10px;
}
#pttm-landing .pttm-usp__title {
font-size: 21px;
}
#pttm-landing .pttm-usp__desc {
font-size: 17px;
}
.pttm-usp__tag {
top: 22px;
left: 22px;
font-size: 13px;
}
}
/* ----- Mobile: card ngang ----- */
@media (max-width: 768px) {
.pttm-usp {
--pttm-usp-gap: 14px;
--pttm-usp-offset: 0px;
--pttm-usp-num: 46px;
padding: 16px 16px 40px;
}
.pttm-usp__inner {
max-width: 420px;
}
.pttm-usp .pttm-heading {
margin-bottom: 28px;
}
#pttm-landing .pttm-usp__list {
grid-template-columns: minmax(0, 1fr);
padding-bottom: 0;
}
.pttm-usp__card {
flex-direction: row;
align-items: stretch;
padding: 8px;
border-radius: 22px;
}
.pttm-usp__card:hover {
translate: none;
}
.pttm-usp__card:hover .pttm-usp__image {
scale: 1;
}
.pttm-usp__media {
flex: 0 0 var(--pttm-usp-media-w);
border-radius: 16px;
}
#pttm-landing .pttm-usp__image {
height: 100%;
min-height: 150px;
}
.pttm-usp__media::after {
display: none;
}
.pttm-usp__mark {
--pttm-usp-corner: 22px;
--pttm-usp-inset: 9px;
}
#pttm-landing .pttm-usp__tag {
display: none;
}
.pttm-usp__body {
justify-content: center;
padding: 6px 6px 6px 14px;
}
.pttm-usp__num {
margin: 0 0 0 -2px;
}
#pttm-landing .pttm-usp__title {
margin: 2px 0 8px;
font-size: 17px;
line-height: 1.25;
}
#pttm-landing .pttm-usp__desc {
padding-top: 8px;
font-size: 15px;
line-height: 1.35;
}
.pttm-usp__cta {
margin-top: 28px;
}
.pttm-usp__cta .pttm-btn {
--pttm-btn-w: 240px;
}
}
/* =========================================================
* SECTION: KẾT QUẢ TRƯỚC / SAU
* Desktop: tab lọc phương pháp | khung so sánh kéo (trái) + panel khách hàng (phải).
* Khung so sánh: ảnh Trước đè ảnh Sau, cắt theo --pttm-ba-pos.
* Kéo sát hẳn 1 phía → ghi chú của phía bị che mờ đi.
* Mobile: tab cuộn ngang → tên khách → khung so sánh → ghi chú 2 cột
* → ảnh nhỏ cuộn ngang → CTA.
* Biến chỉnh nhanh (trên .pttm-ba):
* --pttm-ba-w độ rộng container
* --pttm-ba-panel độ rộng panel khách hàng (desktop)
* --pttm-ba-gap khoảng cách khung ảnh ↔ panel
* --pttm-ba-ratio tỉ lệ khung ảnh (khớp ảnh xuất 1600 x 1100)
* --pttm-ba-notes-gap khoảng hở giữa ảnh và ghi chú
* ========================================================= */
.pttm-ba {
--pttm-ba-w: 1434px;
--pttm-ba-panel: 440px;
--pttm-ba-gap: 40px;
--pttm-ba-ratio: 1600 / 1100;
--pttm-ba-notes-gap: 20px;
position: relative;
width: 100%;
padding: 24px 24px 64px;
}
.pttm-ba__inner {
position: relative;
z-index: 1;
max-width: var(--pttm-ba-w);
margin: 0 auto;
}
.pttm-ba .pttm-heading {
margin-bottom: 36px;
}
/* ----- Bố cục ----- */
.pttm-ba__layout {
display: grid;
grid-template-areas:
"tabs tabs"
"viewer id"
"viewer controls";
grid-template-columns: minmax(0, 1fr) var(--pttm-ba-panel);
grid-template-rows: auto auto 1fr;
column-gap: var(--pttm-ba-gap);
}
.pttm-ba__tabs { grid-area: tabs; }
.pttm-ba__id { grid-area: id; }
.pttm-ba__viewer { grid-area: viewer; grid-row: 2 / 4; }
.pttm-ba__controls { grid-area: controls; }
/* Nền kính chung cho cột phải (id + controls) */
.pttm-ba__panel-bg {
grid-column: 2;
grid-row: 2 / 4;
border: 0.6px solid #fff;
border-radius: var(--pttm-radius-card);
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 20px 48px rgba(113, 13, 172, 0.12);
}
.pttm-ba__id,
.pttm-ba__controls {
position: relative;
z-index: 1;
}
/* ----- Tab lọc ----- */
.pttm-ba__tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 32px;
}
#pttm-landing .pttm-ba__tab {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 0;
margin: 0;
padding: 11px 14px 11px 24px;
border: 1px solid #d9c2f5;
border-radius: var(--pttm-radius-pill);
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 8px 2px #fff inset;
color: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: 18px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: translate 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
#pttm-landing .pttm-ba__tab:hover {
translate: 0 -2px;
}
.pttm-ba__tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: var(--pttm-radius-pill);
background: rgba(150, 21, 210, 0.1);
font-size: 14px;
}
#pttm-landing .pttm-ba__tab[aria-pressed="true"] {
border-color: transparent;
background: var(--pttm-grad-title-1);
box-shadow: 0 8px 18px rgba(150, 21, 210, 0.3);
color: #fff;
}
.pttm-ba__tab[aria-pressed="true"] .pttm-ba__tab-count {
background: rgba(255, 255, 255, 0.25);
}
#pttm-landing .pttm-ba__tab:focus-visible,
#pttm-landing .pttm-ba__thumb:focus-visible {
outline: 3px solid var(--pttm-violet);
outline-offset: 3px;
}
/* ----- Thông tin khách hàng ----- */
.pttm-ba__id {
padding: 34px 36px 0;
transition: opacity 0.3s ease;
}
.pttm-ba__eyebrow {
display: block;
color: var(--pttm-violet);
font-family: var(--pttm-font-sans);
font-size: 17px;
line-height: 1.3;
}
#pttm-landing .pttm-ba__name {
margin-top: -0.24em;
margin-bottom: -0.1em;
padding: 0.24em 0.1em 0.1em 0;
font-family: var(--pttm-font-serif);
font-size: 72px;
font-style: italic;
font-weight: 400;
line-height: 1.05;
}
#pttm-landing .pttm-ba__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 14px 0 0;
padding: 0;
}
.pttm-ba__age {
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 20px;
font-weight: 500;
}
.pttm-ba__service {
display: inline-block;
padding: 7px 16px;
border-radius: var(--pttm-radius-pill);
background: var(--pttm-grad-title-1);
box-shadow: 0 6px 14px rgba(150, 21, 210, 0.25);
color: #fff;
font-family: var(--pttm-font-sans);
font-size: 16px;
font-weight: 500;
line-height: 1.2;
}
.pttm-ba.is-swapping .pttm-ba__id,
.pttm-ba.is-swapping .pttm-ba__note-text {
opacity: 0;
}
/* ----- Khung so sánh ----- */
.pttm-ba__viewer {
position: relative;
align-self: start;
}
.pttm-ba__stage {
--pttm-ba-pos: 50%;
position: relative;
overflow: hidden;
aspect-ratio: var(--pttm-ba-ratio);
border-radius: var(--pttm-radius-card);
background: #ead9ff;
box-shadow: 0 30px 60px rgba(113, 13, 172, 0.2);
cursor: ew-resize;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
transition: opacity 0.3s ease, scale 0.3s ease;
}
.pttm-ba.is-swapping .pttm-ba__stage {
opacity: 0.35;
scale: 0.985;
}
#pttm-landing .pttm-ba__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
pointer-events: none;
-webkit-user-drag: none;
}
#pttm-landing .pttm-ba__img--before {
clip-path: inset(0 calc(100% - var(--pttm-ba-pos)) 0 0);
}
/* Nhãn Trước / Sau góc trên */
.pttm-ba__label {
position: absolute;
top: 18px;
z-index: 3;
padding: 7px 18px;
border: 0.6px solid #fff;
border-radius: var(--pttm-radius-pill);
font-family: var(--pttm-font-sans);
font-size: 16px;
font-weight: 500;
line-height: 1.2;
pointer-events: none;
transition: opacity 0.3s ease;
}
.pttm-ba__label--before {
left: 18px;
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--pttm-primary);
}
.pttm-ba__label--after {
right: 18px;
background: var(--pttm-grad-title-1);
color: #fff;
}
.pttm-ba__stage.is-before-min .pttm-ba__label--before,
.pttm-ba__stage.is-after-min .pttm-ba__label--after {
opacity: 0;
}
/* Tay kéo */
.pttm-ba__handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--pttm-ba-pos);
z-index: 4;
width: 0;
outline: none;
}
.pttm-ba__handle::before {
position: absolute;
top: 0;
bottom: 0;
left: -1.5px;
width: 3px;
content: "";
background: #fff;
box-shadow: 0 0 10px rgba(69, 17, 128, 0.45);
}
.pttm-ba__knob {
position: absolute;
top: 50%;
left: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--pttm-grad-cta);
background-size: 200% 100%;
box-shadow: 0 8px 20px rgba(69, 17, 128, 0.35);
color: #fff;
transform: translate(-50%, -50%);
transition: scale 0.25s ease;
}
.pttm-ba__knob::after {
position: absolute;
inset: -3px;
content: "";
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.9);
animation: pttm-ba-ping 2.2s ease-out infinite;
}
.pttm-ba__stage:hover .pttm-ba__knob,
.pttm-ba__stage.is-dragging .pttm-ba__knob {
scale: 1.1;
}
.pttm-ba__handle:focus-visible .pttm-ba__knob {
outline: 3px solid var(--pttm-deep);
outline-offset: 3px;
}
.pttm-ba__hint {
position: absolute;
bottom: 18px;
left: var(--pttm-ba-pos);
z-index: 4;
padding: 7px 16px;
border-radius: var(--pttm-radius-pill);
background: rgba(69, 17, 128, 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #fff;
font-family: var(--pttm-font-sans);
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
translate: -50% 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.pttm-ba__stage.is-touched .pttm-ba__hint {
opacity: 0;
}
/* ----- Ghi chú Trước / Sau ----- */
.pttm-ba__notes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: var(--pttm-ba-notes-gap);
}
.pttm-ba__note {
position: relative;
padding: 16px 22px 18px;
border: 0.6px solid #fff;
border-radius: 22px;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 10px 24px rgba(113, 13, 172, 0.1);
transition: opacity 0.35s ease;
}
.pttm-ba__note--after::before {
position: absolute;
inset: 0;
padding: 2px;
content: "";
border-radius: inherit;
background: var(--pttm-grad-title-1);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.pttm-ba__note-head {
display: flex;
align-items: center;
gap: 10px;
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 17px;
font-weight: 500;
line-height: 1.2;
}
.pttm-ba__note-dot {
flex: 0 0 auto;
width: 14px;
height: 14px;
border-radius: 50%;
}
.pttm-ba__note--before .pttm-ba__note-dot {
border: 3px solid var(--pttm-violet);
background: #fff;
}
.pttm-ba__note--after .pttm-ba__note-dot {
border: 2px solid #fff;
background: var(--pttm-grad-title-1);
box-shadow: 0 0 0 1px rgba(150, 21, 210, 0.4);
}
#pttm-landing .pttm-ba__note-text {
margin: 8px 0 0;
padding: 0;
color: var(--pttm-text-color);
font-family: var(--pttm-font-sans);
font-size: 18px;
font-weight: 400;
line-height: 1.4;
transition: opacity 0.3s ease;
}
.pttm-ba__viewer.is-before-off .pttm-ba__note--before,
.pttm-ba__viewer.is-after-off .pttm-ba__note--after {
opacity: 0.45;
}
/* ----- Điều hướng + ảnh nhỏ ----- */
.pttm-ba__controls {
display: flex;
flex-direction: column;
padding: 26px 36px 34px;
}
.pttm-ba__thumbs {
display: grid;
padding-top: 20px;
border-top: 1px solid rgba(150, 21, 210, 0.18);
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 10px;
}
#pttm-landing .pttm-ba__thumb {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
color: var(--pttm-primary);
font: inherit;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
opacity: 0.72;
transition: opacity 0.3s ease, translate 0.3s ease;
}
#pttm-landing .pttm-ba__thumb[hidden] {
display: none;
}
#pttm-landing .pttm-ba__thumb:hover {
opacity: 1;
translate: 0 -3px;
}
.pttm-ba__thumb-media {
display: block;
overflow: hidden;
border: 2px solid transparent;
border-radius: 14px;
background: #ead9ff;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#pttm-landing .pttm-ba__thumb-media img {
width: 100%;
height: auto;
aspect-ratio: var(--pttm-ba-ratio);
object-fit: cover;
}
.pttm-ba__thumb-name {
display: block;
margin-top: 6px;
font-family: var(--pttm-font-sans);
font-size: 13.5px;
line-height: 1.2;
text-align: center;
white-space: nowrap;
}
#pttm-landing .pttm-ba__thumb[aria-pressed="true"] {
opacity: 1;
}
.pttm-ba__thumb[aria-pressed="true"] .pttm-ba__thumb-media {
border-color: var(--pttm-violet);
box-shadow: 0 6px 16px rgba(150, 21, 210, 0.35);
}
.pttm-ba__thumb[aria-pressed="true"] .pttm-ba__thumb-name {
font-weight: 500;
}
.pttm-ba__cta {
display: flex;
justify-content: center;
margin-top: auto; /* CTA luôn nằm đáy panel */
padding-top: 26px;
}
.pttm-ba__cta .pttm-btn {
--pttm-btn-w: 300px;
}
#pttm-landing .pttm-ba__disclaimer {
max-width: 900px;
margin: 34px auto 0;
padding: 0;
color: var(--pttm-violet);
font-family: var(--pttm-font-sans);
font-size: 15px;
font-style: italic;
line-height: 1.4;
text-align: center;
opacity: 0.85;
}
/* ----- Laptop / tablet ----- */
@media (max-width: 1199px) {
.pttm-ba {
--pttm-ba-panel: 340px;
--pttm-ba-gap: 24px;
}
.pttm-ba__id {
padding: 26px 24px 0;
}
#pttm-landing .pttm-ba__name {
font-size: 54px;
}
.pttm-ba__controls {
padding: 20px 24px 26px;
}
#pttm-landing .pttm-ba__note-text {
font-size: 16px;
}
.pttm-ba__thumbs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pttm-ba__cta .pttm-btn {
--pttm-btn-w: 260px;
}
}
/* ----- Mobile ----- */
@media (max-width: 768px) {
.pttm-ba {
--pttm-ba-notes-gap: 14px;
padding: 16px 16px 40px;
}
.pttm-ba__inner {
max-width: 420px;
}
.pttm-ba .pttm-heading {
margin-bottom: 20px;
}
.pttm-ba__layout {
grid-template-areas:
"tabs"
"id"
"viewer"
"controls";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.pttm-ba__viewer {
grid-row: auto;
}
.pttm-ba__panel-bg {
display: none;
}
/* Tab cuộn ngang – bắt đầu từ mép trái (tránh mất tab đầu) */
.pttm-ba__tabs {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
/* padding đáy đủ chứa bóng đổ tab active (vùng cuộn cắt bóng → vệt cứng) */
margin: -8px -16px 2px;
padding: 8px 16px 18px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.pttm-ba__tabs::-webkit-scrollbar {
display: none;
}
#pttm-landing .pttm-ba__tab[aria-pressed="true"] {
box-shadow: 0 5px 12px rgba(150, 21, 210, 0.28);
}
#pttm-landing .pttm-ba__tab {
flex: 0 0 auto;
gap: 7px;
padding: 8px 10px 8px 16px;
font-size: 14px;
}
#pttm-landing .pttm-ba__tab:hover {
translate: none;
}
.pttm-ba__tab-count {
min-width: 21px;
height: 21px;
font-size: 12px;
}
.pttm-ba__id {
padding: 0 0 14px;
text-align: center;
}
.pttm-ba__eyebrow {
font-size: 14px;
}
#pttm-landing .pttm-ba__name {
font-size: 46px;
}
#pttm-landing .pttm-ba__meta {
justify-content: center;
gap: 8px 10px;
margin-top: 8px;
}
.pttm-ba__age {
font-size: 16px;
}
.pttm-ba__service {
padding: 5px 12px;
font-size: 13.5px;
}
.pttm-ba__stage {
border-radius: 20px;
}
.pttm-ba__label {
top: 10px;
padding: 4px 12px;
font-size: 13px;
}
.pttm-ba__label--before { left: 10px; }
.pttm-ba__label--after { right: 10px; }
.pttm-ba__knob {
width: 42px;
height: 42px;
border-width: 2px;
}
.pttm-ba__knob svg {
width: 18px;
height: 18px;
}
.pttm-ba__hint {
bottom: 10px;
padding: 5px 12px;
font-size: 12px;
}
.pttm-ba__notes {
gap: 10px;
}
.pttm-ba__note {
padding: 12px 12px 14px;
border-radius: 16px;
}
.pttm-ba__note-head {
gap: 7px;
font-size: 14px;
}
.pttm-ba__note-dot {
width: 12px;
height: 12px;
}
#pttm-landing .pttm-ba__note-text {
margin-top: 6px;
font-size: 14.5px;
line-height: 1.35;
}
.pttm-ba__controls {
padding: 18px 0 0;
}
/* Ảnh nhỏ cuộn ngang */
.pttm-ba__thumbs {
display: flex;
justify-content: flex-start;
gap: 10px;
margin: -6px -16px -10px;
padding: 8px 16px 20px;
border-top: 0;
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-padding-inline: 16px; /* snap chừa lề trái, không dính mép màn hình */
scrollbar-width: none;
}
.pttm-ba__thumbs::-webkit-scrollbar {
display: none;
}
#pttm-landing .pttm-ba__thumb {
flex: 0 0 92px;
scroll-snap-align: start;
}
#pttm-landing .pttm-ba__thumb:hover {
translate: none;
}
.pttm-ba__thumb-media {
border-radius: 12px;
}
.pttm-ba__thumb-name {
font-size: 12.5px;
}
.pttm-ba__cta {
padding-top: 20px;
}
.pttm-ba__cta .pttm-btn {
--pttm-btn-w: 240px;
}
#pttm-landing .pttm-ba__disclaimer {
margin-top: 22px;
font-size: 13px;
}
}
/* =========================================================
* COMPONENT: SLIDER (cuộn ngang native + scroll-snap)
* Kéo chuột desktop, thanh tiến trình bấm để nhảy, nút prev/next quay vòng,
* phím ←/→. Không tràn (vừa khung) → JS thêm .is-static: ẩn nút + thanh.
* ========================================================= */
.pttm-slider {
--pttm-slider-gap: 24px;
position: relative;
min-width: 0;
}
.pttm-slider__viewport {
position: relative;
display: flex;
justify-content: flex-start;
gap: var(--pttm-slider-gap);
padding: 10px 0 18px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
cursor: grab;
outline: none;
}
.pttm-slider__viewport::-webkit-scrollbar {
display: none;
}
.pttm-slider__viewport.is-dragging {
scroll-snap-type: none;
cursor: grabbing;
user-select: none;
}
.pttm-slider__viewport:focus-visible {
outline: 3px solid var(--pttm-primary);
outline-offset: 2px;
}
.pttm-slider__item {
flex: 0 0 auto;
scroll-snap-align: start;
}
.pttm-slider__progress {
position: relative;
height: 6px;
margin-top: 6px;
overflow: hidden;
border-radius: var(--pttm-radius-pill);
background: #e6dbf5;
cursor: pointer;
}
.pttm-slider__progress-bar {
position: absolute;
top: 0;
left: 0;
width: var(--pttm-slider-w, 30%);
height: 100%;
border-radius: inherit;
background: var(--pttm-grad-title-1);
transform: translateX(var(--pttm-slider-x, 0%));
}
.pttm-slider.is-static .pttm-slider__progress {
display: none;
}
.pttm-slider.is-static .pttm-slider__viewport {
cursor: auto;
}
/* Dots – chỉ hiện trên mobile */
.pttm-slider__dots {
display: none;
justify-content: center;
gap: 8px;
margin-top: 4px;
}
#pttm-landing .pttm-slider__dot {
width: 8px;
height: 8px;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(113, 13, 172, 0.25);
cursor: pointer;
transition: width 0.3s ease, background-color 0.3s ease;
}
#pttm-landing .pttm-slider__dot.is-active {
width: 22px;
border-radius: var(--pttm-radius-pill);
background: var(--pttm-primary);
}
@media (max-width: 768px) {
.pttm-slider__dots {
display: flex;
}
.pttm-slider.is-static .pttm-slider__dots {
display: none;
}
}
/* =========================================================
* COMPONENT: VIDEO YOUTUBE (Shorts) – bản final trang chủ tổng hợp
* Nhúng thẳng player YouTube (khung 9:16, bo góc), dùng thumbnail + nút play
* mặc định của YouTube → chạm 1 lần là phát có tiếng trên mọi trình duyệt.
* iframe loading="lazy": chỉ tải khi sắp cuộn tới.
* ========================================================= */
.pttm-video {
position: relative;
overflow: hidden;
aspect-ratio: 9 / 16;
border-radius: 24px;
background: var(--pttm-deep);
box-shadow: 0 14px 30px rgba(69, 17, 128, 0.28);
isolation: isolate; /* giữ bo góc cho iframe trên Safari */
}
#pttm-landing .pttm-video__frame {
position: absolute;
inset: 0;
display: block;
width: 100%;
max-width: none;
height: 100%;
margin: 0;
border: 0;
}
/* =========================================================
* SECTION: DẢI VIDEO SHORTS
* Desktop: tối đa 5 video 1 hàng, nhịp sóng (video chẵn hạ thấp), căn giữa;
* > 5 video → slider có nút ‹ › 2 bên + thanh tiến trình.
* Mobile: cuộn ngang ~1,6 video / màn (video kế lấp ló) + thanh tiến trình.
* Biến chỉnh nhanh (trên .pttm-vid):
* --pttm-vid-cols số video / màn (desktop 5, tablet 3) – video tự co cho vừa
* --pttm-vid-max độ rộng tối đa 1 video
* --pttm-vid-gap khoảng cách video
* --pttm-vid-wave độ lệch sóng của video chẵn (0 = thẳng hàng)
* ========================================================= */
.pttm-vid {
--pttm-vid-cols: 5;
--pttm-vid-max: 268px;
--pttm-vid-gap: 24px;
--pttm-vid-wave: 40px;
position: relative;
width: 100%;
padding: 16px 24px 64px;
}
.pttm-vid__inner {
position: relative;
z-index: 1;
max-width: 1434px;
margin: 0 auto;
}
.pttm-vid .pttm-heading {
margin-bottom: 40px;
}
.pttm-vid__slider {
--pttm-slider-gap: var(--pttm-vid-gap);
padding: 0 64px;
}
.pttm-vid__viewport {
padding: 16px 4px 52px; /* chừa chỗ bóng đổ đáy video (≈44px) → không bị cắt thành vệt */
}
/* Căn giữa khi ít video; khi tràn, margin auto = 0 → không mất video đầu */
.pttm-vid__item:first-child {
margin-left: auto;
}
.pttm-vid__item:last-child {
margin-right: auto;
}
.pttm-vid__item {
width: min(
var(--pttm-vid-max),
calc((100% - (var(--pttm-vid-cols) - 1) * var(--pttm-vid-gap)) / var(--pttm-vid-cols))
);
}
.pttm-vid__item:nth-child(even) {
margin-top: var(--pttm-vid-wave);
}
.pttm-vid__item .pttm-video {
transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}
.pttm-vid__item:hover .pttm-video {
translate: 0 -8px;
box-shadow: 0 24px 44px rgba(69, 17, 128, 0.34);
}
/* Nút ‹ › 2 bên */
#pttm-landing .pttm-vid__nav {
position: absolute;
top: calc(50% - 24px);
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
min-height: 0;
margin: 0;
padding: 0;
border: 1.5px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
background: var(--pttm-grad-title-1);
box-shadow: 0 8px 18px rgba(150, 21, 210, 0.3);
color: #fff;
cursor: pointer;
transition: scale 0.25s ease;
}
#pttm-landing .pttm-vid__nav:hover {
scale: 1.08;
}
#pttm-landing .pttm-vid__nav:focus-visible {
outline: 3px solid var(--pttm-violet);
outline-offset: 3px;
}
.pttm-vid__nav--prev { left: 0; }
.pttm-vid__nav--next { right: 0; }
#pttm-landing .pttm-slider.is-static .pttm-vid__nav {
display: none;
}
.pttm-vid__progress {
max-width: 420px;
margin: 0 auto;
}
/* ----- Laptop / tablet ----- */
@media (max-width: 1199px) {
.pttm-vid {
--pttm-vid-cols: 3;
--pttm-vid-gap: 18px;
--pttm-vid-wave: 28px;
}
.pttm-vid__slider {
padding: 0 60px;
}
}
/* ----- Mobile ----- */
@media (max-width: 768px) {
.pttm-vid {
--pttm-vid-cols: 1.6; /* ~1,6 video / màn → video kế lấp ló */
--pttm-vid-max: 250px;
--pttm-vid-gap: 12px;
--pttm-vid-wave: 0px;
padding: 12px 16px 40px;
}
.pttm-vid .pttm-heading {
margin-bottom: 20px;
}
.pttm-vid__slider {
padding: 0;
}
.pttm-vid__viewport {
margin: 0 -16px;
padding: 8px 16px 44px; /* đủ chỗ cho bóng đổ video, tránh vệt cắt */
scroll-padding-inline: 16px;
cursor: auto;
}
#pttm-landing .pttm-vid__nav {
display: none;
}
.pttm-vid__item:hover .pttm-video {
translate: none;
}
.pttm-video {
border-radius: 18px;
}
.pttm-vid__progress {
max-width: 200px;
margin-top: -12px;
}
}
/* =========================================================
* SECTION: RÀO CẢN – "Từ băn khoăn đến an tâm"
* Desktop: cột trái 5 nỗi lo (nút) | cột phải thẻ giải đáp lớn (đổi theo nút).
* Mobile: accordion – giải đáp mở ngay dưới nỗi lo (1 mục mở 1 lúc).
* Nỗi lo đã xem → dấu ? thành ✓ gradient, chữ dịu lại.
* Thanh "Đã giải đáp x/5" chạy dần; đủ 5 → .is-complete: CTA + thanh sáng rực.
* Biến chỉnh nhanh (trên .pttm-worry):
* --pttm-worry-w độ rộng container
* --pttm-worry-cols tỉ lệ cột nỗi lo | cột giải đáp
* --pttm-worry-gap khoảng cách 2 cột
* --pttm-worry-q-size cỡ chữ câu hỏi
* ========================================================= */
.pttm-worry {
--pttm-worry-w: 1300px;
--pttm-worry-cols: minmax(0, 0.85fr) minmax(0, 1.15fr);
--pttm-worry-gap: 48px;
--pttm-worry-q-size: 24px;
position: relative;
width: 100%;
padding: 24px 24px 64px;
}
.pttm-worry__inner {
position: relative;
z-index: 1;
max-width: var(--pttm-worry-w);
margin: 0 auto;
}
.pttm-worry .pttm-heading {
margin-bottom: 16px;
}
.pttm-worry .pttm-heading__line {
flex-wrap: wrap;
row-gap: 0;
}
.pttm-worry .pttm-heading__sub,
.pttm-worry .pttm-heading__keyword {
white-space: nowrap;
}
.pttm-worry .pttm-heading__tail {
margin-top: 6px;
}
#pttm-landing .pttm-worry__hint {
margin: 0 0 40px;
padding: 0;
color: var(--pttm-violet);
font-family: var(--pttm-font-sans);
font-size: 19px;
line-height: 1.3;
text-align: center;
}
/* ----- Bảng: nút cột trái, thẻ giải đáp chồng nhau ở cột phải ----- */
.pttm-worry__board {
display: grid;
grid-template-columns: var(--pttm-worry-cols);
grid-auto-rows: auto;
column-gap: var(--pttm-worry-gap);
row-gap: 14px;
align-items: stretch;
}
/* ----- Nút nỗi lo ----- */
#pttm-landing .pttm-worry__q {
position: relative;
grid-column: 1;
grid-row: var(--row);
display: flex;
align-items: center;
gap: 18px;
width: 100%;
min-height: 0;
margin: 0;
padding: 20px 24px;
border: 0.6px solid #fff;
border-radius: 22px;
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 8px 20px rgba(113, 13, 172, 0.08);
color: var(--pttm-deep);
font: inherit;
letter-spacing: 0;
line-height: 1.3;
text-align: left;
text-transform: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease,
box-shadow 0.35s ease;
}
.pttm-worry__q::before {
position: absolute;
inset: 0;
padding: 2px;
content: "";
border-radius: inherit;
background: var(--pttm-grad-title-1);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
#pttm-landing .pttm-worry__q:hover {
background-color: rgba(255, 255, 255, 0.62);
}
#pttm-landing .pttm-worry__q:focus-visible {
outline: 3px solid var(--pttm-violet);
outline-offset: 3px;
}
#pttm-landing .pttm-worry__q.is-active {
translate: 12px 0;
background-color: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 16px 34px rgba(150, 21, 210, 0.22);
}
.pttm-worry__q.is-active::before {
opacity: 1;
}
/* Trạng thái: ? → ✓ */
.pttm-worry__status {
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1.5px dashed #b88be6;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
color: var(--pttm-violet);
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.pttm-worry__status-q {
font-family: var(--pttm-font-serif);
font-size: 24px;
font-style: italic;
line-height: 1;
transition: opacity 0.25s ease, scale 0.25s ease;
}
.pttm-worry__status-ok {
position: absolute;
opacity: 0;
scale: 0.3;
transition: opacity 0.3s ease, scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pttm-worry__q.is-done .pttm-worry__status {
border: 1.5px solid #fff;
background: var(--pttm-grad-title-1);
box-shadow: 0 4px 10px rgba(150, 21, 210, 0.3);
color: #fff;
}
.pttm-worry__q.is-done .pttm-worry__status-q {
opacity: 0;
scale: 0.3;
}
.pttm-worry__q.is-done .pttm-worry__status-ok {
opacity: 1;
scale: 1;
}
/* Câu hỏi (đã xem nhưng không active → chữ dịu lại, không gạch) */
.pttm-worry__q-text {
position: relative;
flex: 1 1 auto;
font-family: var(--pttm-font-sans);
font-size: var(--pttm-worry-q-size);
font-weight: 500;
line-height: 1.25;
transition: color 0.35s ease;
}
.pttm-worry__q.is-done:not(.is-active) .pttm-worry__q-text {
color: rgba(69, 17, 128, 0.62);
}
/* Mũi tên chỉ sang thẻ giải đáp */
.pttm-worry__chev {
flex: 0 0 auto;
width: 12px;
height: 12px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
color: var(--pttm-violet);
rotate: 45deg;
opacity: 0.45;
transition: opacity 0.3s ease, translate 0.3s ease, rotate 0.35s ease;
}
.pttm-worry__q.is-active .pttm-worry__chev {
opacity: 1;
translate: 4px 0;
}
/* ----- Thẻ giải đáp (desktop: chồng nhau ở cột phải) ----- */
.pttm-worry__a {
grid-column: 2;
grid-row: 1 / span var(--n, 5);
display: grid;
grid-template-rows: 1fr;
min-width: 0;
visibility: hidden;
opacity: 0;
translate: 24px 0;
/* thẻ cũ tắt nhanh, thẻ mới hiện sau → không chồng chữ khi rê chuột nhanh */
transition: opacity 0.18s ease, translate 0.18s ease, visibility 0s linear 0.18s;
}
.pttm-worry__a.is-active {
visibility: visible;
opacity: 1;
translate: 0 0;
transition: opacity 0.4s ease 0.14s, translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s, visibility 0s;
}
.pttm-worry__a-inner {
display: flex;
flex-direction: column;
min-height: 0;
}
.pttm-worry__card {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 auto;
justify-content: center;
padding: 44px 52px;
overflow: hidden;
border: 0.6px solid #fff;
border-radius: var(--pttm-radius-card);
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 24px 56px rgba(113, 13, 172, 0.16);
}
.pttm-worry__card::before {
position: absolute;
inset: 0;
padding: 2px;
content: "";
border-radius: inherit;
background: var(--pttm-grad-title-1);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* Dấu ✓ lớn chìm ở góc thẻ */
.pttm-worry__card::after {
position: absolute;
right: -30px;
bottom: -40px;
width: 240px;
height: 240px;
content: "";
background: var(--pttm-grad-title-1);
-webkit-mask: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
opacity: 0.08;
pointer-events: none;
}
.pttm-worry__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
margin-bottom: 20px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--pttm-grad-title-1);
box-shadow: 0 12px 26px rgba(150, 21, 210, 0.35);
color: #fff;
}
.pttm-worry__a.is-active .pttm-worry__icon {
animation: pttm-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
#pttm-landing .pttm-worry__ask {
margin: 0 0 6px;
padding: 0;
color: var(--pttm-violet);
font-family: var(--pttm-font-sans);
font-size: 17px;
font-style: italic;
line-height: 1.3;
}
#pttm-landing .pttm-worry__title {
margin: -0.24em 0 12px;
padding: 0.24em 0.06em 0.1em 0;
font-family: var(--pttm-font-serif);
font-size: 44px;
font-style: italic;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0;
text-transform: none;
text-wrap: balance;
}
#pttm-landing .pttm-worry__text {
position: relative;
z-index: 1;
max-width: 560px;
line-height: 1.45;
}
/* ----- Đáy: lời cam kết + thanh giải đáp + CTA ----- */
.pttm-worry__bottom {
max-width: 1100px;
margin: 36px auto 0;
padding: 30px 40px;
border: 0.6px solid #fff;
border-radius: var(--pttm-radius-card);
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 14px 34px rgba(113, 13, 172, 0.1);
}
#pttm-landing .pttm-worry__promise {
margin: 0 0 22px;
padding: 0 0 20px;
border-bottom: 1px solid rgba(150, 21, 210, 0.18);
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 22px;
font-weight: 500;
line-height: 1.4;
text-align: center;
text-wrap: balance;
}
.pttm-worry__action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.pttm-worry__meter {
flex: 1 1 auto;
min-width: 0;
}
#pttm-landing .pttm-worry__meter-label {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
margin: 0 0 10px;
padding: 0;
color: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: 18px;
line-height: 1.35;
}
.pttm-worry__meter-count {
color: var(--pttm-violet);
font-weight: 500;
white-space: nowrap;
}
.pttm-worry__meter-bar {
display: flex;
gap: 6px;
max-width: 420px;
}
.pttm-worry__seg {
flex: 1 1 0;
height: 8px;
border-radius: var(--pttm-radius-pill);
background: #e6dbf5;
overflow: hidden;
position: relative;
}
.pttm-worry__seg::after {
position: absolute;
inset: 0;
content: "";
border-radius: inherit;
background: var(--pttm-grad-cta);
background-size: 200% 100%;
transform-origin: left center;
scale: 0 1;
transition: scale 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pttm-worry__seg.is-on::after {
scale: 1 1;
}
.pttm-worry__cta {
--pttm-btn-w: 300px;
flex: 0 0 auto;
}
/* Đủ 5/5 → thanh chạy sáng + CTA nổi bật */
.pttm-worry.is-complete .pttm-worry__seg::after {
animation: pttm-worry-flow 2.4s linear infinite;
}
.pttm-worry.is-complete .pttm-worry__meter-label {
color: var(--pttm-deep);
font-weight: 500;
}
.pttm-worry.is-complete .pttm-worry__cta {
scale: 1.06;
box-shadow: var(--pttm-cta-shadow), 0 0 0 6px rgba(224, 102, 138, 0.18), 0 0 34px rgba(164, 92, 242, 0.55);
transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pttm-worry-flow {
0% { background-position: 0 0; }
100% { background-position: 200% 0; }
}
/* ----- Laptop / tablet ----- */
@media (max-width: 1199px) {
.pttm-worry {
--pttm-worry-gap: 28px;
--pttm-worry-q-size: 20px;
}
#pttm-landing .pttm-worry__q {
gap: 14px;
padding: 16px 18px;
}
#pttm-landing .pttm-worry__q.is-active {
translate: 8px 0;
}
.pttm-worry__card {
padding: 34px 36px;
}
#pttm-landing .pttm-worry__title {
font-size: 36px;
}
#pttm-landing .pttm-worry__text {
font-size: 17px;
}
.pttm-worry__action {
gap: 20px;
}
.pttm-worry__cta {
--pttm-btn-w: 260px;
}
}
/* ----- Mobile: accordion ----- */
@media (max-width: 768px) {
.pttm-worry {
--pttm-worry-q-size: 17px;
padding: 16px 16px 40px;
}
.pttm-worry__inner {
max-width: 420px;
}
#pttm-landing .pttm-worry__hint {
margin-bottom: 22px;
font-size: 15px;
}
.pttm-worry__board {
grid-template-columns: minmax(0, 1fr);
row-gap: 0;
}
#pttm-landing .pttm-worry__q {
grid-column: 1;
grid-row: auto;
gap: 12px;
margin-top: 10px;
padding: 14px 16px;
border-radius: 18px;
}
#pttm-landing .pttm-worry__q.is-active {
translate: none;
}
.pttm-worry__status {
width: 32px;
height: 32px;
}
.pttm-worry__status-q {
font-size: 19px;
}
.pttm-worry__status-ok {
width: 15px;
height: 15px;
}
.pttm-worry__chev {
width: 10px;
height: 10px;
rotate: 135deg;
translate: 0 -3px;
}
.pttm-worry__q.is-active .pttm-worry__chev {
rotate: -45deg;
translate: 0 3px;
}
/* Thẻ giải đáp mở ngay dưới câu hỏi */
.pttm-worry__a,
.pttm-worry__a.is-active {
grid-column: 1;
grid-row: auto;
grid-template-rows: 0fr;
visibility: visible;
opacity: 1;
translate: none;
transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pttm-worry__a.is-active {
grid-template-rows: 1fr;
}
.pttm-worry__a-inner {
overflow: hidden;
padding: 0 2px; /* chừa chỗ bóng 2 bên */
}
/* Bóng nhỏ + chừa đáy → không bị vùng thu gọn cắt thành vệt cứng */
.pttm-worry__card {
margin: 8px 0 14px;
padding: 22px 18px 24px;
border-radius: 20px;
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 6px 12px rgba(113, 13, 172, 0.12);
}
.pttm-worry__card::after {
right: -20px;
bottom: -26px;
width: 140px;
height: 140px;
}
.pttm-worry__icon {
width: 54px;
height: 54px;
margin-bottom: 12px;
}
.pttm-worry__icon svg {
width: 26px;
height: 26px;
}
#pttm-landing .pttm-worry__ask {
display: none; /* câu hỏi đã nằm ngay trên thẻ */
}
#pttm-landing .pttm-worry__title {
margin-bottom: 8px;
font-size: 28px;
}
#pttm-landing .pttm-worry__text {
font-size: var(--pttm-text-size);
line-height: 1.4;
}
.pttm-worry__bottom {
margin-top: 28px;
padding: 22px 18px 24px;
border-radius: 24px;
}
#pttm-landing .pttm-worry__promise {
margin-bottom: 16px;
padding-bottom: 16px;
font-size: 17px;
}
.pttm-worry__action {
flex-direction: column;
align-items: stretch;
gap: 18px;
}
#pttm-landing .pttm-worry__meter-label {
justify-content: center;
font-size: 15px;
text-align: center;
}
.pttm-worry__meter-bar {
max-width: none;
}
.pttm-worry__cta {
--pttm-btn-w: 250px;
align-self: center;
max-width: 100%;
}
.pttm-worry.is-complete .pttm-worry__cta {
scale: 1; /* mobile: chỉ phát sáng, không phóng to (tránh tràn khung) */
}
}
/* =========================================================
* SECTION: ĐỘI NGŨ BÁC SĨ
* Tiêu đề kiểu trang chủ tổng hợp (keyword + pill cùng dòng, tail dưới).
* Tất cả bác sĩ gói trong 1 khung kính: tab chọn bác sĩ (avatar tròn + tên + chức danh)
* → hồ sơ chuyển mượt: ảnh trượt vào từ trái, nội dung trồi lên lệch nhịp.
* Hồ sơ: ảnh chân dung tách nền (không nền trang trí) | chức danh, tên serif gradient,
* 2 thẻ số liệu ngay dưới tên, lưới thẻ thông tin, CTA. Mobile: xếp dọc, vuốt ngang đổi bác sĩ.
* Biến chỉnh nhanh (trên .pttm-doc):
* --pttm-doc-w độ rộng container
* --pttm-doc-cols tỉ lệ cột ảnh | cột hồ sơ
* --pttm-doc-gap khoảng cách 2 cột
* --pttm-doc-name cỡ tên bác sĩ
* --pttm-doc-photo độ rộng tối đa ảnh bác sĩ
* ========================================================= */
.pttm-doc {
--pttm-doc-w: 1434px;
--pttm-doc-cols: minmax(0, 0.9fr) minmax(0, 1.1fr);
--pttm-doc-gap: 48px;
--pttm-doc-name: 64px;
--pttm-doc-photo: 580px;
position: relative;
width: 100%;
padding: 24px 24px 64px;
}
.pttm-doc__inner {
position: relative;
z-index: 1;
max-width: var(--pttm-doc-w);
margin: 0 auto;
}
/* ----- Tiêu đề (style trang chủ tổng hợp) ----- */
.pttm-doc__title-line {
align-items: center;
gap: 18px;
}
.pttm-doc__title-line .pttm-pill-title {
margin-top: 10px;
}
.pttm-doc__heading {
margin-bottom: 32px;
}
.pttm-doc__heading .pttm-heading__tail {
margin-top: 0;
}
/* ----- Khung chung ----- */
.pttm-doc__box {
padding: 28px 56px 48px;
border: 0.6px solid #fff;
border-radius: 40px;
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 24px 60px rgba(113, 13, 172, 0.1);
}
/* ----- Tab chọn bác sĩ ----- */
.pttm-doc__tabs {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: 20px;
}
#pttm-landing .pttm-doc__tab {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
min-height: 0;
margin: 0;
padding: 6px 26px 6px 6px;
border: 1px solid #fff;
border-radius: var(--pttm-radius-pill);
background: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 8px 2px #fff inset, 0 8px 18px rgba(113, 13, 172, 0.1);
color: var(--pttm-deep);
font: inherit;
letter-spacing: 0;
line-height: 1.2;
text-align: left;
text-transform: none;
cursor: pointer;
transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, translate 0.3s ease;
}
#pttm-landing .pttm-doc__tab:hover {
translate: 0 -2px;
}
#pttm-landing .pttm-doc__tab:focus-visible {
outline: 3px solid var(--pttm-violet);
outline-offset: 3px;
}
#pttm-landing .pttm-doc__tab.is-active {
border-color: rgba(255, 255, 255, 0.9);
background: var(--pttm-grad-title-1);
box-shadow: 0 10px 24px rgba(150, 21, 210, 0.32);
color: #fff;
}
.pttm-doc__avatar {
flex: 0 0 auto;
width: 52px;
height: 52px;
overflow: hidden;
border: 2px solid #fff;
border-radius: 50%;
background: linear-gradient(180deg, #e7cff8 0%, #f8d9e6 100%);
}
#pttm-landing .pttm-doc__avatar img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.pttm-doc__tab-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pttm-doc__tab-name {
font-family: var(--pttm-font-sans);
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.pttm-doc__tab-role {
font-family: var(--pttm-font-sans);
font-size: 13.5px;
opacity: 0.8;
white-space: nowrap;
}
/* ----- Sân khấu hồ sơ: các hồ sơ chồng cùng 1 ô → khung không nhảy chiều cao ----- */
.pttm-doc__stage {
display: grid;
touch-action: pan-y;
}
/* [hidden] chỉ có tác dụng khi chưa có JS; có JS thì điều khiển bằng .is-active */
#pttm-landing.is-js .pttm-doc__profile[hidden] {
display: grid;
}
.pttm-doc__profile {
display: grid;
grid-area: 1 / 1;
grid-template-areas: "visual body";
grid-template-columns: var(--pttm-doc-cols);
align-items: center;
column-gap: var(--pttm-doc-gap);
min-width: 0;
}
#pttm-landing.is-js .pttm-doc__profile:not(.is-active):not(.is-leaving) {
visibility: hidden;
pointer-events: none;
}
#pttm-landing.is-js .pttm-doc__profile.is-leaving {
pointer-events: none;
}
.pttm-doc__visual { grid-area: visual; }
.pttm-doc__body { grid-area: body; min-width: 0; }
/* Hiệu ứng vào: ảnh trượt từ trái, nội dung trồi lên lệch nhịp */
.pttm-doc__profile.is-entering .pttm-doc__visual {
animation: pttm-doc-photo-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.pttm-doc__profile.is-entering .pttm-doc__role,
.pttm-doc__profile.is-entering .pttm-doc__name,
.pttm-doc__profile.is-entering .pttm-doc__stat,
.pttm-doc__profile.is-entering .pttm-doc__group,
.pttm-doc__profile.is-entering .pttm-doc__cta {
animation: pttm-doc-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.pttm-doc__profile.is-entering .pttm-doc__name { animation-delay: 0.06s; }
.pttm-doc__profile.is-entering .pttm-doc__stat { animation-delay: 0.12s; }
.pttm-doc__profile.is-entering .pttm-doc__stat + .pttm-doc__stat { animation-delay: 0.18s; }
.pttm-doc__profile.is-entering .pttm-doc__group { animation-delay: calc(0.22s + var(--i, 0) * 0.07s); }
.pttm-doc__profile.is-entering .pttm-doc__cta { animation-delay: 0.45s; }
.pttm-doc__profile.is-leaving {
animation: pttm-doc-out 0.3s ease both;
}
@keyframes pttm-doc-photo-in {
from { opacity: 0; translate: -60px 0; scale: 0.96; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes pttm-doc-rise {
from { opacity: 0; translate: 0 22px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes pttm-doc-out {
from { opacity: 1; }
to { opacity: 0; }
}
/* ----- Ảnh bác sĩ: chỉ ảnh, không nền trang trí ----- */
.pttm-doc__visual {
position: relative;
width: 100%;
max-width: var(--pttm-doc-photo);
margin: 0 auto;
align-self: end;
}
#pttm-landing .pttm-doc__photo {
display: block;
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
filter: drop-shadow(0 18px 24px rgba(69, 17, 128, 0.18));
}
/* ----- Hồ sơ ----- */
#pttm-landing .pttm-doc__role {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 4px;
padding: 0;
color: var(--pttm-violet);
font-family: var(--pttm-font-sans);
font-size: 19px;
font-weight: 500;
line-height: 1.3;
}
#pttm-landing .pttm-doc__role::before {
width: 28px;
height: 2px;
content: "";
border-radius: 2px;
background: var(--pttm-grad-title-1);
}
#pttm-landing .pttm-doc__name {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 14px;
margin: 0 0 16px;
padding: 0;
letter-spacing: 0;
text-transform: none;
}
.pttm-doc__prefix {
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: calc(var(--pttm-doc-name) * 0.44);
font-weight: 500;
line-height: 1;
}
.pttm-doc__fullname {
margin: -0.22em 0 -0.1em;
padding: 0.22em 0.08em 0.1em 0;
font-family: var(--pttm-font-serif);
font-size: var(--pttm-doc-name);
font-style: italic;
font-weight: 400;
line-height: 1.05;
}
/* ----- Thẻ số liệu dưới tên (thay pill học vị) ----- */
#pttm-landing .pttm-doc__stats {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 22px;
padding: 0;
list-style: none;
}
#pttm-landing .pttm-doc__stat {
position: relative;
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 10px 20px 10px 16px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.75);
box-shadow: 0 0 10px 3px #fff inset, 0 10px 22px rgba(113, 13, 172, 0.12);
list-style: none;
}
/* Viền gradient mảnh */
#pttm-landing .pttm-doc__stat::before {
position: absolute;
inset: 0;
padding: 1.5px;
content: "";
border-radius: inherit;
background: var(--pttm-grad-title-1);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.55;
pointer-events: none;
}
.pttm-doc__stat-num {
margin: -0.2em 0 -0.06em;
padding: 0.2em 0.06em 0.06em 0;
font-family: var(--pttm-font-serif);
font-size: 42px;
font-style: italic;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
.pttm-doc__stat-label {
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 14.5px;
font-weight: 500;
line-height: 1.25;
}
/* ----- Lưới thẻ thông tin ----- */
.pttm-doc__groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: row dense;
gap: 14px;
}
.pttm-doc__group {
padding: 18px 20px 20px;
border: 0.6px solid #fff;
border-radius: 22px;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 8px 20px rgba(113, 13, 172, 0.08);
transition: translate 0.35s ease, box-shadow 0.35s ease;
}
.pttm-doc__group:hover {
translate: 0 -4px;
box-shadow: 0 0 11.76px 4.8px #fff inset, 0 16px 30px rgba(113, 13, 172, 0.16);
}
.pttm-doc__group--tall {
display: flex;
flex-direction: column;
grid-row: span 2;
}
/* Thẻ cao: timeline sát tiêu đề, giãn khoảng cách vừa phải */
#pttm-landing .pttm-doc__group--tall .pttm-doc__timeline {
--pttm-doc-tl-gap: 30px;
margin-top: 10px;
}
#pttm-landing .pttm-doc__group-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
padding: 0;
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 18px;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
}
.pttm-doc__group-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1.5px solid #fff;
border-radius: 50%;
background: var(--pttm-grad-title-1);
box-shadow: 0 6px 14px rgba(150, 21, 210, 0.28);
color: #fff;
}
/* Danh sách */
#pttm-landing .pttm-doc__bullets {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
#pttm-landing .pttm-doc__bullets li {
position: relative;
margin: 0;
padding: 0 0 0 18px;
color: var(--pttm-text-color);
font-family: var(--pttm-font-sans);
font-size: 16.5px;
line-height: 1.4;
list-style: none;
}
#pttm-landing .pttm-doc__bullets li::before {
position: absolute;
top: 0.55em;
left: 0;
width: 8px;
height: 8px;
content: "";
border-radius: 50%;
background: var(--pttm-grad-title-1);
}
/* Timeline đào tạo – đoạn nối vẽ theo từng bước (luôn khớp chấm đầu → chấm cuối) */
#pttm-landing .pttm-doc__timeline {
--pttm-doc-tl-gap: 22px;
display: grid;
gap: var(--pttm-doc-tl-gap);
margin: 6px 0 0;
padding: 0 0 0 26px;
list-style: none;
}
#pttm-landing .pttm-doc__step {
position: relative;
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
#pttm-landing .pttm-doc__step:not(:last-child)::after {
position: absolute;
top: 20px;
bottom: calc(-1 * var(--pttm-doc-tl-gap) + 4px);
left: -19px;
width: 2px;
content: "";
border-radius: 2px;
background: linear-gradient(180deg, #de4c33 0%, #9615d2 100%);
opacity: 0.45;
}
#pttm-landing .pttm-doc__step::before {
position: absolute;
top: 4px;
left: -26px;
width: 16px;
height: 16px;
content: "";
box-sizing: border-box;
border: 3px solid #fff;
border-radius: 50%;
background: var(--pttm-grad-title-1);
box-shadow: 0 2px 6px rgba(150, 21, 210, 0.35);
}
.pttm-doc__step-label {
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 17px;
font-weight: 500;
line-height: 1.3;
}
.pttm-doc__step-text {
color: var(--pttm-text-color);
font-family: var(--pttm-font-sans);
font-size: 16px;
line-height: 1.35;
}
.pttm-doc__cta {
margin-top: 26px;
}
.pttm-doc__cta .pttm-btn {
--pttm-btn-w: 290px;
}
/* ----- Laptop / tablet ----- */
@media (max-width: 1199px) {
.pttm-doc {
--pttm-doc-gap: 28px;
--pttm-doc-name: 50px;
}
.pttm-doc__box {
padding: 24px 28px 36px;
border-radius: 34px;
}
.pttm-doc__groups {
grid-template-columns: minmax(0, 1fr);
}
.pttm-doc__group--tall {
grid-row: auto;
}
#pttm-landing .pttm-doc__group--tall .pttm-doc__timeline {
--pttm-doc-tl-gap: 20px;
}
.pttm-doc__stat-num {
font-size: 34px;
}
.pttm-doc__stat-label {
font-size: 13px;
}
}
/* ----- Mobile: xếp dọc ----- */
@media (max-width: 768px) {
.pttm-doc {
--pttm-doc-name: 42px;
--pttm-doc-photo: 330px;
padding: 16px 16px 40px;
}
.pttm-doc__inner {
max-width: 420px;
}
.pttm-doc__title-line {
flex-direction: column;
gap: 0;
}
.pttm-doc__title-line .pttm-pill-title {
margin-top: 6px;
}
.pttm-doc__heading {
margin-bottom: 22px;
}
.pttm-doc__heading .pttm-heading__tail {
margin-top: 8px;
}
.pttm-doc__box {
padding: 14px 12px 26px;
border-radius: 28px;
}
/* 2 tab chia đôi, ẩn chức danh cho gọn */
.pttm-doc__tabs {
gap: 8px;
margin-bottom: 14px;
}
#pttm-landing .pttm-doc__tab {
flex: 1 1 0;
gap: 8px;
padding: 4px 10px 4px 4px;
}
#pttm-landing .pttm-doc__tab:hover {
translate: none;
}
.pttm-doc__avatar {
width: 38px;
height: 38px;
}
.pttm-doc__tab-name {
font-size: 14px;
white-space: normal;
}
.pttm-doc__tab-role {
display: none;
}
.pttm-doc__profile {
grid-template-areas:
"visual"
"body";
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.pttm-doc__visual {
margin-bottom: 14px;
}
.pttm-doc__profile.is-entering .pttm-doc__visual {
animation-name: pttm-doc-photo-in-m;
}
@keyframes pttm-doc-photo-in-m {
from { opacity: 0; translate: 0 24px; scale: 0.96; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
.pttm-doc__body {
text-align: center;
}
#pttm-landing .pttm-doc__role {
font-size: 16px;
}
#pttm-landing .pttm-doc__role::before {
display: none;
}
#pttm-landing .pttm-doc__name {
justify-content: center;
margin-bottom: 12px;
}
#pttm-landing .pttm-doc__stats {
justify-content: center;
gap: 8px;
margin-bottom: 16px;
}
#pttm-landing .pttm-doc__stat {
flex: 1 1 0;
gap: 8px;
padding: 8px 10px;
border-radius: 16px;
text-align: left;
}
.pttm-doc__stat-num {
font-size: 28px;
}
.pttm-doc__stat-label {
font-size: 11.5px;
}
.pttm-doc__groups {
gap: 10px;
text-align: left;
}
.pttm-doc__group {
padding: 16px 16px 18px;
border-radius: 18px;
}
.pttm-doc__group:hover {
translate: none;
}
#pttm-landing .pttm-doc__group-title {
font-size: 16.5px;
}
.pttm-doc__group-icon {
width: 34px;
height: 34px;
}
.pttm-doc__group-icon svg {
width: 18px;
height: 18px;
}
#pttm-landing .pttm-doc__bullets li,
.pttm-doc__step-text {
font-size: 15px;
}
.pttm-doc__step-label {
font-size: 15.5px;
}
.pttm-doc__cta {
margin-top: 22px;
}
.pttm-doc__cta .pttm-btn {
--pttm-btn-w: 250px;
}
}
/* =========================================================
* SECTION: ƯU ĐIỂM PHÒNG KHÁM – Bento mosaic
* Desktop (4 cột x 2 hàng): a b b c
* a d e e
* Mỗi ô: ảnh phủ kín (hiện dần kiểu "vén màn" khi cuộn tới), nhãn gradient góc trên,
* câu ưu điểm trên khung kính đáy ô kèm dấu ✓. Hover: ảnh zoom, khung kính nhấc lên.
* Con dấu chữ xoay (Linh Anh • Trọn niềm tin) nhô ra ở góc phải trên của lưới.
* Tablet: a b b / a c d / e e e | Mobile: a a / b b / c d / e e
* Biến chỉnh nhanh (trên .pttm-trust):
* --pttm-trust-w độ rộng container
* --pttm-trust-gap khoảng cách ô
* --pttm-trust-row chiều cao 1 hàng (desktop / tablet)
* --pttm-trust-seal kích thước con dấu
* ========================================================= */
.pttm-trust {
--pttm-trust-w: 1434px;
--pttm-trust-gap: 20px;
--pttm-trust-row: 320px;
--pttm-trust-seal: 150px;
position: relative;
width: 100%;
padding: 24px 24px 64px;
}
.pttm-trust__inner {
position: relative;
z-index: 1;
max-width: var(--pttm-trust-w);
margin: 0 auto;
}
.pttm-trust .pttm-heading {
margin-bottom: 40px;
}
.pttm-trust .pttm-heading__line {
flex-wrap: wrap;
row-gap: 0;
}
.pttm-trust .pttm-heading__sub,
.pttm-trust .pttm-heading__keyword {
white-space: nowrap;
}
/* ----- Lưới bento ----- */
.pttm-trust__board {
position: relative;
}
#pttm-landing .pttm-trust__grid {
display: grid;
grid-template-areas:
"a b b c"
"a d e e";
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, var(--pttm-trust-row));
gap: var(--pttm-trust-gap);
margin: 0;
padding: 0;
list-style: none;
}
/* ----- Ô ----- */
#pttm-landing .pttm-trust__tile {
position: relative;
min-width: 0;
margin: 0;
padding: 0;
border-radius: var(--pttm-radius-card);
box-shadow: 0 18px 44px rgba(69, 17, 128, 0.16);
list-style: none;
transition: box-shadow 0.4s ease;
}
.pttm-trust__tile::after {
position: absolute;
inset: 0;
z-index: 2;
padding: 2px;
content: "";
border-radius: inherit;
background: var(--pttm-grad-title-1);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
#pttm-landing .pttm-trust__tile:hover {
box-shadow: 0 26px 56px rgba(150, 21, 210, 0.28);
}
.pttm-trust__tile:hover::after {
opacity: 1;
}
/* Ảnh + lớp phủ đáy */
.pttm-trust__media {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
background: #ead9ff;
clip-path: inset(0 0 0 0 round var(--pttm-radius-card));
transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
transition-delay: calc(var(--i, 0) * 0.13s + 0.1s);
}
/* Có JS: ảnh "vén màn" từ dưới lên khi ô vào màn hình */
#pttm-landing.is-js .pttm-trust__tile:not(.is-in) .pttm-trust__media {
clip-path: inset(100% 0 0 0 round var(--pttm-radius-card));
}
.pttm-trust__media::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(180deg, rgba(69, 17, 128, 0) 45%, rgba(69, 17, 128, 0.38) 100%);
pointer-events: none;
}
#pttm-landing .pttm-trust__image {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: scale 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pttm-trust__tile:hover .pttm-trust__image {
scale: 1.07;
}
/* Nhãn góc trên */
.pttm-trust__tag {
position: absolute;
top: 18px;
left: 18px;
z-index: 1;
padding: 7px 16px;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: var(--pttm-radius-pill);
background: var(--pttm-grad-title-1);
box-shadow: 0 6px 16px rgba(150, 21, 210, 0.3);
color: #fff;
font-family: var(--pttm-font-sans);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
/* Khung kính đáy ô */
.pttm-trust__caption {
position: absolute;
right: 14px;
bottom: 14px;
left: 14px;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
border: 0.6px solid #fff;
border-radius: 20px;
background: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 0 10px 3px #fff inset, 0 10px 24px rgba(69, 17, 128, 0.18);
transition: translate 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pttm-trust__tile:hover .pttm-trust__caption {
translate: 0 -6px;
}
.pttm-trust__check {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-top: 1px;
border: 1.5px solid #fff;
border-radius: 50%;
background: var(--pttm-grad-title-1);
box-shadow: 0 4px 10px rgba(150, 21, 210, 0.3);
color: #fff;
}
#pttm-landing .pttm-trust__text {
margin: 0;
padding: 0;
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 19px;
font-weight: 500;
line-height: 1.35;
text-wrap: balance;
}
/* Ô dọc lớn: chữ to hơn */
#pttm-landing .pttm-trust__tile--a .pttm-trust__text {
font-size: 22px;
}
/* ----- Con dấu chữ xoay (góc phải trên lưới) ----- */
.pttm-trust__seal {
position: absolute;
top: 0;
right: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: var(--pttm-trust-seal);
height: var(--pttm-trust-seal);
border: 2px solid #fff;
border-radius: 50%;
background: radial-gradient(circle at 50% 40%, #fff 0%, #f4eeff 70%);
box-shadow: 0 16px 36px rgba(113, 13, 172, 0.28), 0 0 0 8px rgba(255, 255, 255, 0.35);
translate: 38% -38%;
pointer-events: none;
}
.pttm-trust__seal-ring {
position: absolute;
inset: 4px;
width: calc(100% - 8px);
height: calc(100% - 8px);
overflow: visible;
animation: pttm-trust-spin 22s linear infinite;
}
.pttm-trust__seal-ring text {
fill: var(--pttm-primary);
font-family: var(--pttm-font-sans);
font-size: 13.5px;
font-weight: 500;
}
#pttm-landing .pttm-trust__seal-star {
width: 38%;
height: auto;
filter: drop-shadow(0 4px 8px rgba(150, 21, 210, 0.35));
}
@keyframes pttm-trust-spin {
to { rotate: 360deg; }
}
/* ----- Laptop / tablet: 3 cột ----- */
@media (max-width: 1199px) {
.pttm-trust {
--pttm-trust-gap: 16px;
--pttm-trust-row: 270px;
--pttm-trust-seal: 120px;
}
#pttm-landing .pttm-trust__grid {
grid-template-areas:
"a b b"
"a c d"
"e e e";
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, var(--pttm-trust-row));
}
#pttm-landing .pttm-trust__text {
font-size: 17px;
}
#pttm-landing .pttm-trust__tile--a .pttm-trust__text {
font-size: 19px;
}
.pttm-trust__seal-ring text {
font-size: 14px;
}
}
/* ----- Mobile: a a / b b / c d / e e ----- */
@media (max-width: 768px) {
.pttm-trust {
--pttm-trust-gap: 10px;
padding: 16px 16px 40px;
}
.pttm-trust__inner {
max-width: 420px;
}
.pttm-trust .pttm-heading {
margin-bottom: 24px;
}
#pttm-landing .pttm-trust__grid {
grid-template-areas:
"a a"
"b b"
"c d"
"e e";
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 300px 230px 270px 230px;
}
#pttm-landing .pttm-trust__tile {
border-radius: 22px;
box-shadow: 0 10px 24px rgba(69, 17, 128, 0.14);
}
.pttm-trust__media {
clip-path: inset(0 0 0 0 round 22px);
}
#pttm-landing.is-js .pttm-trust__tile:not(.is-in) .pttm-trust__media {
clip-path: inset(100% 0 0 0 round 22px);
}
.pttm-trust__tile:hover .pttm-trust__image,
.pttm-trust__tile:hover .pttm-trust__caption {
scale: 1;
translate: none;
}
.pttm-trust__tag {
top: 10px;
left: 10px;
padding: 5px 11px;
font-size: 12.5px;
}
.pttm-trust__caption {
right: 8px;
bottom: 8px;
left: 8px;
gap: 8px;
padding: 10px 12px;
border-radius: 14px;
}
.pttm-trust__check {
width: 24px;
height: 24px;
}
.pttm-trust__check svg {
width: 13px;
height: 13px;
}
#pttm-landing .pttm-trust__text,
#pttm-landing .pttm-trust__tile--a .pttm-trust__text {
font-size: 15px;
line-height: 1.3;
}
/* Ô nhỏ (c, d): bỏ dấu ✓ cho đủ chỗ chữ */
.pttm-trust__tile--c .pttm-trust__check,
.pttm-trust__tile--d .pttm-trust__check {
display: none;
}
.pttm-trust {
--pttm-trust-seal: 86px;
}
.pttm-trust__seal {
translate: 14% -30%;
box-shadow: 0 10px 22px rgba(113, 13, 172, 0.25), 0 0 0 5px rgba(255, 255, 255, 0.35);
}
.pttm-trust__seal-ring text {
font-size: 15px;
}
}
/* =========================================================
* SECTION: BÁO CHÍ (clone LP phun xăm / phun mày – chỉ đổi prefix)
* Container 1565 | Cột trái: tiêu đề + mô tả | Cột phải: slider card 260 x 524
* ========================================================= */
.pttm-press {
position: relative;
z-index: 1;
width: 100%;
padding: 16px 24px 16px;
}
.pttm-press__inner {
display: grid;
grid-template-columns: minmax(0, 613px) minmax(0, 900px);
justify-content: center;
align-items: center;
gap: 60px;
max-width: 1565px;
margin: 0 auto;
}
.pttm-press__intro {
text-align: center;
}
.pttm-press__intro .pttm-heading {
margin-bottom: 18px;
}
#pttm-landing .pttm-press__desc {
max-width: 613px;
margin: 0 auto;
}
/* Slider báo chí: nút ‹ › 2 bên (desktop), dots (mobile) – dùng component .pttm-slider */
.pttm-press__slider {
--pttm-slider-gap: 25px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 18px;
}
.pttm-press__slider .pttm-slider__viewport {
padding: 14px 4px 22px; /* chừa chỗ cho bóng đổ card */
}
.pttm-press__slider .pttm-slider__dots {
grid-column: 1 / -1;
}
#pttm-landing .pttm-press__nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 56px;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
color: var(--pttm-primary);
cursor: pointer;
transition: transform 0.25s ease, color 0.25s ease;
}
#pttm-landing .pttm-press__nav--prev:hover {
color: var(--pttm-violet);
transform: translateX(-4px) scale(1.18);
}
#pttm-landing .pttm-press__nav--next:hover {
color: var(--pttm-violet);
transform: translateX(4px) scale(1.18);
}
#pttm-landing .pttm-press__nav:focus-visible {
outline: 3px solid var(--pttm-primary);
outline-offset: 2px;
}
.pttm-press__card {
width: 260px;
}
/* Ảnh báo đã cắt kèm viền bo tròn → không khung nền, chỉ đổ bóng theo dáng ảnh */
.pttm-press__link {
display: block;
filter: drop-shadow(0 8px 14px rgba(113, 13, 172, 0.14));
transition: transform 0.3s ease, filter 0.3s ease;
}
a.pttm-press__link:hover {
filter: drop-shadow(0 16px 24px rgba(113, 13, 172, 0.24));
transform: translateY(-8px);
}
#pttm-landing .pttm-press__image {
width: 100%;
height: auto;
}
/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1199px) {
.pttm-press__inner {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
max-width: 900px;
}
}
/* ----- Mobile: vuốt + dots, card crop phần đầu bài báo ----- */
@media (max-width: 768px) {
.pttm-press {
padding: 24px 16px 16px;
}
.pttm-press__inner {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
max-width: 420px;
}
#pttm-landing .pttm-press__desc {
text-align: left;
}
.pttm-press__slider {
--pttm-slider-gap: 18px;
grid-template-columns: minmax(0, 1fr);
}
#pttm-landing .pttm-press__nav {
display: none;
}
.pttm-press__slider .pttm-slider__viewport {
margin-right: -16px; /* card kế tiếp ló ra sát mép màn hình */
padding: 8px 16px 18px 2px;
}
.pttm-press__card {
width: 66%;
}
/* Mobile: hiện trọn ảnh báo (không crop) để giữ viền bo tròn đã cắt sẵn */
}
/* Mobile: pill "Phẫu thuật thẩm mỹ tại Linh Anh?" dài → cho xuống 2 dòng, không tràn mép */
@media (max-width: 768px) {
.pttm-press .pttm-pill-title {
max-width: 100%;
white-space: normal;
text-align: center;
}
}
/* =========================================================
* SECTION: GIẢI THƯỞNG & CHỨNG NHẬN – bục trưng bày
* Desktop: 4 giải 1 hàng, đáy ảnh chạm mặt bục; tiêu đề serif gradient phía trên.
* (dùng component slider: vừa khung → .is-static, ẩn nút/dots)
* Mobile: slider 1 giải / lượt, nút ‹ › 2 bên + dots; bục đứng yên, giải trượt qua.
* Không nền section (theo brief).
* Biến chỉnh nhanh (trên .pttm-awards):
* --pttm-awards-w độ rộng container
* --pttm-awards-gap khoảng cách giữa các giải
* --pttm-awards-sink độ "lún" của đáy ảnh xuống mặt bục
* --pttm-awards-podium-h chiều cao mặt elip của bục
* Độ rộng từng giải: 'display_w' trong data (biến --dw).
* ========================================================= */
.pttm-awards {
--pttm-awards-w: 1300px;
--pttm-awards-gap: 32px;
--pttm-awards-sink: 34px;
--pttm-awards-podium-h: 78px;
position: relative;
width: 100%;
padding: 24px 24px 64px;
}
.pttm-awards__inner {
max-width: var(--pttm-awards-w);
margin: 0 auto;
}
.pttm-awards .pttm-heading {
margin-bottom: 40px;
}
.pttm-awards .pttm-heading__line {
flex-wrap: wrap;
row-gap: 0;
}
.pttm-awards .pttm-heading__sub,
.pttm-awards .pttm-heading__keyword {
white-space: nowrap;
}
.pttm-awards .pttm-heading__tail {
margin-top: 4px;
}
.pttm-awards__slider {
--pttm-slider-gap: var(--pttm-awards-gap);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
}
.pttm-awards__stage {
position: relative;
min-width: 0;
}
/* Viewport: giải đứng đáy chung, nằm trên bục */
.pttm-awards__viewport {
position: relative;
z-index: 2;
align-items: stretch; /* các giải cao bằng nhau → tiêu đề thẳng hàng trên, ảnh chạm bục dưới */
padding: 10px 0 24px; /* chừa chỗ bóng đổ đáy ảnh */
margin-bottom: calc((var(--pttm-awards-sink) + 24px) * -1);
}
#pttm-landing .pttm-awards__item {
display: flex;
flex: 0 0 calc((100% - 3 * var(--pttm-awards-gap)) / 4);
flex-direction: column;
align-items: center;
justify-content: space-between;
min-width: 0;
margin: 0;
padding: 0;
text-align: center;
}
/* Desktop vừa khung (không cần cuộn) → bỏ cắt khung để bóng đổ đáy ảnh không bị vệt */
.pttm-awards__slider.is-static .pttm-awards__viewport {
overflow: visible;
}
/* Giải không có tiêu đề: ảnh vẫn đứng sát bục */
#pttm-landing .pttm-awards__item > .pttm-awards__image:only-child {
margin-top: auto;
}
.pttm-awards__caption {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 26px;
}
.pttm-awards__title {
margin: -0.2em 0 -0.06em;
padding: 0.2em 0.08em 0.06em;
font-family: var(--pttm-font-serif);
font-size: 30px;
font-style: italic;
font-weight: 400;
line-height: 1.12;
text-wrap: balance;
}
.pttm-awards__note {
color: var(--pttm-deep);
font-family: var(--pttm-font-sans);
font-size: 15px;
line-height: 1.35;
}
#pttm-landing .pttm-awards__image {
width: min(100%, calc(var(--dw, 220) * 1px));
height: auto;
filter: drop-shadow(0 12px 12px rgba(69, 17, 128, 0.2));
transition: translate 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.45s ease;
-webkit-user-drag: none;
}
.pttm-awards__item:hover .pttm-awards__image {
translate: 0 -10px;
filter: drop-shadow(0 28px 22px rgba(69, 17, 128, 0.28));
}
/* ----- Bục trưng bày (hình trụ dẹt) ----- */
.pttm-awards__podium {
position: relative;
z-index: 1;
height: calc(var(--pttm-awards-podium-h) + 44px);
margin: 0 -2%;
pointer-events: none;
}
.pttm-awards__podium-side {
position: absolute;
top: calc(var(--pttm-awards-podium-h) / 2);
right: 0;
left: 0;
height: 44px;
border-radius: 0 0 50% 50% / 0 0 calc(var(--pttm-awards-podium-h) / 2) calc(var(--pttm-awards-podium-h) / 2);
background: linear-gradient(90deg, #e2d6f0 0%, #fbf9ff 22%, #fff 50%, #fbf9ff 78%, #e2d6f0 100%);
box-shadow: 0 30px 50px rgba(113, 13, 172, 0.16), 0 10px 18px rgba(113, 13, 172, 0.1);
}
.pttm-awards__podium-top {
position: absolute;
top: 0;
right: 0;
left: 0;
height: var(--pttm-awards-podium-h);
border: 1px solid #fff;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 35%, #fff 0%, #f8f4fd 55%, #ece3f6 100%);
box-shadow: 0 0 24px 6px rgba(255, 255, 255, 0.9) inset;
}
/* ----- Nút ‹ › (chỉ khi tràn – mobile) ----- */
#pttm-landing .pttm-awards__nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 56px;
min-height: 0;
margin: 0 0 var(--pttm-awards-podium-h);
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
color: var(--pttm-primary);
cursor: pointer;
transition: scale 0.25s ease, color 0.25s ease;
}
#pttm-landing .pttm-awards__nav:hover {
color: var(--pttm-violet);
scale: 1.18;
}
#pttm-landing .pttm-awards__nav:focus-visible {
outline: 3px solid var(--pttm-primary);
outline-offset: 2px;
}
#pttm-landing .pttm-slider.is-static .pttm-awards__nav {
visibility: hidden; /* giữ chỗ cột để bục không lệch */
}
.pttm-awards__slider .pttm-slider__dots {
grid-column: 1 / -1;
margin-top: 18px;
}
/* ----- Laptop / tablet ----- */
@media (max-width: 1199px) {
.pttm-awards {
--pttm-awards-gap: 20px;
--pttm-awards-podium-h: 64px;
}
.pttm-awards__title {
font-size: 23px;
}
.pttm-awards__note {
font-size: 13px;
}
.pttm-awards__caption {
margin-bottom: 18px;
}
}
/* ----- Mobile: 1 giải / lượt ----- */
@media (max-width: 768px) {
.pttm-awards {
--pttm-awards-gap: 16px;
--pttm-awards-sink: 26px;
--pttm-awards-podium-h: 54px;
padding: 16px 12px 40px;
}
.pttm-awards__inner {
max-width: 420px;
}
.pttm-awards .pttm-heading {
margin-bottom: 24px;
}
.pttm-awards .pttm-pill-title {
max-width: 100%;
white-space: normal;
text-align: center;
}
.pttm-awards__slider {
column-gap: 2px;
}
#pttm-landing .pttm-awards__item {
flex: 0 0 100%;
padding: 0 8px;
}
.pttm-awards__caption {
min-height: 0;
margin-bottom: 16px;
}
.pttm-awards__title {
font-size: 25px;
}
#pttm-landing .pttm-awards__image {
width: min(78%, calc(var(--dw, 220) * 0.9px));
}
.pttm-awards__item:hover .pttm-awards__image {
translate: none;
}
.pttm-awards__podium {
margin: 0 4%;
}
#pttm-landing .pttm-awards__nav {
width: 34px;
height: 48px;
}
}
/* =========================================================
* SECTION: CÂU HỎI THƯỜNG GẶP (accordion – clone LP phun xăm / phun mày, chỉ đổi prefix)
* Header dùng Gradient tím 2 (#AC59FF → #F74289), chữ trắng.
* Mở/đóng mượt bằng grid-template-rows 0fr → 1fr.
* ========================================================= */
.pttm-faq {
position: relative;
z-index: 1;
width: 100%;
padding: 32px 24px 72px;
background: var(--pttm-bg);
}
.pttm-faq__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 896px);
align-items: start;
gap: 60px;
max-width: 1440px;
margin: 0 auto;
}
/* Tiêu đề dính theo khi đọc câu trả lời dài */
.pttm-faq__aside {
position: sticky;
top: 120px;
padding-top: 6px;
}
.pttm-faq__heading {
margin-bottom: 0;
}
/* ----- Item ----- */
.pttm-faq__list {
display: flex;
flex-direction: column;
gap: 27px;
}
.pttm-faq__item {
position: relative;
}
#pttm-landing .pttm-faq__question {
position: relative;
z-index: 2;
margin: 0;
font-size: inherit;
}
#pttm-landing .pttm-faq__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
min-height: 62px;
margin: 0;
padding: 12px 30px;
border: 0;
border-radius: var(--pttm-radius-tab);
background: var(--pttm-grad-title-2);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
color: #fff;
font-family: var(--pttm-font-sans);
font-size: 19px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0;
text-align: left;
text-shadow: none;
text-transform: none;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
#pttm-landing .pttm-faq__trigger:hover {
filter: brightness(1.06) saturate(1.1);
box-shadow: 0 8px 18px rgba(172, 89, 255, 0.35);
transform: translateY(-2px);
}
#pttm-landing .pttm-faq__trigger:focus-visible {
outline: 3px solid var(--pttm-primary);
outline-offset: 3px;
}
.pttm-faq__icon {
flex: 0 0 auto;
transition: transform 0.35s ease;
}
.pttm-faq__item.is-open .pttm-faq__icon {
transform: rotate(180deg);
}
/* ----- Panel ----- */
.pttm-faq__panel {
display: grid;
grid-template-rows: 1fr; /* không JS: luôn mở */
}
#pttm-landing.is-js .pttm-faq__panel {
grid-template-rows: 0fr;
transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
margin-top 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#pttm-landing.is-js .pttm-faq__item.is-open .pttm-faq__panel {
grid-template-rows: 1fr;
}
/* Khi mở: khung trắng luồn dưới header 18px (bo góc header đè lên khung) */
#pttm-landing .pttm-faq__item.is-open .pttm-faq__panel,
#pttm-landing:not(.is-js) .pttm-faq__panel {
margin-top: -18px;
}
.pttm-faq__panel-inner {
min-height: 0;
overflow: hidden;
}
/* Khung trắng trả lời */
.pttm-faq__answer {
margin: 0;
padding: 36px 30px 24px;
border-radius: 0 0 var(--pttm-radius-tab) var(--pttm-radius-tab);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 8px 3px #fff inset;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.pttm-faq__item.is-open .pttm-faq__answer,
#pttm-landing:not(.is-js) .pttm-faq__answer {
opacity: 1;
transform: none;
}
#pttm-landing .pttm-faq__answer p,
#pttm-landing .pttm-faq__answer ul {
margin: 0 0 8px;
}
#pttm-landing .pttm-faq__answer > :last-child {
margin-bottom: 0;
}
#pttm-landing .pttm-faq__answer ul {
padding: 0;
list-style: none;
}
#pttm-landing .pttm-faq__answer li {
position: relative;
margin: 0 0 4px;
padding-left: 16px;
}
#pttm-landing .pttm-faq__answer li::before {
position: absolute;
top: 0;
left: 0;
content: "-";
}
/* ----- Tablet ----- */
@media (min-width: 769px) and (max-width: 1199px) {
.pttm-faq__inner {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
max-width: 896px;
}
.pttm-faq__aside {
position: static;
}
}
/* ----- Mobile ----- */
@media (max-width: 768px) {
.pttm-faq {
padding: 24px 16px 44px;
}
.pttm-faq__inner {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
max-width: 420px;
}
.pttm-faq__aside {
position: static;
padding-top: 0;
}
.pttm-faq__list {
gap: 14px;
}
#pttm-landing .pttm-faq__trigger {
min-height: 50px;
padding: 10px 16px;
font-size: 16px;
}
#pttm-landing .pttm-faq__trigger:hover {
transform: none;
}
.pttm-faq__answer {
padding: 30px 18px 18px;
}
}
/* "Một số" đứng trước keyword – màn hẹp tự xuống dòng, không cắt chữ */
.pttm-faq .pttm-heading__line {
flex-wrap: wrap;
row-gap: 0;
}
.pttm-faq .pttm-heading__sub,
.pttm-faq .pttm-heading__keyword {
white-space: nowrap;
}
/* ===== [END CSS] CSS section mới thêm PHÍA TRÊN dòng này ===== */
/* ---------- REDUCED MOTION (luôn để cuối file) ---------- */
@media (prefers-reduced-motion: reduce) {
#pttm-landing *,
#pttm-landing *::before,
#pttm-landing *::after {
animation: none !important;
transition: none !important;
}
}