/* GoldKH TV display (tv.js): a 1600 x 900 stage on brand/tv-bg.jpg (Alex's template), scaled to the screen by tvFit().
   The left / right cards sit exactly on the template's gold / silver cards (transparent there); ".own" cards are drawn here (other layouts). */
.tvw { position: fixed; inset: 0; z-index: 40; background: #2A0505; overflow: hidden; user-select: none; -webkit-user-select: none; }
.tvx { position: absolute; inset: 0; }
.tvs { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(.5);
  background: #6B0909 url(brand/tv-bg.jpg) 0 0 / 100% 100% no-repeat; color: #FFF3DD; font-family: Inter, 'Noto Sans Khmer', system-ui, sans-serif; font-variant-numeric: tabular-nums; overflow: hidden; }
.tvs b, .tvs small, .tvs h3 { font-weight: inherit; }
.tvs i { font-style: normal; }
/* words: Khmer line + small English line ("both"), or one language */
.tvs .tk { display: block; font-family: 'Noto Serif Khmer', 'Noto Sans Khmer', serif; font-weight: 700; line-height: 1.35; }
.tvs .te { display: block; font-weight: 700; letter-spacing: .1em; line-height: 1.2; }
.tvs .tk + .te { font-size: .5em; opacity: .85; margin-top: 1px; }

/* header */
.tv-hd > div { position: absolute; display: flex; align-items: center; }
.tv-logo { left: 26px; top: 16px; width: 450px; height: 92px; gap: 14px; }
.tv-logo img { width: 86px; height: 86px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.tv-logo b { display: block; font: 700 54px/1 'Playfair Display', Georgia, serif; color: transparent; background: linear-gradient(180deg, #FFF3C4, #E9C766 45%, #B8892A 80%, #F3D98A); -webkit-background-clip: text; background-clip: text; }
.tv-logo small { display: block; margin-top: 6px; font: 600 13px/1.4 'Noto Serif Khmer', Inter, sans-serif; letter-spacing: .12em; color: #F7E7A1; }
.tv-shop { left: 500px; top: 8px; width: 496px; height: 108px; flex-direction: column; justify-content: center; text-align: center; }
.tv-shop b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 40px/1.5 'Moul', 'Playfair Display', serif; color: transparent;
  background: linear-gradient(180deg, #FFF3C4, #E9C766 50%, #C9982F); -webkit-background-clip: text; background-clip: text; }
.tv-shop small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 20px/1.5 'Noto Serif Khmer', serif; color: #F7E7A1; }
.tv-tel { left: 1016px; top: 18px; width: 286px; height: 90px; gap: 12px; }
.tv-tel svg { flex: none; width: 36px; height: 36px; color: #E9C766; }
.tv-tel b { display: block; font: 700 27px/1.25 Inter, sans-serif; color: #FFFFFF; white-space: nowrap; }
.tv-clock { left: 1314px; top: 12px; width: 188px; height: 100px; flex-direction: column; justify-content: center; text-align: center; }
.tv-clock[hidden] { display: none; }
.tv-clock small { display: block; font: 600 15px/1.35 'Noto Serif Khmer', Inter, sans-serif; color: #F7E7A1; white-space: nowrap; }
.tv-clock b { display: block; font: 700 48px/1.05 Inter, sans-serif; color: #FFFFFF; }
.tv-live { left: 1508px; top: 40px; width: 86px; height: 40px; justify-content: center; gap: 7px; font: 800 15px/1 Inter, 'Noto Serif Khmer', sans-serif; letter-spacing: .06em; color: #FFF3DD; }
.tv-live i { width: 11px; height: 11px; border-radius: 50%; background: #2BD46B; box-shadow: 0 0 0 0 rgba(43, 212, 107, .7); animation: tvpulse 2s infinite; }
.tv-live.fx i { background: #E9C766; animation: none; }
.tv-live.fx { font-size: 13px; letter-spacing: 0; }
@keyframes tvpulse { 70% { box-shadow: 0 0 0 9px rgba(43, 212, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 212, 107, 0); } }

/* cards */
.tv-cards { position: absolute; left: 110px; top: 127px; width: 1333px; height: 339px; }
.tv-card { position: absolute; top: 0; height: 339px; border-radius: 18px; color: #2A0A0A; }
.tv-card.tl { left: 0; width: 684px; } .tv-card.tr { left: 694px; width: 639px; } .tv-card.tw { left: 0; width: 1333px; }
.tv-card.own { border: 2px solid #F3D27A; box-shadow: 0 0 22px rgba(255, 196, 80, .55), inset 0 0 0 1px rgba(255, 255, 255, .55); overflow: hidden; }
.tv-card.gold.own { background: linear-gradient(120deg, #FFF8E2 0%, #FBEBB8 50%, #F1D47F 100%); }
.tv-card.silver.own { background: linear-gradient(120deg, #FFFFFF 0%, #F1F1F1 50%, #D3D3D3 100%); border-color: #EDEDED; box-shadow: 0 0 22px rgba(255, 255, 255, .45); }
.tv-card.own .tv-bars { position: absolute; left: 6px; top: 58px; width: 250px; height: 226px; background: url(brand/tv-gold-bars.jpg) center / cover no-repeat;
  -webkit-mask: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.tv-card.silver.own .tv-bars { background-image: url(brand/tv-silver-bars.jpg); }
.tv-cb { position: absolute; left: 238px; right: 22px; top: 16px; bottom: 14px; display: flex; flex-direction: column; }
.tv-card.tw .tv-cb { left: 300px; right: 40px; }
.tv-ct { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tv-name { display: flex; align-items: center; gap: 14px; min-width: 0; color: #8E0F0F; }
.tv-card.silver .tv-name { color: #2E2E2E; }
.tv-nm { font: 700 44px/1 'Playfair Display', Georgia, serif; }
.tv-nm .tk { font: 400 32px/1.35 'Moul', 'Noto Serif Khmer', serif; }
.tv-nm .tk + .te { font: 700 16px/1.2 Inter, sans-serif; letter-spacing: .16em; }
.tv-k { font: 800 48px/1 'Playfair Display', Georgia, serif; }
.tv-name small { align-self: flex-end; margin-bottom: 6px; font: 600 18px/1 Inter, sans-serif; color: #7A5A2A; }
.tv-tag { flex: none; margin-top: 4px; padding: 6px 12px; border-radius: 9px; background: rgba(212, 175, 55, .28); border: 1px solid rgba(184, 137, 42, .5); color: #6B4A12; font-size: 15px; text-align: center; }
.tv-card.silver .tv-tag { background: rgba(0, 0, 0, .07); border-color: rgba(0, 0, 0, .18); color: #444; }
.tv-tag .tk { font-size: 15px; } .tv-tag .tk + .te { font-size: 10px; }
.tv-spot { margin-top: 8px; }
.tv-sl { display: flex; align-items: baseline; gap: 8px; color: #7A5A2A; font-size: 17px; }
.tv-sl .tk, .tv-sl .te { display: inline; font-size: 17px; opacity: 1; letter-spacing: .04em; }
.tv-sl em { font: 700 16px/1 Inter, sans-serif; font-style: normal; color: #8E0F0F; letter-spacing: .04em; }
.tv-spot > b { display: inline-block; margin-top: 2px; font: 800 66px/1.02 Inter, sans-serif; letter-spacing: -.02em; color: #A30E0E; }
.tv-card.silver .tv-spot > b { color: #A30E0E; }
.tv-spot > b i { font-size: .62em; vertical-align: .32em; margin-right: 4px; }
.tv-chg { display: inline-block; margin-left: 14px; font: 700 22px/1 Inter, sans-serif; vertical-align: .6em; }
.tv-chg.up { color: #128A3E; } .tv-chg.down { color: #C81E1E; }
.tv-bs { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid rgba(140, 90, 20, .35); padding-top: 8px; }
.tv-bs > div { text-align: center; padding: 0 6px; min-width: 0; }
.tv-bs > div + div { border-left: 1.5px solid rgba(140, 90, 20, .35); }
.tv-bl { display: flex; justify-content: center; align-items: baseline; gap: 8px; color: #9B1111; }
.tv-bl .tk, .tv-bl .te { display: inline; font-size: 19px; opacity: 1; letter-spacing: .04em; }
.tv-bl .tk + .te { font-size: 14px; }
.tv-bs b { display: block; font: 800 44px/1.12 Inter, sans-serif; letter-spacing: -.02em; color: #1F0A0A; white-space: nowrap; }
.tv-bs b i { font-size: .62em; margin: 0 3px; vertical-align: .2em; }
.tv-bs small { display: flex; justify-content: center; gap: 6px; color: #6A5030; }
.tv-bs small .tk, .tv-bs small .te { display: inline; font-size: 14px; opacity: 1; letter-spacing: 0; font-weight: 600; }
.tv-bs.big { padding-top: 16px; } .tv-bs.big b { font-size: 64px; }
.tv-card.tw .tv-bs b { font-size: 60px; } .tv-card.tw .tv-bs.big b { font-size: 76px; }
.tv-card.flip .tv-cb { animation: tvflipc .8s cubic-bezier(.2, .7, .2, 1) both; }
.tv-card.blank { display: flex; align-items: center; justify-content: center; background: linear-gradient(120deg, #7A0B0B, #4A0606); border-color: #D4AF37; }
.tv-wel { text-align: center; color: #F7E7A1; font-size: 34px; } .tv-wel b { display: block; margin-top: 10px; font: 400 54px/1.5 'Moul', 'Playfair Display', serif; color: #FFE9A8; }

/* the table: 2 x 4 rows, pages change every few seconds */
.tv-low { position: absolute; left: 33px; top: 476px; width: 1534px; height: 328px; }
.tv-lh { position: absolute; left: 0; right: 0; top: 0; height: 62px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.tv-lh h3 { margin: 0; font: 700 40px/1 'Playfair Display', Georgia, serif; letter-spacing: .04em; color: transparent; background: linear-gradient(180deg, #FFF3C4, #E9C766 50%, #C9982F);
  -webkit-background-clip: text; background-clip: text; text-align: center; }
.tv-lh h3 .tk { font: 400 30px/1.4 'Moul', serif; } .tv-lh h3 .tk + .te { font: 700 14px/1.2 Inter, sans-serif; letter-spacing: .3em; }
.tv-li svg { width: 46px; height: 46px; color: #E9C766; display: block; }
.tv-ln { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); max-width: 230px; text-align: right; color: #F7E7A1; font-size: 15px; }
.tv-ln .tk { font-size: 16px; } .tv-ln .tk + .te { font-size: 11px; }
.tv-tt { position: absolute; left: 7px; right: 7px; top: 62px; bottom: 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tv-t { width: 100%; height: 264px; border-collapse: separate; border-spacing: 0; table-layout: fixed; border-radius: 14px; overflow: hidden; border: 2px solid #E9C766;
  background: #FFF9EE; box-shadow: 0 0 18px rgba(255, 196, 80, .45); }
.tv-t th { height: 50px; padding: 2px 8px; background: linear-gradient(180deg, #9A1010, #6B0909); color: #FFE9A8; font-size: 16px; text-align: center; border-right: 1px solid rgba(233, 199, 102, .45); }
.tv-t th:last-child, .tv-t td:last-child { border-right: 0; }
.tv-t th .tk { font-size: 17px; } .tv-t th .tk + .te { font-size: 10px; }
.tv-t th.c1 { text-align: left; padding-left: 18px; }
.tv-t td { height: 53px; padding: 0 8px; text-align: center; font: 800 30px/1 Inter, sans-serif; color: #2A0A0A; border-right: 1px solid rgba(184, 137, 42, .3); border-top: 1px solid rgba(184, 137, 42, .22); overflow: hidden; white-space: nowrap; }
.tv-t tbody tr:nth-child(even) td { background: #F5E5C3; }
.tv-t td.c1 { text-align: left; padding-left: 14px; font: 700 21px/1.2 'Noto Sans Khmer', Inter, sans-serif; text-overflow: ellipsis; }
.tv-t td.c1 b { font: 800 28px/1 Inter, sans-serif; } .tv-t td.c1 small { font: 600 16px/1 Inter, sans-serif; color: #7A5A2A; }
.tv-c1 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tv-flg { flex: none; width: 40px; height: 30px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .2); }
.tv-flg.emo { width: auto; height: auto; font-size: 30px; box-shadow: none; }
.tv-cn { flex: 1 1 auto; min-width: 0; }
.tv-t td.cd { font: 800 24px/1 Inter, sans-serif; color: #6B0909; } .tv-t td.cd small { display: block; margin-top: 3px; font: 600 12px/1 Inter, sans-serif; color: #7A5A2A; }
.tv-t td i { font-size: .62em; margin: 0 3px; vertical-align: .2em; }
.tv-t.fx th:nth-child(1) { width: 40%; } .tv-t.fx th:nth-child(2) { width: 14%; }
.tv-t.list th:nth-child(1) { width: 32%; }
.tv-t tr.pad td { height: auto; border: 0; background: transparent !important; }
.tv-t tr.flip td { animation: tvflip .75s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes tvflip { 0% { transform: perspective(600px) rotateX(-92deg); opacity: 0; } 60% { transform: perspective(600px) rotateX(12deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes tvflipc { 0% { transform: perspective(900px) rotateX(-70deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tv-low-blank { position: absolute; inset: 62px 7px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 16px;
  background: linear-gradient(120deg, #7A0B0B, #4A0606); border: 2px solid #D4AF37; color: #FFE9A8; }
.tv-low-blank b { font: 400 44px/1.5 'Moul', 'Playfair Display', serif; } .tv-low-blank small { font-size: 22px; color: #F7E7A1; }

/* the Khmer calendar line */
.tv-ft { position: absolute; left: 0; right: 0; top: 816px; height: 74px; display: flex; justify-content: center; }
.tv-cal { width: 1380px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 30px; border-radius: 34px;
  background: linear-gradient(90deg, rgba(58, 4, 4, .94), rgba(112, 10, 10, .94) 50%, rgba(58, 4, 4, .94)); border: 1.5px solid #D4AF37; box-shadow: 0 0 16px rgba(255, 190, 70, .35); }
.tv-cal-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tv-ci svg { display: block; width: 30px; height: 30px; color: #E9C766; }
.tv-lun { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 23px/1.5 'Noto Serif Khmer', Inter, serif; color: #FFE9A8; }
.tvs.en .tv-lun { font: 600 21px/1.4 Inter, sans-serif; }
.tv-sila { flex: none; padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #F3D98A, #C9982F); color: #4A0E0E; font: 700 16px/1.3 'Noto Serif Khmer', Inter, sans-serif; }
.tv-cal-r { flex: 0 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.tv-cal-r small { flex: none; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(233, 199, 102, .6); color: #E9C766; font: 600 14px/1.3 'Noto Serif Khmer', Inter, sans-serif; }
.tv-cal-r b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 470px; font: 700 21px/1.5 'Noto Serif Khmer', Inter, serif; color: #FFFFFF; }
.tv-cal-r span { flex: none; font: 600 18px/1.4 'Noto Serif Khmer', Inter, sans-serif; color: #F7E7A1; white-space: nowrap; }
.tv-brand { justify-content: center; gap: 18px; font: 600 22px/1 'Playfair Display', 'Noto Serif Khmer', serif; letter-spacing: .14em; color: #F7E7A1; }
.tv-brand i { color: #E9C766; }
@keyframes tvfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tv-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #FFE9A8; font-size: 20px; text-align: center; padding: 24px; }

/* the corner buttons (fade after 4 s; any touch, mouse move or remote key shows them) */
.tv-ctl { position: fixed; z-index: 45; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); display: flex; gap: 8px; opacity: 0; transition: opacity .35s; }
.tv-ctl.on, .tv-ctl:focus-within { opacity: 1; }
.tv-ctl button { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(233, 199, 102, .65); background: rgba(30, 2, 2, .72);
  color: #FFE9A8; font: 600 14px/1 inherit; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tv-ctl button:not(:first-child) { width: 40px; padding: 0; justify-content: center; }
.tv-ctl svg { width: 18px; height: 18px; }
.tv-ctl button:focus-visible { outline: 3px solid #E9C766; outline-offset: 2px; }

/* Jewelry > TV display (settings + preview) */
.tv-set { display: grid; gap: 14px; }
.tv-prev { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 12px 0 14px; border-radius: 12px; overflow: hidden; background: #2A0505; box-shadow: var(--shadow); }
.tv-prev .tvx { pointer-events: none; }
.tv-go { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tv-go svg { width: 22px; height: 22px; }
.tv-form .set-l { margin-top: 14px; }
.tv-hint { margin: 6px 2px 4px; } .tv-hint .lnk { display: inline-flex; margin-left: 4px; }
.tv-grp { margin-top: 14px; display: grid; gap: 10px; }
.tv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tv-chip { border: 1px solid rgba(212, 175, 55, .4); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 7px 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.tv-chip.on { background: var(--red-grad); color: #FFFFFF; border-color: transparent; box-shadow: var(--shadow-red); }
.tv-num { margin: 0; } .tv-num .num { max-width: 140px; }
.tv-fix { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-gold); }
.tv-fh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tv-fix .tiny { margin: 4px 2px 8px; }
.tv-fr { display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px; gap: 8px; align-items: center; margin: 6px 0; }
.tv-fr .num { width: 100%; border: 1px solid rgba(122, 0, 0, .14); background: var(--card); border-radius: 10px; padding: 9px 10px; font-size: 15px; text-align: right; }
.tv-fn { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-frh small { text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; }
@media (min-width: 1024px) { .tv-set { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } .tv-hero { position: sticky; top: 16px; } }

/* Home > Quick actions > Khmer calendar (sheet) */
.kc-today { text-align: center; padding: 14px; border-radius: 14px; border: 1px solid var(--line-gold); background: linear-gradient(180deg, #FFF8EA, #F8EBCF); }
.kc-today small { display: block; color: var(--muted); font-size: 12.5px; }
.kc-today b { display: block; margin-top: 2px; font-size: 18px; color: var(--ink); }
.kc-lun { margin: 6px 0 0; font: 700 17px/1.6 'Noto Serif Khmer', serif; color: var(--red); }
.kc-sila { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(180deg, #F3D98A, #C9982F); color: #4A0E0E; font-weight: 700; font-size: 13px; }
.kc-h { display: flex; align-items: center; gap: 6px; margin: 18px 2px 4px; font-size: 15px; color: var(--heading); }
.kc-h svg { width: 16px; height: 16px; color: var(--gold-d, #B8892A); }
.kc-l { list-style: none; margin: 0; padding: 0; }
.kc-l li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.kc-l li b { font-size: 14.5px; line-height: 1.5; } .kc-l li small { grid-column: 1; color: var(--muted); font-size: 12px; }
.kc-l li span { grid-column: 1; color: var(--muted); font-size: 13px; }
.kc-l li em { grid-column: 2; grid-row: 1; align-self: start; font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--red); white-space: nowrap; }
.kc .tiny { margin-top: 12px; }
@media (prefers-color-scheme: dark) { .kc-today { background: linear-gradient(180deg, #2A1512, #221210); } .kc-lun { color: #F3D98A; } }

/* Home: the quote card shows a Khmer holiday / holy day when there is one (khQuote) */
.k-q.kq-ev { cursor: pointer; }
.kq-ev .kq-l { position: relative; z-index: 1; display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(74, 14, 14, .14); color: #4A0E0E; font-weight: 700; font-size: 12px; }
.kq-ev .kq-s { display: block; margin-top: 4px; font: 600 12.5px/1.55 var(--font-disp-km, 'Noto Serif Khmer'), serif; color: #5A1A0E; }
.kq-ev .q-ic svg { width: 26px; height: 26px; }

/* every .tv-fit line stays on one line and shrinks to fit its box (tvFitAll) */
.tvs .tv-fit { display: block; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.tv-t td > .tv-fit { display: block; }
.tv-tels { flex: 1 1 auto; min-width: 0; }
.tv-lun.tv-fit { flex: 1 1 auto; }
.tv-cal-l { flex: 1 1 0; } .tv-cal-r { flex: 0 1 auto; max-width: 48%; } .tv-cal-r b.tv-fit { flex: 0 1 auto; max-width: 420px; }
.tv-bs b.tv-fit { text-overflow: clip; }
.tv-cfl { width: 20px; height: 15px; border-radius: 2px; vertical-align: -2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.tv-cfl.emo { width: auto; height: auto; box-shadow: none; }
/* Change every: a slider with notches (10 s ... 5 min, None) */
.tv-secv { margin-left: 6px; color: var(--red); }
.tv-rng { margin: 4px 2px 2px; }
.tv-rng input { width: 100%; accent-color: #B3121A; height: 28px; margin: 0; }
.tv-rngl { position: relative; height: 18px; margin: 0 10px; font-size: 11.5px; color: var(--muted); }   /* each label under its notch */
.tv-rngl span { position: absolute; top: 0; left: calc(var(--i) * 100% / 6); transform: translateX(-50%); white-space: nowrap; }

/* a short page (1-4 rows): one wide table, rows sized to the count, centred on a red panel (no template table showing through) */
.tv-tt.one { display: flex; align-items: center; justify-content: center; padding: 0 28px; border-radius: 16px; border: 2px solid #D4AF37;
  background: linear-gradient(120deg, #7A0B0B, #4A0606); box-shadow: inset 0 0 30px rgba(0, 0, 0, .35); }
.tv-t.one { height: auto; }
.tv-t.one td { height: var(--rh, 53px); font-size: calc(var(--rh, 53px) * .56); }
.tv-t.one td.c1 b { font-size: calc(var(--rh, 53px) * .52); } .tv-t.one td.c1 small { font-size: calc(var(--rh, 53px) * .28); }
.tv-t.one td.c1 { font-size: calc(var(--rh, 53px) * .4); }
.tv-t.list.one th:nth-child(1) { width: 34%; }

/* weather (top right, replaces the LIVE dot when the weather is known) */
.tv-hd > .tv-wx { left: 1506px; top: 12px; width: 90px; height: 100px; flex-direction: column; justify-content: center; text-align: center; }
.tv-wx svg { display: block; width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.tv-wx b { display: block; margin-top: 2px; font: 800 25px/1.05 Inter, sans-serif; color: #FFFFFF; }
.tv-wx small { display: block; width: 100%; margin-top: 2px; font: 600 13px/1.35 'Noto Serif Khmer', Inter, sans-serif; color: #F7E7A1; }
.tv-wxc { margin: -4px 4px 0; }

/* the bottom line as a news ticker (a new headline for newsMin minutes; several take turns) */
.tv-news { justify-content: flex-start; gap: 18px; }
.tv-nb { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(180deg, #E53935, #B71C1C); box-shadow: 0 0 12px rgba(255, 80, 60, .55); color: #FFFFFF; }
.tv-nb svg { width: 22px; height: 22px; }
.tv-nb b { font: 700 18px/1.3 'Noto Serif Khmer', Inter, sans-serif; }
.tv-nb i { font: 700 14px/1 Inter, sans-serif; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .5); }
.tv-nt { flex: 1 1 auto; font: 700 23px/1.5 'Noto Serif Khmer', Inter, serif; color: #FFFFFF; }
.tv-ns { flex: none; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.4 Inter, 'Noto Serif Khmer', sans-serif; color: #F7E7A1; }
.tv-rngl.n6 span { left: calc(var(--i) * 100% / 5); }
.tv-ft.flip > .tv-cal { animation: tvflip .8s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 50%; }   /* airport flip when the bottom line changes */

/* Jewelry > Post: Gold prices | Exchange rates */
.post-kind { max-width: 440px; margin: 0 0 12px; }

/* sound: the TV's "tap to turn sound on" pill (until the first tap after a reload); zone hits on the bottom line */
.tv-sndhint { position: fixed; z-index: 46; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(233, 199, 102, .7); background: rgba(30, 2, 2, .8); color: #FFE9A8; font: 600 15px/1.2 'Noto Sans Khmer', Inter, sans-serif; cursor: pointer; }
.tv-sndhint[hidden] { display: none; }
.tv-zone.zb .tv-nb { background: linear-gradient(180deg, #22B35E, #0B7A3B); box-shadow: 0 0 14px rgba(40, 220, 120, .55); }
.tv-zone.zs .tv-nb { background: linear-gradient(180deg, #E53935, #A31414); }
.tv-zone .tv-nb svg { width: 22px; height: 22px; }

/* Account > plans: coupon code (app.js cpnHTML) */
.cpn { margin-top: 12px; }
.cpn-f { display: flex; gap: 8px; }
.cpn-f input { flex: 1; min-width: 0; border: 1px solid rgba(122, 0, 0, .16); background: var(--card); border-radius: 12px; padding: 10px 12px; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; outline: none; }
.cpn-f input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, .3); }
.cpn-f .btn { width: auto; flex: none; padding: 10px 18px; }
.cpn-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(22, 163, 74, .1); border: 1px dashed rgba(22, 163, 74, .55); }
.cpn .st { margin: 6px 4px 0; } .cpn .st:empty { display: none; }
.pp-old { font-size: .62em; font-weight: 600; color: var(--muted); margin-right: 2px; }