.lopstreak-tab-wrap { padding: 12px 4px; }
.lopstreak-tab-title { margin: 0 0 10px; font-size: 18px; }
.lopstreak-alert { padding: 10px 12px; background: #fff3cd; border: 1px solid #ffeeba; border-radius: 8px; }
.lopstreak-form { max-width: 520px; display: grid; gap: 10px; }
.lopstreak-form input[type="text"],
.lopstreak-form select,
.lopstreak-form textarea,
.lopstreak-form input[type="file"] { width: 100%; padding: 10px; border: 1px solid #d0d7de; border-radius: 10px; }
.lopstreak-btn { padding: 10px 14px; border: 0; border-radius: 10px; cursor: pointer; }
.lopstreak-help { font-size: 12px; opacity: 0.8; }
.lopstreak-hr { margin: 16px 0; }

.lopstreak-history { display: grid; gap: 10px; max-width: 720px; }
.lopstreak-history__item { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; background: #fff; }
.lopstreak-history__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lopstreak-history__meta { font-size: 12px; opacity: 0.75; margin-top: 4px; }
.lopstreak-history__note { margin-top: 8px; }

.lopstreak-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid #ddd; }
.lopstreak-badge--pending { background: #fff3cd; }
.lopstreak-badge--approved { background: #d1e7dd; }
.lopstreak-badge--rejected { background: #f8d7da; }

.lopstreak-files ul { margin: 6px 0 0 18px; }
.lopstreak-files li { margin: 2px 0; }

.lopstreak-dashboard-box { margin: 10px 0 18px; }
.lopstreak-dashboard-box__inner { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background: #fff; display:flex; flex-wrap:wrap; gap: 14px; }
.lopstreak-metric { min-width: 160px; }
.lopstreak-metric__label { font-size: 12px; opacity: .7; }
.lopstreak-metric__value { font-size: 20px; font-weight: 700; }
.lopstreak-totals { min-width: 240px; }
.lopstreak-totals__title { font-size: 12px; opacity: .7; margin-bottom: 6px; }
.lopstreak-total-item { display:flex; justify-content:space-between; gap:10px; padding: 2px 0; }
.lopstreak-muted { opacity: .7; }

/* Toast */
.lopstreak-toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(20,20,20,0.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.3;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  max-width: 90vw;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.lopstreak-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.lopstreak-toast.success{ background: rgba(16, 124, 65, 0.95); }
.lopstreak-toast.error{ background: rgba(180, 35, 35, 0.95); }
.lopstreak-toast.info{ background: rgba(20,20,20,0.92); }

/* ===== Improved Summary Layout ===== */
.lopstreak-summary{
    margin:16px 0 20px;
    padding:12px 14px;
    background:#f8fafc;
    border-radius:12px;
    border:1px solid #e5e7eb;
}
.lopstreak-summary-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
    align-items:center;
    font-size:14px;
}
.lop-badge{
    padding:6px 10px;
    border-radius:20px;
    background:#eef2ff;
}
.lop-badge.streak{ background:#fff7ed; }
.lop-badge.pending{ background:#fef3c7; }
.lop-badge.total{ background:transparent; font-weight:600; }
.lop-metric{
    background:#ffffff;
    padding:4px 10px;
    border-radius:8px;
    border:1px solid #e5e7eb;
}

/* ===== Summary one-line ===== */
.lopstreak-summary-line{
  margin:14px 0 16px;
  padding:10px 12px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  font-size:14px;
  line-height:1.4;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.lopstreak-summary-line .lop-s-item{
  display:inline-flex;
  gap:6px;
  align-items:center;
  white-space:nowrap;
}
.lopstreak-summary-line .lop-s-ico{ display:inline-flex; }
.lopstreak-summary-line .lop-s-sep{
  opacity:.6;
  padding:0 2px;
}

.lopstreak-summary-line .lop-total{
  background:#eef2ff;
  padding:6px 10px;
  border-radius:20px;
  font-weight:600;
  border:1px solid #dbeafe;
}

/* Dashboard summary line */
.lopstreak-dashboard-summary{
  margin:14px 0 18px;
  padding:10px 12px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  font-size:14px;
  line-height:1.4;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.lopstreak-dashboard-summary .lop-dash-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.lopstreak-dashboard-summary .lop-dash-sep{
  opacity:.6;
  padding:0 2px;
}
.lopstreak-dashboard-summary .lop-dash-total{
  background:#eef2ff;
  padding:6px 10px;
  border-radius:20px;
  border:1px solid #dbeafe;
  font-weight:600;
}


/* v2.8.51 - shortcode/front block compact title scale */
.lopstreak-tab-title{font-size:17px!important;line-height:1.32!important;font-weight:820!important;letter-spacing:-.01em!important;}

/* v2.8.75 - Builder lesson frontend units */
.lop-study-builder-lesson{display:block}
.lop-study-builder-tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.lop-study-builder-tags span{display:inline-flex;align-items:center;border:1px solid #d7e6ff;background:#f2f7ff;color:#3154cf;border-radius:999px;padding:7px 12px;font-weight:800}
.lop-study-builder-section{margin:18px 0;padding:16px;border:1px solid #e1eaff;border-radius:22px;background:linear-gradient(135deg,#fff 0%,#f8fbff 100%)}
.lop-study-builder-section h2{margin-top:0}
.lop-study-skill-item{position:relative;overflow:hidden}
.lop-study-skill-item:before{content:"✓";position:absolute;right:12px;top:12px;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#edf7ff;color:#3f63f4;font-weight:900}
.lop-study-builder-detail{margin-top:12px;padding:14px;border-radius:16px;background:#fff;border:1px dashed #cfe0ff}
.lop-study-skill-focus{max-width:520px}

/* v2.8.87 dynamic pricing plan cards */
.lopsp-plan-grid-dynamic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;max-width:1040px;margin:0 auto 24px;}
.lopsp-dynamic-plan-card{position:relative;display:flex;flex-direction:column;min-height:100%;overflow:hidden;}
.lopsp-dynamic-plan-card .lopsp-upgrade-btn{margin-top:auto;}
.lopsp-plan-highlight{position:absolute;top:14px;left:14px;padding:5px 10px;border-radius:999px;background:linear-gradient(135deg,#e0f7ff,#ecfeff);color:#036672;font-size:12px;font-weight:800;box-shadow:0 8px 20px rgba(6,182,212,.12);}
.lopsp-plan-desc{margin:4px 0 12px;color:#475569;font-size:14px;line-height:1.45;}
.lopsp-plan-marketing-badges{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 10px;}
.lopsp-plan-marketing-badges span{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#f0fdfa;color:#0f766e;font-size:12px;font-weight:700;border:1px solid rgba(20,184,166,.18);}
.lopsp-plan-guarantee{margin:8px 0 14px;padding:9px 10px;border-radius:14px;background:#f8fafc;color:#334155;font-size:13px;border:1px solid #e2e8f0;}
@media(max-width:760px){.lopsp-plan-grid-dynamic{grid-template-columns:1fr;gap:14px;}.lopsp-plan-highlight{position:static;align-self:flex-start;margin-bottom:8px;}}


/* v2.8.110 - Unit images inside lessons */
.lop-study-unit-visual-strip{margin:18px 0 22px;padding:16px;border:1px solid #dbeafe;border-radius:24px;background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%)}
.lop-study-unit-visual-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.lop-study-unit-visual-head span{font-weight:900;color:#172554;font-size:18px}
.lop-study-unit-visual-head small{color:#64748b}
.lop-study-unit-visual-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lop-study-unit-visual-card{margin:0;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.06)}
.lop-study-unit-visual-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#eef4ff}
.lop-study-unit-visual-card figcaption{padding:10px 11px;display:flex;flex-direction:column;gap:3px}
.lop-study-unit-visual-card figcaption strong{font-size:14px;color:#172554;line-height:1.25}
.lop-study-unit-visual-card figcaption span{font-size:12px;color:#64748b;line-height:1.3}
.lop-study-session-image-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 14px}
.lop-study-session-image-strip figure{margin:0;border-radius:16px;overflow:hidden;background:#fff;border:1px solid #e2e8f0}
.lop-study-session-image-strip img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.lop-study-session-image-strip figcaption{font-size:12px;font-weight:700;color:#334155;padding:7px 9px}
.lop-study-unit-thumb-wrap{margin:0 0 10px;border-radius:16px;overflow:hidden;border:1px solid #e2e8f0;background:#f8fafc}
.lop-study-unit-thumb,.lop-study-unit-image{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:14px;margin-bottom:10px;background:#eef4ff}
@media(max-width:820px){.lop-study-unit-visual-grid,.lop-study-session-image-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.lop-study-unit-visual-grid,.lop-study-session-image-strip{grid-template-columns:1fr}.lop-study-unit-visual-head{display:block}}


/* v2.8.111 - Lesson flashcard slider UI */
.lop-study-lesson-detail .lop-study-builder-lesson{display:grid;gap:18px;}
.lop-study-roadmap-card{border:1px solid rgba(59,130,246,.16);border-radius:24px;padding:18px;background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);box-shadow:0 18px 46px rgba(15,23,42,.06);}
.lop-study-roadmap-card h2{margin:4px 0 8px!important;color:#12205b;}
.lop-study-roadmap-card p{margin:0 0 10px;color:#475569;line-height:1.55;}
.lop-study-flash-section{position:relative;overflow:hidden;padding:16px!important;border-radius:26px!important;background:linear-gradient(135deg,#fff 0%,#f6f9ff 100%)!important;}
.lop-study-flash-head,.lop-study-unit-visual-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.lop-study-slider-controls{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;}
.lop-study-slider-btn{width:38px;height:38px;border:0;border-radius:999px;background:#3356d8;color:#fff;font-size:26px;font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 24px rgba(51,86,216,.22);transition:.18s ease;}
.lop-study-slider-btn:hover{transform:translateY(-1px);filter:brightness(1.05);}
.lop-study-slider-btn:active{transform:translateY(0) scale(.98);}
.lop-study-lesson-detail .lop-study-vocab-grid,.lop-study-flash-track{display:flex!important;grid-template-columns:none!important;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;margin:12px 0 4px;-webkit-overflow-scrolling:touch;}
.lop-study-lesson-detail .lop-study-vocab-grid::-webkit-scrollbar,.lop-study-flash-track::-webkit-scrollbar{height:8px;}
.lop-study-lesson-detail .lop-study-vocab-grid::-webkit-scrollbar-thumb,.lop-study-flash-track::-webkit-scrollbar-thumb{background:#c7d2fe;border-radius:999px;}
.lop-study-lesson-detail .lop-study-vocab-card,.lop-study-flashcard{position:relative;flex:0 0 clamp(238px,32vw,330px);scroll-snap-align:start;border-radius:24px!important;border:1px solid #dbe7ff!important;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;box-shadow:0 18px 42px rgba(15,23,42,.08)!important;padding:12px!important;display:flex!important;flex-direction:column;gap:10px;min-height:360px;}
.lop-study-flash-count{position:absolute;top:14px;right:14px;z-index:2;padding:5px 9px;border-radius:999px;background:rgba(15,23,42,.68);color:#fff;font-size:12px;font-weight:900;backdrop-filter:blur(8px);}
.lop-study-unit-thumb-wrap{margin:0!important;border-radius:20px!important;overflow:hidden;border:1px solid #e2e8f0;background:#eef4ff;}
.lop-study-unit-thumb,.lop-study-unit-image{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:0!important;margin:0!important;background:#eef4ff;}
.lop-study-unit-thumb-empty{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e0f2fe,#eef2ff);color:#3356d8;font-size:42px;font-weight:1000;}
.lop-study-flash-copy{display:grid;gap:7px;padding:0 2px;}
.lop-study-lesson-detail .lop-study-vocab-card strong,.lop-study-flashcard strong{font-size:21px!important;line-height:1.18;color:#0f1c54;}
.lop-study-lesson-detail .lop-study-vocab-card span,.lop-study-flashcard span{font-size:14px;line-height:1.42;color:#475569;font-weight:800;}
.lop-study-lesson-detail .lop-study-vocab-card button,.lop-study-flashcard button{width:max-content;border:0;border-radius:999px;background:#4f6df5;color:#fff;padding:9px 13px;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(79,109,245,.18);}
.lop-study-unit-audio{width:100%;height:36px;margin:2px 0;}
.lop-study-flash-detail{margin-top:auto;border-top:1px dashed #dbe7ff;padding-top:8px;}
.lop-study-flash-detail summary{cursor:pointer;color:#3356d8;font-weight:900;font-size:13px;}
.lop-study-flash-detail div{margin-top:8px;max-height:220px;overflow:auto;color:#334155;line-height:1.5;font-size:14px;padding-right:4px;}
.lop-study-builder-media-accordion{display:grid;gap:10px;margin-top:10px;}
.lop-study-unit-visual-strip.lop-study-flash-strip{overflow:hidden;}
.lop-study-unit-visual-strip .lop-study-unit-visual-grid{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:14px;padding:2px 2px 12px;}
.lop-study-unit-visual-strip .lop-study-unit-visual-card{flex:0 0 clamp(210px,28vw,270px);scroll-snap-align:start;border-radius:22px;}
.lop-study-unit-visual-strip .lop-study-unit-visual-card img{aspect-ratio:4/3;}
.lop-study-complete-card ol{margin-bottom:0;}
@media(max-width:720px){.lop-study-flash-head,.lop-study-unit-visual-head{align-items:flex-start}.lop-study-slider-controls{margin-left:auto}.lop-study-lesson-detail .lop-study-vocab-card,.lop-study-flashcard{flex-basis:82vw;min-height:340px}.lop-study-unit-visual-strip .lop-study-unit-visual-card{flex-basis:72vw}.lop-study-slider-btn{width:34px;height:34px;font-size:23px}}


/* v2.8.112 - Polished lesson flashcard UX: spacing, map, arrows, responsive overflow safety */
.lop-study-lesson-detail{max-width:min(1080px,calc(100vw - 28px));overflow-x:clip;box-sizing:border-box;}
.lop-study-lesson-detail *{box-sizing:border-box;}
.lop-study-lesson-hero{max-width:100%;overflow:hidden;gap:clamp(14px,3vw,24px);}
.lop-study-lesson-hero > div:first-child{min-width:0;}
.lop-study-lesson-hero .lopsp-kicker{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;max-width:100%;white-space:normal;line-height:1.45;margin:0 0 10px;}
.lop-study-lesson-hero h1{margin:6px 0 12px!important;overflow-wrap:anywhere;word-break:normal;text-wrap:balance;}
.lop-study-lesson-hero p{margin:10px 0 0!important;line-height:1.68!important;color:#475569;max-width:760px;}
.lop-study-task-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;line-height:1.45;}
.lop-study-roadmap-card{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr);gap:14px;max-width:100%;overflow:hidden!important;padding:clamp(15px,2.2vw,22px)!important;border-radius:26px!important;}
.lop-study-roadmap-card:before{content:"";position:absolute;right:-70px;top:-80px;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,rgba(99,102,241,.18),rgba(99,102,241,0) 68%);pointer-events:none;}
.lop-study-roadmap-copy{min-width:0;position:relative;z-index:1;}
.lop-study-roadmap-card .lopsp-kicker{margin:0 0 10px;}
.lop-study-roadmap-card h2{margin:0 0 8px!important;line-height:1.25!important;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere;}
.lop-study-roadmap-card p{margin:0!important;max-width:760px;line-height:1.68!important;overflow-wrap:anywhere;}
.lop-study-roadmap-stats,.lop-study-builder-tags{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;max-width:100%;margin:12px 0 0!important;}
.lop-study-roadmap-stats span,.lop-study-builder-tags span{display:inline-flex!important;align-items:center!important;min-width:0;max-width:100%;border:1px solid #dbe7ff;background:#f8fbff;color:#1e3a8a;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:900;line-height:1.25;box-shadow:0 8px 18px rgba(15,23,42,.04);}
.lop-study-builder-tags span + span{margin-left:0!important;}
.lop-study-mini-map{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px;max-width:100%;}
.lop-study-mini-map span{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:9px;row-gap:2px;align-items:center;padding:10px 11px;border:1px solid #e1eaff;border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 10px 22px rgba(15,23,42,.04);}
.lop-study-mini-map b{grid-row:1/3;display:inline-flex;width:28px;height:28px;border-radius:999px;align-items:center;justify-content:center;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:13px;}
.lop-study-mini-map em{min-width:0;font-style:normal;font-weight:900;color:#172554;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lop-study-mini-map small{min-width:0;color:#64748b;font-weight:800;line-height:1.25;}
.lop-study-flash-section{max-width:100%;overflow:hidden!important;padding:clamp(13px,2vw,18px)!important;border-radius:26px!important;}
.lop-study-flash-head,.lop-study-unit-visual-head{align-items:flex-start!important;gap:12px!important;margin-bottom:12px!important;max-width:100%;}
.lop-study-flash-head > div,.lop-study-unit-visual-head > div:first-child{min-width:0;max-width:100%;}
.lop-study-flash-head h2,.lop-study-unit-visual-head span{margin:0!important;font-size:clamp(19px,2.2vw,27px)!important;line-height:1.28!important;letter-spacing:-.02em;overflow-wrap:anywhere;text-wrap:balance;}
.lop-study-session-type{display:inline-flex;align-items:center;max-width:100%;margin:7px 0 0!important;padding:6px 10px;border-radius:999px;background:#eef4ff;color:#3356d8;font-size:12px!important;font-weight:900;line-height:1.25;}
.lop-study-slider-controls{display:inline-flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto;padding:5px!important;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(37,99,235,.16);box-shadow:0 16px 34px rgba(37,99,235,.13);backdrop-filter:blur(10px);}
.lop-study-slider-btn{width:42px!important;height:42px!important;border-radius:999px!important;border:1px solid rgba(37,99,235,.14)!important;background:linear-gradient(135deg,#2563eb,#635bff)!important;color:#fff!important;font-size:0!important;font-weight:950!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 12px 25px rgba(37,99,235,.22)!important;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,opacity .18s ease!important;}
.lop-study-slider-btn span{font-size:26px!important;line-height:1!important;transform:translateY(-1px);}
.lop-study-slider-btn:hover,.lop-study-slider-btn:focus-visible{transform:translateY(-2px);box-shadow:0 18px 30px rgba(37,99,235,.28)!important;filter:brightness(1.04);outline:0;}
.lop-study-slider-btn.is-disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.15);box-shadow:none!important;transform:none!important;}
.lop-study-lesson-detail .lop-study-vocab-grid,.lop-study-flash-track,.lop-study-unit-visual-strip .lop-study-unit-visual-grid{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;scroll-padding-left:6px;padding:8px 5px 16px!important;margin:8px 0 2px!important;}
.lop-study-lesson-detail .lop-study-vocab-card,.lop-study-flashcard{flex:0 0 clamp(258px,30vw,342px)!important;max-width:min(342px,88vw);min-height:auto!important;padding:12px!important;border-radius:26px!important;gap:11px!important;}
.lop-study-unit-visual-strip .lop-study-unit-visual-card{flex-basis:clamp(220px,27vw,292px)!important;}
.lop-study-flash-copy{display:grid!important;gap:8px!important;padding:2px 2px 0!important;min-width:0;}
.lop-study-lesson-detail .lop-study-vocab-card strong,.lop-study-flashcard strong{display:block;line-height:1.22!important;margin:2px 0 0!important;overflow-wrap:anywhere;text-wrap:balance;}
.lop-study-lesson-detail .lop-study-vocab-card span,.lop-study-flashcard span{display:block;margin:0!important;line-height:1.48!important;font-weight:780!important;}
.lop-study-lesson-detail .lop-study-vocab-card button,.lop-study-flashcard button{margin-top:2px;min-height:38px;}
.lop-study-flash-detail{margin-top:10px!important;border-top:1px dashed #dbe7ff!important;padding-top:10px!important;}
.lop-study-flash-detail summary{display:inline-flex!important;align-items:center;gap:6px;width:max-content;max-width:100%;padding:8px 11px;border-radius:999px;background:#eef4ff;color:#1d4ed8!important;line-height:1.2!important;}
.lop-study-flash-detail div{margin-top:10px!important;max-height:260px!important;overflow:auto;padding:11px 12px!important;border-radius:16px;background:#fff;border:1px solid #eef2ff;}
.lop-study-complete-card ol{display:grid;gap:8px;margin:8px 0 0!important;padding-left:20px!important;}
@media(min-width:1100px){.lop-study-lesson-detail .lop-study-vocab-card,.lop-study-flashcard{flex-basis:320px!important;}.lop-study-roadmap-card{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);align-items:start;}}
@media(max-width:760px){.lop-study-lesson-detail{max-width:calc(100vw - 20px);}.lop-study-lesson-hero{padding:18px!important;border-radius:24px!important;}.lop-study-flash-head,.lop-study-unit-visual-head{align-items:stretch!important;flex-direction:column!important;}.lop-study-slider-controls{align-self:flex-end;margin-top:0!important;}.lop-study-slider-btn{width:40px!important;height:40px!important;}.lop-study-lesson-detail .lop-study-vocab-card,.lop-study-flashcard{flex-basis:min(86vw,340px)!important;max-width:min(86vw,340px);}.lop-study-unit-visual-strip .lop-study-unit-visual-card{flex-basis:min(76vw,300px)!important;}.lop-study-mini-map{grid-template-columns:1fr;}.lop-study-roadmap-stats span,.lop-study-builder-tags span{font-size:12px;padding:6px 10px;}}

/* v2.8.113 - Lesson completion checklist gate before Báo LOP */
.lop-study-skill-item{position:relative;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;}
.lop-study-skill-item.is-checked{border-color:rgba(34,197,94,.42)!important;background:linear-gradient(180deg,#fff,#f0fdf4)!important;box-shadow:0 20px 38px rgba(34,197,94,.13)!important;}
.lop-study-skill-item.is-attention{animation:lop-study-card-attention 1.25s ease both;}
@keyframes lop-study-card-attention{0%,100%{transform:translateY(0)}18%{transform:translateY(-4px);box-shadow:0 24px 48px rgba(244,63,94,.18)}36%{transform:translateY(0)}54%{transform:translateY(-3px)}}
.lop-study-unit-check{display:flex!important;align-items:center!important;gap:9px!important;margin-top:12px!important;padding:10px 12px!important;border-radius:18px!important;background:#f8fbff!important;border:1px solid #dbeafe!important;color:#1e3a8a!important;font-weight:950!important;font-size:13px!important;line-height:1.25!important;cursor:pointer!important;user-select:none;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.lop-study-unit-check:hover{background:#eff6ff!important;border-color:#93c5fd!important;box-shadow:0 10px 22px rgba(37,99,235,.10);transform:translateY(-1px);}
.lop-study-unit-check input{appearance:none;-webkit-appearance:none;width:23px;height:23px;flex:0 0 23px;border-radius:9px;border:2px solid #93c5fd;background:#fff;display:inline-grid;place-content:center;box-shadow:inset 0 0 0 3px #fff;transition:background .18s ease,border-color .18s ease,transform .18s ease;}
.lop-study-unit-check input:before{content:'✓';font-size:15px;font-weight:950;color:#fff;transform:scale(0);transition:transform .16s ease;}
.lop-study-unit-check input:checked{background:linear-gradient(135deg,#16a34a,#22c55e);border-color:#16a34a;transform:scale(1.04);}
.lop-study-unit-check input:checked:before{transform:scale(1);}
.lop-study-unit-check input:focus-visible{outline:3px solid rgba(59,130,246,.28);outline-offset:2px;}
.lop-study-skill-item.is-checked .lop-study-unit-check{background:#ecfdf5!important;border-color:#86efac!important;color:#166534!important;}
.lop-study-complete-gate{position:relative;overflow:hidden;background:radial-gradient(circle at top right,rgba(37,99,235,.12),transparent 34%),linear-gradient(135deg,#f8fbff,#ecfeff)!important;border-color:rgba(37,99,235,.14)!important;}
.lop-study-complete-gate:before{content:'';position:absolute;left:-60px;bottom:-80px;width:190px;height:190px;border-radius:999px;background:rgba(34,197,94,.12);pointer-events:none;}
.lop-study-complete-gate-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px;}
.lop-study-complete-gate-head h2{margin:7px 0 8px!important;line-height:1.22!important;text-wrap:balance;}
.lop-study-complete-gate-head p{margin:0!important;max-width:760px;color:#475569;line-height:1.68!important;}
.lop-study-complete-ring{flex:0 0 auto;min-width:96px;height:96px;border-radius:30px;background:#fff;border:1px solid #dbeafe;box-shadow:0 18px 38px rgba(37,99,235,.13);display:flex;align-items:center;justify-content:center;color:#1e3a8a;}
.lop-study-complete-ring strong{font-size:34px;line-height:1;font-weight:950;color:#16a34a;}
.lop-study-complete-ring span{font-size:16px;font-weight:950;color:#64748b;}
.lop-study-complete-ring em{font-style:normal;}
.lop-study-complete-progress{position:relative;z-index:1;height:11px;border-radius:999px;background:#e2e8f0;overflow:hidden;margin:6px 0 12px;box-shadow:inset 0 1px 2px rgba(15,23,42,.06);}
.lop-study-complete-progress span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#2563eb,#22c55e);transition:width .25s ease;}
.lop-study-complete-status{position:relative;z-index:1;margin:0!important;color:#334155!important;font-weight:850;line-height:1.6!important;}
.lop-study-complete-missing{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:12px;padding:11px;border-radius:18px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:13px;font-weight:850;}
.lop-study-complete-missing strong{margin-right:2px;}
.lop-study-complete-missing span,.lop-study-complete-missing em{display:inline-flex;align-items:center;border-radius:999px;background:#fff;border:1px solid #ffedd5;padding:5px 9px;font-style:normal;line-height:1.2;}
.lop-study-complete-actions{position:relative;z-index:1;margin-top:16px!important;align-items:center!important;}
.lop-study-complete-actions .lop-study-done-inline{margin:0!important;display:inline-flex;}
.lop-study-complete-primary{border:0!important;cursor:pointer!important;}
.lop-study-complete-primary.is-locked{background:linear-gradient(135deg,#94a3b8,#64748b)!important;box-shadow:none!important;filter:saturate(.8);}
.lop-study-complete-primary.is-locked:after{content:' · còn thiếu check';font-size:12px;font-weight:900;opacity:.92;}
.lop-study-complete-gate.is-warning{border-color:#fb7185!important;box-shadow:0 18px 44px rgba(244,63,94,.12)!important;}
.lop-study-complete-gate.is-complete{background:radial-gradient(circle at top right,rgba(34,197,94,.18),transparent 34%),linear-gradient(135deg,#f0fdf4,#ecfeff)!important;border-color:rgba(34,197,94,.25)!important;}
.lop-study-complete-hint{position:relative;z-index:1;margin-top:13px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.72);border:1px dashed #bfdbfe;color:#475569;font-size:13px;line-height:1.55;font-weight:750;}
.lop-study-complete-hint span{color:#1d4ed8;font-weight:950;}
@media(max-width:760px){.lop-study-complete-gate-head{flex-direction:column;}.lop-study-complete-ring{min-width:82px;height:82px;border-radius:24px;}.lop-study-complete-ring strong{font-size:29px}.lop-study-complete-actions{display:grid!important;grid-template-columns:1fr!important;}.lop-study-complete-actions .lop-study-done-inline,.lop-study-complete-actions .primary,.lop-study-complete-actions .secondary{width:100%!important;justify-content:center!important;}.lop-study-unit-check{font-size:12.5px!important;padding:9px 10px!important;}}


/* v2.8.114 - Lesson check UX + unified horizontal sliders */
.lop-study-lesson-detail .lop-study-builder-section,
.lop-study-lesson-detail .lop-study-unit-visual-strip,
.lop-study-lesson-detail .lop-study-roadmap-card,
.lop-study-lesson-detail .lop-study-complete-gate{max-width:100%;overflow:hidden;}
.lop-study-lesson-detail .lop-study-vocab-grid,
.lop-study-lesson-detail .lop-study-flash-track,
.lop-study-lesson-detail .lop-study-unit-visual-grid,
.lop-study-lesson-detail .lop-study-mini-map.lop-study-mini-map-slider{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;gap:14px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;scroll-behavior:smooth!important;-webkit-overflow-scrolling:touch!important;padding:6px 4px 16px!important;margin:12px 0 4px!important;max-width:100%;}
.lop-study-lesson-detail .lop-study-vocab-grid::-webkit-scrollbar,
.lop-study-lesson-detail .lop-study-flash-track::-webkit-scrollbar,
.lop-study-lesson-detail .lop-study-unit-visual-grid::-webkit-scrollbar,
.lop-study-lesson-detail .lop-study-mini-map.lop-study-mini-map-slider::-webkit-scrollbar{height:8px;}
.lop-study-lesson-detail .lop-study-vocab-grid::-webkit-scrollbar-track,
.lop-study-lesson-detail .lop-study-flash-track::-webkit-scrollbar-track,
.lop-study-lesson-detail .lop-study-unit-visual-grid::-webkit-scrollbar-track,
.lop-study-lesson-detail .lop-study-mini-map.lop-study-mini-map-slider::-webkit-scrollbar-track{background:rgba(219,234,254,.55);border-radius:999px;}
.lop-study-lesson-detail .lop-study-vocab-grid::-webkit-scrollbar-thumb,
.lop-study-lesson-detail .lop-study-flash-track::-webkit-scrollbar-thumb,
.lop-study-lesson-detail .lop-study-unit-visual-grid::-webkit-scrollbar-thumb,
.lop-study-lesson-detail .lop-study-mini-map.lop-study-mini-map-slider::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#93c5fd,#a5b4fc);border-radius:999px;}
.lop-study-lesson-detail .lop-study-mini-map.lop-study-mini-map-slider span{flex:0 0 clamp(180px,24vw,245px);scroll-snap-align:start;}
.lop-study-lesson-detail .lop-study-vocab-card,
.lop-study-lesson-detail .lop-study-flashcard{scroll-snap-align:start!important;scroll-snap-stop:always!important;}
.lop-study-slider-shell{position:relative;}
.lop-study-slider-shell:before,.lop-study-slider-shell:after{content:"";position:absolute;top:0;bottom:12px;width:28px;z-index:3;pointer-events:none;opacity:.9;}
.lop-study-slider-shell:before{left:0;background:linear-gradient(90deg,rgba(248,251,255,.94),rgba(248,251,255,0));}
.lop-study-slider-shell:after{right:0;background:linear-gradient(270deg,rgba(248,251,255,.94),rgba(248,251,255,0));}
.lop-study-slider-controls{gap:8px!important;padding:6px!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(37,99,235,.18)!important;box-shadow:0 16px 36px rgba(37,99,235,.14)!important;}
.lop-study-slider-btn{width:44px!important;height:44px!important;background:linear-gradient(135deg,#1d4ed8,#7c3aed)!important;border:1px solid rgba(255,255,255,.58)!important;box-shadow:0 16px 30px rgba(37,99,235,.24)!important;}
.lop-study-slider-btn span{font-size:28px!important;font-weight:950!important;line-height:1!important;}
.lop-study-slider-btn:not(.is-disabled):hover{transform:translateY(-2px) scale(1.03)!important;box-shadow:0 20px 36px rgba(37,99,235,.30)!important;}
.lop-study-slider-btn.is-disabled{opacity:.38!important;background:linear-gradient(135deg,#cbd5e1,#94a3b8)!important;color:#fff!important;cursor:not-allowed!important;box-shadow:none!important;}
.lop-study-unit-check{width:100%!important;margin-top:auto!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;padding:12px 14px!important;border-radius:20px!important;background:linear-gradient(135deg,#ffffff,#eef6ff)!important;border:1px solid #cfe0ff!important;box-shadow:0 12px 26px rgba(37,99,235,.09)!important;color:#172554!important;font-weight:950!important;font-size:15px!important;line-height:1.22!important;min-height:58px!important;cursor:pointer!important;}
.lop-study-unit-check:hover{background:linear-gradient(135deg,#eff6ff,#ffffff)!important;border-color:#8eb9ff!important;box-shadow:0 16px 32px rgba(37,99,235,.13)!important;transform:translateY(-1px);}
.lop-study-unit-check input{appearance:none!important;-webkit-appearance:none!important;width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:13px!important;border:2px solid #93b7ff!important;background:#fff!important;display:inline-grid!important;place-content:center!important;box-shadow:inset 0 0 0 4px #fff,0 8px 16px rgba(37,99,235,.10)!important;transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;margin:0!important;}
.lop-study-unit-check input:before{content:'✓'!important;font-size:22px!important;font-weight:1000!important;color:#fff!important;line-height:1!important;transform:scale(0)!important;transition:transform .16s ease!important;}
.lop-study-unit-check input:checked{background:linear-gradient(135deg,#16a34a,#22c55e)!important;border-color:#16a34a!important;transform:scale(1.04)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),0 10px 20px rgba(34,197,94,.18)!important;}
.lop-study-unit-check input:checked:before{transform:scale(1)!important;}
.lop-study-unit-check input:focus-visible{outline:4px solid rgba(59,130,246,.25)!important;outline-offset:3px!important;}
.lop-study-unit-check span{display:inline-flex!important;align-items:center!important;margin:0!important;padding:0!important;min-width:0!important;white-space:nowrap!important;color:inherit!important;font-size:15px!important;line-height:1.22!important;font-weight:950!important;letter-spacing:-.01em!important;}
.lop-study-skill-item.is-checked .lop-study-unit-check{background:linear-gradient(135deg,#ecfdf5,#f7fee7)!important;border-color:#86efac!important;color:#14532d!important;box-shadow:0 14px 28px rgba(34,197,94,.14)!important;}
.lop-study-skill-item.is-checked .lop-study-unit-check span:after{content:'Hoàn tất';display:inline-flex;margin-left:8px;padding:3px 8px;border-radius:999px;background:#dcfce7;color:#166534;font-size:11px;font-weight:950;line-height:1;}
.lop-study-complete-missing{overflow-x:auto;flex-wrap:nowrap!important;scroll-snap-type:x proximity;padding-bottom:13px;}
.lop-study-complete-missing span,.lop-study-complete-missing em{flex:0 0 auto;scroll-snap-align:start;}
@media(max-width:760px){
  .lop-study-slider-controls{align-self:flex-start!important;}
  .lop-study-slider-btn{width:42px!important;height:42px!important;}
  .lop-study-unit-check{min-height:56px!important;padding:11px 12px!important;gap:10px!important;font-size:14px!important;border-radius:18px!important;}
  .lop-study-unit-check input{width:32px!important;height:32px!important;flex-basis:32px!important;}
  .lop-study-unit-check span{font-size:14px!important;white-space:normal!important;}
  .lop-study-skill-item.is-checked .lop-study-unit-check span:after{display:none;}
  .lop-study-slider-shell:before,.lop-study-slider-shell:after{width:18px;}
  .lop-study-lesson-detail .lop-study-mini-map.lop-study-mini-map-slider span{flex-basis:min(78vw,270px);}
}

/* v2.8.115 - Lesson completion UI: missing tags + Quiz 100% gate */
.lop-study-complete-reqs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 14px;}
.lop-study-complete-req{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:20px;background:rgba(255,255,255,.82);border:1px solid #dbeafe;box-shadow:0 12px 28px rgba(37,99,235,.08);min-width:0;}
.lop-study-req-icon{width:42px;height:42px;flex:0 0 42px;display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#eef4ff,#fff);border:1px solid #dbeafe;font-size:20px;}
.lop-study-complete-req strong{display:block;color:#172554;font-size:14px;font-weight:950;line-height:1.2;margin:0 0 3px;}
.lop-study-complete-req em{display:block;color:#64748b;font-size:12.5px;font-style:normal;font-weight:800;line-height:1.35;overflow-wrap:anywhere;}
.lop-study-complete-req.is-done{background:linear-gradient(135deg,#ecfdf5,#ffffff);border-color:#86efac;box-shadow:0 14px 30px rgba(34,197,94,.12);}
.lop-study-complete-req.is-done .lop-study-req-icon{background:linear-gradient(135deg,#16a34a,#22c55e);border-color:#22c55e;color:#fff;}
.lop-study-complete-req.is-todo{background:linear-gradient(135deg,#fff7ed,#ffffff);border-color:#fed7aa;}
.lop-study-complete-req.is-todo .lop-study-req-icon{background:#fff7ed;border-color:#fdba74;color:#c2410c;}
.lop-study-complete-req.is-muted{opacity:.72;}
.lop-study-complete-missing{display:block!important;margin-top:14px!important;padding:14px!important;border-radius:22px!important;background:linear-gradient(135deg,#fff7ed,#fff)!important;border:1px solid #fed7aa!important;color:#9a3412!important;box-shadow:0 12px 28px rgba(251,146,60,.10)!important;overflow:hidden!important;}
.lop-study-complete-missing[hidden]{display:none!important;}
.lop-study-missing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.lop-study-missing-head strong{display:inline-flex;align-items:center;gap:7px;margin:0!important;font-size:15px;font-weight:950;color:#9a3412;white-space:nowrap;}
.lop-study-missing-head strong:before{content:'⚠';display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:999px;background:#ffedd5;color:#c2410c;font-size:13px;}
.lop-study-missing-head small{display:block;color:#b45309;font-weight:780;font-size:12.5px;line-height:1.35;text-align:right;}
.lop-study-missing-list{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 1px 8px;}
.lop-study-missing-list::-webkit-scrollbar{height:7px}.lop-study-missing-list::-webkit-scrollbar-track{background:#ffedd5;border-radius:999px}.lop-study-missing-list::-webkit-scrollbar-thumb{background:#fb923c;border-radius:999px}
.lop-study-missing-chip{flex:0 0 auto;scroll-snap-align:start;display:inline-flex!important;align-items:center;gap:7px;max-width:min(310px,70vw);padding:8px 12px!important;border-radius:999px!important;background:#fff!important;border:1px solid #fed7aa!important;color:#7c2d12!important;font-weight:900!important;font-size:13px!important;line-height:1.2!important;white-space:nowrap;box-shadow:0 8px 18px rgba(251,146,60,.10);}
.lop-study-missing-chip i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:3px 7px;background:#ffedd5;color:#c2410c;font-size:11px;font-weight:950;}
.lop-study-missing-chip.is-quiz{border-color:#ddd6fe!important;color:#5b21b6!important;background:#f8f7ff!important;}
.lop-study-missing-chip.is-quiz i{background:#ede9fe;color:#6d28d9;}
.lop-study-missing-chip.is-speaking{border-color:#bae6fd!important;color:#075985!important;background:#f0f9ff!important;}
.lop-study-missing-chip.is-speaking i{background:#e0f2fe!important;color:#0369a1!important;}
.lop-study-missing-chip.is-more{background:#f8fafc!important;border-color:#cbd5e1!important;color:#334155!important;}
.lop-study-quiz-runner{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;border-radius:22px;}
.lop-study-quiz-runner.is-need-100{box-shadow:0 0 0 3px rgba(251,146,60,.10);}
.lop-study-quiz-runner.is-passed-100{box-shadow:0 0 0 3px rgba(34,197,94,.13);}
.lop-study-quiz-runner.is-attention{animation:lopStudyAttention115 .9s ease-in-out 0s 2;}
.lop-study-complete-primary.is-locked:after{content:' · còn thiếu điều kiện';font-size:12px;font-weight:900;opacity:.92;}
@keyframes lopStudyAttention115{0%,100%{transform:translateY(0)}35%{transform:translateY(-4px);box-shadow:0 18px 44px rgba(251,146,60,.18)}}
@media(max-width:760px){.lop-study-complete-reqs{grid-template-columns:1fr;gap:9px}.lop-study-complete-req{padding:11px 12px;border-radius:18px}.lop-study-req-icon{width:38px;height:38px;flex-basis:38px}.lop-study-missing-head{flex-direction:column;gap:5px}.lop-study-missing-head small{text-align:left}.lop-study-missing-chip{max-width:78vw;font-size:12.5px!important}}

/* v2.8.116 - Highlight study workflow and lesson bubble flow navigation */
.lop-study-workflow-pro{position:relative;overflow:hidden!important;border:1px solid rgba(37,99,235,.14)!important;background:linear-gradient(135deg,#ffffff 0%,#f8fbff 52%,#eefbff 100%)!important;box-shadow:0 22px 60px rgba(15,23,42,.08)!important;padding:clamp(18px,3vw,28px)!important;border-radius:30px!important;}
.lop-study-workflow-pro:before{content:"";position:absolute;inset:auto -80px -120px auto;width:280px;height:280px;border-radius:999px;background:radial-gradient(circle,rgba(79,109,245,.18),rgba(79,109,245,0) 68%);pointer-events:none;}
.lop-study-workflow-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px;}
.lop-study-workflow-head h2{margin:4px 0 8px!important;font-size:clamp(26px,3vw,38px)!important;color:#08133f!important;letter-spacing:-.03em;}
.lop-study-workflow-head p{margin:0!important;color:#526176!important;line-height:1.58!important;font-weight:750!important;max-width:720px;}
.lop-study-workflow-head em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:82px;padding:10px 13px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:950;border:1px solid #c7d2fe;box-shadow:0 10px 22px rgba(99,102,241,.10);}
.lop-study-workflow-pro .lop-study-workflow-steps{position:relative;z-index:1;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px!important;}
.lop-study-workflow-pro .lop-study-workflow-steps span{position:relative;display:flex!important;align-items:center;gap:12px;min-height:94px;padding:16px 15px!important;border-radius:24px!important;background:linear-gradient(135deg,#fff 0%,#f0fdfa 100%)!important;border:1px solid #dbeafe!important;box-shadow:0 15px 34px rgba(37,99,235,.08)!important;color:#07133f!important;overflow:hidden;}
.lop-study-workflow-pro .lop-study-workflow-steps span:after{content:"";position:absolute;right:-26px;top:-30px;width:92px;height:92px;border-radius:999px;background:rgba(59,130,246,.08);}
.lop-study-workflow-pro .lop-study-workflow-steps i{position:relative;z-index:1;font-style:normal;flex:0 0 44px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#4f46e5,#2563eb);color:#fff;font-weight:950;font-size:18px;box-shadow:0 12px 26px rgba(37,99,235,.24);}
.lop-study-workflow-pro .lop-study-workflow-steps strong{position:relative;z-index:1;display:block!important;font-weight:950!important;font-size:17px!important;line-height:1.2!important;color:#07133f!important;}
.lop-study-workflow-pro .lop-study-workflow-steps small{position:relative;z-index:1;display:block!important;margin-top:5px;color:#64748b!important;font-weight:780!important;line-height:1.35!important;font-size:12.5px!important;}
.lop-study-workflow-pro .lop-study-workflow-steps span:nth-child(2){background:linear-gradient(135deg,#fff 0%,#eef4ff 100%)!important;}
.lop-study-workflow-pro .lop-study-workflow-steps span:nth-child(3){background:linear-gradient(135deg,#fff 0%,#fff7ed 100%)!important;}
.lop-study-workflow-pro .lop-study-workflow-steps span:nth-child(4){background:linear-gradient(135deg,#fff 0%,#ecfdf5 100%)!important;}

.lop-study-lesson-detail{position:relative;}
.lop-study-lesson-flow-bubbles{position:fixed;left:max(12px,calc((100vw - 1180px)/2 - 76px));top:150px;z-index:30;display:flex;flex-direction:column;gap:10px;width:70px;padding:9px;border-radius:28px;background:rgba(255,255,255,.92);border:1px solid rgba(219,234,254,.95);box-shadow:0 22px 50px rgba(15,23,42,.13);backdrop-filter:blur(14px);}
.lop-study-lesson-flow-bubbles a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;min-height:62px;padding:8px 5px;border-radius:20px;text-decoration:none!important;color:#475569!important;background:transparent;border:1px solid transparent;transition:all .18s ease;}
.lop-study-lesson-flow-bubbles a i{font-style:normal;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#eef4ff;color:#1d4ed8;font-weight:950;font-size:14px;transition:all .18s ease;}
.lop-study-lesson-flow-bubbles a span{font-size:12.5px;font-weight:950;line-height:1.05;color:#172554;}
.lop-study-lesson-flow-bubbles a small{font-size:9.5px;font-weight:800;color:#64748b;line-height:1.05;}
.lop-study-lesson-flow-bubbles a:hover,.lop-study-lesson-flow-bubbles a.is-active{background:linear-gradient(135deg,#eef4ff,#ffffff);border-color:#c7d2fe;box-shadow:0 10px 22px rgba(79,109,245,.13);transform:translateY(-1px);}
.lop-study-lesson-flow-bubbles a:hover i,.lop-study-lesson-flow-bubbles a.is-active i{background:linear-gradient(135deg,#4f46e5,#2563eb);color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.22);}
.lop-lesson-flow-section{scroll-margin-top:110px;}
.lop-study-lesson-flow-bubbles:after{content:"";position:absolute;top:24px;bottom:24px;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(#dbeafe,#c7d2fe,#dbeafe);z-index:-1;}

@media(max-width:1280px){.lop-study-lesson-flow-bubbles{left:10px;top:auto;bottom:12px;flex-direction:row;width:auto;max-width:calc(100vw - 20px);border-radius:24px;padding:8px;overflow-x:auto;}.lop-study-lesson-flow-bubbles:after{display:none}.lop-study-lesson-flow-bubbles a{min-height:58px;min-width:76px;padding:7px 8px}.lop-lesson-flow-section{scroll-margin-top:92px;}}
@media(max-width:860px){.lop-study-workflow-head{flex-direction:column;margin-bottom:14px}.lop-study-workflow-head em{align-self:flex-start}.lop-study-workflow-pro .lop-study-workflow-steps{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.lop-study-workflow-pro .lop-study-workflow-steps span{flex:0 0 min(78vw,310px);scroll-snap-align:start}.lop-study-lesson-flow-bubbles{bottom:8px;gap:7px}.lop-study-lesson-flow-bubbles a{min-width:68px}.lop-study-lesson-flow-bubbles a small{display:none}.lop-study-lesson-flow-bubbles a span{font-size:11.5px}}


/* v2.8.117 - Reliable polished lesson Flow Bubble navigation */
body.lop-support-body .lop-study-lesson-flow-bubbles,
.lop-study-lesson-flow-bubbles-v117,
.lop-study-lesson-flow-bubbles{
  position:fixed!important;
  left:max(14px,calc((100vw - 1180px)/2 - 92px))!important;
  top:150px!important;
  bottom:auto!important;
  z-index:9995!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:10px!important;
  width:86px!important;
  max-width:86px!important;
  padding:10px!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.94))!important;
  border:1px solid rgba(191,219,254,.92)!important;
  box-shadow:0 22px 55px rgba(15,23,42,.16)!important;
  backdrop-filter:blur(14px)!important;
  list-style:none!important;
  overflow:visible!important;
  font-family:inherit!important;
  color:#172554!important;
  text-align:center!important;
}
body.lop-support-body .lop-study-lesson-flow-bubbles:before,
.lop-study-lesson-flow-bubbles-v117:before,
.lop-study-lesson-flow-bubbles:before{
  content:""!important;
  position:absolute!important;
  inset:14px auto 14px 50%!important;
  width:3px!important;
  transform:translateX(-50%)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#dbeafe,#93c5fd,#dbeafe)!important;
  z-index:-1!important;
}
body.lop-support-body .lop-study-lesson-flow-bubbles:after,
.lop-study-lesson-flow-bubbles-v117:after,
.lop-study-lesson-flow-bubbles:after{display:none!important;content:none!important;}
.lop-study-flow-rail-title{position:relative;z-index:2;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;min-height:52px!important;padding:8px 4px!important;border-radius:20px!important;background:linear-gradient(135deg,#172554,#2563eb)!important;color:#fff!important;box-shadow:0 14px 28px rgba(37,99,235,.24)!important;}
.lop-study-flow-rail-title span{display:block!important;font-size:13px!important;font-weight:950!important;line-height:1.05!important;letter-spacing:.02em!important;color:#fff!important;text-transform:uppercase!important;}
.lop-study-flow-rail-title small{display:block!important;margin-top:2px!important;font-size:10px!important;font-weight:850!important;line-height:1.05!important;color:#dbeafe!important;}
body.lop-support-body .lop-study-lesson-flow-bubbles a,
.lop-study-lesson-flow-bubbles-v117 a,
.lop-study-lesson-flow-bubbles a{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  min-height:72px!important;
  width:100%!important;
  padding:8px 5px!important;
  border-radius:22px!important;
  background:#fff!important;
  border:1px solid #dbeafe!important;
  box-shadow:0 10px 24px rgba(15,23,42,.07)!important;
  color:#172554!important;
  text-decoration:none!important;
  line-height:1.05!important;
  white-space:normal!important;
  text-align:center!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important;
}
body.lop-support-body .lop-study-lesson-flow-bubbles a i,
.lop-study-lesson-flow-bubbles-v117 a i,
.lop-study-lesson-flow-bubbles a i{
  font-style:normal!important;
  flex:0 0 auto!important;
  width:34px!important;
  height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  background:#eef4ff!important;
  color:#1d4ed8!important;
  font-size:15px!important;
  font-weight:950!important;
  box-shadow:none!important;
}
body.lop-support-body .lop-study-lesson-flow-bubbles a span,
.lop-study-lesson-flow-bubbles-v117 a span,
.lop-study-lesson-flow-bubbles a span{display:block!important;margin:0!important;font-size:12.5px!important;font-weight:950!important;line-height:1.08!important;color:#0f172a!important;}
body.lop-support-body .lop-study-lesson-flow-bubbles a small,
.lop-study-lesson-flow-bubbles-v117 a small,
.lop-study-lesson-flow-bubbles a small{display:block!important;margin:0!important;font-size:9.5px!important;font-weight:850!important;line-height:1.05!important;color:#64748b!important;}
body.lop-support-body .lop-study-lesson-flow-bubbles a:hover,
body.lop-support-body .lop-study-lesson-flow-bubbles a.is-active,
.lop-study-lesson-flow-bubbles-v117 a:hover,
.lop-study-lesson-flow-bubbles-v117 a.is-active,
.lop-study-lesson-flow-bubbles a:hover,
.lop-study-lesson-flow-bubbles a.is-active{background:linear-gradient(135deg,#eff6ff,#ffffff)!important;border-color:#93c5fd!important;box-shadow:0 15px 30px rgba(37,99,235,.17)!important;transform:translateY(-2px)!important;}
body.lop-support-body .lop-study-lesson-flow-bubbles a:hover i,
body.lop-support-body .lop-study-lesson-flow-bubbles a.is-active i,
.lop-study-lesson-flow-bubbles-v117 a:hover i,
.lop-study-lesson-flow-bubbles-v117 a.is-active i,
.lop-study-lesson-flow-bubbles a:hover i,
.lop-study-lesson-flow-bubbles a.is-active i{background:linear-gradient(135deg,#4f46e5,#2563eb)!important;color:#fff!important;box-shadow:0 10px 22px rgba(37,99,235,.25)!important;}
.lop-study-lesson-detail{position:relative!important;}
.lop-lesson-flow-section{scroll-margin-top:112px!important;}
@media(max-width:980px){
  body.lop-support-body .lop-study-lesson-flow-bubbles,
  .lop-study-lesson-flow-bubbles-v117,
  .lop-study-lesson-flow-bubbles{left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;flex-direction:row!important;align-items:center!important;width:auto!important;max-width:calc(100vw - 20px)!important;min-width:0!important;padding:8px!important;border-radius:24px!important;overflow-x:auto!important;overflow-y:hidden!important;}
  body.lop-support-body .lop-study-lesson-flow-bubbles:before,
  .lop-study-lesson-flow-bubbles-v117:before,
  .lop-study-lesson-flow-bubbles:before{display:none!important;content:none!important;}
  .lop-study-flow-rail-title{min-width:62px!important;min-height:58px!important;padding:7px 8px!important;}
  body.lop-support-body .lop-study-lesson-flow-bubbles a,
  .lop-study-lesson-flow-bubbles-v117 a,
  .lop-study-lesson-flow-bubbles a{min-width:76px!important;min-height:58px!important;padding:7px 8px!important;}
  body.lop-support-body .lop-study-lesson-flow-bubbles a i,
  .lop-study-lesson-flow-bubbles-v117 a i,
  .lop-study-lesson-flow-bubbles a i{width:28px!important;height:28px!important;border-radius:12px!important;font-size:13px!important;}
  body.lop-support-body .lop-study-lesson-flow-bubbles a small,
  .lop-study-lesson-flow-bubbles-v117 a small,
  .lop-study-lesson-flow-bubbles a small{display:none!important;}
  body.lop-support-body .lop-study-lesson-flow-bubbles a span,
  .lop-study-lesson-flow-bubbles-v117 a span,
  .lop-study-lesson-flow-bubbles a span{font-size:11.5px!important;}
  .lop-lesson-flow-section{scroll-margin-top:92px!important;}
  body.lop-support-body{padding-bottom:96px!important;}
}


/* v2.8.118 - Lesson Flow Bubble: accurate Học anchor to first learning block */
.lop-study-learning-flow-block{display:block!important;position:relative!important;scroll-margin-top:118px!important;}
.lop-study-learning-flow-block > .lop-study-video:first-child,
.lop-study-learning-flow-block > .lop-study-media-block:first-child,
.lop-study-learning-flow-block > .lop-study-unit-visual-strip:first-child,
.lop-study-learning-flow-block > .lop-study-content:first-child{margin-top:0!important;}
@media(max-width:1280px){.lop-study-learning-flow-block{scroll-margin-top:96px!important;}}


/* v2.8.119 - Lesson page visible 4-step flow and editable goal guidance */
.lop-study-lesson-goal-flow{margin:18px 0 22px!important;padding:18px!important;border-radius:30px!important;background:linear-gradient(135deg,#ffffff,#f8fbff 52%,#eff6ff)!important;border:1px solid rgba(191,219,254,.92)!important;box-shadow:0 22px 55px rgba(15,23,42,.08)!important;overflow:hidden!important;}
.lop-study-lesson-goal-card{display:grid!important;grid-template-columns:auto 1fr!important;gap:14px!important;align-items:start!important;margin-bottom:16px!important;padding:16px!important;border-radius:24px!important;background:linear-gradient(135deg,#ecfeff,#fff7ed)!important;border:1px solid rgba(165,243,252,.75)!important;}
.lop-study-lesson-goal-icon{width:54px!important;height:54px!important;border-radius:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#fff!important;box-shadow:0 14px 30px rgba(37,99,235,.12)!important;font-size:26px!important;}
.lop-study-lesson-goal-card h2{margin:3px 0 7px!important;font-size:clamp(22px,2.1vw,31px)!important;line-height:1.15!important;color:#06153b!important;font-weight:950!important;letter-spacing:-.03em!important;}
.lop-study-lesson-goal-card p{margin:0!important;color:#334155!important;font-size:15.5px!important;line-height:1.75!important;max-width:980px!important;}
.lop-study-lesson-flow-steps-inline{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;}
.lop-study-lesson-flow-step-card{position:relative!important;display:flex!important;flex-direction:column!important;gap:7px!important;min-height:158px!important;padding:16px 14px 14px!important;border-radius:24px!important;text-decoration:none!important;background:#fff!important;border:1px solid #dbeafe!important;box-shadow:0 16px 34px rgba(15,23,42,.07)!important;color:#0f172a!important;overflow:hidden!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;}
.lop-study-lesson-flow-step-card:before{content:""!important;position:absolute!important;inset:auto -24px -46px auto!important;width:110px!important;height:110px!important;border-radius:50%!important;background:linear-gradient(135deg,#dbeafe,#ecfeff)!important;opacity:.72!important;}
.lop-study-lesson-flow-step-card i{position:relative!important;z-index:2!important;width:36px!important;height:36px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(135deg,#4f46e5,#2563eb)!important;color:#fff!important;font-style:normal!important;font-size:15px!important;font-weight:950!important;box-shadow:0 12px 22px rgba(37,99,235,.22)!important;}
.lop-study-lesson-flow-step-card strong{position:relative!important;z-index:2!important;display:flex!important;align-items:center!important;gap:7px!important;font-size:18px!important;line-height:1.16!important;color:#06153b!important;font-weight:950!important;}
.lop-study-lesson-flow-step-card strong span{font-size:19px!important;}
.lop-study-lesson-flow-step-card em{position:relative!important;z-index:2!important;font-style:normal!important;display:inline-flex!important;width:max-content!important;max-width:100%!important;border-radius:999px!important;background:#eff6ff!important;color:#1d4ed8!important;font-size:12px!important;font-weight:900!important;padding:6px 9px!important;}
.lop-study-lesson-flow-step-card small{position:relative!important;z-index:2!important;display:block!important;color:#64748b!important;font-size:13px!important;line-height:1.45!important;font-weight:700!important;}
.lop-study-lesson-flow-step-card:hover,.lop-study-lesson-flow-step-card.is-active{transform:translateY(-2px)!important;border-color:#93c5fd!important;box-shadow:0 22px 42px rgba(37,99,235,.13)!important;}
.lop-study-lesson-flow-step-card.is-active em{background:#dbeafe!important;color:#172554!important;}
@media(max-width:980px){.lop-study-lesson-goal-flow{padding:14px!important;border-radius:24px!important}.lop-study-lesson-goal-card{grid-template-columns:1fr!important}.lop-study-lesson-flow-steps-inline{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;padding-bottom:8px!important}.lop-study-lesson-flow-step-card{flex:0 0 min(78vw,280px)!important;scroll-snap-align:start!important;min-height:148px!important}.lop-study-lesson-goal-card p{font-size:14.5px!important}}


/* v2.8.120 - Lesson flow steps stay above editable goal guidance */
.lop-study-lesson-flow-order-v120{display:flex;flex-direction:column;gap:18px;}
.lop-study-lesson-flow-order-v120 .lop-study-lesson-flow-steps-inline{order:1;margin-bottom:0;}
.lop-study-lesson-flow-order-v120 .lop-study-lesson-goal-card{order:2;margin-top:0;}
.lop-study-lesson-goal-card-v120 h2{margin-top:2px;}
.lop-study-lesson-goal-card-v120 p{margin-top:8px;}
@media(max-width:760px){.lop-study-lesson-flow-order-v120{gap:14px}.lop-study-lesson-flow-order-v120 .lop-study-lesson-flow-steps-inline{padding-bottom:4px}}


/* v2.8.123 - Journal popup polish + flow rail note button visibility */
body.lop-support-body .lop-study-lesson-flow-bubbles,
.lop-study-lesson-flow-bubbles-v117,
.lop-study-lesson-flow-bubbles{
  top:72px!important;
  max-height:calc(100vh - 92px)!important;
  overflow-y:auto!important;
  overflow-x:visible!important;
  padding-bottom:12px!important;
  z-index:44!important;
}
.lop-study-flow-note-btn{
  min-height:70px!important;
  color:#0f172a!important;
  background:linear-gradient(135deg,#fff7ed,#eff6ff 62%,#ffffff)!important;
  border-color:#bfdbfe!important;
}
.lop-study-flow-note-btn span,
.lop-study-flow-note-btn small,
.lop-study-flow-note-btn i{color:inherit!important;position:relative;z-index:1;}
.lop-study-flow-note-btn:hover,
.lop-study-flow-note-btn:focus-visible{
  background:linear-gradient(135deg,#4f46e5,#2563eb)!important;
  color:#ffffff!important;
  border-color:#4f46e5!important;
  outline:none!important;
}
.lop-study-flow-note-btn:hover small,
.lop-study-flow-note-btn:focus-visible small{color:#dbeafe!important;}
.lop-study-note-head{align-items:flex-start!important;}
.lop-study-note-head button[data-lop-note-close]{
  flex:0 0 46px!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border-radius:18px!important;
  border:1px solid #bfdbfe!important;
  background:rgba(255,255,255,.94)!important;
  color:#0f172a!important;
  font-size:28px!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:0 12px 26px rgba(15,23,42,.08)!important;
  transition:all .18s ease!important;
}
.lop-study-note-head button[data-lop-note-close]:hover,
.lop-study-note-head button[data-lop-note-close]:focus-visible{
  background:#fee2e2!important;
  border-color:#fecaca!important;
  color:#9f1239!important;
  transform:translateY(-1px)!important;
  outline:none!important;
}
.lop-study-note-foot div{align-items:center!important;}
.lop-study-note-save,
.lop-study-note-secondary{
  min-height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  padding:0 20px!important;
  font-size:15px!important;
  line-height:1!important;
}
.lop-study-note-save,
.lop-study-note-save:hover,
.lop-study-note-save:focus-visible{
  color:#ffffff!important;
  text-shadow:0 1px 0 rgba(15,23,42,.18)!important;
}
.lop-study-note-secondary,
.lop-study-note-secondary:hover,
.lop-study-note-secondary:focus-visible{
  color:#be123c!important;
  background:#ffffff!important;
  border:1px solid #f9a8d4!important;
  box-shadow:none!important;
}
@media(max-width:1280px){
  body.lop-support-body .lop-study-lesson-flow-bubbles,
  .lop-study-lesson-flow-bubbles-v117,
  .lop-study-lesson-flow-bubbles{top:auto!important;max-height:none!important;overflow-y:hidden!important;overflow-x:auto!important;}
}
@media(max-width:760px){
  .lop-study-note-head button[data-lop-note-close]{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;border-radius:16px!important;font-size:26px!important;}
  .lop-study-note-save,.lop-study-note-secondary{width:100%!important;}
}


/* v2.8.124 - Flow Bubble visibility fix + professional collapse toggle */
body .lop-study-lesson-flow-bubbles,
body.lop-support-body .lop-study-lesson-flow-bubbles,
.lop-study-lesson-flow-bubbles-v117{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.lop-study-flow-toggle{
  position:relative!important;
  z-index:5!important;
  width:100%!important;
  min-height:54px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  border:1px solid #bfdbfe!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#172554,#2563eb)!important;
  color:#ffffff!important;
  cursor:pointer!important;
  box-shadow:0 14px 30px rgba(37,99,235,.22)!important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease!important;
  padding:7px 6px!important;
}
.lop-study-flow-toggle:hover,
.lop-study-flow-toggle:focus-visible{
  transform:translateY(-1px)!important;
  background:linear-gradient(135deg,#4f46e5,#0f172a)!important;
  box-shadow:0 18px 36px rgba(37,99,235,.30)!important;
  outline:none!important;
}
.lop-study-flow-toggle .lop-study-flow-toggle-icon{
  width:24px!important;
  height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.18)!important;
  color:#ffffff!important;
  font-size:22px!important;
  font-weight:950!important;
  line-height:1!important;
}
.lop-study-flow-toggle strong{
  display:block!important;
  color:#ffffff!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1.05!important;
}
.lop-study-flow-toggle small{
  display:block!important;
  color:#dbeafe!important;
  font-size:9.5px!important;
  font-weight:850!important;
  line-height:1.05!important;
}
@media(min-width:981px){
  body .lop-study-lesson-flow-bubbles,
  body.lop-support-body .lop-study-lesson-flow-bubbles,
  .lop-study-lesson-flow-bubbles-v117{
    position:fixed!important;
    left:max(12px,calc((100vw - 1180px)/2 - 92px))!important;
    right:auto!important;
    top:86px!important;
    bottom:auto!important;
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    max-height:calc(100vh - 106px)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:9px!important;
    overflow-y:auto!important;
    overflow-x:visible!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(191,219,254,.96)!important;
    box-shadow:0 22px 52px rgba(15,23,42,.16)!important;
    backdrop-filter:blur(14px)!important;
    z-index:99990!important;
    transform:none!important;
  }
  body .lop-study-lesson-flow-bubbles.is-collapsed,
  body.lop-support-body .lop-study-lesson-flow-bubbles.is-collapsed,
  .lop-study-lesson-flow-bubbles-v117.is-collapsed{
    width:74px!important;
    min-width:74px!important;
    max-width:74px!important;
    padding:8px!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .lop-study-lesson-flow-bubbles.is-collapsed .lop-study-flow-rail-title,
  .lop-study-lesson-flow-bubbles.is-collapsed a[data-lop-flow-link],
  .lop-study-lesson-flow-bubbles.is-collapsed .lop-study-flow-note-btn{
    display:none!important;
  }
  .lop-study-lesson-flow-bubbles.is-collapsed .lop-study-flow-toggle{
    min-height:62px!important;
    border-radius:22px!important;
  }
}
@media(max-width:980px){
  .lop-study-flow-toggle{
    min-width:70px!important;
    width:auto!important;
    min-height:58px!important;
    border-radius:18px!important;
    padding:7px 9px!important;
  }
  .lop-study-flow-toggle .lop-study-flow-toggle-icon{display:none!important;}
  .lop-study-flow-toggle small{display:none!important;}
  .lop-study-lesson-flow-bubbles.is-collapsed a[data-lop-flow-link],
  .lop-study-lesson-flow-bubbles.is-collapsed .lop-study-flow-note-btn,
  .lop-study-lesson-flow-bubbles.is-collapsed .lop-study-flow-rail-title{display:none!important;}
}

/* v2.8.129 - Unit Image Studio roles in lesson experience */
.lop-study-unit-hero-strip{margin:18px 0}
.lop-study-unit-hero-card{display:grid;grid-template-columns:minmax(220px,42%) 1fr;gap:18px;align-items:center;border:1px solid rgba(191,219,254,.9);background:linear-gradient(135deg,#eff6ff,#ffffff);border-radius:28px;padding:16px;box-shadow:0 18px 44px rgba(15,23,42,.08);overflow:hidden}
.lop-study-unit-hero-img img,.lop-study-builder-hero img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;display:block;background:#f8fafc}
.lop-study-unit-hero-card figcaption span,.lop-study-builder-hero span{display:inline-flex;border-radius:999px;background:#dbeafe;color:#1d4ed8;padding:6px 10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.lop-study-unit-hero-card figcaption strong,.lop-study-builder-hero strong{display:block;color:#172554;font-size:clamp(24px,3vw,38px);line-height:1.12;margin-bottom:8px}
.lop-study-unit-hero-card figcaption em,.lop-study-builder-hero em{display:block;color:#475569;font-size:15px;line-height:1.55;font-style:normal}
.lop-study-look-say-section{margin:18px 0}
.lop-study-look-say-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:12px}
.lop-study-look-say-card{border:1px solid rgba(226,232,240,.95);background:#fff;border-radius:22px;padding:12px;box-shadow:0 14px 32px rgba(15,23,42,.07);overflow:hidden;margin:0}
.lop-study-look-say-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block;background:#f8fafc;margin-bottom:10px}
.lop-study-look-say-card figcaption span{display:block;color:#db2777;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.lop-study-look-say-card figcaption strong{display:block;color:#172554;font-size:18px;line-height:1.25;margin-bottom:4px}
.lop-study-look-say-card figcaption em{display:block;color:#64748b;font-size:13px;line-height:1.4;font-style:normal;margin-bottom:8px}
.lop-study-mini-say{border:0;background:#f1f5f9;color:#0f172a;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}
.lop-study-builder-hero{display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:16px;align-items:center;border:1px solid #dbeafe;background:linear-gradient(135deg,#eff6ff,#fff);border-radius:26px;padding:14px;margin:0 0 18px;box-shadow:0 16px 38px rgba(15,23,42,.07)}
@media(max-width:720px){.lop-study-unit-hero-card,.lop-study-builder-hero{grid-template-columns:1fr}.lop-study-look-say-grid{grid-template-columns:1fr}}

/* v2.8.129 - Lesson image lightbox / zoom */
.lop-study-image-lightbox-trigger{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:18px;overflow:hidden}
.lop-study-image-lightbox-trigger img{display:block;width:100%;height:auto}
.lop-study-lightbox[hidden]{display:none!important}
.lop-study-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-start;justify-content:center;box-sizing:border-box;padding:clamp(64px,8vh,92px) 16px 24px;overflow-y:auto;overscroll-behavior:contain}
.lop-study-lightbox-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.76);backdrop-filter:blur(4px)}
.lop-study-lightbox-dialog{position:relative;z-index:2;width:min(100%,1080px);max-height:calc(100vh - 104px);margin:0 auto;padding:18px;border-radius:24px;background:#fff;box-shadow:0 30px 80px rgba(15,23,42,.28);box-sizing:border-box}
.lop-study-lightbox-dialog figure{margin:0;display:flex;flex-direction:column;gap:12px}
.lop-study-lightbox-dialog img{display:block;max-width:100%;max-height:min(66vh,calc(100vh - 220px));margin:0 auto;border-radius:18px;background:#f8fafc;object-fit:contain}
.lop-study-lightbox-dialog figcaption{display:flex;flex-direction:column;gap:4px;color:#334155}
.lop-study-lightbox-dialog figcaption strong{font-size:20px;color:#0f172a}
.lop-study-lightbox-dialog figcaption span{font-size:14px;line-height:1.6}
.lop-study-lightbox-close{position:absolute;top:12px;right:12px;z-index:5;width:40px;height:40px;border-radius:999px;border:0;background:#eff6ff;color:#1d4ed8;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 10px 24px rgba(15,23,42,.16)}
body.lop-lightbox-open{overflow:hidden}
@media(max-width:760px){.lop-study-lightbox{padding:calc(72px + env(safe-area-inset-top,0px)) 10px 18px}.lop-study-lightbox-dialog{max-height:calc(100vh - 96px);padding:12px;border-radius:20px}.lop-study-lightbox-dialog img{max-height:calc(100vh - 210px);border-radius:14px}.lop-study-lightbox-close{top:10px;right:10px;width:42px;height:42px}}

/* v2.8.136 - Student lesson flashcards: compact 3x4 cards */
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard{flex:0 0 clamp(210px,24vw,270px)!important;max-width:min(270px,82vw)!important;aspect-ratio:3/4!important;min-height:0!important;height:auto!important;padding:10px!important;border-radius:22px!important;gap:7px!important;overflow:hidden!important}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard .lop-study-flash-count{font-size:11px;padding:5px 8px}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard .lop-study-unit-thumb-wrap{margin:0!important;border-radius:16px!important;aspect-ratio:4/3!important;max-height:128px!important;flex:0 0 auto!important}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard .lop-study-unit-thumb-wrap img,.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard .lop-study-unit-thumb{width:100%!important;height:100%!important;object-fit:cover!important}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard .lop-study-flash-copy{display:flex!important;flex-direction:column!important;gap:5px!important;min-height:0!important}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard strong{font-size:17px!important;line-height:1.18!important;margin:0!important}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard span{font-size:12.5px!important;line-height:1.34!important;font-weight:760!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard audio{width:100%!important;max-height:34px!important}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard button:not(.lop-study-image-lightbox-trigger){padding:7px 10px!important;min-height:32px!important;font-size:12px!important}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard .lop-study-flash-detail{max-height:58px!important;overflow:auto!important;font-size:12px!important;margin-top:0!important}
.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard .lop-study-unit-check{margin-top:auto!important;font-size:12px!important;line-height:1.25!important}
.lop-study-unit-visual-strip .lop-study-unit-visual-card.lop-study-flashcard{flex:0 0 clamp(180px,22vw,230px)!important;max-width:min(230px,78vw)!important;aspect-ratio:3/4!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.lop-study-unit-visual-strip .lop-study-unit-visual-card.lop-study-flashcard .lop-study-image-lightbox-trigger{flex:1 1 auto!important;min-height:0!important}
.lop-study-unit-visual-strip .lop-study-unit-visual-card.lop-study-flashcard img{height:100%!important;aspect-ratio:auto!important;object-fit:cover!important}
.lop-study-unit-visual-strip .lop-study-unit-visual-card.lop-study-flashcard figcaption{flex:0 0 auto!important;padding:8px 9px!important}
.lop-study-unit-visual-strip .lop-study-unit-visual-card.lop-study-flashcard figcaption strong{font-size:13px!important}.lop-study-unit-visual-strip .lop-study-unit-visual-card.lop-study-flashcard figcaption span{font-size:11.5px!important}
@media(max-width:760px){.lop-study-lesson-detail .lop-study-vocab-card.lop-study-flashcard{flex-basis:min(74vw,260px)!important;max-width:min(74vw,260px)!important}.lop-study-unit-visual-strip .lop-study-unit-visual-card.lop-study-flashcard{flex-basis:min(66vw,220px)!important}}


/* v2.8.167 - Study/Quiz detail Flow Bubble no-overlap layout guard */
body.lop-support-body.lop-study-has-side-flow{
  --lop-study-flow-open-reserve:116px;
  --lop-study-flow-collapsed-reserve:82px;
}
@media (min-width:981px) and (max-width:1480px){
  body.lop-support-body.lop-study-has-side-flow:not(.lop-study-flow-collapsed) .lopsp-info-main,
  body.lop-support-body.lop-study-has-side-flow:not(.lop-study-flow-collapsed) .lop-support-main{
    padding-left:var(--lop-study-flow-open-reserve)!important;
  }
  body.lop-support-body.lop-study-has-side-flow.lop-study-flow-collapsed .lopsp-info-main,
  body.lop-support-body.lop-study-has-side-flow.lop-study-flow-collapsed .lop-support-main{
    padding-left:var(--lop-study-flow-collapsed-reserve)!important;
  }
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles,
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles-v117{
    left:14px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    bottom:auto!important;
  }
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-detail{
    width:100%!important;
    max-width:min(1080px, calc(100vw - 36px - var(--lop-study-flow-open-reserve)))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body.lop-support-body.lop-study-has-side-flow.lop-study-flow-collapsed .lop-study-lesson-detail{
    max-width:min(1080px, calc(100vw - 36px - var(--lop-study-flow-collapsed-reserve)))!important;
  }
}
@media (min-width:1481px){
  body.lop-support-body.lop-study-has-side-flow .lopsp-info-main,
  body.lop-support-body.lop-study-has-side-flow .lop-support-main{
    padding-left:0!important;
  }
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles,
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles-v117{
    top:50%!important;
    transform:translateY(-50%)!important;
  }
}
@media (max-width:980px){
  body.lop-support-body.lop-study-has-side-flow .lopsp-info-main,
  body.lop-support-body.lop-study-has-side-flow .lop-support-main{
    padding-left:0!important;
    padding-bottom:104px!important;
  }
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles,
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles-v117{
    transform:none!important;
    z-index:99990!important;
  }
}
@media (max-width:520px){
  body.lop-support-body.lop-study-has-side-flow .lopsp-info-main,
  body.lop-support-body.lop-study-has-side-flow .lop-support-main{
    padding-bottom:92px!important;
  }
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles,
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles-v117{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    max-width:calc(100vw - 16px)!important;
  }
}

/* v2.8.168 - Quiz progress icons for student quiz runner */
.lop-quiz-progress-widget{position:relative;margin:0 0 18px;padding:16px;border-radius:26px;background:linear-gradient(135deg,#ffffff 0%,#eef4ff 54%,#fff7ed 100%);border:1px solid rgba(191,219,254,.92);box-shadow:0 18px 42px rgba(37,99,235,.10);overflow:hidden;}
.lop-quiz-progress-widget:before{content:"";position:absolute;right:-70px;top:-88px;width:210px;height:210px;border-radius:999px;background:radial-gradient(circle,rgba(79,70,229,.16),rgba(79,70,229,0) 68%);pointer-events:none;}
.lop-quiz-progress-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.lop-quiz-progress-head strong{display:block;margin-top:3px;color:#07133f;font-size:clamp(20px,2.4vw,28px);font-weight:950;letter-spacing:-.03em;line-height:1.08;}
.lop-quiz-progress-head em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #dbeafe;color:#3730a3;font-weight:950;box-shadow:0 10px 24px rgba(79,70,229,.10);white-space:nowrap;}
.lop-quiz-progress-icons{position:relative;z-index:1;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 2px 12px;margin:0 -2px;}
.lop-quiz-progress-icons::-webkit-scrollbar{height:7px}.lop-quiz-progress-icons::-webkit-scrollbar-track{background:#e0e7ff;border-radius:999px}.lop-quiz-progress-icons::-webkit-scrollbar-thumb{background:#818cf8;border-radius:999px}
.lop-quiz-progress-icons span{flex:0 0 auto;scroll-snap-align:start;min-width:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 9px;border-radius:20px;background:#fff;border:1px solid #e2e8f0;color:#475569;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;}
.lop-quiz-progress-icons span:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(15,23,42,.10);}
.lop-quiz-progress-icons i{font-style:normal;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:#f1f5f9;color:#334155;font-size:15px;font-weight:950;}
.lop-quiz-progress-icons b{font-size:11.5px;font-weight:950;line-height:1.15;text-align:center;white-space:nowrap;}
.lop-quiz-progress-icons span.is-pending{background:#ffffff;border-color:#e2e8f0;}
.lop-quiz-progress-icons span.is-answered{background:linear-gradient(135deg,#eff6ff,#fff);border-color:#bfdbfe;color:#1e3a8a;}
.lop-quiz-progress-icons span.is-answered i{background:#dbeafe;color:#1d4ed8;}
.lop-quiz-progress-icons span.is-correct{background:linear-gradient(135deg,#ecfdf5,#fff);border-color:#86efac;color:#166534;}
.lop-quiz-progress-icons span.is-correct i{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;}
.lop-quiz-progress-icons span.is-correct i:after{content:"✓";font-size:13px;margin-left:1px;}
.lop-quiz-progress-icons span.is-wrong{background:linear-gradient(135deg,#fff7ed,#fff);border-color:#fdba74;color:#9a3412;}
.lop-quiz-progress-icons span.is-wrong i{background:#ffedd5;color:#c2410c;}
.lop-quiz-progress-icons span.is-wrong i:after{content:"!";font-size:12px;margin-left:1px;}
.lop-quiz-progress-icons span.is-unanswered{background:linear-gradient(135deg,#f8fafc,#fff);border-color:#cbd5e1;color:#475569;}
.lop-quiz-progress-bar{position:relative;z-index:1;height:12px;border-radius:999px;background:#e2e8f0;overflow:hidden;margin-top:2px;}
.lop-quiz-progress-bar span{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#4f46e5,#2563eb,#22c55e);transition:width .25s ease;}
.lop-quiz-progress-widget.is-passed{background:linear-gradient(135deg,#ecfdf5,#ffffff 62%,#eef4ff);border-color:#86efac;}
.lop-quiz-progress-widget.is-passed .lop-quiz-progress-head em{background:#dcfce7;border-color:#86efac;color:#166534;}
@media(max-width:760px){.lop-quiz-progress-widget{padding:13px;border-radius:22px;margin-bottom:14px}.lop-quiz-progress-head{flex-direction:column;gap:8px;margin-bottom:10px}.lop-quiz-progress-head em{white-space:normal;text-align:left;justify-content:flex-start}.lop-quiz-progress-icons{gap:8px}.lop-quiz-progress-icons span{min-width:66px;padding:9px 8px}.lop-quiz-progress-icons i{width:31px;height:31px;border-radius:12px}.lop-quiz-progress-icons b{font-size:11px}}

/* v2.8.169 - Sticky/collapsible quiz progress on student quiz detail. UI only. */
.lop-study-quiz-runner .lop-quiz-progress-widget{
  position:sticky;
  top:86px;
  z-index:50;
  margin-bottom:18px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.lop-study-quiz-runner .lop-quiz-progress-toggle{
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(191,219,254,.95);
  background:rgba(255,255,255,.86);
  color:#3730a3;
  font-size:12px;
  font-weight:950;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(79,70,229,.10);
}
.lop-study-quiz-runner .lop-quiz-progress-toggle:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(79,70,229,.15);}
.lop-study-quiz-runner .lop-quiz-progress-toggle .is-closed{display:none;}
.lop-study-quiz-runner .lop-quiz-progress-head{padding-right:96px;}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed{
  padding:11px 14px;
  border-radius:22px;
  box-shadow:0 14px 34px rgba(37,99,235,.10);
}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed:before{opacity:.45;}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed .lop-quiz-progress-icons,
.lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed .lop-quiz-progress-bar{display:none;}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed .lop-quiz-progress-head{margin-bottom:0;align-items:center;}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed .lop-quiz-progress-head strong{font-size:18px;margin-top:0;}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed .lop-quiz-progress-head em{min-height:32px;padding:6px 10px;font-size:12.5px;}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed .lop-quiz-progress-toggle .is-open{display:none;}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed .lop-quiz-progress-toggle .is-closed{display:inline;}
@media(max-width:980px){
  .lop-study-quiz-runner .lop-quiz-progress-widget{top:74px;}
}
@media(max-width:760px){
  .lop-study-quiz-runner .lop-quiz-progress-widget{
    top:68px;
    border-radius:20px;
    max-height:calc(100vh - 84px);
  }
  .lop-study-quiz-runner .lop-quiz-progress-toggle{top:10px;right:10px;min-height:31px;padding:6px 9px;font-size:11.5px;}
  .lop-study-quiz-runner .lop-quiz-progress-head{padding-right:86px;}
  .lop-study-quiz-runner .lop-quiz-progress-head strong{font-size:18px;}
  .lop-study-quiz-runner .lop-quiz-progress-head em{font-size:12px;line-height:1.25;}
}
@media(max-width:520px){
  .lop-study-quiz-runner .lop-quiz-progress-widget{top:62px;margin-left:-4px;margin-right:-4px;}
  .lop-study-quiz-runner .lop-quiz-progress-widget:not(.is-collapsed) .lop-quiz-progress-head{display:block;padding-right:82px;}
  .lop-study-quiz-runner .lop-quiz-progress-widget:not(.is-collapsed) .lop-quiz-progress-head em{margin-top:8px;width:fit-content;max-width:100%;}
  .lop-study-quiz-runner .lop-quiz-progress-widget.is-collapsed .lop-quiz-progress-head em{display:none;}
}

/* v2.8.170 - Compact premium quiz progress bar. UI-only, scoped to student quiz runner. */
.lop-study-quiz-runner .lop-quiz-progress-widget.lop-quiz-progress-compact{
  padding:10px 12px 11px!important;
  border-radius:20px!important;
  margin-bottom:12px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.92) 58%,rgba(236,253,245,.86))!important;
  border:1px solid rgba(147,197,253,.72)!important;
  box-shadow:0 12px 28px rgba(37,99,235,.11)!important;
  overflow:hidden!important;
}
.lop-study-quiz-runner .lop-quiz-progress-widget.lop-quiz-progress-compact:before{
  right:-58px!important;top:-104px!important;width:180px!important;height:180px!important;opacity:.72!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:8px!important;
  padding-right:82px!important;
  min-height:36px!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-title{min-width:0!important;}
.lop-study-quiz-runner .lop-quiz-progress-compact .lopsp-kicker{
  font-size:10px!important;line-height:1!important;letter-spacing:.12em!important;color:#4f46e5!important;opacity:.82!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head strong{
  margin-top:2px!important;
  font-size:16px!important;
  line-height:1.05!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em{
  min-height:34px!important;
  padding:5px 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  border-radius:999px!important;
  color:#1e3a8a!important;
  background:rgba(255,255,255,.90)!important;
  border:1px solid rgba(191,219,254,.9)!important;
  box-shadow:0 8px 20px rgba(79,70,229,.08)!important;
  max-width:52%!important;
  overflow:hidden!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em b{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:48px!important;
  height:26px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#4f46e5,#2563eb)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:1000!important;
  letter-spacing:-.03em!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:12.5px!important;
  font-weight:950!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle{
  top:10px!important;
  right:10px!important;
  min-height:30px!important;
  padding:6px 9px!important;
  font-size:11.5px!important;
  color:#3730a3!important;
  background:rgba(255,255,255,.92)!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-bar{
  display:block!important;
  height:7px!important;
  margin:0 0 7px!important;
  background:rgba(226,232,240,.96)!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.08)!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-bar span{
  background:linear-gradient(90deg,#4f46e5 0%,#2563eb 45%,#22c55e 100%)!important;
  box-shadow:0 0 18px rgba(37,99,235,.20)!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons{
  gap:6px!important;
  padding:0 1px 2px!important;
  margin:0!important;
  scrollbar-width:thin!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons::-webkit-scrollbar{height:4px!important;}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons span{
  min-width:34px!important;
  width:34px!important;
  height:32px!important;
  padding:3px!important;
  border-radius:13px!important;
  gap:0!important;
  box-shadow:0 5px 14px rgba(15,23,42,.055)!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons i{
  width:24px!important;
  height:24px!important;
  border-radius:10px!important;
  font-size:12px!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons b{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact.is-collapsed{
  padding:9px 12px!important;
  border-radius:18px!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact.is-collapsed .lop-quiz-progress-head{
  margin-bottom:7px!important;
  min-height:32px!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact.is-collapsed .lop-quiz-progress-head strong{font-size:15px!important;}
.lop-study-quiz-runner .lop-quiz-progress-compact.is-collapsed .lop-quiz-progress-head em{display:inline-flex!important;min-height:31px!important;max-width:58%!important;}
.lop-study-quiz-runner .lop-quiz-progress-compact.is-collapsed .lop-quiz-progress-icons{display:none!important;}
.lop-study-quiz-runner .lop-quiz-progress-compact.is-collapsed .lop-quiz-progress-bar{display:block!important;margin-bottom:0!important;}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-passed.lop-quiz-progress-compact .lop-quiz-progress-head em b{background:linear-gradient(135deg,#16a34a,#22c55e)!important;}
.lop-study-quiz-runner .lop-quiz-progress-widget.is-checking.lop-quiz-progress-compact .lop-quiz-progress-head em b{background:linear-gradient(135deg,#f97316,#fb923c)!important;}
@media(max-width:760px){
  .lop-study-quiz-runner .lop-quiz-progress-widget.lop-quiz-progress-compact{top:64px!important;padding:9px 10px!important;border-radius:18px!important;margin-left:-2px!important;margin-right:-2px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head{gap:8px!important;padding-right:70px!important;margin-bottom:7px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lopsp-kicker{display:none!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head strong{font-size:14.5px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em{max-width:60%!important;min-height:31px!important;padding:4px 7px!important;gap:5px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em b{min-width:43px!important;height:24px!important;font-size:14px!important;padding:0 7px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em span{font-size:11.5px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle{top:9px!important;right:8px!important;min-height:28px!important;padding:5px 7px!important;font-size:10.5px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons span{min-width:31px!important;width:31px!important;height:29px!important;border-radius:12px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons i{width:22px!important;height:22px!important;border-radius:9px!important;font-size:11px!important;}
}
@media(max-width:420px){
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head strong{font-size:13.5px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em span{display:none!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em{max-width:none!important;}
}

/* v2.8.171 - Quiz typography normalization. UI-only, scoped to student quiz pages. */
.lop-study-quiz,
.lop-study-quiz-runner{
  font-size:14px;
  line-height:1.55;
}
.lop-study-quiz h2{
  font-size:18px!important;
  line-height:1.22!important;
  letter-spacing:-.015em!important;
  margin:0 0 12px!important;
  font-weight:900!important;
  color:#0f172a!important;
}
.lop-study-quiz .lopsp-kicker,
.lop-study-quiz-runner .lopsp-kicker{
  font-size:10px!important;
  line-height:1.1!important;
}
.lop-study-quiz-question{
  font-size:14px!important;
  line-height:1.55!important;
}
.lop-study-quiz-question legend{
  font-size:15px!important;
  line-height:1.45!important;
  font-weight:800!important;
  letter-spacing:-.006em!important;
}
.lop-study-quiz-question legend span{
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
}
.lop-study-quiz-options label{
  font-size:14px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
.lop-study-quiz-options label span{
  font-size:14px!important;
  line-height:1.45!important;
}
.lop-study-quiz-feedback,
.lop-study-quiz-feedback p,
.lop-study-quiz-score{
  font-size:13px!important;
  line-height:1.5!important;
}
.lop-study-quiz-actions button,
.lop-study-quiz-reset,
.lop-study-quiz .lopsp-upgrade-btn{
  font-size:13px!important;
  line-height:1.15!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head strong{
  font-size:15px!important;
  line-height:1.08!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em b{
  font-size:14px!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em span{
  font-size:11.5px!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle{
  font-size:11px!important;
}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons i{
  font-size:11px!important;
}
@media(max-width:760px){
  .lop-study-quiz,
  .lop-study-quiz-runner{font-size:13.5px;}
  .lop-study-quiz h2{font-size:17px!important;}
  .lop-study-quiz-question legend{font-size:14.5px!important;}
  .lop-study-quiz-options label,
  .lop-study-quiz-options label span{font-size:13.5px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head strong{font-size:14px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em b{font-size:13px!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em span{font-size:11px!important;}
}

/* v2.8.172 - Quiz progress chips navigate to questions. UI-only, scoped to quiz runner. */
.lop-study-quiz-runner .lop-quiz-progress-icons [data-lop-q-index]{cursor:pointer!important;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;}
.lop-study-quiz-runner .lop-quiz-progress-icons [data-lop-q-index]:hover{transform:translateY(-1px)!important;box-shadow:0 10px 20px rgba(15,23,42,.10)!important;border-color:#93c5fd!important;}
.lop-study-quiz-runner .lop-quiz-progress-icons [data-lop-q-index]:focus-visible{outline:3px solid rgba(37,99,235,.24)!important;outline-offset:3px!important;}
.lop-study-quiz-runner .lop-study-quiz-question.lop-quiz-question-focus-pulse{animation:lopQuizQuestionFocusPulse 1.35s ease!important;}
@keyframes lopQuizQuestionFocusPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.34);border-color:#60a5fa;}60%{box-shadow:0 0 0 12px rgba(37,99,235,0);border-color:#93c5fd;}100%{box-shadow:inherit;}}

/* v2.8.178 - Button contrast system polish across Study / Quiz pages */
.lop-study-quiz-actions button,
.lop-study-quiz-actions button:hover,
.lop-study-quiz-reset,
.lop-study-quiz-reset:hover,
.lop-study-quiz .lopsp-upgrade-btn,
.lop-study-quiz .lopsp-upgrade-btn:hover,
.lop-study-note-save,
.lop-study-note-save:hover,
.lop-study-unit-complete-btn,
.lop-study-unit-complete-btn:hover,
.lop-study-lesson-detail .lopsp-primary-soft,
.lop-study-lesson-detail .lopsp-primary-soft:hover,
.lop-support-main .lopsp-primary-soft,
.lop-support-main .lopsp-primary-soft:hover{
  color:#ffffff!important;
  text-shadow:none!important;
}
.lop-study-quiz-actions button,
.lop-study-quiz-reset,
.lop-study-quiz .lopsp-upgrade-btn,
.lop-study-note-save,
.lop-study-unit-complete-btn{
  border:1px solid rgba(255,255,255,.22)!important;
  background:linear-gradient(135deg,#2563eb,#4f46e5)!important;
  box-shadow:0 12px 26px rgba(37,99,235,.20)!important;
}
.lop-study-quiz-actions button:hover,
.lop-study-quiz-reset:hover,
.lop-study-quiz .lopsp-upgrade-btn:hover,
.lop-study-note-save:hover,
.lop-study-unit-complete-btn:hover{
  background:linear-gradient(135deg,#1d4ed8,#4338ca)!important;
  color:#ffffff!important;
  box-shadow:0 16px 34px rgba(37,99,235,.26)!important;
}
.lop-study-vocab-card button,
.lop-study-vocab-card button:hover,
.lop-study-speaking-card button,
.lop-study-speaking-card button:hover,
.lop-study-note-secondary,
.lop-study-note-secondary:hover,
.lop-study-note-edit-btn,
.lop-study-note-edit-btn:hover,
.lop-quiz-progress-toggle,
.lop-quiz-progress-toggle:hover{
  color:#1e3a8a!important;
  text-shadow:none!important;
}
.lop-study-vocab-card button,
.lop-study-speaking-card button,
.lop-study-note-edit-btn,
.lop-quiz-progress-toggle{
  background:linear-gradient(135deg,#eef4ff,#ffffff)!important;
  border:1px solid #bfdbfe!important;
}
.lop-study-vocab-card button:hover,
.lop-study-speaking-card button:hover,
.lop-study-note-edit-btn:hover,
.lop-quiz-progress-toggle:hover{
  background:linear-gradient(135deg,#dbeafe,#ffffff)!important;
  border-color:#93c5fd!important;
  color:#172554!important;
}
.lop-study-quiz-actions button:disabled,
.lop-study-quiz-reset:disabled,
.lop-study-unit-complete-btn:disabled,
.lop-study-note-save:disabled,
.lop-study-vocab-card button:disabled,
.lop-study-speaking-card button:disabled{
  color:#475569!important;
  background:#e2e8f0!important;
  border-color:#cbd5e1!important;
  box-shadow:none!important;
  opacity:.78!important;
  cursor:not-allowed!important;
}
.lop-study-quiz-actions button *,
.lop-study-quiz-reset *,
.lop-study-quiz .lopsp-upgrade-btn *,
.lop-study-vocab-card button *,
.lop-study-speaking-card button *,
.lop-study-note-save *,
.lop-study-note-secondary *,
.lop-study-note-edit-btn *,
.lop-quiz-progress-toggle *{
  color:inherit!important;
}
.lop-study-quiz-actions button:focus-visible,
.lop-study-quiz-reset:focus-visible,
.lop-study-vocab-card button:focus-visible,
.lop-study-speaking-card button:focus-visible,
.lop-study-note-save:focus-visible,
.lop-study-note-secondary:focus-visible,
.lop-study-note-edit-btn:focus-visible,
.lop-quiz-progress-toggle:focus-visible{
  outline:3px solid rgba(37,99,235,.26)!important;
  outline-offset:3px!important;
}

/* v2.8.180 - Lesson/quiz Flow Bubble compact no-overlap with online clock.
   UI/CSS only: no learning, quiz, Streak or access logic changes. */
@media(max-width:980px){
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles,
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles-v117,
  body.lop-support-body .lop-study-lesson-flow-bubbles,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117{
    left:8px!important;
    right:8px!important;
    bottom:82px!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 16px)!important;
    padding:6px!important;
    gap:6px!important;
    border-radius:20px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    align-items:center!important;
    box-sizing:border-box!important;
    scrollbar-width:thin!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a{
    min-width:64px!important;
    min-height:50px!important;
    padding:6px 7px!important;
    border-radius:16px!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a i,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a i{
    width:24px!important;
    height:24px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a span,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a span{
    font-size:10.8px!important;
    line-height:1.05!important;
  }
  body.lop-support-body .lop-study-flow-toggle{
    width:auto!important;
    min-width:60px!important;
    max-width:66px!important;
    min-height:50px!important;
    padding:6px 7px!important;
    border-radius:16px!important;
    flex:0 0 auto!important;
  }
  body.lop-support-body .lop-study-flow-toggle strong{
    font-size:10.8px!important;
    line-height:1.05!important;
  }
  body.lop-support-body .lop-study-flow-toggle small,
  body.lop-support-body .lop-study-flow-toggle .lop-study-flow-toggle-icon{
    display:none!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles.is-collapsed,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117.is-collapsed{
    left:8px!important;
    right:auto!important;
    bottom:12px!important;
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    padding:0!important;
    border:0!important;
    border-radius:18px!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    overflow:visible!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles.is-collapsed .lop-study-flow-toggle,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117.is-collapsed .lop-study-flow-toggle{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    min-height:52px!important;
    padding:6px!important;
    border-radius:18px!important;
    box-shadow:0 14px 30px rgba(37,99,235,.22)!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles.is-collapsed .lop-study-flow-toggle strong,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117.is-collapsed .lop-study-flow-toggle strong{
    font-size:10.5px!important;
    line-height:1.05!important;
  }
}
@media(max-width:520px){
  body.lop-support-body.lop-study-has-side-flow .lopsp-info-main,
  body.lop-support-body.lop-study-has-side-flow .lop-support-main{
    padding-bottom:142px!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117{
    bottom:76px!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles.is-collapsed,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117.is-collapsed{
    bottom:10px!important;
  }
}


/* v2.8.182 - Mobile Study/Quiz Flow Bubble: expanded rail docks to bottom without visual jump.
   CSS-only, scoped to lesson/quiz detail support pages; no learning, quiz, Streak or admin logic changes. */
@media(max-width:980px){
  body.lop-support-body.lop-study-has-side-flow .lopsp-info-main,
  body.lop-support-body.lop-study-has-side-flow .lop-support-main{
    padding-bottom:166px!important;
  }
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles,
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles-v117,
  body.lop-support-body .lop-study-lesson-flow-bubbles,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117{
    position:fixed!important;
    left:7px!important;
    right:7px!important;
    top:auto!important;
    bottom:calc(6px + env(safe-area-inset-bottom, 0px))!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 14px)!important;
    height:auto!important;
    max-height:68px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    padding:5px!important;
    border-radius:20px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    box-sizing:border-box!important;
    z-index:99988!important;
    transition:box-shadow .16s ease, background .16s ease, border-color .16s ease!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles:not(.is-collapsed) .lop-study-flow-rail-title,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117:not(.is-collapsed) .lop-study-flow-rail-title{
    display:none!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a,
  body.lop-support-body .lop-study-lesson-flow-bubbles .lop-study-flow-note-btn,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 .lop-study-flow-note-btn{
    flex:0 0 auto!important;
    min-width:56px!important;
    min-height:48px!important;
    max-height:56px!important;
    padding:5px 6px!important;
    border-radius:15px!important;
    gap:2px!important;
    box-sizing:border-box!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a i,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a i,
  body.lop-support-body .lop-study-lesson-flow-bubbles .lop-study-flow-note-btn i,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 .lop-study-flow-note-btn i{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    border-radius:9px!important;
    font-size:11px!important;
    line-height:1!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a span,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a span,
  body.lop-support-body .lop-study-lesson-flow-bubbles .lop-study-flow-note-btn span,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 .lop-study-flow-note-btn span{
    font-size:10.4px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a small,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a small,
  body.lop-support-body .lop-study-lesson-flow-bubbles .lop-study-flow-note-btn small,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 .lop-study-flow-note-btn small{
    display:none!important;
  }
  body.lop-support-body .lop-study-flow-toggle{
    flex:0 0 auto!important;
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    min-height:48px!important;
    max-height:56px!important;
    padding:5px!important;
    border-radius:16px!important;
    gap:1px!important;
  }
  body.lop-support-body .lop-study-flow-toggle strong{
    font-size:10.3px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  body.lop-support-body .lop-study-flow-toggle small,
  body.lop-support-body .lop-study-flow-toggle .lop-study-flow-toggle-icon{
    display:none!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles.is-collapsed,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117.is-collapsed{
    left:7px!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(6px + env(safe-area-inset-bottom, 0px))!important;
    transform:none!important;
    width:56px!important;
    min-width:56px!important;
    max-width:56px!important;
    height:auto!important;
    max-height:58px!important;
    padding:0!important;
    border:0!important;
    border-radius:17px!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    overflow:visible!important;
    transition:box-shadow .16s ease, background .16s ease, border-color .16s ease!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles.is-collapsed .lop-study-flow-toggle,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117.is-collapsed .lop-study-flow-toggle{
    width:56px!important;
    min-width:56px!important;
    max-width:56px!important;
    min-height:52px!important;
    border-radius:17px!important;
  }
  body.lop-support-body .lopsp-floating-learning-clock{
    left:auto!important;
    right:9px!important;
    bottom:calc(88px + env(safe-area-inset-bottom, 0px))!important;
    z-index:99991!important;
  }
  body.lop-support-body .lopsp-floating-learning-clock.is-collapsed{
    left:auto!important;
    right:9px!important;
    bottom:calc(88px + env(safe-area-inset-bottom, 0px))!important;
    z-index:99991!important;
  }
}
@media(max-width:520px){
  body.lop-support-body.lop-study-has-side-flow .lopsp-info-main,
  body.lop-support-body.lop-study-has-side-flow .lop-support-main{
    padding-bottom:168px!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117{
    left:6px!important;
    right:6px!important;
    bottom:calc(5px + env(safe-area-inset-bottom, 0px))!important;
    max-width:calc(100vw - 12px)!important;
    max-height:66px!important;
    padding:5px!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles.is-collapsed,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117.is-collapsed{
    left:6px!important;
    bottom:calc(5px + env(safe-area-inset-bottom, 0px))!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a,
  body.lop-support-body .lop-study-lesson-flow-bubbles .lop-study-flow-note-btn,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 .lop-study-flow-note-btn{
    min-width:52px!important;
    min-height:47px!important;
    padding:5px!important;
  }
  body.lop-support-body .lop-study-flow-toggle{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    min-height:47px!important;
  }
  body.lop-support-body .lopsp-floating-learning-clock{
    right:8px!important;
    bottom:calc(84px + env(safe-area-inset-bottom, 0px))!important;
  }
  body.lop-support-body .lopsp-floating-learning-clock.is-collapsed{
    right:8px!important;
    bottom:calc(84px + env(safe-area-inset-bottom, 0px))!important;
  }
}

/* v2.8.186 - Reading/Listening quiz content-source note */
.lop-study-quiz .lop-quiz-context-card{
  margin:12px 0 14px;
  padding:12px 14px;
  border:1px solid rgba(79,70,229,.18);
  background:linear-gradient(135deg,rgba(238,242,255,.94),rgba(240,253,250,.88));
  border-radius:18px;
  box-shadow:0 12px 28px rgba(79,70,229,.08);
}
.lop-study-quiz .lop-quiz-context-head{
  display:flex;
  gap:8px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:8px;
  color:#1f2937;
}
.lop-study-quiz .lop-quiz-context-head span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  background:#4f46e5;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(79,70,229,.22);
}
.lop-study-quiz .lop-quiz-context-head strong{
  flex:1 1 220px;
  font-size:14px;
  line-height:1.45;
  color:#111827;
}
.lop-study-quiz .lop-quiz-context-audio{
  width:100%;
  max-width:520px;
  margin:6px 0 8px;
}
.lop-study-quiz .lop-quiz-context-link a{
  font-weight:800;
  color:#4338ca;
  text-decoration:none;
}
.lop-study-quiz .lop-quiz-context-content{
  margin-top:8px;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(148,163,184,.25);
  overflow:hidden;
}
.lop-study-quiz .lop-quiz-context-content summary{
  cursor:pointer;
  padding:10px 12px;
  font-weight:900;
  color:#0f172a;
  list-style:none;
}
.lop-study-quiz .lop-quiz-context-content summary::-webkit-details-marker{display:none;}
.lop-study-quiz .lop-quiz-context-content summary:after{content:'  ▾'; color:#4f46e5;}
.lop-study-quiz .lop-quiz-context-content div{
  padding:0 12px 12px;
  color:#334155;
  font-size:15px;
  line-height:1.6;
}
@media (max-width:640px){
  .lop-study-quiz .lop-quiz-context-card{padding:10px 11px;border-radius:15px;margin:10px 0 12px;}
  .lop-study-quiz .lop-quiz-context-head{gap:6px;}
  .lop-study-quiz .lop-quiz-context-head span{font-size:11px;padding:3px 8px;min-height:22px;}
  .lop-study-quiz .lop-quiz-context-head strong{font-size:13px;flex-basis:100%;}
  .lop-study-quiz .lop-quiz-context-content summary{padding:8px 10px;font-size:13px;}
  .lop-study-quiz .lop-quiz-context-content div{padding:0 10px 10px;font-size:14px;}
}

/* v2.8.188 - Student quiz source/content intro */
.lop-study-quiz-source-card{margin:18px 0;padding:18px;border:1px solid rgba(37,99,235,.18);border-radius:22px;background:linear-gradient(135deg,#f8fbff 0%,#ffffff 70%);box-shadow:0 14px 34px rgba(15,23,42,.06);}
.lop-study-quiz-source-card .lop-study-video,.lop-study-quiz-source-card .lop-study-media-block{margin:14px 0;}
.lop-study-quiz-source-content{margin-top:14px;padding:16px;border-radius:18px;background:#fff;border:1px solid #e5e7eb;color:#0f172a;line-height:1.65;}
.lop-study-quiz-source-content h1,.lop-study-quiz-source-content h2,.lop-study-quiz-source-content h3{color:#0f172a;margin-top:.35em;}
.lop-study-quiz-source-content p:last-child{margin-bottom:0;}
@media(max-width:760px){.lop-study-quiz-source-card{padding:14px;border-radius:18px}.lop-study-quiz-source-content{padding:13px;border-radius:15px}}

/* v2.8.191 - Lesson / Quiz display codes */
.lop-study-card-code-row,
.lop-study-detail-code-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 10px;
}
.lop-study-task-code{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.25);
  background:linear-gradient(135deg, rgba(239,246,255,.98), rgba(255,255,255,.96));
  color:#1e3a8a;
  box-shadow:0 8px 18px rgba(37,99,235,.08);
  font-size:12px;
  line-height:1.1;
  letter-spacing:.02em;
}
.lop-study-task-code small{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  color:#64748b;
  letter-spacing:.08em;
}
.lop-study-task-code strong{
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space:nowrap;
}
.lop-study-task-code.is-quiz{
  border-color:rgba(124,58,237,.28);
  background:linear-gradient(135deg, rgba(245,243,255,.98), rgba(255,255,255,.96));
  color:#5b21b6;
  box-shadow:0 8px 18px rgba(124,58,237,.09);
}
.lop-study-task-code.is-quiz strong{color:#4c1d95;}
.lop-study-task-code.is-external{
  border-color:rgba(16,185,129,.28);
  background:linear-gradient(135deg, rgba(236,253,245,.98), rgba(255,255,255,.96));
}
.lop-study-detail-code-row .lop-study-task-code{
  padding:7px 12px;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}
.lop-study-detail-code-row .lop-study-task-code strong{font-size:13px;}
@media (max-width: 640px){
  .lop-study-card-code-row,
  .lop-study-detail-code-row{margin:6px 0 8px;}
  .lop-study-task-code{padding:4px 8px; gap:5px; font-size:11px;}
  .lop-study-task-code small{font-size:9px;}
  .lop-study-task-code strong{font-size:11px;}
  .lop-study-detail-code-row .lop-study-task-code strong{font-size:12px;}
}

/* v2.8.192 - Logged-in completion mark for Lesson / Quiz cards. */
.lop-study-task-card.is-completed{
  position:relative;
  border-color:rgba(34,197,94,.42)!important;
  box-shadow:0 18px 42px rgba(22,163,74,.10), 0 8px 24px rgba(15,23,42,.07)!important;
}
.lop-study-task-card.is-completed::after{
  content:"✓";
  position:absolute;
  top:12px;
  right:12px;
  width:26px;
  height:26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff;
  font-weight:900;
  font-size:15px;
  box-shadow:0 8px 18px rgba(22,163,74,.22);
  z-index:2;
}
.lop-study-card-code-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.lop-study-completed-mark{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:999px;
  padding:5px 9px;
  background:#dcfce7;
  color:#166534;
  border:1px solid rgba(34,197,94,.28);
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  white-space:nowrap;
}
.lop-study-completed-mark b{
  width:15px;
  height:15px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#16a34a;
  color:#fff;
  font-size:10px;
  line-height:1;
}
.lop-study-task-card.is-completed .lop-study-open-btn{
  background:linear-gradient(135deg,#0f766e,#16a34a)!important;
  color:#fff!important;
  border-color:transparent!important;
}
.lop-study-task-card.is-completed .lop-study-open-btn:hover,
.lop-study-task-card.is-completed .lop-study-open-btn:focus{
  background:linear-gradient(135deg,#0f513f,#15803d)!important;
  color:#fff!important;
  transform:translateY(-1px);
}
@media (max-width: 640px){
  .lop-study-task-card.is-completed::after{top:10px;right:10px;width:24px;height:24px;font-size:14px;}
  .lop-study-completed-mark{font-size:10.5px;padding:4px 8px;}
}


/* v2.8.196 - Completed badge left-aligned so it never covers Level on lesson/quiz cards. */
.lop-study-task-card.is-completed::after{
  display:none!important;
  content:none!important;
}
.lop-study-card-code-row{
  justify-content:flex-start!important;
  align-items:center;
}
.lop-study-completed-mark{
  order:-2;
  margin-right:2px;
  box-shadow:0 8px 18px rgba(22,163,74,.10);
}
.lop-study-card-code-row .lop-study-task-code{
  order:-1;
}
.lop-study-task-card.is-completed .lop-study-task-top em{
  position:relative;
  z-index:2;
}
@media (max-width: 640px){
  .lop-study-card-code-row{gap:6px;}
  .lop-study-completed-mark{
    font-size:10px!important;
    padding:4px 7px!important;
  }
}


/* v2.8.198 - Compact content feedback button inside lesson unit hero/cards */
.lop-content-feedback-btn,
.lop-study-unit-hero-card figcaption .lop-content-feedback-btn,
.lop-study-unit-visual-card figcaption .lop-content-feedback-btn,
.lop-study-look-say-card figcaption .lop-content-feedback-btn,
.lop-study-quiz-question .lop-content-feedback-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  width:auto!important;
  min-width:0!important;
  max-width:max-content!important;
  min-height:0!important;
  height:auto!important;
  padding:8px 12px!important;
  margin-top:10px!important;
  border-radius:999px!important;
  border:1px solid rgba(79,70,229,.18)!important;
  background:linear-gradient(135deg,#eef2ff,#ffffff)!important;
  color:#3730a3!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:0!important;
  text-transform:none!important;
  text-decoration:none!important;
  box-shadow:0 8px 18px rgba(79,70,229,.10)!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
}
.lop-content-feedback-btn:hover,
.lop-content-feedback-btn:focus,
.lop-study-unit-hero-card figcaption .lop-content-feedback-btn:hover,
.lop-study-unit-hero-card figcaption .lop-content-feedback-btn:focus,
.lop-study-unit-visual-card figcaption .lop-content-feedback-btn:hover,
.lop-study-unit-visual-card figcaption .lop-content-feedback-btn:focus,
.lop-study-look-say-card figcaption .lop-content-feedback-btn:hover,
.lop-study-look-say-card figcaption .lop-content-feedback-btn:focus,
.lop-study-quiz-question .lop-content-feedback-btn:hover,
.lop-study-quiz-question .lop-content-feedback-btn:focus{
  background:linear-gradient(135deg,#4f46e5,#2563eb)!important;
  border-color:#4f46e5!important;
  color:#ffffff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 14px 28px rgba(37,99,235,.20)!important;
}
.lop-content-feedback-btn > span,
.lop-study-unit-hero-card figcaption .lop-content-feedback-btn > span,
.lop-study-unit-visual-card figcaption .lop-content-feedback-btn > span,
.lop-study-look-say-card figcaption .lop-content-feedback-btn > span,
.lop-study-quiz-question .lop-content-feedback-btn > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  font-size:14px!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.lop-content-feedback-btn > strong,
.lop-study-unit-hero-card figcaption .lop-content-feedback-btn > strong,
.lop-study-unit-visual-card figcaption .lop-content-feedback-btn > strong,
.lop-study-look-say-card figcaption .lop-content-feedback-btn > strong,
.lop-study-quiz-question .lop-content-feedback-btn > strong{
  display:inline!important;
  padding:0!important;
  margin:0!important;
  color:inherit!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:nowrap!important;
}
.lop-study-unit-hero-card figcaption .lop-content-feedback-btn{margin-top:14px!important;}
.lop-study-unit-visual-card figcaption .lop-content-feedback-btn.is-compact,
.lop-study-look-say-card figcaption .lop-content-feedback-btn.is-compact{padding:7px 10px!important;font-size:12.5px!important;}
.lop-study-unit-visual-card figcaption .lop-content-feedback-btn.is-compact > strong,
.lop-study-look-say-card figcaption .lop-content-feedback-btn.is-compact > strong{font-size:12.5px!important;}
@media(max-width:640px){
  .lop-study-unit-hero-card figcaption .lop-content-feedback-btn,
  .lop-study-unit-visual-card figcaption .lop-content-feedback-btn,
  .lop-study-look-say-card figcaption .lop-content-feedback-btn{
    margin-top:8px!important;
    padding:7px 10px!important;
    font-size:12.5px!important;
  }
}

/* v2.8.199 - Report-once until retake flow for Lesson / Quiz. */
.lop-study-retake-gate{background:linear-gradient(135deg,#f8fafc,#eff6ff)!important;border:1px solid rgba(59,130,246,.18)!important;box-shadow:0 22px 46px rgba(37,99,235,.10)!important;}
.lop-study-retake-card{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:26px;background:#fff;border:1px solid #dbeafe;box-shadow:0 18px 36px rgba(37,99,235,.08);}
.lop-study-retake-icon{flex:0 0 54px;width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-size:30px;font-weight:950;box-shadow:0 14px 28px rgba(34,197,94,.22);}
.lop-study-retake-card h2{margin:4px 0 8px!important;font-size:clamp(24px,3vw,34px)!important;line-height:1.15!important;color:#172554!important;}
.lop-study-retake-card p{margin:0!important;color:#475569!important;font-size:15px!important;line-height:1.65!important;max-width:980px;}
.lop-study-retake-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.lop-study-retake-meta span{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-weight:900;font-size:12.5px;line-height:1;}
.lop-study-retake-actions{margin-top:16px!important;}
.lop-study-complete-gate.is-retake-mode{border-color:#fbbf24!important;background:radial-gradient(circle at top right,rgba(251,191,36,.20),transparent 34%),linear-gradient(135deg,#fffbeb,#eff6ff)!important;}
.lop-study-complete-gate.is-retake-mode .lopsp-kicker{color:#b45309!important;background:#fef3c7!important;border-color:#fde68a!important;}
.lopsp-retake-report-note{margin:0 0 14px!important;border-color:#bfdbfe!important;background:#eff6ff!important;color:#1e3a8a!important;}
.is-lop-retake-session .lop-study-complete-status:before{content:'↻ ';font-weight:950;color:#d97706;}
@media(max-width:760px){.lop-study-retake-card{gap:12px;padding:14px;border-radius:22px}.lop-study-retake-icon{width:46px;height:46px;flex-basis:46px;border-radius:16px;font-size:25px}.lop-study-retake-card h2{font-size:22px!important}.lop-study-retake-card p{font-size:14px!important}.lop-study-retake-actions{display:grid!important;grid-template-columns:1fr!important}.lop-study-retake-actions a{width:100%!important;justify-content:center!important}.lop-study-retake-meta span{font-size:11.5px;padding:6px 9px}}

/* v2.8.210 - Chuyên đề / Topic collections */
.lop-study-choice-card.is-topic{background:linear-gradient(135deg,#f5f3ff,#eef2ff);border-color:#c7d2fe;}
.lop-topic-hero .lop-support-hero-icon{background:linear-gradient(135deg,#7c3aed,#2563eb);}
.lop-topic-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;}
.lop-topic-card-grid-mini{grid-template-columns:repeat(3,minmax(0,1fr));}
.lop-topic-card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;overflow:hidden;box-shadow:0 18px 48px rgba(15,23,42,.08);display:flex;flex-direction:column;min-width:0;}
.lop-topic-card-image{height:150px;background:linear-gradient(135deg,#dbeafe,#f5d0fe);display:flex;align-items:center;justify-content:center;text-decoration:none;color:#4c1d95;font-size:48px;overflow:hidden;}
.lop-topic-card-image img{width:100%;height:100%;object-fit:cover;display:block;}
.lop-topic-card-body{padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0;flex:1;}
.lop-topic-card-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.lop-topic-card-chips span{display:inline-flex;align-items:center;border-radius:999px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;padding:5px 9px;font-size:12px;font-weight:800;line-height:1.1;}
.lop-topic-card h3{margin:0;font-size:20px;line-height:1.25;}
.lop-topic-card h3 a{color:#111827;text-decoration:none;}
.lop-topic-card h3 a:hover{color:#2563eb;}
.lop-topic-card p{margin:0;color:#475569;line-height:1.55;}
.lop-topic-card-stats{display:flex;gap:8px;align-items:center;color:#64748b;font-size:13px;font-weight:700;}
.lop-topic-card-stats b{color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:3px 7px;}
.lop-topic-card .lop-study-open-btn{margin-top:auto;}
.lop-topic-detail-hero .lop-topic-hero-image{overflow:hidden;border-radius:28px;background:#f8fafc;}
.lop-topic-detail-hero .lop-topic-hero-image img{width:100%;height:100%;min-height:220px;object-fit:cover;border-radius:24px;display:block;}
.lop-topic-intro{font-size:16px;line-height:1.7;color:#334155;}
.lop-topic-task-grid .lop-topic-task-card{position:relative;}
@media (max-width: 980px){.lop-topic-card-grid,.lop-topic-card-grid-mini{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 640px){.lop-topic-card-grid,.lop-topic-card-grid-mini{grid-template-columns:1fr;}.lop-topic-card-image{height:130px}.lop-topic-card h3{font-size:18px}.lop-topic-detail-hero .lop-topic-hero-image img{min-height:160px}.lop-study-choice-grid-3{grid-template-columns:1fr!important}}

/* v2.8.212 - Structured lesson linked quizzes */
.lop-study-practice-guide{border:1px solid rgba(245,158,11,.22);background:linear-gradient(135deg,#fff7ed,#ffffff);border-radius:22px;}
.lop-study-practice-guide h2{display:flex;align-items:center;gap:8px;}
.lop-study-practice-guide h2:before{content:'🧠';}
.lop-study-linked-quizzes{margin:22px 0;padding:18px;border-radius:24px;background:linear-gradient(135deg,#eef2ff 0%,#ffffff 55%,#ecfeff 100%);border:1px solid rgba(99,102,241,.18);box-shadow:0 14px 34px rgba(15,23,42,.07);}
.lop-study-linked-quizzes-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;}
.lop-study-linked-quizzes-head h2{margin:.15rem 0 .25rem;font-size:1.18rem;color:#0f172a;}
.lop-study-linked-quizzes-head p{margin:0;color:#475569;font-size:.94rem;line-height:1.5;}
.lop-study-linked-quizzes-head strong{flex:0 0 auto;border-radius:999px;background:#4f46e5;color:#fff;padding:7px 12px;font-size:.82rem;box-shadow:0 8px 18px rgba(79,70,229,.22);}
.lop-study-linked-quiz-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
@media(max-width:640px){.lop-study-linked-quizzes{padding:14px;border-radius:18px}.lop-study-linked-quizzes-head{flex-direction:column}.lop-study-linked-quizzes-head strong{align-self:flex-start}.lop-study-linked-quiz-grid{grid-template-columns:1fr}}

/* v2.8.248 - Frontend Quiz stable question/option layout fallback */
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question{display:block!important;min-inline-size:0!important;width:100%!important;box-sizing:border-box!important;padding:0!important;overflow:hidden!important;border-radius:24px!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question legend{display:flex!important;align-items:flex-start!important;gap:12px!important;float:left!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;margin:0!important;padding:18px 20px!important;border-bottom:1px solid rgba(124,58,237,.12)!important;background:linear-gradient(135deg,#ffffff,#f8fbff)!important;line-height:1.38!important;overflow-wrap:anywhere!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question legend span{flex:0 0 auto!important;margin:0!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question legend + *{clear:both!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-quiz-context-card{clear:both!important;margin:18px 20px 16px!important;box-sizing:border-box!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-quiz-question-feedback-row{clear:both!important;display:flex!important;justify-content:flex-end!important;margin:0!important;padding:0 20px 14px!important;box-sizing:border-box!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options{clear:both!important;display:grid!important;gap:12px!important;margin:0!important;padding:0 20px 20px!important;box-sizing:border-box!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label{display:grid!important;grid-template-columns:20px 44px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:64px!important;box-sizing:border-box!important;margin:0!important;padding:13px 16px!important;border-radius:18px!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label input[type="radio"]{grid-column:1!important;align-self:center!important;justify-self:center!important;width:18px!important;height:18px!important;margin:0!important;flex:none!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-letter{grid-column:2!important;align-self:center!important;justify-self:center!important;width:42px!important;min-width:42px!important;height:42px!important;margin:0!important;box-sizing:border-box!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-text{grid-column:3!important;align-self:center!important;min-width:0!important;width:100%!important;padding-top:0!important;line-height:1.5!important;overflow-wrap:anywhere!important;}
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-feedback{clear:both!important;margin:0 20px 20px!important;box-sizing:border-box!important;}

/* v2.8.260 - Unit content inline TTS button */
.lop-study-content .lop-study-tts-button,
.lop-study-lesson-detail .lop-study-tts-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  border:0;
  border-radius:999px;
  background:#4f6df5;
  color:#fff;
  padding:9px 14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(79,109,245,.18);
}
.lop-study-content .lop-study-tts-button:hover,
.lop-study-lesson-detail .lop-study-tts-button:hover{
  transform:translateY(-1px);
}


/* v2.8.310 frontend mirror - Fix /goc-hoc-tap lesson/quiz hub workflow cards: keep number, title and subtitle readable. */
.lop-study-lesson-hub-flow .lop-study-workflow-steps,
.lop-study-quiz-flow .lop-study-workflow-steps{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(12px,1.5vw,18px) !important;
  align-items:stretch !important;
}
.lop-study-lesson-hub-flow .lop-study-workflow-steps > span,
.lop-study-quiz-flow .lop-study-workflow-steps > span{
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  justify-content:initial !important;
  column-gap:13px !important;
  row-gap:3px !important;
  min-height:90px !important;
  padding:16px 18px !important;
  text-align:left !important;
  overflow:hidden !important;
  white-space:normal !important;
}
.lop-study-lesson-hub-flow .lop-study-workflow-steps > span > i,
.lop-study-quiz-flow .lop-study-workflow-steps > span > i{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  align-self:center !important;
  justify-self:center !important;
  display:inline-flex !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:16px !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(135deg,#4f46e5,#06b6d4) !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:950 !important;
  font-style:normal !important;
  box-shadow:0 12px 28px rgba(79,70,229,.22) !important;
  text-align:center !important;
}
.lop-study-lesson-hub-flow .lop-study-workflow-steps > span > strong,
.lop-study-quiz-flow .lop-study-workflow-steps > span > strong{
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  color:#07133f !important;
  font-size:clamp(16px,1.15vw,20px) !important;
  line-height:1.18 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}
.lop-study-lesson-hub-flow .lop-study-workflow-steps > span > small,
.lop-study-quiz-flow .lop-study-workflow-steps > span > small{
  grid-column:2 !important;
  grid-row:2 !important;
  display:block !important;
  min-width:0 !important;
  margin:2px 0 0 !important;
  color:#56637a !important;
  font-size:clamp(12.5px,.95vw,14px) !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}
.lop-study-lesson-hub-flow .lop-study-workflow-steps > span:where(:hover,:focus-within),
.lop-study-quiz-flow .lop-study-workflow-steps > span:where(:hover,:focus-within){
  transform:translateY(-1px);
  box-shadow:0 18px 42px rgba(15,23,42,.08) !important;
}
@media(max-width:1080px){
  .lop-study-lesson-hub-flow .lop-study-workflow-steps,
  .lop-study-quiz-flow .lop-study-workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:640px){
  .lop-study-lesson-hub-flow .lop-study-workflow-steps,
  .lop-study-quiz-flow .lop-study-workflow-steps{grid-template-columns:1fr !important;}
  .lop-study-lesson-hub-flow .lop-study-workflow-steps > span,
  .lop-study-quiz-flow .lop-study-workflow-steps > span{min-height:78px !important;padding:14px 15px !important;grid-template-columns:40px minmax(0,1fr) !important;}
  .lop-study-lesson-hub-flow .lop-study-workflow-steps > span > i,
  .lop-study-quiz-flow .lop-study-workflow-steps > span > i{width:38px !important;height:38px !important;min-width:38px !important;border-radius:14px !important;}
}


/* v2.8.311 - Replace black CTA/status buttons with dark gray gradient for visual consistency */
:root{
  --lop-dark-gray-btn-a:#334155;
  --lop-dark-gray-btn-b:#64748b;
  --lop-dark-gray-btn-c:#475569;
}
body.lopsp-private-standalone-body .lopsp-flow-zone-status,
body.lopsp-private-standalone-body .lopsp-flow-zone-head .lopsp-flow-zone-status,
body.lopsp-private-standalone-body .lopsp-flow-zone-head.is-done .lopsp-flow-zone-status,
body.lopsp-private-standalone-body .lopsp-flow-zone-head.is-active .lopsp-flow-zone-status,
body.lopsp-private-standalone-body .lopsp-flow-zone-head.is-priority .lopsp-flow-zone-status,
body.lopsp-private-standalone-body .lopsp-flow-zone-head.is-ready .lopsp-flow-zone-status,
body.lopsp-private-standalone-body .lopsp-flow-zone-head.is-muted .lopsp-flow-zone-status{
  background:linear-gradient(135deg,var(--lop-dark-gray-btn-a),var(--lop-dark-gray-btn-b))!important;
  color:#ffffff!important;
  border:1px solid rgba(255,255,255,.20)!important;
  text-shadow:0 1px 1px rgba(15,23,42,.22)!important;
  box-shadow:0 14px 30px rgba(51,65,85,.22)!important;
}
body.lopsp-private-standalone-body .lopsp-flow-zone-status:hover,
body.lopsp-private-standalone-body .lopsp-flow-zone-status:focus-visible{
  background:linear-gradient(135deg,#475569,#94a3b8)!important;
  box-shadow:0 18px 38px rgba(51,65,85,.26)!important;
}
.lop-study-flow-toggle:hover,
.lop-study-flow-toggle:focus-visible,
.lopsp-lop-flow-toggle:hover,
.lopsp-lop-flow-toggle:focus-visible{
  background:linear-gradient(135deg,var(--lop-dark-gray-btn-a),var(--lop-dark-gray-btn-c))!important;
  box-shadow:0 18px 36px rgba(51,65,85,.24)!important;
}
.lop-study-flow-toggle.is-dark,
.lopsp-lop-flow-toggle.is-dark,
.lopsp-public-btn.is-dark,
.lopsp-primary-soft.is-dark{
  background:linear-gradient(135deg,var(--lop-dark-gray-btn-a),var(--lop-dark-gray-btn-b))!important;
  color:#ffffff!important;
  border-color:rgba(255,255,255,.20)!important;
  box-shadow:0 14px 30px rgba(51,65,85,.22)!important;
}


/* v2.8.320 - Mobile lesson/quiz Flow Bubble compact button sizing.
   CSS-only: keeps bottom Flow Bubble controls as real compact buttons instead of stretching
   the active step across the full screen width on /bai-hoc and /quiz detail pages. */
@media(max-width:980px){
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles:not(.is-collapsed),
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles-v117:not(.is-collapsed),
  body.lop-support-body .lop-study-lesson-flow-bubbles:not(.is-collapsed),
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117:not(.is-collapsed){
    right:auto!important;
    width:max-content!important;
    min-width:0!important;
    max-width:calc(100vw - 14px)!important;
    justify-content:flex-start!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a,
  body.lop-support-body .lop-study-lesson-flow-bubbles .lop-study-flow-note-btn,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 .lop-study-flow-note-btn{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:56px!important;
    max-width:82px!important;
    box-sizing:border-box!important;
  }
  body.lop-support-body .lop-study-flow-toggle{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:54px!important;
    max-width:70px!important;
    box-sizing:border-box!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a span,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a span,
  body.lop-support-body .lop-study-lesson-flow-bubbles .lop-study-flow-note-btn span,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 .lop-study-flow-note-btn span{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}
@media(max-width:520px){
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles:not(.is-collapsed),
  body.lop-support-body.lop-study-has-side-flow .lop-study-lesson-flow-bubbles-v117:not(.is-collapsed),
  body.lop-support-body .lop-study-lesson-flow-bubbles:not(.is-collapsed),
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117:not(.is-collapsed){
    max-width:calc(100vw - 12px)!important;
  }
  body.lop-support-body .lop-study-lesson-flow-bubbles a,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 a,
  body.lop-support-body .lop-study-lesson-flow-bubbles .lop-study-flow-note-btn,
  body.lop-support-body .lop-study-lesson-flow-bubbles-v117 .lop-study-flow-note-btn{
    min-width:52px!important;
    max-width:72px!important;
  }
  body.lop-support-body .lop-study-flow-toggle{
    width:auto!important;
    min-width:52px!important;
    max-width:62px!important;
  }
}

/* v2.8.336 - Quiz elapsed timer on progress bar (UI-only). */
.lop-study-quiz-runner .lop-quiz-progress-timer{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#0f172a,#334155);
  border:1px solid rgba(148,163,184,.45);
  color:#fff;
  font-size:13px;
  font-weight:950;
  font-style:normal;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 12px 24px rgba(15,23,42,.14);
}
.lop-study-quiz-runner .lop-quiz-progress-timer.is-running{background:linear-gradient(135deg,#1d4ed8,#7c3aed);}
.lop-study-quiz-runner .lop-quiz-progress-timer.is-done{background:linear-gradient(135deg,#15803d,#16a34a);}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head{align-items:center!important;}
.lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em + .lop-quiz-progress-timer{margin-left:0;}
@media(max-width:760px){
  .lop-study-quiz-runner .lop-quiz-progress-timer{min-height:31px;padding:5px 9px;font-size:12px;margin-top:7px;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head{display:grid!important;grid-template-columns:1fr auto;gap:7px!important;align-items:center!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head .lop-quiz-progress-title{grid-column:1 / 2;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em{grid-column:1 / 2;margin-top:0!important;width:max-content!important;max-width:100%!important;}
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head .lop-quiz-progress-timer{grid-column:2 / 3;grid-row:2 / 3;align-self:center;margin-top:0;}
}
@media(max-width:420px){
  .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head .lop-quiz-progress-timer{grid-column:1 / 2;grid-row:auto;width:max-content;}
}

/* v2.8.346 - RichText media embeds */
.lop-study-content .lop-content-image,.lop-study-builder-detail .lop-content-image,.lop-study-flash-detail .lop-content-image,.lop-study-content .lop-content-youtube,.lop-study-builder-detail .lop-content-youtube,.lop-study-flash-detail .lop-content-youtube{margin:16px 0;border:1px solid rgba(148,163,184,.28);border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 14px 30px rgba(15,23,42,.08)}
.lop-study-content .lop-content-image img,.lop-study-builder-detail .lop-content-image img,.lop-study-flash-detail .lop-content-image img{display:block;width:100%;max-height:420px;object-fit:contain;background:#f8fafc}
.lop-study-content .lop-content-image figcaption,.lop-study-builder-detail .lop-content-image figcaption,.lop-study-flash-detail .lop-content-image figcaption,.lop-study-content .lop-content-youtube figcaption,.lop-study-builder-detail .lop-content-youtube figcaption,.lop-study-flash-detail .lop-content-youtube figcaption{padding:9px 14px;color:#64748b;font-size:13px;font-weight:800}
.lop-study-content .lop-content-youtube-frame,.lop-study-builder-detail .lop-content-youtube-frame,.lop-study-flash-detail .lop-content-youtube-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0f172a;overflow:hidden}
.lop-study-content .lop-content-youtube-frame iframe,.lop-study-builder-detail .lop-content-youtube-frame iframe,.lop-study-flash-detail .lop-content-youtube-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* v2.8.349 - Lesson Unit detail popup. */
.lop-study-unit-detail-open{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:100%!important;min-height:44px!important;padding:10px 14px!important;border:0!important;border-radius:999px!important;background:linear-gradient(135deg,#2563eb,#06b6d4)!important;color:#fff!important;font-weight:1000!important;font-size:14px!important;box-shadow:0 14px 28px rgba(37,99,235,.22)!important;cursor:pointer!important;text-decoration:none!important;}
.lop-study-unit-detail-open:hover{transform:translateY(-1px)!important;box-shadow:0 18px 34px rgba(37,99,235,.28)!important;}
.lop-study-unit-detail-modal[hidden]{display:none!important;}
.lop-study-unit-detail-modal{position:fixed!important;inset:0!important;z-index:100010!important;display:grid!important;place-items:center!important;padding:22px!important;}
.lop-study-unit-detail-backdrop{position:absolute!important;inset:0!important;background:rgba(15,23,42,.74)!important;backdrop-filter:blur(7px)!important;}
.lop-study-unit-detail-dialog{position:relative!important;z-index:2!important;width:min(1040px,94vw)!important;max-height:90vh!important;overflow:auto!important;border-radius:32px!important;background:linear-gradient(180deg,#ffffff,#f8fbff)!important;border:1px solid rgba(219,234,254,.95)!important;box-shadow:0 34px 90px rgba(15,23,42,.32)!important;padding:24px!important;color:#0f172a!important;}
.lop-study-unit-detail-close{position:sticky!important;top:0!important;float:right!important;z-index:4!important;width:44px!important;height:44px!important;border:0!important;border-radius:999px!important;background:#eef2ff!important;color:#1d4ed8!important;font-size:30px!important;line-height:1!important;font-weight:900!important;cursor:pointer!important;box-shadow:0 12px 28px rgba(37,99,235,.15)!important;}
.lop-study-unit-detail-hero{display:grid!important;grid-template-columns:minmax(240px,360px) 1fr!important;gap:22px!important;align-items:stretch!important;margin-bottom:20px!important;clear:both!important;}
.lop-study-unit-detail-media{min-height:260px!important;border-radius:28px!important;overflow:hidden!important;background:linear-gradient(135deg,#eff6ff,#ecfeff)!important;border:1px solid #dbeafe!important;display:grid!important;place-items:center!important;}
.lop-study-unit-detail-media .lop-study-unit-detail-image-btn{width:100%!important;height:100%!important;border-radius:0!important;}
.lop-study-unit-detail-media img{width:100%!important;height:100%!important;min-height:260px!important;object-fit:cover!important;display:block!important;}
.lop-study-unit-detail-media-empty{display:grid!important;place-items:center!important;text-align:center!important;gap:8px!important;color:#2563eb!important;font-weight:1000!important;}
.lop-study-unit-detail-media-empty span{display:grid!important;place-items:center!important;width:84px!important;height:84px!important;border-radius:26px!important;background:#fff!important;box-shadow:0 16px 36px rgba(37,99,235,.16)!important;letter-spacing:.08em!important;}
.lop-study-unit-detail-title{display:flex!important;flex-direction:column!important;gap:12px!important;padding:6px 8px!important;}
.lop-study-unit-detail-title h2{margin:0!important;font-size:clamp(28px,4vw,44px)!important;line-height:1.06!important;color:#0f172a!important;font-weight:1000!important;}
.lop-study-unit-detail-title p{margin:0!important;font-size:17px!important;line-height:1.65!important;color:#475569!important;font-weight:650!important;}
.lop-study-unit-detail-tags{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
.lop-study-unit-detail-tags em{font-style:normal!important;padding:7px 11px!important;border-radius:999px!important;background:#eef2ff!important;color:#3730a3!important;font-weight:900!important;font-size:12px!important;}
.lop-study-unit-detail-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important;margin-top:auto!important;padding-top:8px!important;}
.lop-study-unit-detail-actions audio{width:min(100%,360px)!important;}
.lop-study-unit-detail-check{margin:0!important;}
.lop-study-unit-detail-video,.lop-study-unit-detail-content{margin-top:18px!important;padding:20px!important;border-radius:26px!important;background:#fff!important;border:1px solid #e0edff!important;box-shadow:0 14px 34px rgba(15,23,42,.06)!important;}
.lop-study-unit-detail-video h3,.lop-study-unit-detail-content h3{margin:0 0 14px!important;font-size:20px!important;line-height:1.25!important;color:#0f172a!important;font-weight:1000!important;}
.lop-study-unit-detail-video .lop-content-youtube-frame{position:relative!important;width:100%!important;aspect-ratio:16/9!important;border-radius:22px!important;overflow:hidden!important;background:#0f172a!important;}
.lop-study-unit-detail-video iframe,.lop-study-unit-detail-content iframe{width:100%!important;height:100%!important;border:0!important;display:block!important;}
.lop-study-unit-detail-content{font-size:16px!important;line-height:1.7!important;color:#334155!important;}
.lop-study-unit-detail-content p{margin:0 0 12px!important;}
.lop-study-unit-detail-content img{max-width:100%!important;height:auto!important;border-radius:18px!important;}
.lop-study-unit-detail-footer{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important;justify-content:flex-end!important;margin-top:18px!important;padding-top:16px!important;border-top:1px solid #e0edff!important;}
body.lop-unit-detail-open{overflow:hidden!important;}
@media(max-width:760px){.lop-study-unit-detail-modal{padding:10px!important;align-items:end!important;}.lop-study-unit-detail-dialog{width:100%!important;max-height:92vh!important;border-radius:26px 26px 0 0!important;padding:16px!important;}.lop-study-unit-detail-hero{grid-template-columns:1fr!important;gap:14px!important;}.lop-study-unit-detail-media{min-height:190px!important;border-radius:22px!important;}.lop-study-unit-detail-media img{min-height:190px!important;}.lop-study-unit-detail-title h2{font-size:30px!important;}.lop-study-unit-detail-title p{font-size:15px!important;}.lop-study-unit-detail-video,.lop-study-unit-detail-content{padding:16px!important;border-radius:22px!important;}.lop-study-unit-detail-footer{justify-content:flex-start!important;}}

/* v2.8.353 - Mobile horizontal scroll for rich-content tables on lesson pages */
@media (max-width: 760px){
  .lop-study-lesson-detail table,
  .lop-study-lesson-detail .lop-study-unit-detail-modal table,
  .lop-study-lesson-detail .lop-study-unit-detail-modal-body table,
  body.lop-support-body .lop-study-lesson-detail table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    border-collapse:separate;
    border-spacing:0;
  }
  .lop-study-lesson-detail table th,
  .lop-study-lesson-detail table td,
  .lop-study-lesson-detail .lop-study-unit-detail-modal table th,
  .lop-study-lesson-detail .lop-study-unit-detail-modal table td,
  .lop-study-lesson-detail .lop-study-unit-detail-modal-body table th,
  .lop-study-lesson-detail .lop-study-unit-detail-modal-body table td{
    white-space:normal;
    min-width:120px;
  }
  .lop-study-lesson-detail table::-webkit-scrollbar,
  .lop-study-lesson-detail .lop-study-unit-detail-modal table::-webkit-scrollbar,
  .lop-study-lesson-detail .lop-study-unit-detail-modal-body table::-webkit-scrollbar{
    height:8px;
  }
  .lop-study-lesson-detail table::-webkit-scrollbar-track,
  .lop-study-lesson-detail .lop-study-unit-detail-modal table::-webkit-scrollbar-track,
  .lop-study-lesson-detail .lop-study-unit-detail-modal-body table::-webkit-scrollbar-track{
    background:rgba(219,234,254,.7);
    border-radius:999px;
  }
  .lop-study-lesson-detail table::-webkit-scrollbar-thumb,
  .lop-study-lesson-detail .lop-study-unit-detail-modal table::-webkit-scrollbar-thumb,
  .lop-study-lesson-detail .lop-study-unit-detail-modal-body table::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#93c5fd,#a5b4fc);
    border-radius:999px;
  }
}

/* v2.8.356 - Lesson media image as hero cover + LOPEditor Unit attach CTA */
.lop-study-lesson-hero.has-cover-image{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);align-items:center;gap:clamp(18px,3vw,32px);}
.lop-study-lesson-hero-cover{margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;max-width:100%;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#eff6ff,#f8fbff);border:1px solid #dbe7ff;box-shadow:0 20px 46px rgba(15,23,42,.10);}
.lop-study-lesson-hero-cover .lop-study-image-lightbox-trigger{height:100%;min-height:220px;border-radius:0;background:#f8fafc;}
.lop-study-lesson-hero-cover img{width:100%;height:100%;min-height:220px;max-height:360px;object-fit:cover;display:block;}
.lop-study-lesson-hero-cover figcaption{padding:0 16px 14px;color:#475569;font-size:13px;font-weight:800;line-height:1.45;}
.lop-study-editor-add-unit-btn{display:inline-flex!important;align-items:center;justify-content:center;width:max-content!important;max-width:100%;margin-top:12px;padding:10px 15px!important;border-radius:999px!important;text-decoration:none!important;background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;font-weight:1000!important;box-shadow:0 12px 26px rgba(79,70,229,.20)!important;}
@media(max-width:760px){.lop-study-lesson-hero.has-cover-image{grid-template-columns:1fr!important;padding:16px!important;}.lop-study-lesson-hero-cover{border-radius:22px;}.lop-study-lesson-hero-cover .lop-study-image-lightbox-trigger,.lop-study-lesson-hero-cover img{min-height:180px;max-height:260px;}.lop-study-lesson-hero-cover figcaption{padding:0 13px 13px;}.lop-study-editor-add-unit-btn{width:100%!important;}}

/* v2.8.381 - Free/VIP content access labels for study frontend. */
.lop-study-access-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:max-content;
  max-width:100%;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.01em;
  white-space:nowrap;
  border:1px solid rgba(37,99,235,.18);
  background:linear-gradient(135deg,#ecfdf5,#ffffff);
  color:#047857;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.lop-study-access-badge.lop-access-tier-vip{
  border-color:rgba(245,158,11,.34);
  background:linear-gradient(135deg,#fff7ed,#fffbeb 55%,#ffffff);
  color:#b45309;
  box-shadow:0 10px 22px rgba(245,158,11,.15);
}
.lop-study-access-badge.lop-access-context-detail,
.lop-study-access-badge.lop-access-context-lock{
  padding:7px 12px;
  font-size:13px;
}
.lop-study-card-code-row,
.lop-study-detail-code-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}
.lop-access-card-vip .lop-study-open-btn{
  background:linear-gradient(135deg,#f97316,#f59e0b);
  color:#fff;
  box-shadow:0 14px 28px rgba(249,115,22,.2);
}
.lop-study-lock-badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.lop-study-lock-badges > span:first-child{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background:#eef2ff;
  color:#4338ca;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
}
@media (max-width:640px){.lop-study-access-badge{font-size:11px;padding:5px 8px;}.lop-study-card-code-row,.lop-study-detail-code-row{gap:5px;}}

/* v2.8.385 - Chuyen de item cards mirror Study Library lesson/quiz cards. */
.lop-topic-items .lop-study-section-head{align-items:flex-end;}
.lop-topic-task-grid{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  align-items:stretch;
}
.lop-topic-task-grid .lop-topic-task-card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:24px;
  background:#fff;
  border:1px solid #e6edf6;
  box-shadow:0 16px 42px rgba(15,23,42,.06);
  min-height:100%;
}
.lop-topic-task-grid .lop-topic-task-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,#22c55e,#06b6d4,#6366f1);
}
.lop-topic-task-grid .lop-topic-task-card.lop-study-kind-quiz::before{
  background:linear-gradient(90deg,#8b5cf6,#6366f1,#06b6d4);
}
.lop-topic-task-grid .lop-topic-task-card .lop-study-task-top,
.lop-topic-task-grid .lop-topic-task-card .lop-study-card-code-row,
.lop-topic-task-grid .lop-topic-task-card h3,
.lop-topic-task-grid .lop-topic-task-card p,
.lop-topic-task-grid .lop-topic-task-card .lop-study-task-meta,
.lop-topic-task-grid .lop-topic-task-card .lop-study-open-btn{
  position:relative;
  z-index:1;
}
.lop-topic-task-grid .lop-topic-task-card .lop-study-card-code-row{
  min-height:30px;
  margin:4px 0 10px;
  justify-content:flex-start;
}
.lop-topic-task-grid .lop-topic-task-card h3{
  font-size:18px;
  line-height:1.34;
  margin:4px 0 0;
  color:#0f172a;
}
.lop-topic-task-grid .lop-topic-task-card p{
  color:#475569;
  line-height:1.62;
  min-height:3.2em;
}
.lop-topic-task-grid .lop-topic-task-card .lop-study-task-meta{
  font-size:13px;
  color:#64748b;
  font-weight:850;
}
.lop-topic-task-grid .lop-topic-task-card .lop-study-task-meta a{
  color:#334155;
  text-decoration:none;
}
.lop-topic-task-grid .lop-topic-task-card .lop-study-task-meta a:hover,
.lop-topic-task-grid .lop-topic-task-card .lop-study-task-meta a:focus{
  color:#2563eb;
  text-decoration:underline;
}
@media(max-width:640px){
  .lop-topic-task-grid{grid-template-columns:1fr;gap:14px;}
  .lop-topic-task-grid .lop-topic-task-card{border-radius:22px;padding:16px;}
  .lop-topic-task-grid .lop-topic-task-card h3{font-size:17px;}
  .lop-topic-task-grid .lop-topic-task-card p{min-height:0;}
}

/* v2.8.386 - Unify /chuyen-de card density with Study Library.
   UX target: 4 cards on wide desktop, 3 on compact desktop, 2 on tablet, 1 on mobile. */
.lop-topic-card-grid,
.lop-topic-card-grid-mini,
.lop-topic-task-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(14px,1.45vw,18px) !important;
  align-items:stretch !important;
}
.lop-topic-task-grid .lop-topic-task-card{
  min-width:0;
}
@media(max-width:1180px){
  .lop-topic-card-grid,
  .lop-topic-card-grid-mini,
  .lop-topic-task-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:860px){
  .lop-topic-card-grid,
  .lop-topic-card-grid-mini,
  .lop-topic-task-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:640px){
  .lop-topic-card-grid,
  .lop-topic-card-grid-mini,
  .lop-topic-task-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* v2.8.387 - Safe full-image display for Study Library and Topic visuals.
   Avoid cropping/covering featured images on /goc-hoc-tap, /bai-hoc, /quiz and /chuyen-de. */
.lop-topic-card-image{
  height:auto!important;
  min-height:clamp(126px,10vw,156px)!important;
  aspect-ratio:16/9!important;
  padding:8px!important;
  box-sizing:border-box!important;
  background:linear-gradient(135deg,#f8fbff,#eef7ff)!important;
}
.lop-topic-card-image img,
.lop-topic-detail-hero .lop-topic-hero-image img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#ffffff!important;
  border-radius:18px!important;
}
.lop-topic-detail-hero .lop-topic-hero-image{
  display:grid!important;
  place-items:center!important;
  min-height:clamp(180px,24vw,320px)!important;
  padding:10px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#f8fbff,#eef7ff)!important;
}
.lop-topic-detail-hero .lop-topic-hero-image img{
  max-height:clamp(180px,24vw,320px)!important;
}
.lop-study-lesson-hero-cover,
.lop-study-quiz-hero-cover,
.lop-study-unit-hero-img,
.lop-study-unit-visual-card,
.lop-study-look-say-card,
.lop-study-lesson-unit-card .lop-study-unit-thumb-wrap,
.lop-study-unit-detail-media{
  background:linear-gradient(135deg,#f8fbff,#eef7ff)!important;
}
.lop-study-lesson-hero-cover .lop-study-image-lightbox-trigger,
.lop-study-quiz-hero-cover .lop-study-image-lightbox-trigger,
.lop-study-unit-hero-img .lop-study-image-lightbox-trigger,
.lop-study-unit-visual-card .lop-study-image-lightbox-trigger,
.lop-study-look-say-card .lop-study-image-lightbox-trigger,
.lop-study-lesson-unit-card .lop-study-image-lightbox-trigger,
.lop-study-unit-detail-media .lop-study-image-lightbox-trigger,
.lop-study-unit-detail-media .lop-study-unit-detail-image-btn{
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#ffffff,#f8fbff)!important;
}
.lop-study-lesson-hero-cover img,
.lop-study-quiz-hero-cover img,
.lop-study-unit-hero-img img,
.lop-study-unit-visual-card img,
.lop-study-look-say-card img,
.lop-study-lesson-unit-card .lop-study-unit-thumb,
.lop-study-unit-thumb,
.lop-study-unit-image,
.lop-study-unit-detail-media img{
  object-fit:contain!important;
  object-position:center center!important;
  background:#ffffff!important;
}
.lop-study-lesson-hero-cover img,
.lop-study-quiz-hero-cover img{
  height:auto!important;
  min-height:0!important;
  max-height:min(360px,44vh)!important;
}
.lop-study-lesson-hero-cover .lop-study-image-lightbox-trigger,
.lop-study-quiz-hero-cover .lop-study-image-lightbox-trigger{
  min-height:220px!important;
  padding:10px!important;
  box-sizing:border-box!important;
}
.lop-study-unit-visual-card img,
.lop-study-look-say-card img,
.lop-study-unit-hero-img img,
.lop-study-lesson-unit-card .lop-study-unit-thumb,
.lop-study-unit-thumb,
.lop-study-unit-image{
  padding:6px!important;
  box-sizing:border-box!important;
}
@media(max-width:760px){
  .lop-topic-card-image{min-height:132px!important;padding:7px!important;}
  .lop-topic-detail-hero .lop-topic-hero-image{min-height:170px!important;}
  .lop-topic-detail-hero .lop-topic-hero-image img{max-height:220px!important;}
  .lop-study-lesson-hero-cover .lop-study-image-lightbox-trigger,
  .lop-study-quiz-hero-cover .lop-study-image-lightbox-trigger{min-height:180px!important;}
  .lop-study-lesson-hero-cover img,
  .lop-study-quiz-hero-cover img{max-height:260px!important;}
}


/* v2.8.388 - Compact /chuyen-de detail hero height to match Study Library hub pages. UI-only. */
body.lop-topic-body .lop-topic-detail-hero{
  min-height:0!important;
  margin:16px 0 18px!important;
  padding:clamp(18px,2.6vw,30px)!important;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)!important;
  align-items:center!important;
  gap:clamp(18px,2.6vw,28px)!important;
}
body.lop-topic-body .lop-topic-detail-hero .lopsp-info-hero-copy{
  align-self:center!important;
  min-width:0!important;
}
body.lop-topic-body .lop-topic-detail-hero .lopsp-info-hero-copy h1{
  font-size:clamp(28px,3.1vw,40px)!important;
  line-height:1.15!important;
  margin:8px 0 10px!important;
  letter-spacing:-.032em!important;
}
body.lop-topic-body .lop-topic-detail-hero .lopsp-info-hero-copy p{
  font-size:clamp(16px,1.35vw,18px)!important;
  line-height:1.62!important;
  max-width:860px!important;
}
body.lop-topic-body .lop-topic-detail-hero .lop-topic-card-chips{
  margin-top:10px!important;
}
body.lop-topic-body .lop-topic-detail-hero .lop-topic-hero-image{
  width:100%!important;
  min-height:0!important;
  height:clamp(210px,22vw,286px)!important;
  max-height:286px!important;
  padding:12px!important;
  border-radius:26px!important;
  box-sizing:border-box!important;
}
body.lop-topic-body .lop-topic-detail-hero .lop-topic-hero-image img{
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  border-radius:20px!important;
}
@media(max-width:980px){
  body.lop-topic-body .lop-topic-detail-hero{
    grid-template-columns:1fr!important;
  }
  body.lop-topic-body .lop-topic-detail-hero .lop-topic-hero-image{
    height:clamp(180px,42vw,260px)!important;
    max-height:260px!important;
  }
}
@media(max-width:640px){
  body.lop-topic-body .lop-topic-detail-hero{
    margin:10px 0 12px!important;
    padding:16px!important;
    border-radius:20px!important;
    gap:14px!important;
  }
  body.lop-topic-body .lop-topic-detail-hero .lopsp-info-hero-copy h1{
    font-size:25px!important;
  }
  body.lop-topic-body .lop-topic-detail-hero .lop-topic-hero-image{
    height:170px!important;
    max-height:170px!important;
    padding:8px!important;
    border-radius:20px!important;
  }
}

/* v2.8.391: Lesson frontend direct Question Bank quiz visibility */
.lop-study-lesson-qbank-wrap{
  margin:26px 0;
  padding:0;
  border:0;
  background:transparent;
}
.lop-study-qbank-quiz-head{
  margin-bottom:14px;
  border:1px solid rgba(79,112,255,.20);
  background:linear-gradient(135deg,rgba(236,247,255,.98),rgba(255,255,255,.98));
  box-shadow:0 18px 48px rgba(35,70,180,.08);
}
.lop-study-qbank-quiz{
  margin-top:0;
  border-color:rgba(79,112,255,.22);
  box-shadow:0 22px 64px rgba(35,70,180,.10);
}
.lop-study-qbank-quiz .lop-study-flow-part-head{
  background:linear-gradient(135deg,rgba(79,112,255,.10),rgba(34,197,94,.08));
}


/* v2.8.393 - Lesson frontend quiz answer alignment polish */
body.lop-support-body .lop-study-lesson-detail .lop-study-quiz-options,
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-options{
  clear:both!important;
  display:grid!important;
  gap:12px!important;
  box-sizing:border-box!important;
}
body.lop-support-body .lop-study-lesson-detail .lop-study-quiz-options label,
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-options label{
  display:grid!important;
  grid-template-columns:24px 48px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:0!important;
  width:100%!important;
  min-height:72px!important;
  box-sizing:border-box!important;
  padding:14px 18px!important;
  margin:0!important;
  border-radius:18px!important;
}
body.lop-support-body .lop-study-lesson-detail .lop-study-quiz-options label input[type="radio"],
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-options label input[type="radio"]{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:center!important;
  place-self:center!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  max-width:18px!important;
  max-height:18px!important;
  padding:0!important;
  margin:0!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  flex:0 0 auto!important;
  vertical-align:middle!important;
  accent-color:#4f46e5!important;
}
body.lop-support-body .lop-study-lesson-detail .lop-study-quiz-options label .lop-quiz-option-letter,
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-options label .lop-quiz-option-letter{
  grid-column:2!important;
  grid-row:1!important;
  display:inline-grid!important;
  place-items:center!important;
  align-self:center!important;
  justify-self:center!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  margin:0!important;
  border-radius:999px!important;
  line-height:1!important;
  text-align:center!important;
  box-sizing:border-box!important;
  font-size:18px!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  background:#eef2ff!important;
  color:#3730a3!important;
  border:1px solid #c7d2fe!important;
}
body.lop-support-body .lop-study-lesson-detail .lop-study-quiz-options label .lop-quiz-option-text,
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-options label .lop-quiz-option-text{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:stretch!important;
  display:block!important;
  min-width:0!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
  line-height:1.5!important;
  overflow-wrap:anywhere!important;
  color:#1e293b!important;
}
@media(max-width:640px){
  body.lop-support-body .lop-study-lesson-detail .lop-study-quiz-options label,
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-options label{
    grid-template-columns:22px 42px minmax(0,1fr)!important;
    min-height:64px!important;
    column-gap:10px!important;
    padding:12px 13px!important;
  }
  body.lop-support-body .lop-study-lesson-detail .lop-study-quiz-options label .lop-quiz-option-letter,
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-options label .lop-quiz-option-letter{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    font-size:16px!important;
  }
}

/* v2.8.394 - Lesson Báo LOP popup fallback styles */
.lop-study-lop-modal[hidden]{display:none!important;}
.lop-study-lop-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-start;justify-content:center;padding:clamp(18px,5vh,56px) 16px;background:rgba(15,23,42,.42);backdrop-filter:blur(6px);overflow:auto;}
.lop-study-lop-backdrop{position:fixed;inset:0;background:transparent;}
.lop-study-lop-dialog{position:relative;width:min(960px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:28px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1px solid #bfdbfe;box-shadow:0 34px 90px rgba(15,23,42,.24);}
.lop-study-lop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px;background:linear-gradient(135deg,#eef2ff,#ecfeff);border-bottom:1px solid #dbeafe;}
.lop-study-lop-head span{display:inline-flex;width:max-content;border-radius:999px;padding:7px 12px;background:#eef2ff;color:#4f46e5;font-weight:950;text-transform:uppercase;letter-spacing:.04em;font-size:12px;}
.lop-study-lop-head h2{margin:10px 0 4px!important;color:#07123a;font-size:clamp(24px,3vw,34px);line-height:1.15;}
.lop-study-lop-head p{margin:0;color:#64748b;font-weight:780;line-height:1.45;}
.lop-study-lop-head button{width:48px;height:48px;border-radius:16px;border:0;background:linear-gradient(135deg,#4f46e5,#2563eb);color:#fff;font-size:26px;font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(79,70,229,.25);cursor:pointer;}
.lop-study-lop-form{display:flex;flex-direction:column;gap:18px;padding:24px 26px 26px;}
.lop-study-lop-field{display:flex;flex-direction:column;gap:8px;}
.lop-study-lop-field label{font-weight:950;color:#1e293b;font-size:15px;}
.lop-study-lop-field label span{color:#dc2626;}
.lop-study-lop-field input[type="text"],.lop-study-lop-field textarea{width:100%;border:1px solid #cbd5e1;border-radius:18px;background:#fff;color:#0f172a;font-size:16px;line-height:1.55;padding:14px 16px;box-shadow:inset 0 1px 2px rgba(15,23,42,.04);}
.lop-study-lop-field textarea{min-height:180px;resize:vertical;}
.lop-study-lop-field input[type="text"]:focus,.lop-study-lop-field textarea:focus{outline:0;border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.15);}
.lop-study-lop-field input[type="file"]{width:100%;border:1px dashed #bfdbfe;border-radius:18px;background:#f8fbff;color:#334155;padding:14px;}
.lop-study-lop-field small{color:#64748b;font-weight:720;}
.lop-study-lop-wordbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:16px;border:1px solid #dbeafe;background:#f8fbff;padding:10px 12px;color:#64748b;font-weight:800;}
.lop-study-lop-wordbar span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:32px;border-radius:999px;background:#fee2e2;color:#b91c1c;font-weight:950;}
.lop-study-lop-wordbar.is-ok span{background:#dcfce7;color:#15803d;}
.lop-study-lop-wordbar strong{color:#334155;}
.lop-study-lop-wordbar em{font-style:normal;margin-left:auto;color:#64748b;}
.lop-study-lop-wordbar.is-ok em{color:#15803d;}
.lop-study-lop-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding-top:4px;}
.lop-study-lop-actions button{border:0;border-radius:16px;padding:13px 18px;font-size:16px;font-weight:950;cursor:pointer;min-height:48px;}
.lop-study-lop-actions .secondary{background:#fff;border:1px solid #cbd5e1;color:#1e3a8a;}
.lop-study-lop-actions .primary{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;box-shadow:0 16px 34px rgba(37,99,235,.24);}
.lop-study-lop-actions .primary:disabled{background:#e2e8f0!important;color:#475569!important;box-shadow:none!important;cursor:not-allowed;opacity:1;}
body.lop-study-lop-modal-open{overflow:hidden;}
@media(max-width:640px){.lop-study-lop-modal{padding:10px}.lop-study-lop-dialog{border-radius:22px;max-height:calc(100vh - 20px)}.lop-study-lop-head,.lop-study-lop-form{padding:18px}.lop-study-lop-head button{width:44px;height:44px}.lop-study-lop-actions{align-items:stretch}.lop-study-lop-actions button{width:100%;}.lop-study-lop-wordbar em{width:100%;margin-left:0;}}


/* v2.8.395 - Compact professional quiz layout on lesson/quiz frontend.
   UI/CSS only: reduces wasted space around question header/options without changing quiz logic. */
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz{
  padding:clamp(14px,2vw,20px)!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-detail-part-head,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-detail-part-head,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-flow-part-head,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-flow-part-head{
  margin-bottom:14px!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-runner,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-runner{
  gap:14px!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-inline-size:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:22px!important;
  border:1px solid rgba(148,163,184,.28)!important;
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.055)!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question legend,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question legend{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  float:left!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:14px 190px 12px 18px!important;
  min-height:auto!important;
  border-bottom:1px solid rgba(226,232,240,.92)!important;
  background:linear-gradient(135deg,#ffffff,#f8fbff)!important;
  color:#07123a!important;
  font-size:clamp(18px,1.8vw,22px)!important;
  line-height:1.32!important;
  font-weight:950!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question legend span,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question legend span{
  flex:0 0 auto!important;
  margin:0!important;
  padding:5px 10px!important;
  line-height:1!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question legend + *,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question legend + *{
  clear:both!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-quiz-question-feedback-row,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-quiz-question-feedback-row{
  position:absolute!important;
  top:10px!important;
  right:14px!important;
  z-index:3!important;
  clear:none!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  width:auto!important;
  max-width:min(45%,320px)!important;
  box-sizing:border-box!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-quiz-question-feedback-row a,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-quiz-question-feedback-row button,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-quiz-question-feedback-row a,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-quiz-question-feedback-row button{
  min-height:40px!important;
  padding:9px 13px!important;
  border-radius:999px!important;
  font-size:14px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options{
  clear:both!important;
  display:grid!important;
  gap:10px!important;
  margin:0!important;
  padding:14px 18px 18px!important;
  box-sizing:border-box!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options label,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label{
  display:grid!important;
  grid-template-columns:20px 40px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:58px!important;
  margin:0!important;
  padding:10px 14px!important;
  border-radius:16px!important;
  border-color:rgba(148,163,184,.24)!important;
  background:#f8fafc!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options label:hover,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label:hover{
  background:#eff6ff!important;
  border-color:#93c5fd!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options label input[type="radio"],
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label input[type="radio"]{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  margin:0!important;
  place-self:center!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-letter,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-letter{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  font-size:17px!important;
  line-height:1!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-text,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-text{
  font-size:16px!important;
  line-height:1.4!important;
  font-weight:850!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-feedback,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-feedback{
  margin:0 18px 18px!important;
}
@media(max-width:760px){
  body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz,
  body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz{
    padding:12px!important;
  }
  body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question legend,
  body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question legend{
    padding:13px 14px 10px!important;
    align-items:flex-start!important;
    font-size:17px!important;
  }
  body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-quiz-question-feedback-row,
  body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-quiz-question-feedback-row{
    position:static!important;
    clear:both!important;
    max-width:100%!important;
    justify-content:flex-start!important;
    padding:8px 14px 0!important;
  }
  body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options,
  body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options{
    padding:10px 14px 14px!important;
    gap:9px!important;
  }
  body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options label,
  body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label{
    grid-template-columns:18px 36px minmax(0,1fr)!important;
    min-height:54px!important;
    gap:9px!important;
    padding:10px 12px!important;
  }
  body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-letter,
  body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-letter{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    font-size:15px!important;
  }
  body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-text,
  body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options label .lop-quiz-option-text{
    font-size:15px!important;
  }
}

/* v2.8.398 - Compact Lesson Báo LOP popup UI fallback.
   UI/CSS only: keep title/summary validation and submit logic unchanged. */
.lop-study-lop-modal{padding:clamp(10px,3vh,28px) 12px!important;align-items:flex-start!important;}
.lop-study-lop-dialog{width:min(860px,100%)!important;max-height:calc(100vh - 24px)!important;border-radius:22px!important;}
.lop-study-lop-head{padding:14px 18px!important;gap:12px!important;}
.lop-study-lop-head span{padding:5px 10px!important;font-size:11px!important;}
.lop-study-lop-head h2{margin:6px 0 2px!important;font-size:clamp(20px,2.2vw,26px)!important;line-height:1.12!important;}
.lop-study-lop-head p{font-size:14px!important;line-height:1.35!important;}
.lop-study-lop-head button{width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important;font-size:22px!important;}
.lop-study-lop-form{gap:10px!important;padding:14px 18px 16px!important;}
.lop-study-lop-field{gap:5px!important;}
.lop-study-lop-field label{font-size:14px!important;line-height:1.25!important;}
.lop-study-lop-field input[type="text"],.lop-study-lop-field textarea{border-radius:14px!important;font-size:15px!important;line-height:1.45!important;padding:10px 12px!important;}
.lop-study-lop-field textarea{min-height:110px!important;max-height:150px!important;}
.lop-study-lop-field input[type="file"]{border-radius:14px!important;padding:10px 12px!important;}
.lop-study-lop-field small{font-size:12px!important;line-height:1.3!important;}
.lop-study-lop-wordbar{padding:8px 10px!important;gap:6px!important;border-radius:14px!important;font-size:13px!important;line-height:1.3!important;}
.lop-study-lop-wordbar span{min-width:34px!important;height:26px!important;padding:0 8px!important;}
.lop-study-lop-actions{gap:8px!important;padding-top:2px!important;}
.lop-study-lop-actions button{min-height:42px!important;border-radius:14px!important;padding:10px 15px!important;font-size:15px!important;}
@media(max-width:640px){.lop-study-lop-modal{padding:8px!important}.lop-study-lop-dialog{max-height:calc(100vh - 16px)!important;border-radius:18px!important}.lop-study-lop-head{padding:12px 14px!important}.lop-study-lop-form{padding:12px 14px 14px!important;gap:9px!important}.lop-study-lop-head h2{font-size:20px!important}.lop-study-lop-head p{font-size:13px!important}.lop-study-lop-head button{width:38px!important;height:38px!important;min-width:38px!important}.lop-study-lop-field textarea{min-height:96px!important;max-height:130px!important}}
/* v2.8.399 - Quiz question tools row above question title.
   UI/CSS only: keep quiz scoring, feedback modal and Question Bank edit links unchanged. */
.lop-study-quiz-question .lop-quiz-question-sr,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-sr,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-sr{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
  background:transparent!important;
  color:transparent!important;
}
.lop-study-quiz-question .lop-quiz-question-tools-row,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-tools-row,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-tools-row{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  clear:both!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:12px 18px 6px!important;
  box-sizing:border-box!important;
  background:linear-gradient(135deg,#ffffff,#f8fbff)!important;
}
.lop-study-quiz-question .lop-quiz-question-tools-row:empty,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-tools-row:empty,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-tools-row:empty{
  display:none!important;
  padding:0!important;
}
.lop-study-quiz-question .lop-quiz-question-title-row,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-title-row,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-title-row{
  float:none!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:8px 18px 14px!important;
  box-sizing:border-box!important;
  border-bottom:1px solid rgba(226,232,240,.92)!important;
  background:linear-gradient(135deg,#ffffff,#f8fbff)!important;
  color:#07123a!important;
  font-size:clamp(18px,1.8vw,22px)!important;
  line-height:1.32!important;
  font-weight:950!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
.lop-study-quiz-question .lop-quiz-question-title-row .lop-quiz-question-no,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-title-row .lop-quiz-question-no,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-title-row .lop-quiz-question-no{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  background:#eef2ff!important;
  color:#3730a3!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
}
.lop-study-quiz-question .lop-quiz-question-title-row .lop-quiz-question-title-text,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-title-row .lop-quiz-question-title-text,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-title-row .lop-quiz-question-title-text{
  display:block!important;
  min-width:0!important;
  color:inherit!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  overflow-wrap:anywhere!important;
}
.lop-study-quiz-question .lop-quiz-question-tools-row .lop-content-feedback-btn,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-quiz-question-tools-row .lop-content-feedback-btn,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-quiz-question-tools-row .lop-content-feedback-btn,
.lop-study-quiz-question .lop-quiz-question-tools-row .lop-editor-inline-edit,
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-quiz-question-tools-row .lop-editor-inline-edit,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-quiz-question-tools-row .lop-editor-inline-edit{
  min-height:36px!important;
  margin:0!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  font-size:13px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-options,
body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-options{
  clear:both!important;
}
@media(max-width:760px){
  .lop-study-quiz-question .lop-quiz-question-tools-row,
  body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-tools-row,
  body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-tools-row{
    justify-content:flex-start!important;
    padding:10px 14px 4px!important;
  }
  .lop-study-quiz-question .lop-quiz-question-title-row,
  body.lop-support-body .lop-study-lesson-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-title-row,
  body.lop-support-body .lop-study-quiz-detail #lop-lesson-quiz .lop-study-quiz-question .lop-quiz-question-title-row{
    align-items:flex-start!important;
    padding:8px 14px 12px!important;
    font-size:17px!important;
  }
  .lop-study-quiz-question .lop-quiz-question-tools-row .lop-content-feedback-btn,
  .lop-study-quiz-question .lop-quiz-question-tools-row .lop-editor-inline-edit{
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:12.5px!important;
  }
}

/* v2.8.481 - Mobile quiz progress panel compact layout on /goc-hoc-tap/quiz/{id}/. UI-only. */
@media(max-width:760px){
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-widget.lop-quiz-progress-compact{
    padding:8px 9px 9px!important;
    border-radius:16px!important;
    margin-bottom:10px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:6px!important;
    row-gap:5px!important;
    align-items:center!important;
    min-height:0!important;
    margin-bottom:5px!important;
    padding-right:0!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-title{
    grid-column:1 / -1!important;
    grid-row:1!important;
    min-width:0!important;
    padding-right:68px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head strong{
    margin-top:0!important;
    font-size:14px!important;
    line-height:1.05!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em{
    grid-column:1 / 2!important;
    grid-row:2!important;
    justify-self:start!important;
    width:auto!important;
    max-width:100%!important;
    min-height:27px!important;
    margin:0!important;
    padding:3px 6px!important;
    gap:4px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em b{
    min-width:40px!important;
    height:21px!important;
    padding:0 6px!important;
    font-size:12.5px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em span{
    font-size:10.5px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-timer{
    grid-column:2 / 3!important;
    grid-row:2!important;
    align-self:center!important;
    justify-self:end!important;
    min-height:27px!important;
    margin:0!important;
    padding:4px 8px!important;
    font-size:11.5px!important;
    line-height:1!important;
    box-shadow:0 7px 16px rgba(15,23,42,.13)!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle{
    top:7px!important;
    right:8px!important;
    min-height:27px!important;
    padding:4px 7px!important;
    border-color:#c7d2fe!important;
    background:#fff!important;
    color:#3730a3!important;
    font-size:10.5px!important;
    line-height:1!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-bar{
    height:6px!important;
    margin:0 0 5px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons{
    gap:5px!important;
    padding:0 1px 1px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons span{
    min-width:30px!important;
    width:30px!important;
    height:28px!important;
    border-radius:11px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-icons i{
    width:21px!important;
    height:21px!important;
    border-radius:8px!important;
    font-size:10.5px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact.is-collapsed{
    padding:8px 9px!important;
  }
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact.is-collapsed .lop-quiz-progress-head{
    min-height:0!important;
    margin-bottom:5px!important;
  }
}
@media(max-width:520px){
  body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-head em span{
    display:none!important;
  }
}
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle:hover{
  border-color:#a5b4fc!important;
  background:#eef2ff!important;
  color:#312e81!important;
  box-shadow:0 10px 22px rgba(79,70,229,.15)!important;
}
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle:focus-visible{
  outline:3px solid rgba(37,99,235,.28)!important;
  outline-offset:2px!important;
}
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle:active{
  transform:translateY(0)!important;
  box-shadow:0 5px 12px rgba(79,70,229,.12)!important;
}
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle:disabled,
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle[aria-disabled="true"],
body.lop-support-body .lop-study-quiz-detail .lop-study-quiz-runner .lop-quiz-progress-compact .lop-quiz-progress-toggle.is-loading{
  opacity:.62!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
  border-color:#cbd5e1!important;
  background:#e2e8f0!important;
  color:#64748b!important;
  box-shadow:none!important;
}


/* v2.8.544: Clean Lesson/Quiz Báo LOP popup with one guidance message at the top. */
.lop-study-lop-clean-form{gap:11px!important;background:linear-gradient(180deg,#fff,#f8fbff)!important;}
.lop-study-lop-top-message{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:start;padding:13px 14px;border:1px solid #a7f3d0;border-radius:17px;background:linear-gradient(135deg,#ecfdf5,#eff6ff);color:#064e3b;box-shadow:0 10px 24px rgba(16,185,129,.08);}
.lop-study-lop-top-message>span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#22c55e,#2563eb);color:#fff;font-size:21px;box-shadow:0 10px 20px rgba(37,99,235,.18);}
.lop-study-lop-top-message>div{min-width:0;}
.lop-study-lop-top-message strong{display:block;color:#064e3b;font-size:15px;font-weight:1000;line-height:1.25;}
.lop-study-lop-top-message p{margin:4px 0 8px!important;color:#365f57!important;font-size:12.5px!important;line-height:1.4!important;font-weight:750;}
.lop-study-lop-top-message>div>div{display:flex;gap:6px;flex-wrap:wrap;}
.lop-study-lop-top-message b{display:inline-flex;align-items:center;min-height:26px;padding:4px 8px;border:1px solid rgba(37,99,235,.13);border-radius:999px;background:rgba(255,255,255,.88);color:#1e3a8a;font-size:10.5px;font-weight:900;line-height:1.2;}
.lop-study-lop-clean-form .lop-study-lop-field{padding:11px 12px;border:1px solid #e2e8f0;border-radius:15px;background:#fff;gap:6px!important;transition:border-color .16s ease,box-shadow .16s ease;}
.lop-study-lop-clean-form .lop-study-lop-field:focus-within{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(59,130,246,.10);}
.lop-study-lop-clean-form .lop-study-lop-field>label,
.lop-study-lop-label-row>label{margin:0!important;color:#172554!important;font-size:13px!important;font-weight:950!important;line-height:1.3!important;}
.lop-study-lop-clean-form .lop-study-lop-field small,
.lop-study-lop-clean-form .lop-study-lop-upload-disabled{display:none!important;}
.lop-study-lop-clean-form input[type="text"],
.lop-study-lop-clean-form select,
.lop-study-lop-clean-form textarea{width:100%!important;box-sizing:border-box!important;border:1px solid #cbd5e1!important;border-radius:13px!important;background:#fff!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important;font-size:15px!important;line-height:1.4!important;box-shadow:none!important;}
.lop-study-lop-clean-form input[type="text"],
.lop-study-lop-clean-form select{min-height:45px!important;padding:10px 12px!important;}
.lop-study-lop-clean-form textarea{min-height:120px!important;max-height:220px!important;padding:11px 12px!important;resize:vertical!important;}
.lop-study-lop-clean-form input:hover,
.lop-study-lop-clean-form select:hover,
.lop-study-lop-clean-form textarea:hover{border-color:#94a3b8!important;}
.lop-study-lop-clean-form input:focus,
.lop-study-lop-clean-form select:focus,
.lop-study-lop-clean-form textarea:focus{outline:0!important;border-color:#2563eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.13)!important;}
.lop-study-lop-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.lop-study-lop-word-chip{display:inline-flex!important;width:auto!important;flex:0 0 auto!important;align-items:center!important;gap:4px!important;margin:0!important;padding:4px 8px!important;border:1px solid #fecaca!important;border-radius:999px!important;background:#fff7ed!important;color:#9a3412!important;font-size:11px!important;line-height:1!important;box-shadow:none!important;}
.lop-study-lop-word-chip span{display:inline!important;min-width:0!important;width:auto!important;height:auto!important;padding:0!important;background:transparent!important;color:inherit!important;font-size:12px!important;font-weight:1000!important;}
.lop-study-lop-word-chip strong{color:inherit!important;font-size:11px!important;white-space:nowrap;}
.lop-study-lop-word-chip.is-ok{border-color:#bbf7d0!important;background:#ecfdf5!important;color:#047857!important;}
.lop-study-lop-status-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.lop-study-lop-file-field input[type="file"]{width:100%;box-sizing:border-box;padding:9px 10px;border:1px dashed #93c5fd;border-radius:13px;background:#f8fbff;color:#334155;font-size:13px;}
.lop-study-lop-clean-form .lop-study-lop-actions{margin-top:1px!important;padding-top:0!important;}
.lop-study-lop-clean-form .lop-study-lop-actions .primary:disabled{background:#e2e8f0!important;color:#64748b!important;-webkit-text-fill-color:#64748b!important;box-shadow:none!important;opacity:1!important;cursor:not-allowed!important;}
@media(max-width:640px){
  .lop-study-lop-top-message{grid-template-columns:38px minmax(0,1fr);padding:11px;border-radius:15px;gap:9px;}
  .lop-study-lop-top-message>span{width:38px;height:38px;border-radius:12px;font-size:18px;}
  .lop-study-lop-top-message strong{font-size:14px;}
  .lop-study-lop-top-message p{font-size:11.5px!important;margin-bottom:6px!important;}
  .lop-study-lop-top-message b{font-size:10px;padding:4px 7px;}
  .lop-study-lop-clean-form .lop-study-lop-field{padding:10px;border-radius:14px;}
  .lop-study-lop-label-row{align-items:flex-start;}
  .lop-study-lop-clean-form textarea{min-height:108px!important;}
}
@media(prefers-reduced-motion:reduce){.lop-study-lop-clean-form input,.lop-study-lop-clean-form select,.lop-study-lop-clean-form textarea,.lop-study-lop-clean-form button,.lop-study-lop-clean-form .lop-study-lop-field{transition:none!important;}}

/* v2.8.548: flatten Lesson/Quiz Báo LOP popup surfaces and maximize usable form width. */
.lop-study-lop-modal{
  padding:12px!important;
}
.lop-study-lop-dialog{
  width:min(920px,100%)!important;
  max-height:calc(100dvh - 24px)!important;
  border-radius:22px!important;
  background:#fff!important;
}
.lop-study-lop-head{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  padding:11px 13px!important;
  background:rgba(255,255,255,.985)!important;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 18px rgba(15,23,42,.05)!important;
}
.lop-study-lop-head p{display:none!important;}
.lop-study-lop-form{
  gap:9px!important;
  padding:10px 12px 12px!important;
  background:transparent!important;
}
.lop-study-lop-clean-form{
  background:transparent!important;
}
.lop-study-lop-top-message{
  grid-template-columns:38px minmax(0,1fr);
  gap:9px;
  padding:10px 11px;
  border-radius:14px;
  box-shadow:none;
}
.lop-study-lop-top-message>span{
  width:38px;
  height:38px;
  border-radius:12px;
  font-size:18px;
}
.lop-study-lop-top-message p{margin:3px 0 6px!important;}
.lop-study-lop-clean-form .lop-study-lop-field{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.lop-study-lop-clean-form .lop-study-lop-field:focus-within{
  border:0!important;
  box-shadow:none!important;
}
.lop-study-lop-clean-form input[type="text"],
.lop-study-lop-clean-form select{
  min-height:43px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
}
.lop-study-lop-clean-form textarea{
  min-height:106px!important;
  max-height:190px!important;
  padding:9px 10px!important;
  border-radius:12px!important;
}
.lop-study-lop-actions{
  position:sticky;
  bottom:0;
  z-index:7;
  margin:0 -12px -12px!important;
  padding:8px 12px!important;
  border-top:1px solid #e2e8f0;
  background:rgba(255,255,255,.985);
  backdrop-filter:blur(10px);
}
@media(max-width:640px){
  .lop-study-lop-modal{padding:4px!important;}
  .lop-study-lop-dialog{
    max-height:calc(100dvh - 8px)!important;
    border-radius:16px!important;
  }
  .lop-study-lop-head{padding:8px 9px!important;}
  .lop-study-lop-head span{display:none!important;}
  .lop-study-lop-head h2{margin:0!important;font-size:18px!important;}
  .lop-study-lop-form{gap:8px!important;padding:8px!important;}
  .lop-study-lop-top-message{
    grid-template-columns:34px minmax(0,1fr);
    gap:7px;
    padding:8px 9px;
  }
  .lop-study-lop-top-message>span{width:34px;height:34px;font-size:16px;}
  .lop-study-lop-top-message strong{font-size:13px;}
  .lop-study-lop-top-message p{font-size:11px!important;}
  .lop-study-lop-top-message b{padding:3px 6px;font-size:9.5px;}
  .lop-study-lop-clean-form textarea{min-height:100px!important;max-height:170px!important;}
  .lop-study-lop-actions{
    margin:0 -8px -8px!important;
    padding:8px!important;
  }
}