/* ===============================
   COMMON – KD Design
   =============================== */

:root {
    --accent: #e04444;

    /* Layout */
    --maxw:   1180px;
    --gap:    26px;

    /* Nav */
    --nav-h:  88px;
    --pad-x:  26px;
    --pad-x-m:14px;

    /* Nav text — tên rõ nghĩa: chữ dùng trên nền nào */
    --text-on-dark:  rgba(255,255,255,.92);
    --text-on-light: rgba(0,0,0,.82);

    /* Effects */
    --shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* ===============================
   RESET
   =============================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #fff;
    overflow-x: hidden;
}

/* ===============================
   NAV
   =============================== */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    padding: 0 var(--pad-x);
    z-index: 50;
    pointer-events: none;

    /* Transition áp dụng cho toàn nav kể cả color kế thừa */
    transition: color .25s ease;
}

.nav__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    pointer-events: auto;
}

/* --- Brand --- */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.brand__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand__img {
    padding-left: 6px;
    height: 2em;
    width: auto;
    display: block;
    object-fit: contain;
    transition: filter .35s ease;
}

/* --- Menu --- */
.menu {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 24px;
}

.menu a {
    color: inherit;           /* lấy màu từ .nav.theme-* */
    text-decoration: none;
    padding: 8px 6px;
    position: relative;
    white-space: nowrap;
    letter-spacing: .04em;
    transition: color .35s ease, opacity .35s ease;
}

.menu a:hover { opacity: .7; }

.menu a.active::after {
    content: "";
    position: absolute;
    left: 6px; right: 6px; bottom: 2px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

/* --- Theme classes (set bởi JS) --- */
.nav.theme-dark {
    color: var(--text-on-dark);
}
.nav.theme-light {
    color: var(--text-on-light);
}

/* ===============================
   HERO
   =============================== */
.hero {
    min-height: 100vh;
    background: #000;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.01);
}

.hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            rgba(0,0,0,.35)  0%,
            rgba(0,0,0,.12) 55%,
            rgba(0,0,0,.38) 100%
    );
}

.hero__content {
    position: relative;
    min-height: 100vh;
    padding: calc(var(--nav-h) + 18px) var(--pad-x) 28px;
    display: flex;
    align-items: flex-end;
}

.hero__content .wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
}

.hero__title {
    font-size: clamp(18px, 2.4vw, 28px);
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(255,255,255,.78);
    margin: 0 0 10px;
}

.hero__sub {
    font-size: clamp(13px, 1.6vw, 16px);
    color: rgba(255,255,255,.72);
    margin: 0;
    max-width: 720px;
}

/* ===============================
   PLAIN SECTION (nền sáng)
   =============================== */
.plain {
    background: #fff;
    color: #111;
    min-height: 100vh;
    padding: calc(var(--nav-h) + 34px) var(--pad-x) 44px;
}

.plain .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
}

.section-title {
    margin: 0 0 22px;
    font-size: 20px;
    font-weight: 600;
    color: var(--accent);
}

/* ===============================
   SPECIALTY GRID
   =============================== */
.specialty {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.spec-card { text-align: center; }

.spec-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #ddd;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.spec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spec-name {
    margin: 10px 0 0;
    font-size: 14px;
    color: rgba(0,0,0,.75);
}

/* ===============================
   HOVER ZOOM
   =============================== */
.spec-thumb img,
.p-thumb img {
    transition: transform .6s ease, filter .6s ease;
    will-change: transform;
}

.spec-card:hover .spec-thumb img,
.p-card:hover .p-thumb img {
    transform: scale(1.08);
    filter: brightness(.92);
}

.spec-card,
.p-card { cursor: pointer; }

.spec-card:hover .spec-name,
.p-card:hover .p-title { color: var(--accent); }

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 1024px) {
    .menu { font-size: 15px; gap: 20px; }
}

@media (max-width: 980px) {
    .specialty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    :root { --nav-h: 72px; }

    .nav  { padding: 0 var(--pad-x-m); }
    .menu { font-size: 14px; gap: 14px; }

    .hero__content { padding-inline: var(--pad-x-m); }
    .plain         { padding-inline: var(--pad-x-m); }
}

@media (max-width: 520px) {
    .specialty { grid-template-columns: 1fr; }
}