:root {
  --nama-blue: #0074bc;
  --nama-blue-dark: #005a93;
  --nama-navy: #003a63;
  --nama-yellow: #face00;
  --nama-bg: #f3f7fb;
}

body, .main-sidebar, .brand-link { font-family: "Be Vietnam Pro", "Source Sans Pro", sans-serif; }
.content-wrapper { background: var(--nama-bg); }
.font-weight-600 { font-weight: 600; }
.text-nama { color: var(--nama-blue) !important; }
.bg-nama { background: var(--nama-blue) !important; color: #fff; }
.page-title { color: var(--nama-navy); font-weight: 700; font-size: 1.6rem; }

.sidebar-nama { background: linear-gradient(180deg, var(--nama-navy) 0%, var(--nama-blue-dark) 100%); }
.brand-nama { background: #fff !important; padding: .7rem .8rem !important; border-bottom: 3px solid var(--nama-yellow) !important; }
.brand-logo-full { max-width: 100%; height: 34px; object-fit: contain; }
.sidebar-mini.sidebar-collapse .brand-logo-full { height: 18px; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active { background: var(--nama-yellow); color: var(--nama-navy); font-weight: 600; box-shadow: none; }
.nav-sidebar .nav-link { color: #dbe9f5 !important; }
.nav-sidebar .nav-link.active { color: var(--nama-navy) !important; }

.btn-nama { background: var(--nama-blue); border-color: var(--nama-blue); color: #fff; }
.btn-nama:hover { background: var(--nama-blue-dark); color: #fff; }
.btn-nama-accent { background: var(--nama-yellow); border-color: var(--nama-yellow); color: var(--nama-navy); font-weight: 600; }
.btn-nama-accent:hover { background: #e5bd00; color: var(--nama-navy); }
.btn-primary { background: var(--nama-blue); border-color: var(--nama-blue); }
.card-nama { border-top: 3px solid var(--nama-blue); }
.card-nama-accent { border-top: 3px solid var(--nama-yellow); }
.card-title { font-weight: 600; color: var(--nama-navy); }
.small-box.bg-nama, .small-box.bg-nama h3, .small-box.bg-nama p { color: #fff; }
.small-box.bg-nama-yellow { background: var(--nama-yellow); color: var(--nama-navy); }
.small-box .icon > i { font-size: 60px; }
.badge-nama { background: var(--nama-blue); color: #fff; }
.badge-sample { background: var(--nama-yellow); color: var(--nama-navy); }
.table thead th { color: var(--nama-navy); border-bottom-width: 1px; }

/* Login */
.login-page { background: linear-gradient(135deg, var(--nama-navy), var(--nama-blue)); }
.login-box .card { border-top: 4px solid var(--nama-yellow); }

/* Console */
.call-panel { position: sticky; top: 1rem; }
.orb { width: 140px; height: 140px; border-radius: 50%; margin: 1rem auto; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 35%, #3aa3e8, var(--nama-blue) 60%, var(--nama-navy)); color: #fff; font-size: 44px;
  box-shadow: 0 0 0 0 rgba(0,116,188,.5); transition: transform .2s; }
.orb.listening { animation: pulse 1.8s infinite; }
.orb.speaking { animation: pulse-yellow 1s infinite; transform: scale(1.05); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,116,188,.5);} 70% { box-shadow: 0 0 0 26px rgba(0,116,188,0);} 100% { box-shadow: 0 0 0 0 rgba(0,116,188,0);} }
@keyframes pulse-yellow { 0% { box-shadow: 0 0 0 0 rgba(250,206,0,.7);} 70% { box-shadow: 0 0 0 26px rgba(250,206,0,0);} 100% { box-shadow: 0 0 0 0 rgba(250,206,0,0);} }
.call-timer { font-variant-numeric: tabular-nums; font-size: 1.3rem; color: var(--nama-navy); font-weight: 600; }
.form-locked input, .form-locked select, .form-locked textarea { background: #f7f9fb !important; pointer-events: none; }
.form-locked .edit-only { display: none !important; }
.form-locked .always-editable input, .form-locked .always-editable select { background: #fff !important; pointer-events: auto; }
.cards-table input { min-width: 90px; }
.cards-table td, .cards-table th { vertical-align: middle; padding: .35rem; }
.section-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6c7a89; font-weight: 600; margin: .8rem 0 .4rem; }
pre.vars { max-height: 380px; overflow: auto; background: #0f2233; color: #cfe6f8; border-radius: 6px; padding: .8rem; font-size: .78rem; white-space: pre-wrap; }

/* Transcript */
.chat { max-height: 520px; overflow-y: auto; padding: .5rem; }
.chat .msg { display: flex; margin-bottom: .6rem; }
.chat .msg .bubble { max-width: 78%; padding: .55rem .8rem; border-radius: 14px; font-size: .93rem; line-height: 1.4; }
.chat .msg.agent .bubble { background: #e7f2fb; color: #0b2b44; border-top-left-radius: 4px; }
.chat .msg.user { justify-content: flex-end; }
.chat .msg.user .bubble { background: var(--nama-blue); color: #fff; border-top-right-radius: 4px; }
.chat .who { font-size: .7rem; opacity: .7; display: block; margin-bottom: 2px; }
.chat .empty { color: #8a99a8; text-align: center; padding: 2rem 0; }

.timeline-nama { border-left: 3px solid #d6e6f3; margin-left: .6rem; padding-left: 1rem; }
.timeline-nama .item { position: relative; margin-bottom: 1rem; }
.timeline-nama .item::before { content: ""; position: absolute; left: -1.45rem; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--nama-blue); border: 2px solid #fff; }
.timeline-nama .item.zalo::before { background: var(--nama-yellow); }
.kv td:first-child { color: #6c7a89; width: 42%; }