body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #ffffff;
	overflow-x: hidden; /* Hide horizontal scrollbar */
}
body,td,th {
	font-family: 'Google Sans' ;
	color: #000;
	font-weight: 300;
    background-color: #ececec;
}
.noto-bold{
    font-family: 'Google Sans';
	font-weight: 600;
}
.Header {
	margin-top: -0.5%;
}

#topbarNav{
    position: sticky;
    width:100%;
    top:0;
    z-index: 1;
    background-color: #ececec;
}

.curveType{
	border-radius : 0.5rem;
	padding-top: -0.5vh;
	padding-bottom: -0.5vh;
	min-height: 3rem;
}
.detailType{
	padding-top: -0.5vh;
	padding-bottom: -0.5vh;
}
.TypeTrain{	
	margin-top: 0.75rem;
	font-family: 'Google Sans';
	font-size: 1.4rem;
	font-weight: 600;
}
.TypeTrain9{	
	margin-top: 0.75rem;
	font-family: 'Google Sans';
	font-size: 1rem;
	font-weight: 600;
	font-stretch: 80%;
}
.TrainNo{	
	font-family: 'Google Sans';	
	font-size: 2rem;
	font-weight: 800;
}
.SpTypeTrain{	
	font-family: 'Google Sans';
	font-size: 1rem;
	font-weight: 600;
}
.SpTypeTrain9{	
	font-family: 'Google Sans';
	font-size: 1rem;
	font-weight: 600;
}
.SpCode{	
	margin-top: -0.25rem;
	font-family: 'Google Sans';
	font-size: 0.75rem;
	font-weight: 500!important;
}
.destHead{
	font-size: 1rem;
	font-weight: 500;
}
.dest{	
	margin-top: -0.25rem;
	font-family: 'Google Sans';	
	font-size: 1.5rem;
	font-weight: 700;
}
.longName{
	margin-top: -0.25rem;
	font-family: 'Google Sans' !important;	
	font-size: 1.5rem;	
	font-weight: 700;
	font-stretch: 80%;
}
.latestHead{
	font-size: 1rem;
}
.stopName{
	font-size: 1.4rem;
	font-weight: 600;
}

.stopLongName{
	font-size: 1.4rem;
	font-weight: 600;
	font-stretch: 80%;
}
.textBlink {
	animation: op 0.85s 3;
}
.trBlink {
	animation: op 0.85s 3;
}
@keyframes op {  
	50%  {opacity: 0;} 
}
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.smOri{	
	margin-top: -0.25rem;
	font-family: 'Google Sans';	
	font-size: 1rem;
	font-weight: 400;
}

.smDest, .smStop{	
	font-family: 'Google Sans';	
	font-size: 1rem;
	font-weight: 600;
}

.trainCard:hover{
	background-color: #ececec;
}

.footerType{	
	font-size: 0.8rem;
	background-color: #ffffff;
}
.modal-body-image {
  padding: 0;
  
}

.modal-body-image img {
  justify-content: center;
  width: auto;
  height: 90%;
  max-height: 80vh; 
}

.modal-image-pop {
  background: transparent;
  border: none;
  box-shadow: none;
}

.modal-image-pop .modal-body {
  position: relative; 
}

.modal-image-pop .modal-footer {
  background: transparent;
  border-top: none;
  
  justify-content: center;
  
  padding-top: 1.5rem; 
}

.modal-image-pop .btn-close:hover {
  opacity: 1;
}
.alert-banner {
    display: flex;
    align-items: center; 
    
    background-color: #143d67;
    color: #FFFFFF; 
    
    box-sizing: border-box; 
}
.alert-banner-inner {
    display: flex;
    align-items: center; 
    
    color: #FFFFFF; 
    padding: 16px 24px;
}

.alert-message {
    flex-grow: 1; 
    text-align: left;
    
    margin: 0 16px; 
    line-height: 1.4;
    font-size: 0.9rem;
    
    color: #FFFFFF;
    text-decoration: none; 
}

.alert-message:hover {
    text-decoration: underline; 
    cursor: pointer;
}

.alert-toggle {
    flex-shrink: 0; 
    font-size: 2rem; 
    font-weight: 300; 
    line-height: 1;
    cursor: pointer;
}

.alert-banner-inner:hover{
    background-color: #0d2842;
  	transition: 0.5s;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   ตารางขบวนรถล่าสุด v2 (2026-06-18) — primary #004AAD
   ══════════════════════════════════════════════════════════════════════════ */
.tv-list-title{
    color: #540906; font-size: 1.9rem; text-align: left;
    margin: 1rem 0 .6rem;
}
/* PC ปกติ: เต็มกว้าง + เว้นระยะขอบซ้าย-ขวา + กรอบตารางเดียว (แบบ mockup) */
.tv-list{ width: min(1280px, calc(100% - 3rem)); margin: .6rem auto; border: 1px solid rgba(0,0,0,.12); border-radius: .7rem; }
@media (max-width: 575.98px){ .tv-list, .tv-listhead{ width: calc(100% - 1.2rem); } }

/* หัวรายการ: title (ซ้าย) + filter สาย (ขวา) แถวเดียวกัน [ข้อ 12] */
.tv-listhead{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; width: min(1280px, calc(100% - 3rem)); margin: 1rem auto .3rem; }
.tv-listhead .tv-list-title{ margin: 0; padding: 0; }
/* filter รายสาย (segmented สะอาด: ปิด=ตัวอักษรเฉยๆ, เปิด=เติมสี) */
.tv-filter{ width: min(1280px, calc(100% - 3rem)); margin: 0 auto .5rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
@media (max-width: 575.98px){ .tv-filter{ width: calc(100% - 1.2rem); } }
/* เครื่องมือฝั่งขวาหัวรายการ: เวลาอัปเดต + ปุ่มรีเฟรช */
.tv-headtools{ display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
.tv-updated{ font-size: .9rem; color: #6b7280; white-space: nowrap; }
.tv-updated b{ color: #29415f; font-weight: 600; }
.tv-refresh{
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1.5px solid #d8bdbb; background: #fff; color: #540906;
    border-radius: 999px; padding: .25rem .8rem; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.tv-refresh:hover{ border-color: #540906; background: #f7ecec; }
.tv-refresh.cooling{ opacity: .55; cursor: not-allowed; border-color: #d4dbe6; color: #8a97aa; background: #f3f5f8; }
[data-bs-theme="dark"] .tv-updated{ color: #9aa4b2; }
[data-bs-theme="dark"] .tv-updated b{ color: #c7d4e6; }
[data-bs-theme="dark"] .tv-refresh{ background: #2a2a2a; border-color: #4a4a4a; color: #cf8983; }
[data-bs-theme="dark"] .tv-refresh:hover{ border-color: #cf8983; background: #2a1614; }
[data-bs-theme="dark"] .tv-refresh.cooling{ background: #242424; border-color: #3a3a3a; color: #6b7480; }

/* ══ แถบ "สถานะการให้บริการ" รายสาย [ข้อ 3,4] — จากเหตุที่ admin flag (network-status) ══ */
#serviceStats{ display: block; }   /* override .row (flex) ของ container เดิม */
.tv-ss{ width: min(1280px, calc(100% - 3rem)); margin: 1rem auto .2rem; }
.tv-ss-head{ display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .5rem; }

/* [#1/#7] ขบวนรถที่มีเหตุ (รอเปิดทาง/เหตุขัดข้อง) — list ใต้สถานะการให้บริการ */
.tv-inc-wrap{ width: min(1280px, calc(100% - 3rem)); margin: .3rem auto .6rem; }
.tv-inc-head{ font-weight: 700; color: #c0261a; font-size: 1rem; margin: .1rem .1rem .45rem; display: flex; align-items: center; gap: .4rem; }
.tv-inc-count{ background: #e0344b; color: #fff; border-radius: 999px; font-size: .75rem; padding: .05rem .5rem; font-weight: 700; }
.tv-inc-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .5rem; }
@media (max-width: 575.98px){ .tv-inc-grid{ grid-template-columns: 1fr; } }
.tv-inc-card{ display: flex; align-items: center; gap: .6rem; cursor: pointer; background: #fff7f8; border: 1px solid #f6d5da; border-radius: .75rem; padding: .6rem .7rem; transition: box-shadow .14s, transform .08s; }
.tv-inc-card:hover{ box-shadow: 0 6px 16px rgba(224,52,75,.16); transform: translateY(-2px); }
.tv-inc-card.lv-warn{ background: #fff8ec; border-color: #f5e0b8; }
.tv-inc-ico{ width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.tv-inc-ico.lv-stop{ background: #e0344b; } .tv-inc-ico.lv-warn{ background: #f0a012; }
.tv-inc-body{ display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; }
.tv-inc-issue{ font-weight: 700; font-size: .9rem; color: #cc2d44; }
.tv-inc-card.lv-warn .tv-inc-issue{ color: #b9780a; }
.tv-inc-train{ font-size: .88rem; color: #1c2b45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-inc-sub{ font-size: .76rem; color: #8a95a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-inc-arrow{ color: #c25563; font-size: .8rem; opacity: .55; flex: 0 0 auto; }
[data-bs-theme="dark"] .tv-inc-head{ color: #f3899a; }
[data-bs-theme="dark"] .tv-inc-card{ background: #271519; border-color: #4a242b; }
[data-bs-theme="dark"] .tv-inc-card.lv-warn{ background: #2a2416; border-color: #4d4326; }
[data-bs-theme="dark"] .tv-inc-train{ color: #e4ebf5; }
[data-bs-theme="dark"] .tv-inc-sub{ color: #828d9e; }
.tv-ss-title{ color: #1c2b45; font-size: 1.3rem; display: flex; align-items: baseline; gap: .5rem; }
.tv-ss-sub2{ font-size: .82rem; font-weight: 500; color: #97a3b6; letter-spacing: .02em; }
.tv-ss-all{
    font-size: .88rem; font-weight: 600; color: #540906; text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .8rem; border-radius: 999px; background: #f6eaea; transition: background .12s;
}
.tv-ss-all:hover{ background: #efdcdc; color: #3a0604; }
.tv-ss-all i{ font-size: .7rem; }
.tv-ss-allok{ display: none; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: .8rem;
    background: #eaf7ef; color: #1f7a3d; font-weight: 600; border: 1px solid #d3ecdc; }
.tv-ss-allok .tv-ss-ico{ width: 2rem; height: 2rem; font-size: 1rem; }
.tv-ss-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
@media (max-width: 1199.98px){ .tv-ss-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px){ .tv-ss-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){ .tv-ss{ width: calc(100% - 1.2rem); } .tv-ss-grid{ grid-template-columns: 1fr; gap: .5rem; } }
/* การ์ด: ไอคอนวงกลมสี (ซ้าย) + ชื่อสาย/สถานะ/รายละเอียด (ขวา) — แนวภาพ reference */
.tv-ss-card{
    display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit;
    border: 1px solid #e8edf3; border-radius: .85rem;
    padding: .7rem .8rem; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.05);
    transition: box-shadow .14s, transform .08s, border-color .14s;
}
.tv-ss-card:hover{ box-shadow: 0 6px 16px rgba(16,24,40,.1); transform: translateY(-2px); color: inherit; border-color: #d7e0ec; }
.tv-ss-ico{
    width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.12rem; color: #fff;
}
.tv-ss-ico.lv-ok{   background: #18a558; } .tv-ss-ico.lv-warn{ background: #f0a012; } .tv-ss-ico.lv-stop{ background: #e0344b; }
.tv-ss-body{ display: flex; flex-direction: column; min-width: 0; line-height: 1.22; }
.tv-ss-name{ font-weight: 700; font-size: .97rem; color: #1c2b45; }
.tv-ss-status{ font-size: .9rem; font-weight: 700; margin-top: .05rem; }
.tv-ss-sub{ font-size: .78rem; color: #8a95a6; margin-top: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-ss-card.lv-ok   .tv-ss-status{ color: #16864a; }
.tv-ss-card.lv-warn .tv-ss-status{ color: #b9780a; }
.tv-ss-card.lv-stop{ border-color: #f6d5da; background: #fff7f8; } .tv-ss-card.lv-stop .tv-ss-status{ color: #cc2d44; }
.tv-ss-card.lv-stop .tv-ss-sub{ color: #c25563; }
/* มือถือ: ถ้ามีเหตุ → ซ่อนการ์ดสายที่ปกติ (โชว์เฉพาะที่มีเหตุ) ; ถ้าไม่มีเหตุเลย → สรุปบรรทัดเดียว */
@media (max-width: 767.98px){
    .tv-ss:not(.has-inc) .tv-ss-grid{ display: none; }
    .tv-ss:not(.has-inc) .tv-ss-allok{ display: flex; }
    .tv-ss.has-inc .tv-ss-card.lv-ok{ display: none; }
}
[data-bs-theme="dark"] .tv-ss-title{ color: #e4ebf5; }
[data-bs-theme="dark"] .tv-ss-sub2{ color: #6f7c90; }
[data-bs-theme="dark"] .tv-ss-all{ color: #9cc2fb; background: #1f2d44; }
[data-bs-theme="dark"] .tv-ss-all:hover{ background: #28384f; color: #c3dcff; }
[data-bs-theme="dark"] .tv-ss-allok{ background: #14301d; color: #7fd69b; border-color: #205232; }
[data-bs-theme="dark"] .tv-ss-card{ background: #1d1f24; border-color: #2c2f37; box-shadow: none; }
[data-bs-theme="dark"] .tv-ss-card:hover{ border-color: #3a3f4a; }
[data-bs-theme="dark"] .tv-ss-card.lv-stop{ background: #271519; border-color: #4a242b; }
[data-bs-theme="dark"] .tv-ss-name{ color: #e4ebf5; }
[data-bs-theme="dark"] .tv-ss-sub{ color: #828d9e; }
[data-bs-theme="dark"] .tv-ss-card.lv-ok   .tv-ss-status{ color: #5fcf8b; }
[data-bs-theme="dark"] .tv-ss-card.lv-warn .tv-ss-status{ color: #ecb44b; }
[data-bs-theme="dark"] .tv-ss-card.lv-stop .tv-ss-status{ color: #f3899a; }
[data-bs-theme="dark"] .tv-ss-card.lv-stop .tv-ss-sub{ color: #cf8a93; }
.tv-fchip{
    display: inline-flex; align-items: center; gap: .4rem;
    border: 0; background: transparent; color: #5a6b85;
    border-radius: 999px; padding: .26rem .8rem; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: background .12s, color .12s; white-space: nowrap;
}
/* จุดสีประจำสาย (เห็นสีแม้ตอนยังไม่เลือก) */
.tv-fdot{ width: .62rem; height: .62rem; border-radius: 50%; background: var(--c, #888); flex: 0 0 auto; }
.tv-fchip:hover{ background: #f3ebeb; color: #29415f; }
/* เลือกแล้ว = เติมสีประจำสายนั้น (ตัวอักษร/จุด = สี contrast ตามข้อมูล) */
.tv-fchip.active{ background: var(--c, #540906); color: var(--cf, #fff); }
.tv-fchip.active .tv-fdot{ background: var(--cf, #fff); }
.tv-fchip-all.active{ background: #540906; color: #fff; }
[data-bs-theme="dark"] .tv-fchip{ color: #9aa4b2; }
[data-bs-theme="dark"] .tv-fchip:hover{ background: #2a3340; color: #c7d4e6; }
[data-bs-theme="dark"] .tv-fchip-all.active{ background: #540906; color: #fff; }
@media (max-width: 575.98px){ .tv-listhead{ margin: .8rem .6rem .3rem; } }

/* ── แถวตาราง (เส้นแบ่งบาง ไม่ใช่กล่องแยก) ── */
.tv-rowwrap{
    border: 0; border-bottom: 1px solid rgba(0,0,0,.07);
    margin: 0; border-radius: 0; background: #fff;
    cursor: pointer; transition: background .12s;
    position: relative;
}
.tv-rowwrap:hover{ background: #f4f8fd; }
.tv-rowwrap:last-child{ border-bottom: 0; }
.tv-rowwrap.tv-card-danger{ box-shadow: inset 4px 0 0 #d4161d; }
.tv-rowwrap.tv-card-warn{ box-shadow: inset 4px 0 0 #e8a200; }

/* แถบเหตุ/ล่าช้าด้านบนการ์ด */
.tv-bar{ padding: .3rem .8rem; font-size: .85rem; font-weight: 600; }
.tv-bar-danger{ background: #fde0e0; color: #b3160d; }
.tv-bar-warn{ background: #fff3cd; color: #8a6d00; }

/* ── PC grid ── */
.tv-row-pc{
    display: grid;
    grid-template-columns: 220px 1.7fr 1.3fr 1.6fr;
    align-items: center; gap: .6rem;
    padding: .4rem .9rem;
}
/* คอลัมน์สถานะ = ถึง/ออก/ผ่าน + เวลา + badge ล่าช้า */
.tv-status{ line-height: 1.4; font-weight: 600; font-size: 1.12rem; }
.tv-status .tv-evt{ color: #6b7280; font-weight: 600; font-size: .92rem; }
.tv-status-badge{ margin-top: .25rem; }
.tv-status-sm{ font-size: .96rem; }
/* label dim ในเซลล์ (เช่น "สถานีล่าสุด") + จัดกลางคอลัมน์ */
.tv-cellh{ font-size: .78rem; font-weight: 600; opacity: .5; line-height: 1.2; margin-bottom: .12rem; }
.tv-cell-c{ text-align: center; }
.tv-cell-c .tv-evrow{ align-items: center; }
[data-bs-theme="dark"] .tv-status .tv-evt{ color: #9aa4b2; }
/* ถึง | ออก = 2 column ข้างกัน แต่ละคอลัมน์มีเวลา + badge ล่าช้าของตัว */
.tv-evrow{ display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.tv-ev{ display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.tv-ev .tv-evline{ white-space: nowrap; }
.tv-ev .tv-badge{ font-size: .8rem; padding: .08rem .45rem; }
/* loader infinite scroll */
.tv-sentinel{ text-align: center; padding: 1rem; color: #6b7280; font-weight: 600; font-size: 1.05rem; }
[data-bs-theme="dark"] .tv-sentinel{ color: #9aa4b2; }
.tv-list .tv-head{
    background: #f3ebeb; color: #29415f; font-weight: 700;
    border-radius: .7rem .7rem 0 0; margin: 0; cursor: default; border-bottom: 1px solid rgba(0,0,0,.12);
}
.tv-list .tv-head:hover{ background: #f3ebeb; }
.tv-list .tv-head .tv-time{ text-align: center; }

/* ── iPad grid ── */
.tv-row-ipad{
    display: grid;
    grid-template-columns: 210px 1.6fr 1.9fr;
    align-items: center; gap: .5rem;
    padding: .4rem .75rem;
}
.tv-latest-line{ font-size: .85rem; color: #555; }

/* ── badge ประเภท/ขบวน ── */
.tv-type-badge{
    border-radius: .5rem; padding: .32rem .8rem;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    line-height: 1.12; min-width: 200px;
}
/* รถไม่มีชื่อขบวน: ตัวประเภทอยู่ระนาบเดียวกับฐานเลข (baseline) */
.tv-type-badge.tv-nocode{ align-items: baseline; }
/* เต็มความกว้างคอลัมน์เฉพาะใน grid PC/iPad (มือถือให้พอดีเนื้อหา) */
.tv-row-pc > div:first-child .tv-type-badge,
.tv-row-ipad > div:first-child .tv-type-badge{ width: 100%; }
/* ประเภท+ชื่อขบวน (stack กลาง) + เลขขบวน (ใหญ่) — จัดกลางทั้งกลุ่ม */
.tv-type-badge .tv-tleft{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.tv-type-badge .tv-ttype{ font-size: 1.02rem; font-weight: 600; line-height: 1.1; }
.tv-type-badge .tv-tcode{ font-size: .8rem; font-weight: 500; opacity: .9; line-height: 1.1; }
.tv-type-badge .tv-tno{ font-size: 1.9rem; font-weight: 800; line-height: 1; }

/* ── ต้นทาง-ปลายทาง (ตก 2 บรรทัดได้) ── */
.tv-od{ display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; line-height: 1.3; font-size: 1.12rem; }
.tv-od .tv-arrow{ opacity: .55; }
.tv-stop{ line-height: 1.25; font-size: 1.15rem; }

/* ── เวลา ── */
.tv-time{ text-align: center; font-size: 1.22rem; font-weight: 600; }

/* ── สถานีถัดไป ── */
.tv-next-name{ line-height: 1.25; font-size: 1.12rem; }
/* ETA + badge ล่าช้า อยู่แถวเดียวกัน */
.tv-next-line{ display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.tv-next-eta{ font-size: .95rem; color: #555; }
[data-bs-theme="dark"] .tv-next-eta{ color: #9aa4b2; }

/* ── badge สถานะ/ล่าช้า ── */
.tv-badge{
    display: inline-block; padding: .15rem .6rem; border-radius: 999px;
    font-size: .9rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.tv-badge-ontime{ background: #e3f4e9; color: #1f7a3d; }
.tv-badge-early { background: #e4eefb; color: #0d52c2; }
.tv-badge-late-lo{ background: #fff3cd; color: #8a6d00; }
.tv-badge-late  { background: #ffe2cc; color: #b3520a; }
.tv-badge-late-hi{ background: #fde0e0; color: #c0260a; }
.tv-badge-info  { background: #e7e9ee; color: #41506a; }
.tv-badge-success{ background: #e3f4e9; color: #1f7a3d; }

/* ── Mobile ── */
.tv-row-mb{ padding: .6rem .8rem; }
.tv-mb-top{ display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.tv-mb-top .tv-type-badge{ min-width: 150px; flex: 0 0 auto; }
.tv-mb-od{ flex: 1; min-width: 0; font-size: 1.02rem; }
.tv-mb-grid{ display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: .3rem; text-align: center; }
.tv-mb-grid2{ display: grid; grid-template-columns: 1.2fr 1fr; gap: .5rem; }
.tv-mb-grid .tv-mb-stop, .tv-mb-grid2 .tv-mb-stop{ text-align: left; }
.tv-mb-grid2 .tv-status{ font-size: .92rem; }
.tv-mb-h{ font-size: .72rem; color: #6b7280; font-weight: 600; }
.tv-mb-foot{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.tv-mb-next{ font-size: .9rem; text-align: right; }
.tv-mb-next .tv-mb-h{ display: inline; }

/* blink เมื่อมีข้อมูลใหม่ */
.tv-blink{ animation: tvBlink .85s 3; }
@keyframes tvBlink{ 50%{ opacity: .35; } }

/* ── dark mode ── */
[data-bs-theme="dark"] .tv-list{ border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .tv-rowwrap{ background: #1f1f1f; border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .tv-rowwrap:hover{ background: #262626; }
[data-bs-theme="dark"] .tv-list .tv-head{ background: #2b3340; color: #c7d4e6; }
[data-bs-theme="dark"] .tv-latest-line,
[data-bs-theme="dark"] .tv-next-eta{ color: #9aa4b2; }
[data-bs-theme="dark"] .tv-list-title{ color: #cf8983; }
[data-bs-theme="dark"] .tv-mb-h{ color: #9aa4b2; }
[data-bs-theme="dark"] .tv-badge-ontime,[data-bs-theme="dark"] .tv-badge-success{ background:#16361f; color:#7fd69b; }
[data-bs-theme="dark"] .tv-badge-early{ background:#16263f; color:#7fb0f5; }
[data-bs-theme="dark"] .tv-badge-late-lo{ background:#3a3413; color:#e6cf6a; }
[data-bs-theme="dark"] .tv-badge-late{ background:#3d2a16; color:#f0a868; }
[data-bs-theme="dark"] .tv-badge-late-hi{ background:#3d1716; color:#f08a82; }
[data-bs-theme="dark"] .tv-badge-info{ background:#2c3340; color:#aeb9c9; }
[data-bs-theme="dark"] .tv-bar-danger{ background:#3d1716; color:#f08a82; }
[data-bs-theme="dark"] .tv-bar-warn{ background:#3a3413; color:#e6cf6a; }

/* ════ อัปเดตสด: ไฮไลต์แถวที่เพิ่งเปลี่ยน (ข้อ1) + เลขช้า pop ตามทิศ (ข้อ2) ════ */
/* overlay ::after — ไม่ทับ bg เดิมของแถว · pointer-events:none → คลิกทะลุได้ */
.tv-rowwrap.tv-flash::after{
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    animation: tvFlashFade 1.2s ease-out forwards;   /* นุ่มๆ พอเหลือบเห็น */
}
/* สีตามทิศ + แถบซ้ายบางๆ */
.tv-rowwrap.tv-flash-neutral::after{ background: rgba(84,9,6,.12);  box-shadow: inset 3px 0 0 #540906; }
.tv-rowwrap.tv-flash-up::after{      background: rgba(192,38,10,.11);  box-shadow: inset 3px 0 0 #c0260a; }
.tv-rowwrap.tv-flash-down::after{    background: rgba(22,134,74,.11);  box-shadow: inset 3px 0 0 #16864a; }
[data-bs-theme="dark"] .tv-rowwrap.tv-flash-neutral::after{ background: rgba(207,137,131,.16); }
[data-bs-theme="dark"] .tv-rowwrap.tv-flash-up::after{      background: rgba(255,99,71,.15); }
[data-bs-theme="dark"] .tv-rowwrap.tv-flash-down::after{    background: rgba(95,207,139,.15); }
@keyframes tvFlashFade{ 0%{ opacity: 1; } 30%{ opacity: 1; } 100%{ opacity: 0; } }

/* เลขช้า: ช้าขึ้น=แดง / ดีขึ้น=เขียว — เด้งเล็กน้อย + เส้นขอบสีตามทิศ */
.tv-badge.tv-num-up{ animation: tvNumPop .7s ease-out; outline: 1.5px solid rgba(192,38,10,.4); outline-offset: 1px; }
.tv-badge.tv-num-down{ animation: tvNumPop .7s ease-out; outline: 1.5px solid rgba(22,134,74,.4); outline-offset: 1px; }
@keyframes tvNumPop{ 0%{ transform: scale(1); } 35%{ transform: scale(1.09); } 100%{ transform: scale(1); } }

/* เคารพ prefers-reduced-motion: ไฮไลต์นิ่งสั้นๆ ไม่มี keyframe */
@media (prefers-reduced-motion: reduce){
    .tv-rowwrap.tv-flash::after{ animation: none; opacity: .6; }
    .tv-badge.tv-num-up, .tv-badge.tv-num-down{ animation: none; }
}