/* OBSLv2.1 Layout / Event Calendar compact – 2026-10-26 */
:root{--obsl-event-row-height:44px}
/* Outer wrapper is ONLY layout; two child modules own their borders independently. */
#event-frame.event-frame{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;padding:0!important;margin:3px 0!important;background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;overflow:visible!important;clip-path:none!important;-webkit-clip-path:none!important;isolation:auto!important;height:auto!important;min-height:0!important}
#event-frame.event-frame::before,#event-frame.event-frame::after,#event-frame.event-frame>.obsl-bg-viewport{display:none!important}
#event-frame.event-frame>.upcoming-wrap,#event-frame.event-frame>.calendar-ticker{position:relative!important;box-sizing:border-box!important;min-width:0!important;min-height:var(--obsl-event-row-height)!important;height:auto!important;max-height:none!important;align-self:stretch!important;margin:0!important;border-radius:15px!important;overflow:hidden!important;background:var(--panel,#fff)!important}
#event-frame .upcoming-box{border-radius:15px!important;height:100%!important;min-height:var(--obsl-event-row-height)!important;max-height:none!important;box-shadow:none!important}
#event-frame .upcoming-stage{min-height:var(--obsl-event-row-height)!important;height:auto!important;overflow:hidden!important}
#event-frame .upcoming-slide{height:auto!important;min-height:var(--obsl-event-row-height)!important;max-height:none!important;white-space:normal!important;overflow-wrap:anywhere!important;padding:5px 29px 5px 8px!important;line-height:1.22!important;box-sizing:border-box!important}
#event-frame .obsl-calendar-viewport,#event-frame .obsl-calendar-track{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;height:auto!important;min-height:1.2em!important}
#event-frame .calendar-ticker{align-content:center!important;}
#event-frame>.calendar-speed-panel,#event-frame>.section-config-panel{grid-column:1/-1!important}
@media(max-width:650px){#event-frame.event-frame{grid-template-columns:1fr!important;gap:4px!important}}
/* Neutral compact UI for height control, embedded in the existing Event / Nền tab. */
.obsl-event-height-admin{display:grid;gap:6px;margin:8px 0 0;padding:10px;border:1px solid var(--line,#667890);border-radius:12px;min-width:0}.obsl-event-height-admin label{font-weight:700}.obsl-event-height-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.obsl-event-height-controls input{width:95px;max-width:100%;min-width:0}.obsl-event-height-controls button{width:auto;flex:0 1 auto}.obsl-event-height-admin small{opacity:.8}
/* Moments: heading and publishing date on SAME row, no repeated cover above the title. */
.moment-article-topline{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;min-width:0}
.moment-article-topline h2{flex:0 1 auto;min-width:0;margin:0!important;font-weight:800}
.moment-article-topline small{color:var(--muted,#9ca3af)!important;opacity:.8;white-space:nowrap;font-size:.72em;font-weight:400;line-height:1.2}
.moment-article-head{display:grid;gap:6px}.moment-article-lead{margin:0 0 6px!important}
/* News: source refresh time is tied to actual Cron snapshot, compact and muted. */
.tech-news-heading-copy>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 7px;min-width:0}
.tech-news-last-updated{font-size:clamp(9px,.8em,12px);font-family:system-ui,sans-serif;font-weight:400;line-height:1.15;opacity:.72;color:var(--text,#fff);white-space:nowrap}.tech-news-last-updated[hidden]{display:none!important}
.obsl-news-updated-admin{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}.obsl-news-updated-admin label{display:flex;align-items:center;gap:5px}.obsl-news-updated-admin input[type=text]{width:140px;max-width:100%}
/* Market: controls LEFT (pencil → refresh) and date/title RIGHT. */
#market-panel{position:relative!important}
#market-panel>.market-heading{display:flex!important;justify-content:flex-end!important;align-items:center!important;width:100%!important;min-height:23px!important;padding:0 4px 0 73px!important;position:relative!important;text-align:right!important;box-sizing:border-box!important}
#market-panel .market-heading-copy{margin-left:auto!important;justify-content:flex-end!important;min-width:0!important}
#market-panel .market-heading .obsl-module-pencil[data-module="market"]{position:absolute!important;top:2px!important;left:3px!important;right:auto!important;z-index:9!important}
#market-panel>#market-refresh-button{position:absolute!important;top:3px!important;left:34px!important;right:auto!important;z-index:9!important;transform:none!important}
/* Keep the same border tone as Google calendar in Dark Mode. */
html.dark :is(#header-frame,#event-frame>.upcoming-wrap,#event-frame>.calendar-ticker,#weather-widget>.now-panel,#weather-widget>.forecast-panel,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame,#birthday-event-panel){border:1px solid #647b94!important;border-radius:15px!important;box-shadow:none!important;outline:none!important}
html.dark #event-frame.event-frame{border:0!important;border-radius:0!important}
html.dark :is(#event-frame>.upcoming-wrap,#event-frame>.calendar-ticker){background-color:#132336!important}
html.dark :is(#tech-news-panel,#moments-panel,#market-panel) :is(.tech-news-title,.moments-title,.market-heading-copy,.panel-title){color:#f7f9ff!important;-webkit-text-fill-color:#f7f9ff!important}
#obsl-force-result{font-size:12px;white-space:normal;line-height:1.4;margin-top:6px;opacity:.9}

/* Existing nested Event box must be the visible owner of its single border. */
#event-frame.event-frame>.upcoming-wrap{border:0!important;background:transparent!important;box-shadow:none!important}
#event-frame.event-frame .upcoming-box{border:1px solid var(--line,#cbd5e1)!important}
#event-motion.obsl-event-motion{min-height:var(--obsl-event-row-height)!important;height:auto!important;max-height:none!important}
#event-motion>.obsl-event-copy,#event-motion>.obsl-event-incoming{min-height:var(--obsl-event-row-height)!important;height:auto!important;max-height:none!important;white-space:normal!important;overflow-wrap:anywhere!important}
html.dark #event-frame.event-frame .upcoming-box{border-color:#647b94!important}

/* Mobile rows stay exactly equal; JS raises the common value when text needs more lines. */
@media(max-width:650px){#event-frame.event-frame>.upcoming-wrap,#event-frame.event-frame>.calendar-ticker{height:var(--obsl-event-row-height)!important;min-height:var(--obsl-event-row-height)!important}}
/* Align every independently bordered module with the Google Calendar border palette. */
html.dark :is(.panel,.obsl-module,.managed-section,.upcoming-box,.calendar-ticker,.footer-frame){border-color:#647b94!important;border-radius:15px!important}
html.dark #event-frame.event-frame{border:0!important;border-radius:0!important}

/* OBSLv2.1 – correction 26/10: identical left heading/right actions, explicit row height, single dark border palette. */
:root {--obsl-event-row-height:44px;--obsl-dark-calendar-border:#647b94}
#event-frame.event-frame {align-items:start!important;min-height:0!important}
#event-frame.event-frame>.upcoming-wrap,
#event-frame.event-frame>.calendar-ticker {
 height:var(--obsl-event-row-height)!important;min-height:0!important;max-height:var(--obsl-event-row-height)!important;
 box-sizing:border-box!important;align-self:start!important;overflow:hidden!important;
}
#event-frame.event-frame .upcoming-box,
#event-frame.event-frame .upcoming-stage,
#event-frame.event-frame .upcoming-slide,
#event-motion.obsl-event-motion,#event-motion>.obsl-event-copy,
#event-motion>.obsl-event-incoming {
 height:100%!important;min-height:0!important;max-height:100%!important;box-sizing:border-box!important;
}
#event-frame.event-frame .upcoming-slide{white-space:normal!important;overflow-wrap:anywhere!important;overflow-y:auto!important}
#event-frame.event-frame>.calendar-ticker{height:var(--obsl-event-row-height)!important;min-height:0!important;overflow:hidden!important}
#event-frame.event-frame .obsl-calendar-viewport{max-height:100%!important;overflow:hidden!important}
#event-frame.event-frame .obsl-calendar-track{white-space:normal!important;overflow-wrap:anywhere!important}
@media(max-width:650px){
 #event-frame.event-frame>.upcoming-wrap,#event-frame.event-frame>.calendar-ticker{height:var(--obsl-event-row-height)!important;min-height:0!important;max-height:var(--obsl-event-row-height)!important}
}
/* Market header title on LEFT, pencil then refresh on RIGHT; no content overlap. */
#market-panel>.market-heading {
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 text-align:left!important;position:relative!important;box-sizing:border-box!important;
 width:100%!important;padding:0 73px 0 7px!important;margin:0!important;min-height:27px!important;
}
#market-panel .market-heading-copy{margin:0 auto 0 0!important;justify-content:flex-start!important;text-align:left!important;min-width:0!important}
#market-panel .market-heading .obsl-module-pencil[data-module="market"]{
 position:absolute!important;right:35px!important;left:auto!important;top:3px!important;transform:none!important;z-index:15!important;
}
#market-panel>#market-refresh-button{position:absolute!important;right:4px!important;left:auto!important;top:3px!important;transform:none!important;z-index:15!important}
/* Canonical border = Google Calendar; same exact color, style, width & radius on every standalone card. */
html.dark {
 --obsl-v2-dark-border:var(--obsl-dark-calendar-border)!important;
 --obsl-v2-card-radius:15px!important;
}
html.dark :is(
 #header-frame,#event-frame .upcoming-box,#event-frame>.calendar-ticker,
 #birthday-event-panel,#weather-widget>.now-panel,#weather-widget>.forecast-panel,
 #countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,
 #footer-frame,#calendar-panel,#google-calendar-panel,#site-birthday,
 .panel.obsl-module:not(#event-frame),.managed-section.panel:not(#event-frame)
){border:1px solid var(--obsl-dark-calendar-border)!important;border-radius:15px!important;outline:0!important;box-shadow:none!important;background-clip:padding-box!important}
html.dark #event-frame.event-frame,html.dark #weather-widget.weather-grid,
html.dark #bottom-grid.bottom-grid{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important}
html.dark #event-frame.event-frame>.upcoming-wrap{border:0!important;background:transparent!important;box-shadow:none!important}
html.dark :is(#tech-news-panel,#moments-panel,#market-panel) :is(.tech-news-title,.moments-title,.panel-title){color:#f7f9ff!important;-webkit-text-fill-color:#f7f9ff!important}
/* Title and status share one row. */
#tech-news-panel .tech-news-heading-copy{min-width:0!important;display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:5px!important}
#tech-news-panel .tech-news-heading-copy>div{min-width:0!important;display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:3px 6px!important}
#tech-news-last-updated{font-size:clamp(10px,.78em,12px)!important;color:inherit!important;opacity:.73!important;white-space:nowrap!important}

/* At exactly 1px, two 1px border edges cannot physically fit the chosen frame height. */
html.obsl-event-1px #event-frame.event-frame .upcoming-box,
html.obsl-event-1px #event-frame.event-frame>.calendar-ticker {border-width:0!important;}


/* OBSLv2.1: Header top clearance, Market controls, Countdown pencil, Moment headings. */
:root{--obsl-header-top-gap:3px}
html body>.dashboard{padding-top:var(--obsl-header-top-gap,3px)!important}
#header-frame{box-sizing:border-box!important;overflow:visible!important}
#header-frame::before{pointer-events:none}
#market-panel>.market-heading{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  position:relative!important;min-height:30px!important;padding:0 4px!important;
  gap:5px!important;width:100%!important;text-align:left!important;
}
#market-panel .market-heading-copy{margin:0!important;flex:1 1 auto!important;min-width:0!important;text-align:left!important}
#market-panel .obsl-market-controls{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;flex:0 0 auto!important;margin-left:auto!important;height:30px!important}
#market-panel .obsl-market-controls>.obsl-module-pencil[data-module="market"],
#market-panel .obsl-market-controls>#market-refresh-button{
  position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;margin:0!important;padding:0!important;
  width:24px!important;min-width:24px!important;height:28px!important;min-height:28px!important;
  flex:0 0 24px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  align-self:center!important;line-height:1!important;vertical-align:middle!important;
}
#countdown-panel>.obsl-module-pencil[data-module="countdown"]{
  top:5px!important;left:5px!important;right:auto!important;bottom:auto!important;position:absolute!important;transform:none!important;z-index:50!important
}
.moment-article-topline,.moment-card-titleline{display:flex!important;align-items:center!important;gap:5px 10px!important;flex-wrap:wrap!important;min-width:0!important}
.moment-article-topline h2{margin:0!important;line-height:1.2!important;align-self:center!important}
.moment-article-topline small{align-self:center!important;line-height:1.2!important;margin:0!important}
.moment-card-titleline{align-items:center!important;line-height:1.25!important}
.moment-card-titleline .moment-card-title{display:inline!important;min-width:0!important;flex:1 1 auto!important;white-space:normal!important;line-height:1.25!important;overflow-wrap:anywhere!important}
.moment-card-titleline .moment-card-date{font-family:inherit!important;font-size:.75em!important;opacity:.65!important;white-space:nowrap!important;flex:0 0 auto!important;line-height:1.25!important}
.obsl-header-top-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0;padding:8px;border:1px solid var(--line,#60758a);border-radius:10px}
.obsl-header-top-controls label{font-weight:700}.obsl-header-top-controls input{width:64px!important;max-width:64px!important}.obsl-header-top-controls button{width:auto!important;flex:0 0 auto!important}