/* ===================================================
   TRANG CON - Styles chung cho nuoc, hikari, clinic, restaurant
   =================================================== */

/* BREADCRUMB */
.breadcrumb{position:fixed;top:0;left:0;right:0;z-index:1001;padding:8px 5%;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.04);display:flex;align-items:center;gap:8px;font-family:var(--ff-h);font-size:var(--fs-xs,.68rem);letter-spacing:1.5px;text-transform:uppercase;box-shadow:0 1px 8px rgba(0,0,0,.03)}
.breadcrumb a{color:var(--gold,#b08c20);font-weight:600;transition:color .3s;display:inline-flex;align-items:center;gap:6px}
.breadcrumb a:hover{color:var(--gold-d,#886a14)}
.breadcrumb a svg{width:12px;height:12px}
.breadcrumb .sep{color:var(--txt-l,#9a9aae);font-size:.5rem}
.breadcrumb .current{color:var(--txt-m,#64647a)}

/* Nav offset for breadcrumb */
.nav.has-breadcrumb{top:32px}
.nav.has-breadcrumb.scrolled{top:32px}

/* Sub-page common — wave divider */
.wave-divider{position:relative;height:clamp(40px,6vw,80px);overflow:hidden}
.wave-divider svg{position:absolute;bottom:0;width:100%;height:100%}

/* Sub-page common — section with max-width */
.sec-full{max-width:100%;padding-left:0;padding-right:0}

/* Sub-page common — stats bar (floating style) */
.sub-stats{border-radius:0;max-width:1200px;margin:-40px auto 0;position:relative;z-index:5;box-shadow:0 16px 50px rgba(0,0,0,.2)}

/* Sub-page common — about grid */
.about-img{position:relative;border-radius:0;overflow:hidden}
.about-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.about-img:hover img{transform:scale(1.04)}
.about-img .badge{position:absolute;top:16px;left:16px;z-index:2;background:white;border-radius:0;padding:14px 18px;box-shadow:0 4px 20px rgba(0,0,0,.06)}

/* Sub-page common — chips */
.about-chips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.chip{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:0;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);transition:all .4s cubic-bezier(.16,1,.3,1)}
.chip:hover{transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.chip svg{width:20px;height:20px;flex-shrink:0}
.chip span{font-size:.82rem;font-weight:600}

/* Sub-page common — quote */
.quote-sec{position:relative;padding:clamp(60px,10vw,100px) 5%;overflow:hidden}
.quote-sec::before{content:'"';position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-family:var(--ff-a,'Lora',Georgia,serif);font-size:clamp(12rem,25vw,22rem);color:rgba(0,0,0,.03);line-height:1;pointer-events:none}
.quote-inner{max-width:720px;margin:0 auto;text-align:center;position:relative;z-index:2}
.quote-inner blockquote{font-family:var(--ff-a,'Lora',Georgia,serif);font-size:clamp(1.1rem,2vw,1.6rem);font-style:italic;line-height:1.7;margin-bottom:20px}
.quote-inner cite{font-style:normal;font-family:var(--ff-h,'Be Vietnam Pro',sans-serif);font-size:.68rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase}
.quote-inner .q-line{width:40px;height:3px;margin:14px auto 0;border-radius:0}

/* Sub-page common — CTA section */
.cta-sec{text-align:center;position:relative;overflow:hidden;padding:clamp(70px,10vw,110px) 5%;color:white}
.cta-sec::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 60%);border-radius:50%}
.cta-inner{position:relative;z-index:1}
.cta-inner .cta-tag{font-size:.68rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:14px}
.cta-inner h2{font-family:var(--ff-h,'Be Vietnam Pro',sans-serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;margin-bottom:16px}
.cta-inner p{font-size:.9rem;opacity:.8;max-width:520px;margin:0 auto 32px;line-height:1.8}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Sub-page common — buttons */
.btn-white{display:inline-flex;align-items:center;gap:10px;padding:14px 38px;border-radius:0;background:white;font-family:var(--ff-h,'Be Vietnam Pro',sans-serif);font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;box-shadow:0 6px 25px rgba(0,0,0,.15);transition:all .4s}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.2)}
.btn-wire-w{display:inline-flex;align-items:center;gap:10px;padding:14px 38px;border-radius:0;background:transparent;border:1.5px solid rgba(255,255,255,.3);color:white;font-family:var(--ff-h,'Be Vietnam Pro',sans-serif);font-size:.75rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .4s}
.btn-wire-w:hover{border-color:white}

/* Sub-page common — demo tag */
.demo-tag{position:fixed;bottom:20px;right:20px;z-index:9999;background:white;border-radius:0;padding:9px 22px;font-family:var(--ff-h,'Be Vietnam Pro',sans-serif);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;box-shadow:0 4px 20px rgba(0,0,0,.06)}

/* NAV BRAND — Matching nav-info but for sub-pages */
.nav-brand{display:flex;flex-direction:column;justify-content:center}
.nav-brand .name{font-family:var(--ff-h);font-size:var(--fs-md);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;line-height:1.1;transition:color .3s}
.nav-brand .sub{font-family:var(--ff-a);font-size:var(--fs-xs);font-style:italic;color:var(--txt-m,#64647a);letter-spacing:1px;line-height:1.4;margin-top:2px}

/* ELEGANT FAQ ACCORDION - TOP TIER UI/UX */
.faq-grid {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.faq-item {
    background: var(--white);
    border-radius:0;
    border: 1px solid var(--brd);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.faq-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--gold);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 2;
}
.faq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    border-color: rgba(176,140,32,0.3);
}
.faq-item:hover::before {
    opacity: 1;
}
.faq-item details[open] {
    border-color: var(--gold-brd);
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}
.faq-item details[open]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--gold);
    opacity: 1;
    z-index: 2;
}
.faq-item details {
    width: 100%;
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px;
    gap: 20px;
    font-family: var(--ff-h);
    font-size: clamp(1rem, 2vw, 1.1rem);
    font-weight: 700;
    line-height: 1.55;
    color: var(--txt);
    cursor: pointer;
    list-style: none;
    transition: color 0.3s;
    position: relative;
    outline: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary:hover, .faq-item details[open] summary {
    color: var(--gold-d);
}
/* Premium icon morphing */
.faq-item summary::after {
    content: '';
    position: relative;
    width: 32px;
    height: 32px;
    border-radius:0;
    background: rgba(176,140,32,0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08c20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 14px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item details[open] summary::after {
    background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 14px;
    transform: rotate(180deg);
}
.faq-content {
    padding: 0 32px 26px;
    font-size: var(--fs-base);
    color: var(--txt-m);
    line-height: 1.85;
}
.faq-content p { margin: 0; }
.about-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;margin-top:56px}
.about-media{position:relative}
.about-main{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;box-shadow:var(--sh-l)}
.about-float{position:absolute;bottom:-24px;right:-24px;width:200px;height:150px;object-fit:cover;border-radius:0;border:4px solid var(--white);box-shadow:var(--sh-m)}
.about-badge{position:absolute;top:-16px;left:-16px;background:var(--white);border-radius:0;padding:18px 22px;box-shadow:var(--sh-m);border:1px solid var(--brd)}
.about-badge .yr{font-family:var(--ff-h);font-size:2.4rem;font-weight:800;color:var(--gold);line-height:1}
.about-badge .yt{font-size:var(--fs-xs);letter-spacing:2px;text-transform:uppercase;color:var(--txt-m)}
.about-text p{font-size:var(--fs-md);color:var(--txt-b);line-height:1.9;margin-bottom:16px}
.about-text p em{color:var(--gold);font-style:italic}
.about-vals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.v-card{padding:20px;background:var(--cream);border-radius:0;border:1px solid var(--brd);transition:all .4s var(--ease)}
.v-card:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:var(--gold-brd)}
.v-card svg{width:24px;height:24px;color:var(--gold);margin-bottom:8px}
.v-card h4{font-family:var(--ff-h);font-size:var(--fs-base);font-weight:700;color:var(--txt);margin-bottom:3px}
.v-card p{font-size:var(--fs-sm);color:var(--txt-m);line-height:1.5;margin:0}