/*
 * Styles for Dieu Tri Nam Landing Page
 * Inherits: main.css tokens (colors, spacing, typography, radius, shadow)
 * CTA: .btn-cta-lp — self-contained, không cần home.css
 *
 * @package linhanhclinic
 */

/* ══════════════════════════════════════════════════════════
   NAM HERO — Section wrapper
   ══════════════════════════════════════════════════════════ */
.nam-hero {
    background-color: #f5f5f5;
    padding-block: 0;
    overflow: hidden;
    position: relative;
}

/* Fix: Loại bỏ hiệu ứng zoom lightbox nếu vô tình xuất hiện trong section hero */
.nam-hero .cert-zoom-icon {
    display: none !important;
}

/* ── 2-Column Grid (Desktop) ─────────────────────────────── */
.nam-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1.65fr;
    align-items: stretch;
    min-height: 1100px;
}

/* ── Left column ─────────────────────────────────────────── */
.nam-hero__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 60px 0;
}

/* Title PNG */
.nam-hero__title-img {
    width: 100%;
}

.nam-hero__title-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* ══════════════════════════════════════════════════════════
   DEAL BOX HTML — Form Đăng ký
   ══════════════════════════════════════════════════════════ */
.nam-deal-box--html {
    position: relative;
    width: 100%;
    max-width: 585px;
    margin-top: 30px;
}

.ndb-inner {
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 20px;
    background-image: linear-gradient(#fff, #fff), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(191, 147, 78, 1) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 4px 20px rgba(127, 99, 55, 0.1);
    padding: 74px 40px 40px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 585px;
    min-height: 487px;
}

.ndb-price-row {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 20px;
}

.ndb-price-label {
    font-family: var(--font-heading-lux);
    font-size: 39px;
    color: #BF934E;
    line-height: 1;
}

.ndb-price-value {
    font-family: var(--font-heading-lux);
    font-size: 145px;
    line-height: 0.8;
    background: linear-gradient(360deg, rgba(182, 150, 85, 1) 0%, rgba(227, 200, 113, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ndb-form {
    width: 100%;
    max-width: 455px;
}

.ndb-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 12px;
}

.ndb-form .wpcf7-form-control-wrap input[type="text"],
.ndb-form .wpcf7-form-control-wrap input[type="tel"],
.ndb-form .wpcf7-form-control-wrap select {
    width: 100%;
    max-width: 455px;
    height: 41px;
    border-radius: 999px;
    background-color: #EAEAEA;
    border: none;
    padding: 0 25px;
    font-family: 'Roboto';
    font-size: 16px;
    color: #6B5E52;
}

/* Nút Submit kế thừa CTA */
.ndb-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 36px;
    width: 195px;
    height: 45px;
    border-radius: 50px;
    border: none;
    font-family: 'Geomanist', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    background: linear-gradient(90deg, #A88143 0%, #D4AE70 50%, #A88143 100%);
    background-size: 200% auto;
    box-shadow: 0 4px 15px rgba(127, 99, 55, 0.3), inset 1px 1px 2px #E8D9A8, inset -1px -1px 2px #E8D9A8;
    transition: all 0.4s ease;
    animation: pulse-gentle-lp 2.5s ease-in-out infinite;
    cursor: pointer;
    text-transform: uppercase;
    width: auto;
    margin: 20px auto 0;
    display: block;
}

.ndb-form .wpcf7-submit:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(168, 129, 67, 0.5), inset 1px 1px 2px #E8D9A8, inset -1px -1px 2px #E8D9A8;
}

.ndb-deco {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.ndb-deco--ribbon {
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    width: 444px;
    z-index: 4;
}

.ndb-deco--star-tl {
    top: -3px;
    left: -46px;
    width: 104px;
}

.ndb-deco--star-br {
    bottom: -4px;
    right: -50px;
    width: 104px;
}

.ndb-deco--gift {
    bottom: -57px;
    left: -85px;
    width: 143px;
}

.ndb-form .registration-form-container {
    width: 78%;
    top: 39%;
}

.ndb-form .registration-form-container .wpcf7-submit {
    margin: 0 auto;
    width: auto;
    font-weight: 400;
}

/* ══════════════════════════════════════════════════════════
   BTN-CTA-LP — Nút CTA Landing Page (Self-contained)
   ══════════════════════════════════════════════════════════
   Sao chép chính xác từ .btn-cta--deal trong home.css.
   Lý do tạo class riêng: home.css CHỈ load khi is_front_page().
   Landing page cần bản độc lập, KHÔNG phụ thuộc home.css.

   GIỮ NGUYÊN CÁC GIÁ TRỊ SAU (đồng nhất với trang chủ):
   - Gradient: linear-gradient(90deg, #A88143 0%, #D4AE70 50%, #A88143 100%)
   - Inner shadow: inset 1px 1px 2px #E8D9A8, inset -1px -1px 2px #E8D9A8
   - Animation: pulse-gentle-lp 2.5s ease-in-out infinite
   - Hover: background-position shift + translateY(-2px) + stronger shadow
   ══════════════════════════════════════════════════════════ */

@keyframes pulse-gentle-lp {
    0% {
        transform: scale(1);
        box-shadow:
            inset 1px 1px 2px #E8D9A8,
            inset -1px -1px 2px #E8D9A8,
            0 0 0 0 rgba(191, 147, 78, 0.4);
    }

    50% {
        transform: scale(1.04);
        box-shadow:
            inset 1px 1px 2px #E8D9A8,
            inset -1px -1px 2px #E8D9A8,
            0 0 0 8px rgba(191, 147, 78, 0);
    }

    100% {
        transform: scale(1);
        box-shadow:
            inset 1px 1px 2px #E8D9A8,
            inset -1px -1px 2px #E8D9A8,
            0 0 0 0 rgba(191, 147, 78, 0);
    }
}

.btn-cta-lp {
    /* Shape */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 36px;
    border-radius: 50px;
    border: none;
    white-space: nowrap;
    cursor: pointer;

    /* Typography */
    font-family: 'Geomanist', 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 400;
    color: #FFFFFF;
    text-decoration: none;

    /* Gold Gradient — đồng nhất với homepage */
    background: linear-gradient(90deg, #A88143 0%, #D4AE70 50%, #A88143 100%);
    background-size: 200% auto;

    /* Shadow */
    box-shadow:
        0 4px 15px rgba(127, 99, 55, 0.3),
        inset 1px 1px 2px #E8D9A8,
        inset -1px -1px 2px #E8D9A8;

    /* Transition + Pulse animation */
    transition: all 0.4s ease;
    animation: pulse-gentle-lp 2.5s ease-in-out infinite;

    /* Spacing: nút cách ảnh giá */
    margin-top: -56px;
    /* Nhích nút lên để nằm khớp cạnh dưới hộp quà */
    position: relative;
    z-index: 5;
    align-self: center;
}

.btn-cta-lp:hover {
    background-position: right center;
    box-shadow:
        0 15px 30px rgba(168, 129, 67, 0.6),
        inset 1px 1px 2px #E8D9A8,
        inset -1px -1px 2px #E8D9A8;
    transform: translateY(-2px);
    color: #FFFFFF;
}

/* ── Right column: Collage photo ─────────────────────────── */
.nam-hero__right {
    position: relative;
    overflow: hidden;
}

.nam-hero__photo {
    width: 100%;
    height: 100%;
}

.nam-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .nam-hero__grid {
        display: flex;
        flex-direction: column;
        min-height: unset;
        gap: 0;
    }

    /* Flatten columns to reorder their children */
    .nam-hero__left,
    .nam-hero__right {
        display: contents;
    }

    /* 1. Title PNG lên đầu */
    .nam-hero__title-img {
        order: 1;
        padding: 80px 15px 10px;
    }

    /* 2. Hình bệnh nhân nám ở giữa */
    .nam-hero__photo {
        order: 2;
        height: auto;
    }

    .nam-hero__photo img {
        object-position: center top;
        height: auto;
    }

    /* 3. Box hộp quà + nút ở cuối */
    .nam-deal-box--html {
        order: 3;
        max-width: 100%;
        padding: 0 15px 40px;
        margin-top: -20px;
        z-index: 10;
        position: relative;
    }

    .ndb-inner {
        padding: 57px 16px;
        min-height: 419px;
    }

    .ndb-form .registration-form-container {
        width: 80%;
        top: 29%;
    }

    .ndb-price-label {
        font-size: 28px;
    }

    .ndb-price-value {
        font-size: 73px;
    }

    .ndb-form .wpcf7-submit {
        font-size: 18px;
        padding: 10px 32px;
    }

    .ndb-deco--star-tl {
        left: -12px;
        width: 69px;
    }

    .ndb-deco--star-br {
        right: -18px;
        width: 69px;
        bottom: 36px;
    }

    .ndb-deco--gift {
        left: 0px;
        width: 61px;
        bottom: 13px;
    }

    .ndb-deco--ribbon {
        width: 260px;
        top: -29px;
    }
}

/* ══════════════════════════════════════════════════════════
   TABLET (769px – 1024px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

    .nam-hero__grid {
        grid-template-columns: 1fr 1fr;
        min-height: 480px;
    }

    .nam-hero__left {
        padding: 40px 0;
        gap: 20px;
    }

    .nam-deal-box {
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════
   ĐỐI TƯỢNG NÊN ĐIỀU TRỊ NÁM — Section
   ══════════════════════════════════════════════════════════ */
.nam-target {
    background-color: #f5f5f5;
    padding-block: 50px;
    padding-bottom: 327px;
}

/* ── Section Header ──────────────────────────────────────── */
.nam-target__header {
    margin-bottom: 131px;
}

/* Title Container — 2-layer stacked pattern from homepage */
.nam-target__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1;
}

/* Layer 1: Art font — chìm phía sau (UVN SangSong) */
.dtn-title-top {
    font-family: var(--font-accent-art);
    font-size: 120px;
    font-weight: normal;
    color: #B69655;
    margin-bottom: -50px;
    opacity: 0.9;
}

/* Layer 2: Pill box — nổi phía trước (SVN-Famous) */
.dtn-title-middle {
    font-family: var(--font-heading-lux);
    font-size: 49px;
    color: #7F6337;
    border: 1px solid #BF934E;
    border-radius: 999px;
    padding: 2px 30px;
    padding-top: 0.8rem;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2;
    font-weight: 500;
    position: relative;
    box-shadow: 0 5px 13px 2px rgba(191, 147, 78, 0.23);
    bottom: -74px;
}

/* ── Cards Grid — Desktop: 5 columns ─────────────────────── */
.nam-target__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: stretch;
}

@media screen and (min-width:768px) {
    .nam-target__grid .target-card:nth-child(even) {
        bottom: -122px;
    }

    .nam-target {
        padding-bottom: 220px;
    }
}


/* ── Target Card ─────────────────────────────────────────── */
.target-card {
    background: #FFFFFF;
    border-radius: 29px;
    box-shadow: 0 2px 5px rgba(127, 99, 55, 0.3);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    padding: 0.5rem;
    position: relative;
}

.target-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    transform: translateY(-4px);
}

/* Card image — hình PNG gộp (số + minh họa) — user gắn link */
.target-card__image {
    width: 100%;
    overflow: hidden;
}

.target-card__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Card body — nội dung text */
.target-card__body {
    padding: 16px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Card title — in đậm, màu brand dark */
.target-card__title {
    font-family: 'Geomanist';
    font-size: 18px;
    font-weight: 500;
    color: #7F6337;
    line-height: 1.35;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

/* Card description */
.target-card__desc {
    font-family: 'Geomanist';
    font-size: 18px;
    font-weight: 400;
    color: #7F6337;
    line-height: 1.55;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .nam-target {
        padding-block: 32px;
    }

    .nam-target__header {
        margin-bottom: 28px;
    }

    /* Title mobile sizes — thu nhỏ khớp với homepage mobile */
    .dtn-title-top {
        font-size: 63px;
        margin-bottom: -30px;
    }

    .dtn-title-middle {
        font-size: 30px;
        padding: 5px 20px;
        top: 54px;
        margin-bottom: 79px;
    }

    /* Grid mobile: 2 cột, card thứ 5 centered */
    .nam-target__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .target-card--last {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: calc(50% - 7px);
    }

    .target-card__body {
        padding: 12px 14px 18px;
        gap: 6px;
    }

    .target-card__title {
        font-size: 16px;
    }

    .target-card__desc {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* ══════════════════════════════════════════════════════════
   TABLET (769px – 1024px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

    .nam-target__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .target-card--last {
        /* 5th card on tablet — stay in flow */
    }

    .dtn-title-top {
        font-size: 90px;
        margin-bottom: -40px;
    }

    .dtn-title-middle {
        font-size: 40px;
    }
}

/* ══════════════════════════════════════════════════════════
   GIẢI PHÁP ĐIỀU TRỊ NÁM — Section
   ══════════════════════════════════════════════════════════ */
.nam-solutions {
    background-color: #f5f5f5;
    padding-block: 30px;
    position: relative;
    overflow: hidden;
}

/* Background decors */
.nam-solutions__deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
}

.nam-solutions__deco--left {
    left: -5%;
    top: 30%;
    width: 350px;
}

.nam-solutions__deco--right {
    right: -5%;
    top: -5%;
    width: 400px;
}

/* Section Header */
.nam-solutions__header {
    position: relative;
    z-index: 2;
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nam-solutions__subtitle {
    font-family: 'Geomanist';
    font-size: 18px;
    font-weight: 400;
    color: #7F6337;
    margin-top: 125px;
    text-align: center;
}

@media screen and (max-width:768px) {
    .nam-solutions__subtitle {
        margin-top: 25px;
    }

    .nam-solutions__deco--right {
        opacity: 0;
    }
}

/* Solutions Grid */
.nam-solutions__grid {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

@media screen and (min-width:768px) {
    .nam-solutions__grid .solution-card:first-child .solution-card__machine {
        bottom: 0px;
        right: -1px;
    }

    .nam-solutions__grid .solution-card:nth-child(2) .solution-card__machine {
        bottom: -9px;
        right: -7px;
    }

    .nam-solutions__grid .solution-card:nth-child(3) .solution-card__machine {
        bottom: 2px;
        right: -1px;
    }

    .nam-solutions__grid .solution-card:nth-child(4) .solution-card__machine {
        bottom: 0px;
        right: 0px;
    }
}

/* Card */
.solution-card {
    max-width: 370px;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 12px;
    transition: all 0.3s ease;
}

.solution-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.solution-card__thumb {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.solution-card__thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.solution-card__body {
    display: flex;
    flex-direction: column;
    padding: 0 10px 15px 10px;
    gap: 12px;
    flex: 1;
}

/* Typography Title theo spec figma: Geomanist, 500, 18px */
.solution-card__title {
    font-family: 'Geomanist', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #7F6337;
    margin: 0;
    text-transform: uppercase;
}

/* Typography Desc theo spec: Geomanist, 400, 18px */
.solution-card__desc {
    font-family: 'Geomanist', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #6B5E52;
    margin: 0;
    flex: 1;
    padding-right: 50px;
    max-width: 300px;
    /* Chừa khoảng trống bên phải cho máy đè lên */
}

/* Machine Image - Đè lên góc dưới bên phải card */
.solution-card__machine {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 130px;
    z-index: 3;
}

.solution-card__machine img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Nút Đăng Ký - kế thừa CTA và style lại size chút so với bản hero */
.solution-card__cta {
    align-self: flex-start;
    padding: 10px 24px;
    font-size: 16px;
    margin-top: 10px;
    position: relative;
    z-index: 4;
    /* Đảm bảo nằm trên máy nếu lấn */
}

/* ══════════════════════════════════════════════════════════
   2000+ KHÁCH HÀNG — Section
   ══════════════════════════════════════════════════════════ */
.nam-customers {
    background-color: #f5f5f5;
    padding-block: 60px;
}

/* ── Section Header ──────────────────────────────────────── */
.nam-customers__header {
    margin-bottom: 50px;
}

.nam-customers__title {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.nc-title-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.nc-title-pill {
    font-family: var(--font-heading-lux);
    font-size: 49px;
    color: #B69655;
    border: 1px solid #BF934E;
    border-radius: 999px;
    padding: 10px 35px;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2;
    font-weight: 500;
    position: relative;
    box-shadow: 0 5px 13px 2px rgba(191, 147, 78, 0.23);
    bottom: -25px;
    left: -20px;
}

.nc-title-script {
    font-family: var(--font-accent-art);
    font-size: 110px;
    color: #B69655;
    font-weight: normal;
    line-height: 0.7;
    padding-top: 25px;
}

.nc-title-bottom {
    font-family: var(--font-heading-lux);
    font-size: 70px;
    background: linear-gradient(360deg, rgba(182, 150, 85, 1) 0%, rgba(227, 200, 113, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 39px;
    line-height: 1.2;
    font-weight: 500;
}

/* ── 1. Image Gallery ────────────────────────────────────── */
.nam-customers__gallery {
    margin-bottom: 70px;
    position: relative;
    max-width: 1402px;
    margin-inline: auto;
}

/* Desktop: flex with overflow-x auto (horizontal scroll) */
.nc-gallery-grid {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    padding-bottom: 20px;
    padding-top: 10px;
    /* Hide scrollbar visually but keep function */
    scrollbar-width: thin;
    scrollbar-color: #BF934E #EBEBEB;
}

.nc-gallery-grid::-webkit-scrollbar {
    height: 8px;
}

.nc-gallery-grid::-webkit-scrollbar-track {
    background: #EBEBEB;
    border-radius: 10px;
}

.nc-gallery-grid::-webkit-scrollbar-thumb {
    background: #BF934E;
    border-radius: 10px;
}

.nc-gallery-item {
    flex: 0 0 445px;
    width: 445px;
    aspect-ratio: 1/1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.nc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 1.1 Show More Logic (Mobile Only) ────────────────────── */
.show-more {
    position: relative;
    display: flex;
    flex-direction: column;
}

.show-more__content {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ẩn mặc định trên Desktop */
.nam-customers .show-more__btn,
.nam-customers .show-more__fade,
.show-more__label-less {
    display: none;
}

/* ── 2. Video Shorts Grid ────────────────────────────────── */
.video-shorts {
    margin-top: 50px;
}

.video-shorts__grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.video-short-item {
    flex: 0 0 240px;
    aspect-ratio: 9/16;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background-color: #000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.video-short-item .js-video-inline {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.video-short-item iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.video-short-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.4s ease;
}

.video-short-item:hover img {
    transform: scale(1.05);
}

.video-short-item .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

.video-short-item:hover .play-overlay {
    background: rgba(0, 0, 0, 0);
}

.video-short-item .play-overlay svg {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .nc-title-pill {
        font-size: 48px;
        padding: 0 20px;
        padding-top: 0.3rem;
        left: 11px;
    }

    .nc-title-script {
        font-size: 60px;
        padding-top: 15px;
        right: -26px;
        position: relative;
    }

    .nc-title-bottom {
        font-size: 40px;
        margin-left: 0;
        text-align: center;
        margin-top: 25px;
    }

    .nam-customers {
        padding-block: 40px;
    }

    .nam-customers__gallery {
        margin-bottom: 40px;
    }

    /* Hiện lại Show More trên Mobile */
    .nam-customers .show-more__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        margin: 20px auto 0;
        background: #FFFFFF;
        border: 1px solid #BF934E;
        border-radius: 99px;
        color: #BF934E;
        font-family: 'Geomanist', sans-serif;
        font-size: 16px;
        font-weight: 500;
        padding: 10px 32px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(191, 147, 78, 0.15);
        position: relative;
        z-index: 2;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .nc-title-wrapper {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .nam-customers .show-more__btn:active {
        transform: scale(0.95);
    }

    .nam-customers .show-more__fade {
        display: block;
        position: absolute;
        bottom: 55px;
        /* Nằm trên nút một chút */
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to bottom, rgba(253, 250, 245, 0), rgba(253, 250, 245, 1));
        pointer-events: none;
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    /* Trạng thái mở rộng (is-expanded dùng class từ JS) */
    .show-more.is-expanded .show-more__fade {
        opacity: 0;
        visibility: hidden;
    }

    /* Toggle labels */
    .show-more.is-expanded .show-more__label-more {
        display: none;
    }

    .show-more.is-expanded .show-more__label-less {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Gallery Grid Mobile: 1 col vertical stack */
    .nc-gallery-grid {
        flex-direction: column;
        overflow-x: hidden;
        gap: 16px;
        padding-bottom: 0;
    }

    .nc-gallery-item {
        flex: auto;
        width: 100%;
        max-width: 345px;
        margin: 0 auto;
    }

    /* Video Shorts Mobile: 1 col stack */
    .video-shorts__grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .video-short-item {
        width: 100%;
        max-width: 260px;
        flex: none;
    }
}

/* ── 3. Làm Đẹp Thả Ga ───────────────────────────────────── */
.nam-deals {
    background: url('/wp-content/uploads/2026/04/bg-lam-dep-tha-ga.webp') center/cover no-repeat;
    position: relative;
    overflow: hidden;
    padding-block: 30px;
}

.nd-bg-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    filter: blur(2px);
}

.nd-bg-deco--gift-left {
    width: 323px;
    top: 20%;
    left: -133px;
}

.nd-bg-deco--gift-right {
    width: 470px;
    bottom: -8%;
    right: -235px;
}

.nam-deals__header {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.nam-deals__title {
    display: flex;
    justify-content: center;
}

.nd-title-img {
    max-width: 100%;
    height: auto;
    width: 500px;
    /* Chiều rộng mặc định nếu muốn, scale tự động theo container */
}

.nd-glass-ribbon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    max-width: none;
    z-index: 5;
    pointer-events: none;
}

.nd-vouchers-grid {
    display: flex;
    justify-content: center;
    gap: 56px;
    margin-bottom: 70px;
    max-width: 1182px;
    margin-inline: auto;
    position: relative;
    z-index: 2;
}

.nd-voucher-item {
    flex: 0 0 324px;
    max-width: 324px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nd-voucher-item:hover {
    transform: translateY(-15px) scale(1.03);
}

.nd-voucher-item img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 15px 30px rgba(127, 99, 55, 0.25));
}

.nd-cta-wrapper {
    position: relative;
    z-index: 5;
}

.btn-cta-deal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding: 12px 36px;
    white-space: nowrap;
    font-weight: 500;
    border-radius: 50px;
    position: relative;
    box-shadow: 0 4px 15px rgba(127, 99, 55, 0.3), inset 1px 1px 2px #E8D9A8, inset -1px -1px 2px #E8D9A8;
    cursor: pointer;
    transition: all 0.4s ease;
    color: #FFFFFF;
    font-family: var(--font-body), sans-serif;
    background: linear-gradient(90deg, #A88143 0%, #D4AE70 50%, #A88143 100%);
    background-size: 200% auto;
    border: none;
    animation: gold-pulse 2.5s infinite;
}

.btn-cta-deal:hover {
    background-position: right center;
    transform: translateY(-2px);
    color: #FFFFFF;
}

@keyframes gold-pulse {
    0% {
        transform: scale(1);
        box-shadow:
            inset 1px 1px 2px #E8D9A8,
            inset -1px -1px 2px #E8D9A8,
            0 0 0 0 rgba(191, 147, 78, 0.4);
    }

    50% {
        transform: scale(1.03);
        box-shadow:
            inset 1px 1px 2px #E8D9A8,
            inset -1px -1px 2px #E8D9A8,
            0 0 0 8px rgba(191, 147, 78, 0);
    }

    100% {
        transform: scale(1);
        box-shadow:
            inset 1px 1px 2px #E8D9A8,
            inset -1px -1px 2px #E8D9A8,
            0 0 0 0 rgba(191, 147, 78, 0);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .nam-deals {
        padding-block: 50px;
        background: url(/wp-content/uploads/2026/04/bg-uudai-km-mob.webp);
        background-position: center;
        background-size: contain;
    }

    .nd-bg-deco {
        display: none;
    }

    .nd-title-img {
        width: 280px;
        /* Thu nhỏ cỡ chữ tiêu đề hình ảnh */
    }

    .nd-glass-ribbon {
        display: none;
        /* 1. Ẩn ribbon trên mobile theo yêu cầu */
    }

    .nam-deals__glass-box {
        padding: 15px 15px 35px;
        border-radius: 30px;
    }

    .nd-vouchers-grid {
        display: grid;
        /* Chuyển sang grid để làm layout 2+1 */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 10px;
        margin-bottom: 30px;
        align-items: center;
    }

    .nd-voucher-item {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .nd-voucher-item:last-child {
        grid-column: 1 / -1;
        /* Voucher thứ 3 chiếm trọn 2 cột */
        width: 48.5%;
        margin-inline: auto;
    }

    .btn-cta-deal {
        font-size: 18px;
        padding: 10px 24px;
    }
}

/* ══════════════════════════════════════════════════════════
   TÁI TẠO LÀN DA — Section
   ══════════════════════════════════════════════════════════ */
.nam-rejuvenation {
    padding-top: 80px;
    background-color: #f5f5f5;
    overflow: hidden;
}

/* ── Section Header ── */
.nam-rejuvenation__header {
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.nr-title-top-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: -20px;
}

.nr-title-script {
    font-family: var(--font-accent-art);
    font-size: 130px;
    color: #B69655;
    font-weight: normal;
    line-height: 0.8;
}

.nr-title-pill {
    font-family: var(--font-heading-lux);
    font-size: 40px;
    color: #7F6337;
    border: 1px solid #BF934E;
    border-radius: 999px;
    padding: 0 35px;
    padding-top: 0.6rem;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(127, 99, 55, 0.1);
    font-weight: 500;
    position: relative;
    bottom: -35px;
    left: -29px;
}

.nr-title-bottom {
    font-family: var(--font-heading-lux);
    font-size: 55px;
    background: linear-gradient(360deg, rgba(182, 150, 85, 1) 0%, rgba(227, 200, 113, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    position: relative;
    bottom: -62px;
}

/* ── Grid Layout ── */
.nam-rejuvenation__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 50px;
}

/* Cột trái: Ảnh minh họa */
.nam-rejuvenation__image {
    width: 100%;
}

.nam-rejuvenation__image img.nr-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Cột phải: Text List */
.nam-rejuvenation__content {
    width: 100%;
    padding-right: 20px;
}

.nr-text-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Khoảng cách giữa các mục */
}

.nr-list-item {
    position: relative;
    padding-left: 70px;
    padding-bottom: 5px;
    /* Để nội dung text không dính sát viền dưới nếu có */
}

.nr-line-img {
    position: absolute;
    left: -10px;
    top: 5px;
    width: calc(100% + 20px);
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.nr-text {
    position: relative;
    z-index: 1;
    display: block;
    font-family: 'Geomanist', sans-serif;
    font-size: 18px;
    color: #7F6337;
    line-height: 1.5;
    font-weight: 400;
    bottom: -45px;
}

.nam-rejuvenation__content ul.nr-text-list>.nr-list-item:first-child>span.nr-text {
    bottom: -25px;
}

@media screen and (max-width:768px) {
    .nam-rejuvenation__content ul.nr-text-list>.nr-list-item:first-child>span.nr-text {
        bottom: 3px;
    }

    .nr-text {
        bottom: 2px;
    }
}

/* Nút CTA */
.nam-rejuvenation__cta {
    margin-top: 20px;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .nam-rejuvenation {
        padding-top: 30px;
    }

    .nam-rejuvenation__header {
        margin-bottom: 30px;
    }

    .nr-title-script {
        font-size: 68px;
    }

    .nr-title-pill {
        font-size: 24px;
        padding: 0 20px;
        padding-top: 0.4rem;
        bottom: -20px;
        left: -10px;
    }

    .nr-title-top-group {
        margin-bottom: 0px;
        gap: 10px;
    }

    .nr-title-bottom {
        font-size: 32px;
        margin-top: 5px;
        bottom: -23px;
    }

    .nam-rejuvenation__grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* Đưa hình ảnh lên trên bằng flex/grid order tự động vì DOM đã chuẩn (trái -> phải = trên -> dưới) */

    .nam-rejuvenation__content {
        padding-right: 0;
    }

    .nr-text-list {
        gap: 25px;
    }

    .nr-text {
        font-size: 15px;
    }

    .nr-line-img {
        width: 100%;
        left: 0;
    }
}

/* ══════════════════════════════════════════════════════════
   LINH ANH: CHẤT LƯỢNG DỊCH VỤ NỔI BẬT
   ══════════════════════════════════════════════════════════ */
.nam-quality {
    padding-block: 80px;
    background-color: #f5f5f5;
    /* Nền nhạt sang trọng */
    overflow: hidden;
}

/* ── Section Header ── */
.nam-quality__header {
    margin-bottom: 70px;
    position: relative;
    z-index: 2;
}

.nq-title-top {
    font-family: var(--font-accent-art);
    font-size: 130px;
    color: #B69655;
    font-weight: normal;
    line-height: 0.8;
}

.nq-title-bottom-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.nq-title-pill {
    font-family: var(--font-heading-lux);
    font-size: 35px;
    color: #7F6337;
    border: 1px solid #BF934E;
    border-radius: 999px;
    padding: 0 35px;
    padding-top: 0.5rem;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 15px rgba(127, 99, 55, 0.1);
    font-weight: 500;
    position: relative;
    bottom: -15px;
}

.nq-title-highlight {
    font-family: var(--font-heading-lux);
    font-size: 55px;
    background: linear-gradient(360deg, rgba(182, 150, 85, 1) 0%, rgba(227, 200, 113, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
    position: relative;
    bottom: -19px;
}

/* ── Grid Layout ── */
.nam-quality__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px 16px;
    max-width: 1420px;
    margin: 0 auto;
}

/* ── Card Design ── */
.nq-card {
    position: relative;
    width: calc(33.333% - 14px);
    min-width: 420px;
    max-width: 450px;
    height: 220px;
    background: #ffffff8f;
    border: 1px solid #fff;
    border-radius: 35px;
    box-shadow: 0 2px 20px rgba(127, 99, 55, 0.3);
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
    backdrop-filter: blur(13px);
}

/* Hình minh họa trồi lên tỉ lệ 1:1 */
.nq-card__img {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-75%);
    width: 209px;
    height: 209px;
    object-fit: cover;
    border-radius: 28px;
    z-index: 2;
    background: #fff;
}

/* Nội dung Text bên phải */
.nq-card__body {
    padding-left: 245px;
    /* Trừa chỗ cho bề ngang của ảnh (247px - phần trồi) */
    padding-right: 20px;
    width: 100%;
}

.nq-card__text {
    font-family: 'Geomanist', sans-serif;
    font-size: 18px;
    color: #7F6337;
    line-height: 1.5;
    margin: 0;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .nam-quality {
        padding-block: 50px;
    }

    .nam-quality__header {
        margin-bottom: 50px;
    }

    /* Tiêu đề xếp 3 dòng */
    .nq-title-top {
        font-size: 80px;
    }

    .nq-title-bottom-group {
        flex-direction: column;
        gap: 15px;
    }

    .nq-title-pill {
        padding: 0 25px;
        padding-top: 0.4rem;
    }

    .nq-title-highlight {
        font-size: 60px;
        bottom: -13px;
    }

    /* Grid chuyển thành 1 cột */
    .nam-quality__grid {
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }

    .nam-quality__grid .nq-card:first-child img,
    .nam-quality__grid .nq-card:nth-child(3) img,
    .nam-quality__grid .nq-card:nth-child(5) img {
        left: 17px;
    }

    .nam-quality__grid .nq-card:nth-child(2) img,
    .nam-quality__grid .nq-card:nth-child(4) img {
        right: 17px;
    }

    .nam-quality__grid .nq-card:first-child .nq-card__text,
    .nam-quality__grid .nq-card:nth-child(3) .nq-card__text,
    .nam-quality__grid .nq-card:nth-child(5) .nq-card__text {
        padding-left: 43px;
    }


    .nam-quality__grid .nq-card:nth-child(2) .nq-card__text,
    .nam-quality__grid .nq-card:nth-child(4) .nq-card__text {
        padding-right: 42px;
    }

    .nq-card {
        width: 100%;
        min-width: 100%;
        max-width: 350px;
        min-height: 170px;
        height: auto;
        padding-block: 20px;
        border: 1px solid #fff;
        background: #ffffff0a;
        box-shadow: 0 2px 7px rgba(127, 99, 55, 0.3);
    }

    /* Ảnh trên Mobile nhỏ lại */
    .nq-card__img {
        width: 160px;
        height: 160px;
        left: -15px;
        border-radius: 20px;
    }

    .nq-card__body {
        padding-left: 155px;
        /* Giảm padding trái đi */
        padding-right: 15px;
    }

    .nq-card__text {
        font-size: 16px;
    }

    /* Layout sole (xen kẽ) Trái-Phải trên Mobile */
    .nq-card:nth-child(even) .nq-card__img {
        left: auto;
        right: -15px;
        /* Ảnh nảy sang phải */
    }

    .nq-card:nth-child(even) .nq-card__body {
        padding-left: 15px;
        padding-right: 155px;
        /* Trừ không gian bên phải cho ảnh */
        text-align: right;
    }
}

/* ══════════════════════════════════════════════════════════
   BÁC SĨ CKII LÊ HẠNH
   ══════════════════════════════════════════════════════════ */
.nam-doctor {
    padding-block: 80px;
    background-color: #f5f5f5;
    overflow: hidden;
}

/* ── Wrapper for reordering ── */
.nam-doctor__wrapper {
    display: grid;
    grid-template-columns: 682px 1fr;
    gap: 40px;
    align-items: center;
}

.nam-doctor__image {
    grid-row: 1 / 3;
    /* Spans across Header and Timeline on desktop */
}

.nam-doctor__image img.doctor-avt {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ── Tiêu đề ── */
.ndc-title-main-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 5px;
}

.ndc-title-sup {
    font-family: var(--font-heading-lux);
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
    background: linear-gradient(360deg, rgba(182, 150, 85, 1) 0%, rgba(227, 200, 113, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ndc-title-script {
    font-family: var(--font-accent-art);
    font-size: 89px;
    color: #B69655;
    font-weight: normal;
    line-height: 1;
    margin-left: 35px;
}

.ndc-title-pill {
    display: inline-block;
    font-family: var(--font-heading-lux);
    font-size: 25px;
    color: #7F6337;
    border: 1px solid #BF934E;
    border-radius: 999px;
    padding: 8px 30px;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 15px rgba(127, 99, 55, 0.1);
    font-weight: 500;
    margin-top: 15px;
}

/* ── Timeline Kinh nghiệm ── */
.nam-doctor__timeline {
    margin-top: 30px;
}

.ndc-timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ndc-timeline-list::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    height: calc(100% - 17px);
    width: 1px;
    background: #BF934E;
}

.ndc-timeline-list li {
    position: relative;
    padding-left: 45px;
    font-family: 'Geomanist', sans-serif;
    font-size: 18px;
    color: #7F6337;
    line-height: 1.5;
}

.ndc-timeline-list li::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    width: 12px;
    height: 12px;
    background: #BF934E;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fdfaf5, 0 0 0 5px #BF934E;
    z-index: 2;
}

/* ── Bằng chứng nhận (HÀNG 2) ── */
.nam-doctor__certs {
    margin-top: 60px;
    /* Thêm khoảng cách cân đối */
    max-width: 100%;
}

.ndc-certs-gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
}


.ndc-cert-item {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
}

.ndc-cert-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.ndc-cert-item:hover img {
    transform: scale(1.05);
}

.cert-zoom-icon {
    position: absolute;
    inset: 0;
    background: rgba(191, 147, 78, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ndc-cert-item:hover .cert-zoom-icon {
    opacity: 1;
}

/* ── CTA Button (HÀNG 3) ── */
.nam-doctor__cta {
    margin-top: 50px;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .nam-doctor {
        padding-block: 50px;
    }

    /* Đổi sang 1 cột & Reorder */
    .nam-doctor__wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .nam-doctor__header {
        order: 1;
        text-align: center;
    }

    .nam-doctor__image {
        order: 2;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    .nam-doctor__timeline {
        order: 3;
        margin-top: 0;
    }

    .nam-doctor__certs {
        order: 4;
        margin-top: 40px;
    }

    .nam-doctor__cta {
        order: 5;
        margin-top: 40px;
    }

    .ndc-title-main-row {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .ndc-title-sup {
        font-size: 36px;
        margin-bottom: -5px;
    }

    .ndc-title-script {
        font-size: 64px;
    }

    .ndc-title-pill {
        font-size: 19px;
        padding: 6px 20px;
        display: inline-block;
        margin-top: 10px;
    }

    .ndc-timeline-list li {
        font-size: 16px;
        padding-left: 35px;
    }

    /* Scroll ảnh bằng cấp */
    .nam-doctor__certs {
        margin-inline: -20px;
    }

    .ndc-certs-gallery {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 10px 20px 25px;
        scroll-snap-type: x mandatory;
        gap: 15px;
    }

    .ndc-certs-gallery::-webkit-scrollbar {
        height: 4px;
    }

    .ndc-certs-gallery::-webkit-scrollbar-thumb {
        background: #BF934E;
        border-radius: 10px;
    }

    .ndc-cert-item {
        flex: 0 0 260px;
        max-width: none;
        scroll-snap-align: center;
    }

    .btn-cta-lp {
        font-size: 16px;
    }
}

/* ══════════════════════════════════════════════════════════
   QUY TRÌNH TRỊ NÁM CHUẨN Y KHOA
   ══════════════════════════════════════════════════════════ */
.nam-process {
    padding-block: 80px;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}

/* ── Background Decorations ── */
.npc-bg-decor {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    height: 782px;
    z-index: 0;
    pointer-events: none;
    /* Không cản trở click */
}

.npc-bg-decor--left {
    left: 0;
}

.npc-bg-decor--right {
    right: 0;
}

.npc-bg-decor img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.6;
    /* Làm mờ nhẹ để không quá gắt */
}

/* ── Header ── */
.npc-header {
    text-align: center;
    margin-bottom: 50px;
}

.npc-title-script {
    font-family: var(--font-accent-art);
    font-size: 130px;
    color: #B69655;
    line-height: 0.6;
    margin-bottom: -15px;
    font-weight: 300;
    z-index: 1;
    position: relative;
}

.npc-title-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.npc-title-pill {
    display: inline-block;
    font-family: var(--font-heading-lux);
    font-size: 49px;
    color: #7F6337;
    border: 1px solid #BF934E;
    border-radius: 999px;
    padding: 0px 33px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 15px rgba(127, 99, 55, 0.05);
    margin-top: 90px;
    font-weight: 500;
}

.npc-title-text {
    font-family: var(--font-heading-lux);
    font-size: 52px;
    color: #BF934E;
    margin-top: 90px;
    background: linear-gradient(360deg, rgba(182, 150, 85, 1) 0%, rgba(227, 200, 113, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Main Illustration ── */
.npc-main-illu {
    margin-bottom: 60px;
}

.npc-main-illu img {
    max-width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ── Steps Grid ── */
.npc-steps {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* Thẻ Step Card (Hình con nhộng) */
.npc-step-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: linear-gradient(#fff, #ffffff26) padding-box, linear-gradient(to bottom, #bf934e26 0%, rgba(191, 147, 78, 0) 100%) border-box;
    padding: 24px;
    width: 221px;
    height: 558px;
}

/* Layout So le (Staggered Layout) cho Desktop */
@media (min-width: 769px) {
    .npc-step-card:nth-child(even) {
        flex-direction: column-reverse;
        background: linear-gradient(#ffffff26, #fff) padding-box, linear-gradient(to bottom, #bf934e26 0%, rgba(191, 147, 78, 0) 100%) border-box;
    }

    .npc-steps {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        position: relative;
        top: -116px;
    }
}

.npc-step-card__img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.npc-step-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Nội dung Text */
.npc-step-card__content {
    /* Khoảng cách 28px từ hình đến chữ như design */
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-label {
    font-family: 'Geomanist', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #7F6337;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.step-desc {
    font-family: 'Geomanist', sans-serif;
    font-size: 18px;
    color: #7F6337;
    line-height: 1.4;
    margin: 0;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .npc-main-illu img {
        max-width: 100%;
    }

    .nam-process {
        padding-block: 30px;
    }

    .npc-bg-decor {
        display: none;
    }

    /* Resize Headers */
    .npc-header {
        margin-bottom: 40px;
    }

    .npc-title-script {
        font-size: 90px;
        margin-bottom: -5px;
    }

    .npc-title-main {
        flex-direction: column;
        /* Rớt hàng chữ 'tại Linh Anh' */
        gap: 8px;
    }

    .npc-title-pill {
        font-size: 28px;
        padding: 6px 20px;
        margin-top: 47px;
    }

    .npc-title-text {
        font-size: 52px;
        margin-top: -1px;
        width: 100%;
    }

    .npc-main-illu {
        margin-bottom: 40px;
    }

    /* Wrap Steps in 3 - 2 Grid */
    .npc-steps {
        flex-wrap: wrap;
        justify-content: center;
        gap: 11px;
    }

    .npc-step-card {
        flex: 0 0 calc(33.333% - 10px);
        max-width: 140px;
        height: 280px;
        flex-direction: column !important;
        padding: 15px 8px;
        border-radius: 100px;
        background: linear-gradient(#fff, #ffffff26) padding-box, linear-gradient(to bottom, #bf934e26 0%, rgba(191, 147, 78, 0) 100%) border-box;
    }

    /* Tăng kích thước typography lên 16px */
    .npc-step-card__content {
        padding: 15px 5px;
    }

    .step-label {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .step-desc {
        font-size: 16px;
        line-height: 1.4;
    }
}

/* ══════════════════════════════════════════════════════════
   BÁO CHÍ NÓI VỀ LINH ANH
   ══════════════════════════════════════════════════════════ */
.nam-press {
    padding-top: 30px;
    /* Bỏ padding bottom để podium chạm đáy */
    background-color: #f5f5f5;
    overflow: hidden;
}

/* ── Hàng 1 (Tiêu đề & Slider) ── */
.nam-press__top {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

.nam-press__title-col {
    flex: 0 0 400px;
    text-align: center;
}

.npr-title-script {
    font-family: var(--font-accent-art);
    font-size: 115px;
    color: #B69655;
    line-height: 0.6;
    margin-bottom: 33px;
    z-index: 1;
    position: relative;
    font-weight: 400;
}

.npr-title-pill {
    display: inline-block;
    font-family: var(--font-heading-lux);
    font-size: 42px;
    color: #7F6337;
    border: 1px solid #BF934E;
    border-radius: 999px;
    padding: 0px 40px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 15px rgba(127, 99, 55, 0.05);
    font-weight: 500;
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
}

.npr-desc {
    font-family: 'Geomanist', sans-serif;
    font-size: 18px;
    color: #7F6337;
    line-height: 1.5;
}

/* ── Slider Báo chí ── */
.nam-press__slider-col {
    flex: 1;
    min-width: 0;
}

.js-splide-press .splide__slide img {
    width: 100%;
    display: block;
}

/* Nút liquid glass Splide */
.js-splide-press .splide__arrow {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    width: 44px;
    height: 44px;
    opacity: 1;
    /* Hiển thị luôn thay vì mờ */
    transition: all 0.3s ease;
}

.js-splide-press .splide__arrow:hover {
    background: rgba(255, 255, 255, 0.9);
}

.js-splide-press .splide__arrow svg {
    fill: #7F6337;
}

/* Kéo nút lùi ra rìa slider */
.js-splide-press .splide__arrow--prev {
    left: -1em;
}

.js-splide-press .splide__arrow--next {
    right: -1em;
}

/* ── Hàng 2 (Chứng nhận & Podium) ── */
.nam-press__bottom {
    position: relative;
    padding-bottom: 40px;
}

@media screen and (min-width:768px) {
    .nam-press__bottom .container {
        z-index: 10;
        position: relative;
    }

    .npr-podium-bg {
        position: absolute;
        bottom: -300px;
        left: 50%;
        transform: translateX(-50%);
        width: 1920px;
        max-width: 100%;
        height: auto;
        z-index: 4;
        pointer-events: none;
    }
}

/* Podium Background - Container scale ra biên */


.npr-awards {
    display: flex;
    justify-content: center;
}

.npr-awards__track {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.npr-awards__group {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.npr-award-item {
    padding: 0 15px;
}

.npr-award-item img {
    height: auto;
    width: auto;
    max-height: 400px;
    object-fit: contain;
}

/* Ultilities */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none !important;
}

/* Ẩn thẻ clone track cho marquee css */

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    .nam-press {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .nam-press__top {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 40px;
    }

    .nam-press__title-col {
        flex: auto;
        width: 100%;
    }

    .npr-title-script {
        font-size: 90px;
        margin-bottom: 29px;
    }

    .npr-title-pill {
        font-size: 38px;
        padding: 0px 36px;
        margin-bottom: 20px;
    }

    .npr-desc {
        font-size: 16px;
    }

    /* Trên mobile slider giãn rộng full */
    .nam-press__slider-col {
        width: 100%;
    }

    /* Đưa nút slider vào lồng bên trong viền */
    .js-splide-press .splide__arrow--prev {
        left: 0.5em;
    }

    .js-splide-press .splide__arrow--next {
        right: 0.5em;
    }

    /* ── Marquee CSS cho phần Chứng nhận Mobile ── */
    .npr-awards {
        overflow: hidden;
        /* Áp dụng mờ lề trái/phải 10% như section đối tác */
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

    .npr-awards__track {
        display: flex;
        width: max-content;
        flex-wrap: nowrap;
        justify-content: flex-start;
        animation: npr-marquee 10s linear infinite;
    }

    .npr-awards__group {
        display: flex;
        gap: 15px;
        /* Giảm gap chứng nhận trên mobile */
        padding-right: 15px;
        /* Cân bằng loop */
        flex: 0 0 auto;
    }

    .npr-award-item img {
        height: 200px;
        /* Thu nhỏ chứng nhận */
    }

    /* Keyframe Loop vô hạn */
    @keyframes npr-marquee {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }

    }
}

/* ══════════════════════════════════════════════════════════
   PARTNERS SECTION — "Đối tác của Linh Anh"
   ══════════════════════════════════════════════════════════ */
.container--full {
    width: 100%;
    padding-inline: var(--space-4);
}

.partners {
    padding-block: var(--space-8);
    background-color: #f5f5f5;
    overflow: hidden;
}

.partners__header {
    margin-bottom: var(--space-16);
}

.partners__title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pt-title-top {
    font-family: var(--font-accent-art);
    font-size: 100px;
    font-weight: 400;
    color: #B69655;
    line-height: 0.8;
}

.pt-title-bottom {
    font-family: var(--font-heading-lux);
    font-size: 80px;
    background: linear-gradient(360deg, rgba(182, 150, 85, 1) 0%, rgba(227, 200, 113, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
}

/* Marquee Implementation */
.marquee {
    --marquee-duration: 8s;
    overflow: hidden;
    user-select: none;
    display: flex;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee__content {
    display: flex;
    gap: var(--space-12);
    min-width: 100%;
    padding-block: var(--space-4);
    animation: marquee var(--marquee-duration) linear infinite;
}

.marquee__item {
    flex: 0 0 auto;
    width: 180px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marquee__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.6;
    transition: all 0.3s ease;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .pt-title-top {
        font-size: 64px;
    }

    .pt-title-bottom {
        font-size: 44px;
    }

    .marquee__item {
        width: 120px;
    }

    .marquee__content {
        gap: var(--space-8);
    }
}