/* ============================================================
   NurseSkill Portal — เว็บหน้าบ้านมืออาชีพ
   ============================================================ */
:root{
  --p-primary:#4f46e5; --p-primary-dark:#4338ca; --p-primary-light:#e0e7ff;
  --p-accent:#06b6d4; --p-ink:#0f172a; --p-muted:#64748b;
  --p-teal:#0d9488;
}
body.portal{font-family:'Sarabun',system-ui,sans-serif;color:var(--p-ink);background:#fff}

/* ---------- Navbar ---------- */
.portal-nav{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(15,23,42,.06);padding:.6rem 0}
.brand-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--p-primary),var(--p-accent));color:#fff;display:grid;place-items:center;font-size:1.3rem;box-shadow:0 6px 16px -4px rgba(79,70,229,.5)}
.brand-logo.sm{width:34px;height:34px;font-size:1.05rem}
.brand-text b{display:block;font-size:1.1rem;line-height:1.1;color:var(--p-ink)}
.brand-text small{color:var(--p-muted);font-size:.72rem}
.portal-nav .nav-link{color:#334155;font-weight:500;padding:.5rem .9rem!important;border-radius:8px}
.portal-nav .nav-link:hover,.portal-nav .nav-link.active{color:var(--p-primary);background:var(--p-primary-light)}
.portal-nav .dropdown-menu{border:none;box-shadow:0 12px 30px -8px rgba(15,23,42,.18);border-radius:12px;padding:.4rem}
.portal-nav .dropdown-item{border-radius:8px;padding:.6rem .8rem}
.portal-nav .dropdown-item:hover{background:var(--p-primary-light);color:var(--p-primary-dark)}
@media(min-width:992px){.portal-nav .dropdown:hover>.dropdown-menu{display:block;margin-top:0}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#4338ca 0%,#4f46e5 45%,#06b6d4 110%);color:#fff;padding:90px 0 110px}
.hero::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.hero .container{position:relative;z-index:1}
.hero h1{font-weight:800;font-size:2.7rem;line-height:1.2;margin-bottom:1rem}
.hero p.lead{font-size:1.2rem;color:rgba(255,255,255,.9);max-width:620px}
.hero .badge-pill{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);padding:.5em 1em;border-radius:30px;font-size:.85rem;backdrop-filter:blur(4px)}
.hero-wave{position:absolute;bottom:-1px;left:0;width:100%;line-height:0}
.btn-hero{background:#fff;color:var(--p-primary-dark);font-weight:700;border-radius:12px;padding:.8rem 1.6rem;border:none;box-shadow:0 10px 25px -8px rgba(0,0,0,.3)}
.btn-hero:hover{transform:translateY(-2px);transition:.2s;color:var(--p-primary-dark)}
.btn-hero-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);font-weight:600;border-radius:12px;padding:.75rem 1.5rem}
.btn-hero-outline:hover{background:#fff;color:var(--p-primary-dark)}

/* ---------- Section ---------- */
.section{padding:70px 0}
.section-title{font-weight:800;font-size:2rem;margin-bottom:.5rem}
.section-sub{color:var(--p-muted);font-size:1.05rem;max-width:640px;margin:0 auto}
.eyebrow{color:var(--p-primary);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem}

/* ---------- System cards ---------- */
.sys-card{border-radius:20px;overflow:hidden;border:1px solid #eef2f7;box-shadow:0 10px 30px -12px rgba(15,23,42,.12);transition:.25s;height:100%;background:#fff}
.sys-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -12px rgba(79,70,229,.25)}
.sys-card .top{padding:30px;color:#fff}
.sys-card.elderly .top{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.sys-card.student .top{background:linear-gradient(135deg,#4338ca,#6366f1)}
.sys-card .top .ic{width:64px;height:64px;border-radius:16px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:2rem;margin-bottom:14px}
.sys-card .body{padding:26px 30px}
.sys-card .body ul{list-style:none;padding:0;margin:0 0 18px}
.sys-card .body li{padding:6px 0;color:#475569}
.sys-card .body li i{color:#22c55e;margin-right:8px}

/* ---------- Feature ---------- */
.feature{text-align:center;padding:24px}
.feature .ic{width:66px;height:66px;border-radius:18px;background:var(--p-primary-light);color:var(--p-primary-dark);display:grid;place-items:center;font-size:1.7rem;margin:0 auto 16px}
.feature h5{font-weight:700;margin-bottom:.4rem}
.feature p{color:var(--p-muted);font-size:.95rem}

/* ---------- Steps ---------- */
.step-row{counter-reset:step}
.step-box{position:relative;background:#fff;border:1px solid #eef2f7;border-radius:16px;padding:28px 24px 24px;height:100%;box-shadow:0 6px 18px -10px rgba(15,23,42,.1)}
.step-box .num{position:absolute;top:-18px;left:24px;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--p-primary),var(--p-accent));color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 18px -6px rgba(79,70,229,.5)}
.step-box h6{font-weight:700;margin:12px 0 6px}
.step-box p{color:var(--p-muted);font-size:.93rem;margin:0}

/* ---------- Stat band ---------- */
.stat-band{background:var(--p-primary);color:#fff;border-radius:24px;padding:40px}
.stat-band .n{font-size:2.4rem;font-weight:800}
.stat-band .l{color:rgba(255,255,255,.8)}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;border-radius:24px;padding:48px;text-align:center}

/* ---------- Footer ---------- */
.portal-footer{background:#0f172a;color:#fff;padding:48px 0 24px;margin-top:60px}
.portal-footer h5,.portal-footer h6{color:#fff}
.portal-footer a{display:block;color:#94a3b8;text-decoration:none;padding:3px 0}
.portal-footer a:hover{color:#fff}

@media(max-width:767px){.hero{padding:60px 0 80px}.hero h1{font-size:2rem}.section{padding:48px 0}.section-title{font-size:1.6rem}}