/*
 * CSS than trang chu. Chi nap o trang chu (xem functions.php).
 * Goc: design/trang-chu-mau.html. Header, footer, reset do Kadence lo.
 * Bien mau khai bao trong style.css.
 * Moc responsive: >=1260 may tinh | 1024-1259 laptop nho | 768-1023 may tinh bang
 *                 | <768 dien thoai | <480 | <360
 * Moi selector bat dau bang .ttd-block de thang CSS noi dung cua Kadence va WordPress.
 */

/* ---------- Bieu tuong (SVG dang mask, mau theo background) ---------- */
.ttd-block {
    --ttd-i-dau-tich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --ttd-i-tim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    --ttd-i-mui-ten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    --ttd-i-dien-thoai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.ttd-block .ttd-ico-khien {
    --ttd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.4 7.4-7.3 8.8a1 1 0 0 1-.6 0C8.4 20.4 5 18 5 13V6a1 1 0 0 1 1-1c2 0 4.4-1.2 6.1-2.6a1.1 1.1 0 0 1 1.4 0C15.2 3.8 17.6 5 19.6 5A1 1 0 0 1 21 6z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}

.ttd-block .ttd-ico-set {
    --ttd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}

.ttd-block .ttd-ico-ghim {
    --ttd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.ttd-block .ttd-ico-ho-so {
    --ttd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpolyline points='9 15 11 17 15 13'/%3E%3C/svg%3E");
}

.ttd-block .ttd-ico-tai-nghe {
    --ttd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
}

.ttd-block .ttd-ico-lam-moi {
    --ttd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpolyline points='21 3 21 8 16 8'/%3E%3C/svg%3E");
}

.ttd-block .ttd-ico-the {
    --ttd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
}

.ttd-block .ttd-ico-dong-ho {
    --ttd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
}

.ttd-block .ttd-ico-dia-cau {
    --ttd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

/* ---------- Nen tang ---------- */
body.home .content-area {
    /* du phong neu chua tat khoang dem tren/duoi trong Kadence Page Settings */
    margin-top: 0;
    margin-bottom: 0;
}

body .ttd-block,
body .ttd-block :where(h1, h2, h3, h4, p, ul, ol, li, figure, .wp-block-group, .wp-block-buttons, .wp-block-button, .wp-block-image) {
    margin-top: 0;
    margin-bottom: 0;
}

.ttd-block {
    color: var(--ttd-text);
    font-family: var(--ttd-font-noi-dung);
    line-height: 1.6;
}

.ttd-block :where(h1, h2, h3, p, li) {
    overflow-wrap: break-word;
}

.ttd-block img {
    max-width: 100%;
    height: auto;
}

.ttd-block[id],
.ttd-block [id] {
    scroll-margin-top: 90px;
}

.ttd-block a:focus-visible {
    outline: 2px solid var(--ttd-accent);
    outline-offset: 2px;
}

.ttd-block .ttd-wrap {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
}

.ttd-block.ttd-section {
    padding-top: 96px;
    padding-bottom: 96px;
}

.ttd-block.ttd-alt {
    background: var(--ttd-cream);
}

.ttd-block .ttd-eyebrow {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ttd-accent);
}

.ttd-block .ttd-h2 {
    font-family: var(--ttd-font-tieu-de);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    color: var(--ttd-primary);
}

.ttd-block .ttd-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
}

.ttd-block .ttd-head .ttd-mo-ta {
    font-size: 15px;
    color: var(--ttd-muted-2);
}

/* ---------- Nut bam (block Button) ---------- */
.ttd-block .wp-block-button.ttd-btn .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 15px 28px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transition: background-color 0.2s, color 0.2s;
}

.ttd-block .wp-block-button.ttd-btn-accent .wp-block-button__link {
    background: var(--ttd-accent);
    color: #fff;
}

.ttd-block .wp-block-button.ttd-btn-accent .wp-block-button__link:hover,
.ttd-block .wp-block-button.ttd-btn-accent .wp-block-button__link:focus {
    background: var(--ttd-accent-hover);
    color: #fff;
}

.ttd-block .wp-block-button.ttd-btn-outline .wp-block-button__link {
    background: transparent;
    border-color: var(--ttd-primary);
    color: var(--ttd-primary);
}

.ttd-block .wp-block-button.ttd-btn-outline .wp-block-button__link:hover,
.ttd-block .wp-block-button.ttd-btn-outline .wp-block-button__link:focus {
    background: var(--ttd-primary);
    color: #fff;
}

/* ---------- 1. Hero ---------- */
.ttd-block.ttd-hero {
    background: var(--ttd-cream);
}

.ttd-block .ttd-hero-inner {
    display: flex;
    align-items: center;
    gap: 64px;
    padding-top: 96px;
    padding-bottom: 96px;
}

.ttd-block .ttd-hero-text {
    flex: 1.15 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ttd-block .ttd-h1 {
    font-family: var(--ttd-font-tieu-de);
    font-weight: 700;
    font-size: 46px;
    line-height: 1.25;
    color: var(--ttd-primary);
}

.ttd-block .ttd-lead {
    max-width: 520px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ttd-muted);
}

.ttd-block .ttd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.ttd-block .ttd-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

.ttd-block .ttd-ticks li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #3A4250;
}

.ttd-block .ttd-ticks li::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: var(--ttd-green);
    -webkit-mask: var(--ttd-i-dau-tich) center / contain no-repeat;
    mask: var(--ttd-i-dau-tich) center / contain no-repeat;
}

/* Khung anh (hero, ve chung toi). Block Image chua co anh thi WordPress khong in ra gi. */
.ttd-block .wp-block-image.ttd-photo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ttd-block .wp-block-image.ttd-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(18, 41, 74, 0.12);
}

.ttd-block .wp-block-image.ttd-photo figcaption {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    color: var(--ttd-primary);
}

.ttd-block .wp-block-image.ttd-photo figcaption::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: var(--ttd-accent);
    -webkit-mask: var(--ttd-i-tim) center / contain no-repeat;
    mask: var(--ttd-i-tim) center / contain no-repeat;
}

/* ---------- 2. The tin cay ---------- */
.ttd-block.ttd-trust {
    background: #fff;
    border-bottom: 1px solid var(--ttd-line-soft);
}

.ttd-block.ttd-trust .ttd-wrap {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    padding-top: 48px;
    padding-bottom: 48px;
}

.ttd-block .ttd-trust-item {
    position: relative;
    min-height: 44px;
    padding-left: 58px;
}

.ttd-block .ttd-trust-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #F0EBDD;
}

.ttd-block .ttd-trust-item::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 11px;
    width: 22px;
    height: 22px;
    background: var(--ttd-primary);
    -webkit-mask: var(--ttd-ico) center / contain no-repeat;
    mask: var(--ttd-ico) center / contain no-repeat;
}

.ttd-block .ttd-trust-tieu-de {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ttd-primary);
}

.ttd-block .ttd-trust-mo-ta {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ttd-muted-2);
}

/* ---------- 3. Ve chung toi ---------- */
.ttd-block.ttd-about .ttd-wrap {
    display: flex;
    align-items: center;
    gap: 64px;
}

.ttd-block .ttd-about-text {
    flex: 1.1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ttd-block .ttd-about-text .ttd-mo-ta {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ttd-muted);
}

.ttd-block .ttd-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ttd-primary);
    text-decoration: none;
}

.ttd-block .ttd-link a::after {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--ttd-i-mui-ten) center / contain no-repeat;
    mask: var(--ttd-i-mui-ten) center / contain no-repeat;
}

.ttd-block .ttd-link a:hover {
    text-decoration: underline;
}

/* ---------- 4. Khoa hoc ---------- */
.ttd-block .ttd-grid {
    display: grid;
    gap: 24px;
}

.ttd-block .ttd-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ttd-block .ttd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 24px;
    border: 1px solid var(--ttd-line-soft);
    border-radius: 14px;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ttd-block .ttd-card:hover {
    box-shadow: 0 12px 28px rgba(18, 41, 74, 0.10);
    transform: translateY(-2px);
}

.ttd-block .ttd-card:focus-within {
    outline: 2px solid var(--ttd-accent);
    outline-offset: 2px;
}

.ttd-block .ttd-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    padding: 0 12px;
    border-radius: 26px;
    background: var(--ttd-primary);
    color: #fff;
    font-family: var(--ttd-font-tieu-de);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.ttd-block .ttd-badge.ttd-b {
    background: var(--ttd-accent);
}

.ttd-block .ttd-card h3 {
    font-family: var(--ttd-font-noi-dung);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ttd-text);
}

/* Lien ket o tieu de phu kin ca the: bam vao dau tren the cung duoc */
.ttd-block .ttd-card h3 a,
.ttd-block .ttd-svc a {
    color: inherit;
    text-decoration: none;
}

.ttd-block .ttd-card h3 a::after,
.ttd-block .ttd-svc a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
}

.ttd-block .ttd-card h3 a:focus-visible,
.ttd-block .ttd-svc a:focus-visible {
    outline: none;
}

.ttd-block .ttd-card .ttd-mo-ta {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ttd-muted-2);
}

.ttd-block .ttd-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--ttd-primary);
}

.ttd-block .ttd-center {
    margin-top: 40px;
    text-align: center;
}

.ttd-block .ttd-center a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ttd-primary);
    text-decoration: none;
}

.ttd-block .ttd-center a:hover {
    text-decoration: underline;
}

/* ---------- 5, 7. CTA (cung nen xanh navy) ---------- */
.ttd-block.ttd-cta {
    background: var(--ttd-primary);
}

.ttd-block.ttd-cta .ttd-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 1000px;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.ttd-block.ttd-cta h2 {
    font-family: var(--ttd-font-tieu-de);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.3;
    color: #fff;
}

.ttd-block.ttd-cta p {
    font-size: 15.5px;
    color: #D2D8E3;
}

.ttd-block.ttd-cta a:focus-visible,
.ttd-block.ttd-cta .wp-block-button__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ttd-block .ttd-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 8px;
}

.ttd-block.ttd-cta .wp-block-button.ttd-btn .wp-block-button__link {
    padding: 15px 30px;
}

/* Nut goi dang chu trang co bieu tuong (block Button class ttd-tel ttd-nut-goi) */
.ttd-block .wp-block-button.ttd-tel .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
}

.ttd-block .wp-block-button.ttd-tel .wp-block-button__link:hover,
.ttd-block .wp-block-button.ttd-tel .wp-block-button__link:focus {
    background: transparent;
    color: #fff;
    text-decoration: underline;
}

.ttd-block .wp-block-button.ttd-tel .wp-block-button__link::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--ttd-i-dien-thoai) center / contain no-repeat;
    mask: var(--ttd-i-dien-thoai) center / contain no-repeat;
}

/* ---------- 6. Dich vu ---------- */
.ttd-block .ttd-svc-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.ttd-block .ttd-svc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 18px;
    border-radius: 14px;
    background: var(--ttd-cream);
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ttd-block .ttd-svc:hover {
    box-shadow: 0 12px 28px rgba(18, 41, 74, 0.10);
    transform: translateY(-2px);
}

.ttd-block .ttd-svc:focus-within {
    outline: 2px solid var(--ttd-accent);
    outline-offset: 2px;
}

.ttd-block .ttd-svc::before {
    content: "";
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: var(--ttd-primary);
    -webkit-mask: var(--ttd-ico) center / contain no-repeat;
    mask: var(--ttd-ico) center / contain no-repeat;
}

.ttd-block .ttd-svc p {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ttd-text);
}

/* ---------- 8. Phan hoi quy khach (content/khoi-phan-hoi.html, chua chen vao trang) ---------- */
.ttd-block .ttd-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ttd-block .ttd-quote {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--ttd-line-soft);
    border-radius: 14px;
    background: #fff;
}

.ttd-block .ttd-quote-noi-dung {
    font-size: 14.5px;
    font-style: italic;
    line-height: 1.7;
    color: var(--ttd-muted);
}

.ttd-block .ttd-quote-ten {
    font-size: 14px;
    font-weight: 700;
    color: var(--ttd-primary);
}

.ttd-block .ttd-quote-dich-vu {
    font-size: 13px;
    color: var(--ttd-muted-2);
}

.ttd-block .ttd-gallery-title {
    margin: 48px 0 20px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--ttd-primary);
}

.ttd-block .ttd-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ttd-block .ttd-gallery .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
}

/* ---------- 9. Quy trinh 5 buoc ---------- */
.ttd-block .ttd-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    counter-reset: ttd-buoc;
}

.ttd-block .ttd-step {
    padding: 26px 20px;
    border: 1px solid var(--ttd-line-soft);
    border-radius: 14px;
    background: #fff;
}

.ttd-block .ttd-step::before {
    counter-increment: ttd-buoc;
    content: counter(ttd-buoc);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--ttd-primary);
    color: #fff;
    font-family: var(--ttd-font-tieu-de);
    font-weight: 700;
}

.ttd-block .ttd-step h3 {
    margin-bottom: 6px;
    font-family: var(--ttd-font-noi-dung);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ttd-primary);
}

.ttd-block .ttd-step p {
    font-size: 14px;
    color: var(--ttd-muted);
}

/* ---------- 10. Dang ky tu van ---------- */
.ttd-block.ttd-contact .ttd-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

/* Chua gan form thi khung form an, phan thong tin chiem ca dong */
.ttd-block.ttd-contact .ttd-wrap:not(:has(.ttd-form)) {
    grid-template-columns: minmax(0, 720px);
}

.ttd-block .ttd-contact-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.ttd-block .ttd-contact-info .ttd-mo-ta {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ttd-muted);
}

.ttd-block .ttd-info-row {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    color: var(--ttd-muted);
}

.ttd-block .ttd-info-row .ttd-nhan {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ttd-text);
}

.ttd-block .ttd-info-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 22px;
    font-weight: 700;
    color: var(--ttd-primary);
    text-decoration: none;
}

.ttd-block .ttd-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 28px;
    border: 1px solid var(--ttd-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(18, 41, 74, 0.07);
}

.ttd-block .ttd-form h3 {
    font-family: var(--ttd-font-tieu-de);
    font-size: 20px;
    font-weight: 700;
    color: var(--ttd-primary);
}

/* Fluent Forms: o nhap co chu 16px de iPhone khong tu phong to */
.ttd-block .ttd-form :is(input, select, textarea) {
    width: 100%;
    min-height: 46px;
    font-family: inherit;
    font-size: 16px;
}

.ttd-block .ttd-form :is(input, select, textarea):focus {
    outline: 2px solid var(--ttd-accent);
    outline-offset: 1px;
}

.ttd-block .ttd-form :is(input[type="checkbox"], input[type="radio"]) {
    width: auto;
    min-height: 0;
}

.ttd-block .ttd-form .ff-btn-submit {
    min-height: 48px;
}

/* ===================== RESPONSIVE ===================== */

/* Laptop nho 1024-1259 (menu Kadence chuyen thanh nut 3 gach o moc nay) */
@media (max-width: 1259px) {
    .ttd-block .ttd-wrap {
        padding-left: 40px;
        padding-right: 40px;
    }

    .ttd-block.ttd-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .ttd-block .ttd-hero-inner {
        gap: 48px;
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .ttd-block .ttd-h1 {
        font-size: 40px;
    }

    .ttd-block .ttd-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ttd-block.ttd-trust .ttd-wrap,
    .ttd-block .ttd-steps,
    .ttd-block .ttd-svc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* May tinh bang 768-1023: hero, ve chung toi, dang ky xep mot cot */
@media (max-width: 1023px) {
    .ttd-block .ttd-hero-inner,
    .ttd-block.ttd-about .ttd-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
    }

    .ttd-block .wp-block-image.ttd-photo {
        flex: none;
        width: 100%;
    }

    .ttd-block.ttd-about .ttd-photo {
        order: 2;
    }

    .ttd-block .ttd-lead {
        max-width: none;
    }

    .ttd-block.ttd-contact .ttd-wrap,
    .ttd-block.ttd-contact .ttd-wrap:not(:has(.ttd-form)) {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .ttd-block .ttd-grid-3 {
        grid-template-columns: minmax(0, 1fr);
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .ttd-block .ttd-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Dien thoai < 768: moi khoi mot cot, nut rong het dong */
@media (max-width: 767px) {
    .ttd-block .ttd-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ttd-block.ttd-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .ttd-block .ttd-hero-inner {
        gap: 32px;
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .ttd-block .ttd-h1 {
        font-size: 32px;
        line-height: 1.28;
    }

    .ttd-block .ttd-lead {
        font-size: 16px;
    }

    .ttd-block .ttd-h2 {
        font-size: 26px;
    }

    .ttd-block .ttd-head {
        margin-bottom: 36px;
    }

    .ttd-block .ttd-actions,
    .ttd-block .ttd-cta-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .ttd-block .ttd-cta-actions {
        gap: 14px;
    }

    .ttd-block .ttd-actions .wp-block-button,
    .ttd-block .ttd-cta-actions .wp-block-button,
    .ttd-block .ttd-actions .wp-block-button__link,
    .ttd-block .ttd-cta-actions .wp-block-button__link {
        width: 100%;
    }

    .ttd-block .ttd-ticks {
        gap: 10px 20px;
    }

    .ttd-block.ttd-trust .ttd-wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .ttd-block .ttd-grid-4,
    .ttd-block .ttd-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .ttd-block .ttd-svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .ttd-block.ttd-cta .ttd-wrap {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .ttd-block.ttd-cta h2 {
        font-size: 24px;
    }

    .ttd-block .ttd-gallery {
        gap: 12px;
    }

    .ttd-block .ttd-form {
        padding: 22px 18px;
    }

    .ttd-block .ttd-form .ff-btn-submit {
        width: 100%;
    }
}

@media (max-width: 479px) {
    .ttd-block .ttd-h1 {
        font-size: 29px;
    }

    .ttd-block .ttd-h2 {
        font-size: 24px;
    }

    .ttd-block .ttd-svc {
        padding: 20px 12px;
    }
}

@media (max-width: 359px) {
    .ttd-block .ttd-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ttd-block .ttd-card,
    .ttd-block .ttd-svc {
        transition: none;
    }

    .ttd-block .ttd-card:hover,
    .ttd-block .ttd-svc:hover {
        transform: none;
    }
}