/* STEP 19 Rev.02 — approved public/member UI */

.km-public-brand-logo{
  width:34px;height:34px;object-fit:contain;border-radius:9px;background:#fff;padding:2px;
}
.km-public-hospital-hero{
  position:relative;min-height:230px;overflow:hidden;border-radius:20px;
  margin-bottom:22px;background:#0b3d5a;box-shadow:0 14px 36px rgba(16,58,90,.14);
}
.km-public-hospital-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.km-public-hospital-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,47,72,.82),rgba(8,91,74,.56) 55%,rgba(5,45,63,.18));
}
.km-public-hospital-content{
  position:relative;z-index:1;display:flex;align-items:end;min-height:230px;padding:30px;
  color:#fff;
}
.km-public-hospital-brand{display:flex;align-items:center;gap:18px;max-width:820px}
.km-public-hospital-logo{
  width:72px;height:72px;object-fit:contain;background:rgba(255,255,255,.96);
  border-radius:18px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.km-public-hospital-kicker{font-size:.78rem;letter-spacing:.08em;font-weight:700;color:#bcebdc}
.km-public-hospital-brand h1{font-size:clamp(1.35rem,2.8vw,2.25rem);margin:.25rem 0 .35rem;font-weight:700}
.km-public-hospital-brand p{margin:0;color:#e8f6f2;font-size:.95rem}

.km-discovery-item-tags .km-category-tag,
.km-discovery-item-tags .km-category-sub{
  font-size:.82rem;font-weight:700;padding:.4rem .68rem;border-radius:999px;
}
.km-discovery-item-tags .km-category-tag{background:#dff5ec;color:#066f54}
.km-discovery-item-tags .km-category-sub{background:#eef7ff;color:#245b7b}
.km-public-new-inline{
  display:inline-flex;align-items:center;vertical-align:middle;margin-left:.42rem;
  padding:.15rem .42rem;border-radius:999px;font-size:.62rem;line-height:1.2;
  background:#dc3545;color:#fff;font-weight:700;letter-spacing:.02em;
}

.km-public-detail-main{position:relative;padding-top:4rem!important}
.km-public-detail-status{position:absolute;top:20px;right:20px}
.km-public-detail-category .km-category-tag,
.km-public-detail-category .km-category-sub{
  font-size:.88rem;font-weight:700;padding:.42rem .72rem;border-radius:999px;
}
.km-public-media-gallery{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.km-public-media-visual{
  margin:0;border:1px solid #dbeae6;border-radius:14px;overflow:hidden;background:#f8fcfb;
}
.km-public-media-visual img,
.km-public-media-visual video{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#0f2430;
}
.km-public-media-visual figcaption{
  display:flex;justify-content:space-between;gap:10px;padding:10px 12px;
  color:#61757f;font-size:.76rem;
}
.km-public-pdf-row{grid-column:1/-1}
.km-public-side-metrics{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.km-public-side-metrics>span{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;
  align-items:center;padding:10px;border-radius:12px;background:#f3faf7;border:1px solid #e0eee9;
}
.km-public-side-metrics i{grid-row:1/3;color:#0b9b70}
.km-public-side-metrics strong{color:#103a5a;font-size:1rem}
.km-public-side-metrics small{color:#7a8e95;font-size:.68rem}
.km-public-rating-buttons{display:flex;gap:5px;flex-wrap:wrap}

.km-member-auth-shell{display:grid;place-items:center;min-height:calc(100vh - 190px);padding:24px}
.km-member-auth-card{
  width:min(100%,520px);padding:34px;background:#fff;border:1px solid #dcebe6;
  border-radius:20px;box-shadow:0 18px 46px rgba(17,64,75,.11);
}
.km-member-auth-logo{width:68px;height:68px;object-fit:contain;margin-bottom:14px}
.km-member-auth-kicker{display:block;color:#0b8c69;font-size:.76rem;font-weight:700;letter-spacing:.06em}
.km-member-auth-card h1{color:#103a5a;font-size:1.55rem;margin:.4rem 0 .7rem}
.km-member-auth-card>p{color:#6f838d}
.km-member-auth-note{
  display:flex;gap:9px;padding:12px;margin-top:16px;border-radius:12px;
  background:#f1faf7;color:#52736a;font-size:.78rem;
}

/* STEP 19 — Public member login */
.km-member-login-shell{
  min-height:calc(100svh - 54px);
  padding:clamp(28px,6vh,72px) 20px;
  background:
    radial-gradient(circle at 15% 18%,rgba(25,184,141,.10),transparent 30%),
    radial-gradient(circle at 88% 80%,rgba(32,88,151,.08),transparent 28%),
    #f7fbfa;
}
.km-member-login-card{
  width:min(100%,540px);
  padding:30px 34px 26px;
}
.km-member-auth-brand{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  margin-bottom:24px;
  text-decoration:none;
}
.km-member-auth-km-logo{
  display:block;
  width:auto;
  height:64px;
  max-width:min(310px,100%);
  object-fit:contain;
  object-position:left center;
}
.km-member-auth-heading h1{
  margin:0;
  color:#103a5a;
  font-size:clamp(1.55rem,3vw,1.9rem);
  font-weight:700;
}
.km-member-auth-methods{
  display:grid;
  gap:12px;
  margin-top:22px;
}
.km-member-auth-method{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:58px;
  padding:8px 16px 8px 10px;
  border:1px solid #bfe3d8;
  border-radius:14px;
  background:#0b8c69;
  color:#fff;
  text-align:left;
  font-weight:600;
  box-shadow:0 8px 20px rgba(11,140,105,.12);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.km-member-auth-method:hover:not(:disabled){
  background:#08795c;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(11,140,105,.18);
}
.km-member-auth-method:focus-visible{
  outline:3px solid rgba(11,140,105,.22);
  outline-offset:3px;
}
.km-member-auth-method-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:11px;
  background:rgba(255,255,255,.16);
  font-size:1.3rem;
}
.km-member-auth-method-label{font-size:1rem}
.km-member-auth-method-arrow{font-size:1rem;opacity:.86}
.km-member-auth-provider{
  background:#1767a6;
  border-color:#bdd4e8;
  box-shadow:0 8px 20px rgba(23,103,166,.11);
}
.km-member-auth-method:disabled{
  cursor:not-allowed;
  opacity:.58;
}
.km-member-auth-note{
  align-items:flex-start;
  margin-top:18px;
  line-height:1.55;
}
.km-member-auth-note i{
  flex:0 0 auto;
  margin-top:1px;
  color:#0b8c69;
  font-size:1rem;
}
.km-member-auth-footer-links{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #e6efec;
}
.km-member-auth-footer-link{
  color:#0b7f62;
  font-size:.86rem;
  font-weight:600;
  text-decoration:none;
}
.km-member-auth-footer-link:hover{
  color:#075d49;
  text-decoration:underline;
  text-underline-offset:3px;
}
.km-member-auth-other-login{
  margin-left:auto;
  color:#5c7080;
  text-align:right;
}
.km-member-auth-footer-link.is-disabled{
  color:#9aa9af;
  cursor:default;
  text-decoration:none;
}

@media(max-width:575.98px){
  .km-member-login-shell{
    min-height:calc(100svh - 48px);
    padding:20px 14px;
  }
  .km-member-login-card{
    padding:24px 20px 22px;
    border-radius:18px;
  }
  .km-member-auth-brand{margin-bottom:20px}
  .km-member-auth-km-logo{
    height:54px;
    max-width:min(275px,100%);
  }
  .km-member-auth-methods{margin-top:22px}
  .km-member-auth-method{
    min-height:56px;
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:10px;
    padding-right:13px;
  }
  .km-member-auth-method-icon{width:40px;height:40px}
  .km-member-auth-footer-links{
    gap:12px;
  }
  .km-member-auth-footer-link{font-size:.8rem}
}
.km-member-thaid-name{
  display:flex;align-items:center;gap:8px;padding:12px;margin:16px 0;
  background:#eef9f5;border-radius:12px;color:#0b7259;font-weight:600;
}

@media(max-width:767.98px){
  .km-public-hospital-content{padding:20px;align-items:end}
  .km-public-hospital-brand{align-items:flex-start}
  .km-public-hospital-logo{width:54px;height:54px;border-radius:14px}
  .km-public-media-gallery{grid-template-columns:1fr}
  .km-public-pdf-row{grid-column:auto}
}
/* =========================================================
   NRH KM PUBLIC HOME
   Visual contract: STEP 19 approved mockup
   ========================================================= */


/* ---------- Public Topbar ---------- */
.nrh-public-topbar {
    width: 100%;
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 34px;

    background: rgba(255, 255, 255, 0.98);

    border-bottom: 1px solid #dcebe6;

    position: relative;
    z-index: 50;
}

.nrh-public-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #103a5a;
    text-decoration: none;
}

.nrh-public-brand:hover {
    color: #103a5a;
}

.nrh-public-brand-logo {
    width: 54px;
    height: 54px;

    object-fit: contain;
}

.nrh-public-brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1.12;
}

.nrh-public-brand-text strong {
    font-size: 1.35rem;
    font-weight: 700;

    color: #103a5a;
}

.nrh-public-brand-text > span {
    font-size: 0.78rem;
    font-weight: 600;

    color: #158a70;
}

.nrh-public-brand-text small {
    margin-top: 2px;

    font-size: 0.7rem;
    color: #657d87;
}

.nrh-public-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 132px;
    min-height: 42px;

    padding: 9px 20px;

    border-radius: 999px;

    background: #073b65;
    border: 1px solid #073b65;

    color: #ffffff;

    font-weight: 600;

    box-shadow: 0 6px 16px rgba(7, 59, 101, 0.16);
}

.nrh-public-login-btn:hover,
.nrh-public-login-btn:focus {
    background: #0b527f;
    border-color: #0b527f;
    color: #ffffff;
}

.nrh-public-km-logo {
    display: block;

    width: auto;
    height: 68px;

    max-width: min(380px, 58vw);

    object-fit: contain;
}

/* ---------- Public Page ---------- */

.km-content-shell:is(.km-guest,.km-public-home-surface) .km-main {
    padding-top: 0;
}

.km-discovery-page {
    max-width: 1380px;

    margin: 0 auto;

    padding: 22px 28px 48px;
}

/* =========================================================
   NRH PUBLIC HERO
   Hospital background + slogan + healthcare team
   ========================================================= */

.km-content-shell:is(.km-guest,.km-public-home-surface) > .km-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.km-content-shell:is(.km-guest,.km-public-home-surface) .km-discovery-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   HERO
   ========================================================= */

:is(.km-guest,.km-public-home-surface) .nrh-public-hero {
    position: relative;

    width: 100vw;
    min-height: 450px;

    margin-top: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 28px;

    overflow: hidden;

    border-radius: 0;

    background: #eefaf6;
}


/* Hospital background */
:is(.km-guest,.km-public-home-surface) .nrh-public-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 1;
}


/* White / Mint overlay */
:is(.km-guest,.km-public-home-surface) .nrh-public-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(250, 255, 253, 0.98) 0%,
            rgba(248, 255, 252, 0.94) 25%,
            rgba(241, 253, 248, 0.72) 47%,
            rgba(238, 251, 247, 0.30) 70%,
            rgba(238, 251, 247, 0.12) 100%
        );
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

:is(.km-guest,.km-public-home-surface) .nrh-public-hero-content {
    position: relative;
    z-index: 3;

    width: min(1380px, calc(100% - 80px));
    min-height: 450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(420px, 620px)
        minmax(360px, 520px);

    justify-content: center;
    align-items: center;

    column-gap: 0;
}


/* =========================================================
   LEFT : SLOGAN
   ========================================================= */

:is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy {
    position: relative;
    z-index: 4;

    max-width: 620px;

    padding: 46px 0 52px;

    /* ขยับ slogan ไปทางซ้าย */
    transform: translateX(-180px);
}


:is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy h1 {
    margin: 0 0 20px;

    color: #123f84;

    font-size: clamp(2.65rem, 4vw, 4.4rem);
    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -0.03em;
}


:is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy h1 span {
    display: block;

    margin-top: 4px;

    color: #07977e;
}


:is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy p {
    max-width: 610px;

    margin: 0;

    color: #24456c;

    font-size: clamp(1rem, 1.2vw, 1.24rem);
    font-weight: 400;

    line-height: 1.75;
}


/* =========================================================
   RIGHT : 3D HEALTHCARE TEAM
   ========================================================= */

:is(.km-guest,.km-public-home-surface) .nrh-public-hero-team {
    position: relative;
    z-index: 4;

    align-self: end;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    min-width: 0;
    height: 100%;

    /*
       ดึงทีมเข้าหา slogan
       ค่ายิ่งติดลบ = ยิ่งขยับซ้าย
    */
    transform: translateX(-220px);
}


:is(.km-guest,.km-public-home-surface) .nrh-public-hero-team-image {
    display: block;

    /*
       ขนาด Desktop
       เปลี่ยนตรงนี้ถ้าต้องการเล็ก/ใหญ่
    */
    width: 520px;
    max-width: 520px;

    height: auto;
    max-height: none;

    object-fit: contain;
    object-position: center bottom;

    margin: 0 0 -4px 0;

    filter:
        drop-shadow(
            0 14px 22px
            rgba(21, 83, 74, 0.12)
        );
}


/* =========================================================
   DECORATIVE MINT
   ========================================================= */

:is(.km-guest,.km-public-home-surface) .nrh-public-hero::before {
    content: "";

    position: absolute;

    left: -80px;
    bottom: -125px;

    width: 560px;
    height: 260px;

    z-index: 2;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(111, 214, 181, 0.38) 0%,
            rgba(126, 223, 193, 0.14) 56%,
            rgba(126, 223, 193, 0) 74%
        );

    pointer-events: none;
}


:is(.km-guest,.km-public-home-surface) .nrh-public-hero::after {
    content: "";

    position: absolute;

    right: -100px;
    bottom: -110px;

    width: 480px;
    height: 230px;

    z-index: 2;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(93, 205, 170, 0.26) 0%,
            rgba(116, 219, 187, 0.10) 58%,
            rgba(116, 219, 187, 0) 76%
        );

    pointer-events: none;
}


/* =========================================================
   TABLET LANDSCAPE
   Desktop >= 1200px is intentionally left untouched.
   ========================================================= */

@media (max-width: 1199.98px) {

    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-content {
        width: min(1080px, calc(100% - 56px));

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(300px, 0.85fr);

        column-gap: 16px;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy {
        /* Desktop uses -180px. Tablet must stay inside the viewport. */
        transform: translateX(-20px);

        padding: 40px 0 44px;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-team {
        transform: translateX(-20px);
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-team-image {
        width: min(38vw, 400px);
        max-width: 400px;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy h1 {
        font-size: clamp(2.35rem, 4vw, 3.3rem);
    }

}


/* =========================================================
   TABLET PORTRAIT
   Keep a compact 2-column composition instead of making the
   hero excessively tall on iPad-sized screens.
   ========================================================= */

@media (max-width: 991.98px) {

    :is(.km-guest,.km-public-home-surface) .nrh-public-hero {
        min-height: 390px;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-content {
        width: calc(100% - 40px);
        min-height: 390px;

        grid-template-columns:
            minmax(0, 1.14fr)
            minmax(240px, 0.86fr);

        align-items: center;
        column-gap: 0;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy {
        max-width: 460px;

        padding: 34px 0;

        /* Critical: cancel the desktop -180px shift. */
        transform: none;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy h1 {
        font-size: clamp(2.15rem, 5vw, 3rem);
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy p {
        font-size: 0.98rem;
        line-height: 1.65;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-team {
        align-self: end;
        height: 100%;

        /* Keep the team visually attached to the slogan on tablet. */
        justify-content: flex-start;

        transform: translateX(-12px);
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-team-image {
        width: min(36vw, 320px);
        max-width: 320px;

        margin: 0 0 -3px 0;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(250, 255, 253, 0.98) 0%,
                rgba(247, 255, 251, 0.94) 48%,
                rgba(238, 251, 247, 0.58) 100%
            );
    }

}


/* =========================================================
   MOBILE / SMALL TABLET
   Stack only when the viewport is actually too narrow for
   the 2-column tablet composition.
   ========================================================= */

@media (max-width: 767.98px) {

    :is(.km-guest,.km-public-home-surface) .nrh-public-hero {
        min-height: auto;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-content {
        width: calc(100% - 32px);
        min-height: auto;

        grid-template-columns: 1fr;
        gap: 0;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy {
        max-width: none;

        padding: 32px 0 8px;

        transform: none;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy h1 {
        font-size: clamp(2.2rem, 7vw, 3.1rem);
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-team {
        height: auto;

        justify-content: center;

        transform: none;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-team-image {
        width: min(72%, 370px);
        max-width: 370px;

        margin: 0 auto -3px;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(250, 255, 253, 0.98) 0%,
                rgba(247, 255, 251, 0.93) 48%,
                rgba(238, 251, 247, 0.68) 100%
            );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    :is(.km-guest,.km-public-home-surface) .nrh-public-hero {
        margin-bottom: 20px;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-content {
        width: calc(100% - 24px);
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy {
        padding: 26px 0 4px;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy h1 {
        margin-bottom: 12px;

        font-size: clamp(1.85rem, 9vw, 2.45rem);

        line-height: 1.08;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-copy p {
        font-size: 0.90rem;

        line-height: 1.6;
    }


    :is(.km-guest,.km-public-home-surface) .nrh-public-hero-team-image {
        width: min(84%, 320px);
        max-width: 320px;
    }

}

html,
body {
    overflow-x: clip;
}

/* ---------- Search Card ---------- */

.km-discovery-panel {
    padding: 26px 28px;

    margin-bottom: 24px;

    border-radius: 22px;

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid #dcece7;

    box-shadow:
        0 12px 32px rgba(37, 96, 87, 0.09);
}

.km-search-primary-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(250px, 340px);

    gap: 18px;
}

.km-search-label {
    display: block;

    margin-bottom: 8px;

    font-size: 0.83rem;

    font-weight: 600;

    color: #103a5a;
}

.km-search-box {
    display: flex;
    align-items: center;

    min-height: 48px;

    padding-left: 15px;

    border: 1px solid #d3e5df;

    border-radius: 14px;

    background: #ffffff;

    overflow: hidden;
}

.km-search-box > i {
    color: #148d72;

    font-size: 1.1rem;
}

.km-search-box input {
    flex: 1;

    min-width: 0;

    border: 0;
    outline: 0;

    padding: 11px 12px;

    background: transparent;

    color: #27434c;
}

.km-search-box .btn {
    min-height: 48px;

    padding-left: 24px;
    padding-right: 24px;

    border-radius: 12px;

    background: #073b65;
    border-color: #073b65;
}

.km-department-select {
    min-height: 48px;

    border-radius: 14px;

    border-color: #d3e5df;
}

/* ---------- Category ---------- */

.km-category-filter {
    margin-top: 18px;
}

.km-chip-row {
    gap: 9px;
}

.km-choice-chip {
    min-height: 38px;

    padding: 8px 15px;

    border-radius: 999px;

    border: 1px solid #dce9e5;

    background: #f8fcfb;

    color: #345660;

    font-weight: 600;
}

.km-choice-chip:hover {
    border-color: #9ad8c7;

    background: #effaf6;
}

.km-choice-chip.active {
    border-color: #10a77a;

    background: #10a77a;

    color: #ffffff;
}

/* ---------- Search Result Header ---------- */

.km-discovery-results {
    margin-top: 18px;
}

.km-results-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;

    margin-bottom: 16px;
}


.km-results-kicker {
    display: block;

    margin-bottom: 4px;

    font-size: 0.72rem;

    font-weight: 700;

    color: #15916f;

    letter-spacing: 0.06em;
}


.km-results-heading h2 {
    margin: 0;

    color: #103a5a;

    font-size: 1.35rem;

    font-weight: 700;
}


.km-results-heading p {
    margin: 4px 0 0;

    color: #778c94;

    font-size: 0.82rem;
}



/* ---------- Result Cards ---------- */

.km-discovery-list {
    display: grid;

    gap: 13px;
}


.km-discovery-item {
    display: grid;

    grid-template-columns:
        142px
        minmax(0, 1fr)
        150px;

    gap: 18px;

    align-items: center;

    padding: 15px;

    border-radius: 18px;

    border: 1px solid #dfece8;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(35, 90, 82, 0.05);
}


.km-discovery-item:hover {
    border-color: #acdccc;

    box-shadow:
        0 10px 28px rgba(35, 90, 82, 0.1);

    transform: translateY(-1px);
}


.km-discovery-thumb {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 142px;
    height: 96px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #dff5ec,
            #eaf5ff
        );

    color: #16896f;

    text-decoration: none;
}


.km-discovery-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.km-discovery-item-body h3 {
    margin: 8px 0 7px;

    font-size: 1rem;

    line-height: 1.4;
}


.km-discovery-item-body h3 a {
    color: #103a5a;

    font-weight: 700;

    text-decoration: none;
}


.km-discovery-summary {
    margin-bottom: 9px;

    color: #607780;

    font-size: 0.82rem;

    line-height: 1.55;
}



/* ---------- Category badges in results ---------- */

.km-discovery-item-tags {
    display: flex;
    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}


.km-discovery-item-tags .km-category-tag,
.km-discovery-item-tags .km-category-sub {
    display: inline-flex;

    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 0.7rem;

    line-height: 1;

    font-weight: 700;
}


.km-discovery-item-tags .km-category-tag {
    background: #e7f1ff;

    color: #2567a7;
}


.km-discovery-item-tags .km-category-sub {
    background: #fff4d9;

    color: #a46e00;
}

/* =========================================================
   Public Knowledge Card Category
   ========================================================= */

.km-discovery-item .km-discovery-item-tags {
    margin-bottom: 7px;
}

.km-discovery-item .km-category-tag {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 5px 11px;

    border-radius: 9px;

    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

/* =========================================================
   Public knowledge card
   Image -> Category -> Content -> Engagement
   ========================================================= */

.km-discovery-item {
    display: grid;

    grid-template-columns:
        130px
        125px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 18px;
}


.km-discovery-item-category {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    min-width: 0;
}


.km-discovery-item-category .km-category-tag {
    display: inline-flex;
    align-items: center;

    max-width: 100%;

    padding: 7px 12px;

    border-radius: 10px;

    font-size: 0.82rem;
    font-weight: 600;

    line-height: 1.2;

    white-space: normal;
}


.km-discovery-item-body {
    min-width: 0;
}


.km-discovery-item-body h3 {
    margin-top: 0;
    margin-bottom: 6px;
}


.km-discovery-summary {
    margin-bottom: 9px;
}

@media (max-width: 991.98px) {

    .km-discovery-item {
        grid-template-columns:
            110px
            110px
            minmax(0, 1fr);

        align-items: start;
    }


    .km-discovery-item-side {
        grid-column: 2 / -1;
    }

}


@media (max-width: 575.98px) {

    .km-discovery-item {
        grid-template-columns:
            92px
            minmax(0, 1fr);

        gap: 12px;
    }


    .km-discovery-item-category {
        grid-column: 2;
        grid-row: 1;

        align-self: start;

        margin-bottom: 4px;
    }


    .km-discovery-item-body {
        grid-column: 1 / -1;
    }


    .km-discovery-item-side {
        grid-column: 1 / -1;
    }

}

/* ---------- NEW badge ---------- */

.km-public-new-inline {
    display: inline-flex;

    vertical-align: middle;

    align-items: center;

    margin-left: 6px;

    padding: 3px 7px;

    border-radius: 999px;

    background: #ff5b62;

    color: #ffffff;

    font-size: 0.6rem;

    line-height: 1;

    font-weight: 700;
}



/* ---------- Result meta ---------- */

.km-discovery-meta {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    color: #809198;

    font-size: 0.72rem;
}


.km-discovery-meta span {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}



/* ---------- Result Side ---------- */

.km-discovery-item-side {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 8px;
}


.km-rating-line {
    display: flex;

    align-items: center;

    gap: 4px;

    color: #6d8088;

    font-size: 0.74rem;
}


.km-rating-line i {
    color: #ffb51b;
}


.km-detail-button {
    border-radius: 10px;

    background: #edf8f4;

    color: #08795c;

    border: 1px solid #cbe8df;
}



/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    /* km.css reserves 60px for the authenticated staff mobile bar.
       Public guests do not render that bar, so remove the empty offset. */
    .km-app.km-app-guest {
        padding-top: 0;
    }


    .nrh-public-topbar {
        min-height: 72px;

        gap: 16px;

        padding: 8px 20px;
    }


    .nrh-public-brand {
        min-width: 0;
    }


    .nrh-public-km-logo {
        height: 58px;

        max-width: min(330px, calc(100vw - 185px));
    }


    .nrh-public-login-btn {
        flex-shrink: 0;

        min-width: 112px;
        min-height: 40px;

        padding: 8px 16px;
    }


    .km-discovery-page {
        padding-left: 18px;
        padding-right: 18px;
    }

    .km-search-primary-grid {
        grid-template-columns: 1fr;
    }


    .km-discovery-item {
        grid-template-columns:
            110px
            minmax(0, 1fr);
    }


    .km-discovery-thumb {
        width: 110px;
        height: 90px;
    }


    .km-discovery-item-side {
        grid-column: 2;

        flex-direction: row;

        align-items: center;
        justify-content: flex-start;

        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {

    .nrh-public-topbar {
        min-height: 64px;

        gap: 10px;

        padding: 7px 14px;
    }


    .nrh-public-km-logo {
        height: 50px;

        max-width: calc(100vw - 155px);
    }


    .nrh-public-login-btn {
        min-width: auto;
        min-height: 38px;

        padding: 7px 12px;

        font-size: 0.80rem;
    }

}

@media (max-width: 575.98px) {

    .nrh-public-topbar {
        min-height: 58px;

        gap: 8px;

        padding: 6px 10px;
    }


    .nrh-public-brand-logo {
        width: 42px;
        height: 42px;
    }


    .nrh-public-brand-text strong {
        font-size: 1.05rem;
    }


    .nrh-public-brand-text > span {
        font-size: 0.65rem;
    }


    .nrh-public-brand-text small {
        display: none;
    }


    .nrh-public-km-logo {
        height: 44px;

        max-width: calc(100vw - 132px);
    }


    .nrh-public-login-btn {
        min-width: auto;

        min-height: 36px;

        padding: 7px 10px;

        font-size: 0.74rem;

        box-shadow: 0 4px 12px rgba(7, 59, 101, 0.14);
    }


    .nrh-public-login-btn .bi {
        margin-right: 0.3rem !important;
    }


    .km-discovery-page {
        padding: 14px 12px 36px;
    }

    .km-discovery-panel {
        padding: 20px 16px;

        border-radius: 18px;
    }


    .km-search-box {
        flex-wrap: wrap;

        padding: 8px;
    }


    .km-search-box > i {
        margin-left: 6px;
    }


    .km-search-box input {
        min-width: calc(100% - 36px);
    }


    .km-search-box .btn {
        width: 100%;

        margin-top: 5px;
    }


    .km-results-heading {
        align-items: flex-start;

        gap: 10px;

        flex-direction: column;
    }


    .km-discovery-item {
        grid-template-columns: 1fr;

        padding: 13px;
    }


    .km-discovery-thumb {
        width: 100%;
        height: 170px;
    }


    .km-discovery-item-side {
        grid-column: auto;

        align-items: center;
    }
}

/* =========================================================
   NRH KM KNOWLEDGE DETAIL
   STEP 19 Approved visual contract
   ========================================================= */

.nrh-detail-page {
    width: min(1380px, calc(100% - 44px));

    margin: 0 auto;

    padding: 24px 0 50px;
}


.nrh-detail-back {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 16px;

    color: #607780;

    font-size: 0.82rem;

    text-decoration: none;
}


.nrh-detail-back:hover {
    color: #0b8c69;
}


.nrh-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap: 18px;

    align-items: start;
}



/* =========================================================
   Main card
   ========================================================= */

.nrh-detail-main {
    min-width: 0;
}


.nrh-detail-card,
.nrh-side-card {
    background: #ffffff;

    border: 1px solid #dcebe6;

    border-radius: 20px;

    box-shadow:
        0 7px 24px rgba(30, 83, 78, 0.06);
}


.nrh-detail-card {
    padding: 26px;

    margin-bottom: 16px;
}


.nrh-detail-article {
    position: relative;
}


.nrh-detail-status {
    position: absolute;

    top: 22px;
    right: 24px;
}


.nrh-status-live {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 10px;

    border-radius: 999px;

    background: #e8f8f1;

    color: #087b5c;

    font-size: 0.72rem;

    font-weight: 700;
}


.nrh-detail-category {
    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;

    margin-bottom: 14px;

    padding-right: 130px;
}

/* =========================================================
   Detail Category under title
   ========================================================= */

.nrh-detail-category {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 10px;
    margin-bottom: 12px;
}

.nrh-detail-category-icon {
    color: #15906f;
    font-size: 0.9rem;
}

.nrh-detail-category .km-category-tag {
    font-size: 0.78rem;
    font-weight: 600;
}

.nrh-detail-category .km-category-sub {
    font-size: 0.74rem;
}


.nrh-detail-title {
    margin: 0;

    padding-right: 15px;

    color: #103a5a;

    font-size: clamp(1.5rem, 2.3vw, 2.2rem);

    line-height: 1.35;

    font-weight: 700;
}


.nrh-detail-meta {
    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    margin-top: 15px;

    color: #7e9198;

    font-size: 0.76rem;
}


.nrh-detail-meta span {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


.nrh-detail-tags {
    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    margin-top: 14px;
}


.nrh-detail-tags a {
    padding: 5px 10px;

    border-radius: 999px;

    background: #f0f8f5;

    color: #54756b;

    font-size: 0.72rem;

    text-decoration: none;
}


.nrh-detail-divider {
    margin: 23px 0;

    border-color: #e6efec;

    opacity: 1;
}


.nrh-detail-summary h2 {
    margin-bottom: 12px;

    color: #103a5a;

    font-size: 1rem;

    font-weight: 700;
}


.nrh-detail-summary > div {
    color: #536b74;

    font-size: 0.9rem;

    line-height: 1.8;
}



/* =========================================================
   Media
   ========================================================= */

.nrh-section-title {
    margin-bottom: 16px;

    color: #103a5a;

    font-size: 1rem;

    font-weight: 700;
}


.nrh-media-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.nrh-media-image,
.nrh-media-video {
    margin: 0;

    overflow: hidden;

    border-radius: 14px;

    border: 1px solid #ddebe7;

    background: #edf5f2;
}


.nrh-media-image img {
    display: block;

    width: 100%;
    height: 190px;

    object-fit: cover;
}


.nrh-media-video {
    grid-column: 1 / -1;
}


.nrh-media-video video {
    display: block;

    width: 100%;

    max-height: 470px;

    background: #101a20;
}


.nrh-media-file {
    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border-radius: 13px;

    border: 1px solid #dde9e5;

    background: #fbfdfc;
}


.nrh-media-file-icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border-radius: 11px;

    background: #ffe9e9;

    color: #e03b42;

    font-size: 1.25rem;
}


.nrh-media-file-info {
    display: flex;

    flex: 1;

    flex-direction: column;

    min-width: 0;
}


.nrh-media-file-info strong {
    overflow: hidden;

    color: #314f59;

    font-size: 0.8rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.nrh-media-file-info small {
    margin-top: 2px;

    color: #82949b;

    font-size: 0.68rem;
}


.nrh-file-open-btn {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: #eff8f5;

    border: 1px solid #d1e7df;

    color: #0b8a68;
}



/* =========================================================
   Sidebar
   ========================================================= */

.nrh-detail-sidebar {
    display: grid;

    gap: 14px;

    position: sticky;

    top: 94px;
}


.nrh-side-card {
    padding: 18px;
}


.nrh-side-heading {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;
}


.nrh-side-heading-icon {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background: #eaf8f3;

    color: #0a8a68;
}


.nrh-side-heading h2 {
    margin: 0;

    color: #103a5a;

    font-size: 0.9rem;

    font-weight: 700;
}



/* owner */

.nrh-owner-avatar {
    width: 62px;
    height: 62px;

    display: grid;

    place-items: center;

    margin: 3px auto 10px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #dff6ed,
        #e6f0ff
    );

    color: #16896f;

    font-size: 1.65rem;
}


.nrh-owner-name {
    display: block;

    text-align: center;

    color: #173f55;

    font-size: 0.9rem;
}


.nrh-owner-meta {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    margin-top: 5px;

    color: #788d94;

    font-size: 0.7rem;
}


.nrh-owner-profile-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 13px;

    padding: 8px 11px;

    border-radius: 10px;

    border: 1px solid #a7dbca;

    color: #087a5d;

    font-size: 0.74rem;

    font-weight: 600;

    text-decoration: none;
}



/* =========================================================
   Engagement
   ========================================================= */

.nrh-engagement-card > h2 {
    color: #103a5a;

    font-size: 0.85rem;

    font-weight: 700;
}


.nrh-rating-summary {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 9px;
}


.nrh-rating-stars {
    display: flex;

    gap: 1px;

    color: #ffb21c;

    font-size: 0.78rem;
}


.nrh-rating-summary strong {
    color: #103a5a;

    font-size: 0.85rem;
}


.nrh-rating-summary > span {
    color: #8b9ba0;

    font-size: 0.65rem;
}


.nrh-engagement-stats {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;

    margin-top: 14px;
}


.nrh-engagement-stats > div {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 67px;

    padding: 7px;

    border-radius: 11px;

    background: #f4faf8;

    border: 1px solid #e5efeb;
}


.nrh-engagement-stats i {
    color: #138b6d;

    font-size: 0.9rem;
}


.nrh-engagement-stats strong {
    margin-top: 2px;

    color: #183f53;

    font-size: 0.8rem;
}


.nrh-engagement-stats small {
    color: #87979c;

    font-size: 0.6rem;
}



/* Rating buttons */

.nrh-rating-form {
    display: flex;

    gap: 5px;

    margin-top: 13px;
}


.nrh-rating-form button {
    flex: 1;

    padding: 6px 3px;

    border: 1px solid #dce9e5;

    border-radius: 9px;

    background: #ffffff;

    color: #829298;

    font-size: 0.68rem;
}


.nrh-rating-form button i {
    color: #ffc142;
}


.nrh-rating-form button.active {
    border-color: #f4c55f;

    background: #fff9e8;

    color: #855f00;
}



/* action */

.nrh-detail-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-top: 14px;
}


.nrh-detail-actions form {
    margin: 0;
}


.nrh-detail-actions button {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 8px;

    border-radius: 10px;

    border: 1px solid #d7e7e2;

    background: #ffffff;

    color: #34636a;

    font-size: 0.72rem;

    font-weight: 600;
}


.nrh-detail-actions button:hover {
    background: #eff9f6;

    border-color: #a9dcca;

    color: #08785c;
}



/* share url */

.nrh-share-link {
    margin-top: 12px;
}


.nrh-share-link label {
    display: block;

    margin-bottom: 5px;

    color: #7a8e94;

    font-size: 0.64rem;
}


.nrh-share-link > div {
    display: flex;
}


.nrh-share-link input {
    flex: 1;

    min-width: 0;

    padding: 7px 9px;

    border: 1px solid #dce8e4;

    border-radius: 9px 0 0 9px;

    color: #698088;

    font-size: 0.65rem;
}


.nrh-share-link button {
    width: 38px;

    border: 1px solid #dce8e4;
    border-left: 0;

    border-radius: 0 9px 9px 0;

    background: #f3faf7;

    color: #118467;
}



/* =========================================================
   Comments
   ========================================================= */

.nrh-comments-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 13px;
}


.nrh-comments-header h2 {
    margin: 0;

    color: #103a5a;

    font-size: 0.9rem;

    font-weight: 700;
}


.nrh-comments-header > span {
    display: grid;

    min-width: 27px;
    height: 27px;

    place-items: center;

    padding: 0 7px;

    border-radius: 999px;

    background: #e9f7f2;

    color: #087b5d;

    font-size: 0.67rem;

    font-weight: 700;
}


.nrh-comment-form textarea {
    width: 100%;

    resize: vertical;

    padding: 10px;

    border: 1px solid #d7e7e2;

    border-radius: 11px;

    outline: none;

    font-size: 0.75rem;
}


.nrh-comment-form textarea:focus {
    border-color: #76c7ae;

    box-shadow:
        0 0 0 3px rgba(20, 156, 118, 0.08);
}


.nrh-comment-form > small {
    display: block;

    margin-top: 5px;

    color: #8a9a9f;

    font-size: 0.61rem;
}


.nrh-comment-submit {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 8px;

    padding: 8px;

    border: 0;

    border-radius: 10px;

    background: #0e9973;

    color: #ffffff;

    font-size: 0.72rem;

    font-weight: 600;
}


.nrh-comment-login-note {
    margin: 0 0 13px;

    padding: 9px;

    border-radius: 9px;

    background: #f7fbfa;

    color: #798b91;

    font-size: 0.68rem;
}


.nrh-comment-login-note a {
    color: #087b5d;

    font-weight: 600;
}


.nrh-comment-list {
    display: grid;

    gap: 10px;
}


.nrh-comment-item {
    padding-top: 10px;

    border-top: 1px solid #e7efec;
}


.nrh-comment-user {
    display: flex;

    align-items: center;

    gap: 8px;
}


.nrh-comment-avatar {
    width: 29px;
    height: 29px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #e5f5ef;

    color: #0b8264;

    font-size: 0.7rem;

    font-weight: 700;
}


.nrh-comment-user > div {
    display: flex;

    flex-direction: column;
}


.nrh-comment-user strong {
    color: #34525c;

    font-size: 0.7rem;
}


.nrh-comment-user small {
    color: #92a1a6;

    font-size: 0.58rem;
}


.nrh-comment-body {
    margin-top: 7px;

    color: #61757c;

    font-size: 0.7rem;

    line-height: 1.55;
}


.nrh-comment-report {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-top: 5px;

    color: #b46f72;

    font-size: 0.58rem;

    text-decoration: none;
}


.nrh-comment-empty {
    margin: 0;

    color: #8b9ba0;

    font-size: 0.7rem;
}


.nrh-comment-pagination {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 12px;

    color: #809298;

    font-size: 0.65rem;
}



/* =========================================================
   Responsive detail
   ========================================================= */

@media (max-width: 991.98px) {

    .nrh-detail-layout {
        grid-template-columns: 1fr;
    }


    .nrh-detail-sidebar {
        position: static;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .nrh-comments-card {
        grid-column: 1 / -1;
    }
}


@media (max-width: 575.98px) {

    .nrh-detail-page {
        width: calc(100% - 24px);

        padding-top: 15px;
    }


    .nrh-detail-card,
    .nrh-side-card {
        border-radius: 16px;
    }


    .nrh-detail-card {
        padding: 18px;
    }


    .nrh-detail-status {
        position: static;

        margin-bottom: 12px;
    }


    .nrh-detail-category {
        padding-right: 0;
    }


    .nrh-detail-title {
        font-size: 1.45rem;
    }


    .nrh-media-grid {
        grid-template-columns: 1fr;
    }


    .nrh-media-video,
    .nrh-media-file {
        grid-column: auto;
    }


    .nrh-detail-sidebar {
        grid-template-columns: 1fr;
    }


    .nrh-comments-card {
        grid-column: auto;
    }
}

/* =========================================================
   NRH KM DETAIL MEDIA GALLERY
   IMAGE + VIDEO = max 4 preview
   ========================================================= */

.nrh-media-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}


.nrh-media-section-header .nrh-section-title {
    margin-bottom: 2px;
}


.nrh-media-section-header p {
    margin: 0;

    color: #80939a;

    font-size: 0.7rem;
}


.nrh-media-view-all {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border: 1px solid #cfe5de;

    border-radius: 10px;

    background: #f3faf7;

    color: #087b5e;

    font-size: 0.7rem;

    font-weight: 600;
}



/* =========================================================
   Gallery grid
   6 columns allows:
   2 items = 3 + 3
   3 items = 6 / 3 + 3
   4 items = 6 / 2 + 2 + 2
   ========================================================= */

.nrh-media-gallery {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 10px;
}


.nrh-gallery-item {
    position: relative;

    display: block;

    width: 100%;

    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius: 14px;

    background: #eaf4f1;

    cursor: pointer;

    isolation: isolate;
}


.nrh-gallery-item::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(9, 51, 65, 0);

    transition:
        background 0.18s ease;
}


.nrh-gallery-item:hover::after {
    background: rgba(9, 51, 65, 0.08);
}


.nrh-gallery-item img,
.nrh-gallery-item video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}



/* ---------- 1 item ---------- */

.nrh-media-count-1 .nrh-gallery-item {
    grid-column: 1 / -1;

    height: 360px;
}



/* ---------- 2 items ---------- */

.nrh-media-count-2 .nrh-gallery-item {
    grid-column: span 3;

    height: 265px;
}



/* ---------- 3 items ---------- */

.nrh-media-count-3 .nrh-gallery-item:first-child {
    grid-column: 1 / -1;

    height: 330px;
}


.nrh-media-count-3 .nrh-gallery-item:not(:first-child) {
    grid-column: span 3;

    height: 165px;
}



/* ---------- 4 items ---------- */

.nrh-media-count-4 .nrh-gallery-item:first-child {
    grid-column: 1 / -1;

    height: 330px;
}


.nrh-media-count-4 .nrh-gallery-item:not(:first-child) {
    grid-column: span 2;

    height: 155px;
}



/* =========================================================
   Video badge
   ========================================================= */

.nrh-video-play-badge {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 2;

    display: grid;

    width: 50px;
    height: 50px;

    place-items: center;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.93);

    color: #0a765d;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.16);

    font-size: 1.6rem;

    pointer-events: none;
}


.nrh-video-play-badge i {
    margin-left: 3px;
}



/* =========================================================
   +N overlay
   ========================================================= */

.nrh-gallery-more {
    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 3px;

    background: rgba(8, 51, 68, 0.67);

    color: #ffffff;

    pointer-events: none;
}


.nrh-gallery-more strong {
    font-size: 1.8rem;

    line-height: 1;

    font-weight: 700;
}


.nrh-gallery-more small {
    font-size: 0.72rem;

    font-weight: 500;
}



/* =========================================================
   Documents
   ========================================================= */

.nrh-document-section {
    margin-top: 20px;

    padding-top: 18px;

    border-top: 1px solid #e4eeeb;
}


.nrh-document-section > h3 {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 10px;

    color: #103a5a;

    font-size: 0.82rem;

    font-weight: 700;
}


.nrh-document-list {
    display: grid;

    gap: 8px;
}



/* =========================================================
   LIGHTBOX
   ========================================================= */

.nrh-gallery-lightbox {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: grid;

    place-items: center;

    padding: 22px;
}


.nrh-gallery-lightbox[hidden] {
    display: none !important;
}


.nrh-lightbox-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(7, 23, 33, 0.93);

    backdrop-filter: blur(5px);
}


.nrh-lightbox-dialog {
    position: relative;

    z-index: 1;

    width: min(1180px, 100%);
    height: min(820px, calc(100vh - 44px));

    display: grid;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    overflow: hidden;

    border-radius: 18px;

    background: #0c1d25;

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.4);
}



/* Lightbox header */

.nrh-lightbox-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 60px;

    padding: 10px 14px 10px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);

    color: #ffffff;
}


.nrh-lightbox-info {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.nrh-lightbox-info strong {
    max-width: min(700px, 65vw);

    overflow: hidden;

    font-size: 0.82rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.nrh-lightbox-info span {
    margin-top: 2px;

    color: #aec1c8;

    font-size: 0.68rem;
}


.nrh-lightbox-close {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

    font-size: 1rem;
}



/* Lightbox content */

.nrh-lightbox-content {
    position: relative;

    min-height: 0;

    display: grid;

    grid-template-columns:
        56px
        minmax(0, 1fr)
        56px;

    align-items: center;
}


.nrh-lightbox-stage {
    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 15px;
}


.nrh-lightbox-stage img,
.nrh-lightbox-stage video {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 8px;
}


.nrh-lightbox-stage video {
    width: 100%;
    height: 100%;

    background: #000000;
}


.nrh-lightbox-nav {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    justify-self: center;

    border: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.11);

    color: #ffffff;

    font-size: 1.15rem;
}


.nrh-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}


.nrh-lightbox-nav:disabled {
    opacity: 0.25;

    cursor: default;
}



/* Lightbox footer */

.nrh-lightbox-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 42px;

    padding: 8px 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);

    color: #a9bdc4;

    font-size: 0.64rem;
}


.nrh-lightbox-footer span {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


body.nrh-lightbox-open {
    overflow: hidden;
}



/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991.98px) {

    .nrh-media-count-1 .nrh-gallery-item {
        height: 330px;
    }


    .nrh-media-count-4 .nrh-gallery-item:first-child {
        height: 300px;
    }


    .nrh-media-count-4 .nrh-gallery-item:not(:first-child) {
        height: 140px;
    }
}



/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 575.98px) {

    .nrh-media-gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }


    .nrh-media-count-1 .nrh-gallery-item {
        grid-column: 1 / -1;

        height: 250px;
    }


    .nrh-media-count-2 .nrh-gallery-item {
        grid-column: span 1;

        height: 150px;
    }


    .nrh-media-count-3 .nrh-gallery-item:first-child,
    .nrh-media-count-4 .nrh-gallery-item:first-child {
        grid-column: 1 / -1;

        height: 235px;
    }


    .nrh-media-count-3 .nrh-gallery-item:not(:first-child),
    .nrh-media-count-4 .nrh-gallery-item:not(:first-child) {
        grid-column: span 1;

        height: 120px;
    }


    .nrh-media-count-4 .nrh-gallery-item:last-child {
        grid-column: 1 / -1;

        height: 125px;
    }


    .nrh-video-play-badge {
        width: 42px;
        height: 42px;

        font-size: 1.3rem;
    }


    .nrh-gallery-lightbox {
        padding: 0;
    }


    .nrh-lightbox-dialog {
        width: 100%;
        height: 100%;

        border-radius: 0;
    }


    .nrh-lightbox-content {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            42px;
    }


    .nrh-lightbox-nav {
        width: 34px;
        height: 34px;

        font-size: 0.9rem;
    }


    .nrh-lightbox-stage {
        padding: 7px;
    }


    .nrh-lightbox-footer {
        display: none;
    }
}

/* =========================================================
   NRH KM STAR RATING
   Outline gold -> Filled gold
   ========================================================= */

.nrh-rating-form {
    display: block;
    margin-top: 14px;
}


.nrh-rating-stars-input {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}


/* Reset old rating button style */
.nrh-rating-form .nrh-rating-star-button {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #f2b522;

    font-size: 1.35rem;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}


.nrh-rating-form .nrh-rating-star-button i {
    color: #f2b522;
}


.nrh-rating-form .nrh-rating-star-button:hover {
    transform: translateY(-1px) scale(1.08);

    background: #fff8df;
}


.nrh-rating-form .nrh-rating-star-button:focus-visible {
    outline: 2px solid #e4ad20;
    outline-offset: 2px;
}


/* Selected stars */
.nrh-rating-form .nrh-rating-star-button.is-filled {
    color: #f2b522;
}


.nrh-rating-form .nrh-rating-star-button.is-filled i {
    color: #f2b522;
}


/* Cancel rating */
.nrh-rating-form .nrh-rating-cancel {
    width: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: 8px;

    padding: 5px 8px;

    border: 0;

    background: transparent;

    color: #8b989d;

    font-size: 0.66rem;

    font-weight: 500;
}


.nrh-rating-form .nrh-rating-cancel i {
    color: #a66a6e;
}


.nrh-rating-form .nrh-rating-cancel span {
    color: #a1acb0;
}


.nrh-rating-form .nrh-rating-cancel:hover {
    color: #9b5258;

    background: #fff5f5;
}

/* =========================================================
   PUBLIC HOME — FULL BLEED HERO
   Topbar -> Hero ชิดกัน / Hero เต็มจอซ้ายขวา
   ========================================================= */

/*
 * Public page เท่านั้น:
 * เอาระยะด้านบนของ main ออก เพื่อให้ Hero ชิด Topbar
 */
:is(.km-guest,.km-public-home-surface) .km-main {
    padding-top: 0;
}


/*
 * ป้องกัน full-bleed hero ทำให้เกิด horizontal scrollbar
 */
html,
body {
    overflow-x: clip;
}

/* =========================================================
   PUBLIC HOME
   Force Topbar -> Hero to touch with no vertical gap
   ========================================================= */

.km-content-shell:is(.km-guest,.km-public-home-surface) > .nrh-public-topbar {
    margin-bottom: 0 !important;
}


/* main must start immediately after public topbar */
.km-content-shell:is(.km-guest,.km-public-home-surface) > .km-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* page wrapper must not add top spacing */
.km-content-shell:is(.km-guest,.km-public-home-surface) .km-discovery-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   PUBLIC HERO — approved photographic knowledge-center banner
   UX acceptance refresh after STEP 21.5
   ========================================================= */

:is(.km-guest,.km-public-home-surface) .nrh-public-hero.nrh-public-hero--banner {
    min-height: 0 !important;
    height: auto !important;
    background: #eef5f9;
}

:is(.km-guest,.km-public-home-surface) .nrh-public-hero--banner::before,
:is(.km-guest,.km-public-home-surface) .nrh-public-hero--banner::after {
    content: none !important;
    display: none !important;
}

:is(.km-guest,.km-public-home-surface) .nrh-public-hero-banner-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
}

@media (max-width: 767.98px) {
    :is(.km-guest,.km-public-home-surface) .nrh-public-hero.nrh-public-hero--banner {
        margin-bottom: 18px;
    }
}