/* ============================================================
   LKD HEALTH — Services. Giữ Y HỆT kết cấu trang Odoo cũ:
   CỤM 1 = title + 2 thanh(⊕) + đường kẻ + vòng tròn 6 node
   CỤM 2 = banner + chuỗi M→LKD→D + đường kẻ + advantages
   Chỉ làm đẹp hơn: font Fraunces, line icon, màu tiết chế.
   ============================================================ */

.svc-cluster {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #fff;
    text-align: center;
}
.svc-cluster-alt {
    background: #FAFBF8;
    border-top: 1px solid var(--color-gray-200);
}

/* ---- Title ---- */
.svc-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    letter-spacing: -0.02em;
    color: var(--color-gray-900);
    margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}

/* ---- 2 thanh nền tảng + dấu cộng ---- */
.bars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 2vw, 1.4rem);
    flex-wrap: nowrap;
    max-width: 920px;
    margin: 0 auto;
}
.bar {
    flex: 1;
    padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2.5vw, 2rem);
    border-radius: 999px;
    background: linear-gradient(135deg, #b5651d, var(--color-warm));
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    box-shadow: 0 14px 30px -14px rgba(153,79,28,0.6);
    line-height: 1.3;
}
.bar-plus {
    flex-shrink: 0;
    width: 44px; height: 44px;
    color: var(--color-warm);
}
.bar-plus svg { width: 100%; height: 100%; }

/* ---- đường kẻ nối ---- */
.connector {
    width: 2px;
    height: clamp(24px, 4vw, 40px);
    background: var(--color-warm);
    margin: 0 auto;
    opacity: 0.5;
}
.connector-dark { background: var(--color-primary); }

/* ---- Vòng liên kết khép kín (cycle) ---- */
.cycle {
    position: relative;
    width: 400px;
    height: 480px;
    max-width: 100%;
    margin: 0 auto;
}
.cycle-svg {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    max-width: 100%;
    z-index: 1;
}
.cycle-spokes line {
    stroke: var(--color-gray-200);
    stroke-width: 1.5;
    stroke-dasharray: 3 4;
}
.cycle-arcs path {
    stroke: var(--color-accent);
    stroke-width: 2;
    opacity: 0.55;
}
.cycle-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 132px; height: 132px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 12px rgba(148,184,58,0.10), 0 16px 40px -16px rgba(0,0,0,0.2);
    z-index: 3;
}
.cycle-hub img { width: 66%; height: 66%; object-fit: contain; }

.cycle-node {
    position: absolute;
    width: 140px;
    margin-left: -70px;
    text-align: center;
    z-index: 4;
}
.cyc-icon {
    width: 82px; height: 82px;
    margin: 0 auto 0.55rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 10px 28px -10px rgba(0,0,0,0.16);
    display: flex; align-items: center; justify-content: center;
    transition: all .4s cubic-bezier(.2,.8,.2,1);
}
.cyc-icon svg { width: 34px; height: 34px; }
.cycle-node span {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-gray-900);
    line-height: 1.3;
}
.cycle-node:hover .cyc-icon {
    transform: scale(1.08);
    border-color: var(--color-primary);
}
.cyc-top .cyc-icon svg, .cyc-bottom .cyc-icon svg { color: var(--color-primary); }
.cyc-right .cyc-icon svg, .cyc-left .cyc-icon svg { color: var(--color-warm); }

/* 4 node ở 4 hướng — căn icon-center vào đường tròn (tâm vòng ở y=240px trong khung 480) */
.cyc-top    { top: 62px;  left: 50%; }
.cyc-right  { top: 240px; left: 100%; margin-top: -52px; }
.cyc-bottom { top: 418px; left: 50%; margin-top: -82px; }
.cyc-left   { top: 240px; left: 0%;   margin-top: -52px; }

/* ---- Banner câu hỏi ---- */
.ex-banner {
    max-width: 720px;
    margin: 0 auto clamp(2rem,4vw,3rem);
    padding: clamp(1.2rem,2.5vw,1.8rem) clamp(1.8rem,4vw,3.5rem);
    border-radius: 16px;
    background: linear-gradient(135deg, #b5651d, var(--color-warm));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    box-shadow: 0 18px 40px -18px rgba(153,79,28,0.55);
}

/* ---- Chuỗi Manufacturer → LKD → Distributor ---- */
.chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1.6rem);
    flex-wrap: nowrap;
}
.chain-step { display: flex; flex-direction: column-reverse; align-items: center; gap: 0.8rem; }
.chain-cap {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.cap-warm { color: var(--color-warm); }
.cap-accent { color: var(--color-accent); }
.cap-primary { color: var(--color-primary); }
.chain-circle {
    width: clamp(78px, 12vw, 104px);
    height: clamp(78px, 12vw, 104px);
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-gray-200);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-gray-600);
    box-shadow: 0 12px 30px -14px rgba(0,0,0,0.2);
}
.chain-circle svg { width: 40%; height: 40%; }
.chain-circle-lkd {
    border: 2px solid var(--color-warm);
    box-shadow: 0 14px 34px -12px rgba(153,79,28,0.45);
}
.chain-circle-lkd img { width: 60%; height: 60%; object-fit: contain; }
.chain-arrow { color: var(--color-gray-300); display: flex; }
.chain-arrow svg { width: 26px; height: 26px; }

/* ---- Advantages ---- */
.adv-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--color-primary);
    margin-bottom: clamp(2rem,4vw,3rem);
}
.adv-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    text-align: left;
}
.adv-card {
    padding: clamp(1.8rem, 3vw, 2.4rem);
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    box-shadow: 0 20px 46px -32px rgba(0,0,0,0.25);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.adv-card:hover { transform: translateY(-5px); }
.adv-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(30,95,142,0.07);
    color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-5);
}
.adv-icon svg { width: 28px; height: 28px; }
.adv-card:nth-child(2) .adv-icon { background: rgba(148,184,58,0.12); color: var(--color-accent); }
.adv-card:nth-child(3) .adv-icon { background: rgba(153,79,28,0.08); color: var(--color-warm); }
.adv-card h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--color-gray-900);
    margin-bottom: var(--space-3);
}
.adv-card p { color: var(--color-gray-600); line-height: 1.65; font-size: 0.95rem; }

/* =================== RESPONSIVE =================== */
@media (max-width: 820px) {
    .cycle { width: 360px; height: 360px; }
    .cycle-hub { width: 108px; height: 108px; }
    .cycle-node { width: 116px; margin-left: -58px; }
    .cyc-right, .cyc-left { margin-top: -44px; }
    .cyc-icon { width: 64px; height: 64px; }
    .cyc-icon svg { width: 26px; height: 26px; }
    .cycle-node span { font-size: 0.8rem; }
    .adv-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .bars { flex-direction: column; }
    .bar { width: 100%; }
    /* cycle -> danh sách dọc */
    .cycle { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
    .cycle-svg { display: none; }
    .cycle-hub { position: static; transform: none; width: 120px; height: 120px; margin-bottom: var(--space-3); }
    .cycle-node {
        position: static !important; top: auto !important; left: auto !important;
        margin: 0 !important; width: 100%; max-width: 320px;
        display: flex; align-items: center; gap: var(--space-4); text-align: left;
    }
    .cyc-icon { margin: 0; flex-shrink: 0; width: 56px; height: 56px; }
    .cyc-icon svg { width: 24px; height: 24px; }
    .chain { flex-direction: column; }
    .chain-arrow { transform: rotate(90deg); }
}

/* LKD ở giữa chuỗi — nhấn nhẹ */
.chain-step-mid .chain-circle-lkd { transform: scale(1.08); }

/* ============================================================
   CONTACT PAGE — form + info card (editorial)
   ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.contact-form-wrap {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: 16px;
    padding: clamp(1.8rem, 4vw, 3rem);
    box-shadow: 0 24px 60px -40px rgba(0,0,0,0.3);
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1 / -1; }
.form-group label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}
.form-group .required { color: var(--color-warm); margin-left: 2px; }
.form-group input,
.form-group textarea {
    font-family: var(--font-body);
    font-size: 0.97rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    background: #FAFBF8;
    color: var(--color-gray-900);
    transition: all .25s ease;
    width: 100%;
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30,95,142,0.10);
}
.form-submit { margin-top: var(--space-6); }

/* Info card */
.contact-info-card {
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(148,184,58,0.16), transparent 55%),
        #15243B;
    color: #fff;
    border-radius: 16px;
    padding: clamp(1.8rem, 4vw, 2.5rem);
}
.contact-info-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.contact-info-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-bottom: var(--space-5);
}
.contact-info-item .icon-wrap {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent);
}
.contact-info-item .icon-wrap svg { width: 20px; height: 20px; }
.info-label {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.2rem;
}
.info-value { font-size: 1rem; color: #fff; }
.info-value a { color: #fff; }
.info-value a:hover { color: var(--color-accent); }

@media (max-width: 760px) {
    .contact-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
}

/* ===== svc-hero (Contact / News / Distributor / Services hero) ===== */
.svc-hero {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2rem, 4vw, 3.5rem);
    background:
        radial-gradient(110% 90% at 90% 0%, rgba(30,95,142,0.08), transparent 55%),
        linear-gradient(180deg, #fff, #FAFBF8);
}
.svc-hero h1.display {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.05;
    max-width: 16em;
}
.svc-hero-lead {
    margin-top: var(--space-5);
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--color-gray-600);
    max-width: 34em;
}
/* info-content trong contact info card */
.info-content { display: flex; flex-direction: column; }