<style> /* ======================================================================== COMPOUND CSS — Force override Webflow strips Paste vào Page Settings → Inside <head> tag ======================================================================== */ /* === FORCE: Modal mặc định ẩn (Webflow strip display:none, ta force lại) === */ .el-short-modal { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9999 !important; background: rgba(0, 0, 0, .92) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 0 !important; opacity: 0; transition: opacity .25s ease; pointer-events: none; } .el-short-modal.el-open { display: flex !important; opacity: 1 !important; pointer-events: auto !important; } /* === FULL-SCREEN STAGE giống TikTok === */ .el-short-stage { position: relative !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateY(20px) scale(.96); transition: transform .35s cubic-bezier(.2, .9, .3, 1.1); } .el-short-modal.el-open .el-short-stage { transform: translateY(0) scale(1) !important; } /* Player video — tỉ lệ 9:16 dọc, full chiều cao, căn giữa */ .el-short-player { position: relative !important; height: 92vh !important; width: auto !important; aspect-ratio: 9 / 16 !important; max-width: 90vw !important; border-radius: 14px !important; overflow: hidden !important; flex: 0 0 auto !important; } /* Close button — đưa lên góc trên phải, to và rõ */ .el-short-modal-close { position: fixed !important; top: 20px !important; right: 20px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important; border: none !important; cursor: pointer !important; z-index: 10000 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; } .el-short-modal-close:hover { background: rgba(255, 255, 255, .22) !important; } /* Action buttons (like, share) — bám vào bên phải video */ .el-short-actions { position: absolute !important; right: -72px !important; bottom: 80px !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } /* Info text (title, cat, views) — bám sát đáy video, full ngang */ .el-short-info { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 80px 18px 22px 18px !important; background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 60%, transparent 100%) !important; z-index: 5 !important; color: #fff !important; pointer-events: none !important; } /* Meta info trong .el-short-info — giãn cách rộng, ẩn dot */ .el-short-info .el-meta { display: flex !important; gap: 18px !important; flex-wrap: wrap !important; align-items: center !important; } .el-short-info .el-dot { display: none !important; } .el-short-progress span.el-done { background: rgba(244, 234, 215, .55) !important; } .el-short-progress span.el-current { background: rgba(244, 234, 215, .25) !important; position: relative !important; overflow: hidden !important; } .el-short-progress span.el-current::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #f4ead7; animation: el-progress-fill var(--dur, 60s) linear forwards; } @keyframes el-progress-fill { to { width: 100%; } } .el-short-player.el-paused .el-short-pp { opacity: 1 !important; } .el-short-act.el-liked .el-ico-wrap { color: #d44a3c !important; } .el-short-player.el-bg-1 { background: linear-gradient(160deg, #962e25, #4a1610) !important; } .el-short-player.el-bg-2 { background: linear-gradient(160deg, #2a1e18, #16100c) !important; } .el-short-player.el-bg-3 { background: linear-gradient(160deg, #6b3520, #3a1c10) !important; } .el-short-player.el-bg-4 { background: linear-gradient(160deg, #2e1f17, #18110b) !important; } .el-short-player.el-bg-5 { background: linear-gradient(160deg, #962e25, #421510) !important; } .el-short-player.el-bg-6 { background: linear-gradient(160deg, #20140e, #100905) !important; } .el-short-player.el-bg-7 { background: linear-gradient(160deg, #5a2218, #2a0e08) !important; } .el-short-player.el-slide-up-out { animation: el-slide-up-out .2s ease-in forwards; } .el-short-player.el-slide-up-in { animation: el-slide-up-in .36s ease-out; } .el-short-player.el-slide-down-out { animation: el-slide-down-out .2s ease-in forwards; } .el-short-player.el-slide-down-in { animation: el-slide-down-in .36s ease-out; } @keyframes el-slide-up-out { to { transform: translateY(-30px); opacity: 0; } } @keyframes el-slide-up-in { from { transform: translateY(30px); opacity: 0; } } @keyframes el-slide-down-out { to { transform: translateY(30px); opacity: 0; } } @keyframes el-slide-down-in { from { transform: translateY(-30px); opacity: 0; } } .el-week-dot.el-done .el-box { background: #b3392e !important; border-color: #b3392e !important; color: #f4ead7 !important; } /* === Mid image (Tiêu điểm) === */ [class*="el-mid-image"] { aspect-ratio: auto !important; height: 400px !important; max-height: 400px !important; overflow: hidden !important; position: relative !important; } [class*="el-mid-image"] img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; } /* === Practice section — ảnh teacher full height === */ .el-practice-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; align-items: stretch !important; } .el-teacher-card { display: flex !important; flex-direction: column !important; height: 100% !important; } .el-teacher-portrait { flex: 1 1 auto !important; height: 100% !important; width: 100% !important; overflow: hidden !important; position: relative !important; } .el-teacher-portrait img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .el-short-card { position: relative !important; cursor: pointer !important; } body.el-modal-open { overflow: hidden !important; } /* === el-app: đủ chiều cao + align-items start để sticky hoạt động === */ [class*="el-app"] { min-height: 100vh !important; align-items: start !important; } /* === FIX: Sidebar + Queue sticky 2 bên === */ /* === SIDEBAR: sticky neo trong .app, scroll riêng, padding đáy không che PREMIUM === */ [class*="el-sidebar"] { position: sticky !important; top: 0 !important; align-self: start !important; height: 100vh !important; max-height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; background: #1a1410 !important; z-index: 10 !important; padding-bottom: 100px !important; /* Đảm bảo flex column và children không bị nén */ display: flex !important; flex-direction: column !important; } /* CHILDREN của sidebar không co — giữ nguyên kích thước */ [class*="el-sidebar"]>* { flex-shrink: 0 !important; } [class*="el-sidebar"]::-webkit-scrollbar { width: 6px !important; } [class*="el-sidebar"]::-webkit-scrollbar-track { background: transparent !important; } [class*="el-sidebar"]::-webkit-scrollbar-thumb { background: rgba(244, 234, 215, .18) !important; border-radius: 100px !important; } [class*="el-sidebar"]::-webkit-scrollbar-thumb:hover { background: rgba(244, 234, 215, .4) !important; } [class*="el-sidebar"] { scrollbar-width: thin !important; scrollbar-color: rgba(244, 234, 215, .18) transparent !important; } /* === FIX QUAN TRỌNG: el-premium-card không bị clip nội dung === */ [class*="el-premium-card"] { overflow: visible !important; /* GỠ overflow: hidden từ JSON gốc — không clip nội dung */ flex-shrink: 0 !important; /* Không co khi sidebar thiếu chỗ */ height: auto !important; /* Để tự co giãn theo nội dung */ min-height: auto !important; } /* Đảm bảo mọi child của premium card hiển thị bình thường */ [class*="el-premium-card"] * { visibility: visible !important; } [class*="el-queue"] { position: sticky !important; top: 0 !important; align-self: start !important; height: 100vh !important; max-height: 100vh !important; overflow-y: auto !important; } body { background: #f4ead7 !important; } /* === Modern minimal scrollbar === */ ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { background: rgba(26, 20, 16, .2) !important; border-radius: 100px !important; } ::-webkit-scrollbar-thumb:hover { background: rgba(26, 20, 16, .4) !important; } ::-webkit-scrollbar-corner { background: transparent !important; } * { scrollbar-width: thin !important; scrollbar-color: rgba(26, 20, 16, .2) transparent !important; } /* === SIDEBAR DROPDOWN === */ [class*="el-nav-section-cat"] { display: flex !important; align-items: center !important; gap: 10px !important; position: relative !important; user-select: none !important; } [class*="el-nav-section-cat"] .el-caret { margin-left: auto !important; font-size: 12px !important; opacity: 0.5 !important; transition: transform .25s ease !important; } [class*="el-nav-section-cat"]:hover .el-caret { opacity: 0.9 !important; } /* === DROPDOWN: max-height đủ chỗ cho 30+ items === */ [class*="el-nav-sub"] { overflow: hidden !important; max-height: 2000px !important; opacity: 1 !important; transition: max-height .4s ease, opacity .2s ease, margin .25s, padding .25s !important; } [class*="el-nav-section"].el-collapsed [class*="el-nav-sub"] { max-height: 0 !important; opacity: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; pointer-events: none !important; } [class*="el-nav-section"].el-collapsed [class*="el-nav-section-cat"] .el-caret { transform: rotate(-90deg) !important; } /* === FIX: Ẩn SVG placeholder boxes (ô vuông đỏ đứt nét) === */ .el-svg-placeholder { display: none !important; } /* === FIX: Play buttons — inject ▶ qua CSS pseudo-element (không phụ thuộc JS) === */ .el-pl-play, .el-audio-play, .el-course-play, .el-play-btn { cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } /* Khi đang play → ⏸ (JS thêm class .el-playing vào row hoặc nút) */ .el-pl-play.el-playing::before, .el-audio-row.el-playing .el-audio-play::before, .el-course-row.el-playing .el-course-play::before { content: "" !important; } /* Player bar nút play (to nhất) */ .el-pl-play { width: 44px !important; height: 44px !important; } /* Audio + course row play button (nhỏ hơn) */ .el-audio-play, .el-course-play { width: 34px !important; height: 34px !important; } /* Hero "PHÁT NGAY" — vòng tròn ĐỎ NHỎ với ▶ TRẮNG (đồng bộ nút audio/course) */ .el-play-btn { font-size: 14px !important; color: #fff !important; } /* Hero CTA wrapper (cả vòng tròn + chữ PHÁT NGAY) */ .el-hero-cta { cursor: pointer !important; } /* === AUDIO PLAYER BAR — FORCE out of grid + slide up === */ .el-player, [class*="el-player"]:not([class*="el-pl-"]) { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 100 !important; /* Reset grid placement nếu có */ grid-area: unset !important; grid-column: unset !important; grid-row: unset !important; /* Mặc định: ẩn dưới đáy */ transform: translateY(100%) !important; transition: transform .35s cubic-bezier(.2, .9, .3, 1.1) !important; pointer-events: none; opacity: 0; visibility: hidden; } .el-player.el-pl-visible, [class*="el-player"].el-pl-visible { transform: translateY(0) !important; pointer-events: auto !important; opacity: 1 !important; visibility: visible !important; } /* === FIX: Player bar layout 3 cột === */ .el-player { display: grid !important; grid-template-columns: 1fr 2fr 1fr !important; align-items: center !important; gap: 16px !important; padding: 12px 24px !important; background: #1a1410 !important; color: #f4ead7 !important; min-height: 76px !important; } .el-pl-now { display: flex !important; align-items: center !important; gap: 14px !important; min-width: 0 !important; } .el-pl-info { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; } .el-pl-info .el-t { font-family: Georgia, serif !important; font-style: italic !important; font-size: 14px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .el-pl-info .el-by { font-size: 12px !important; color: rgba(244, 234, 215, .6) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-top: 2px !important; } .el-pl-center { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } .el-pl-controls { display: flex !important; align-items: center !important; gap: 12px !important; } .el-pl-progress { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; font-size: 11px !important; color: rgba(244, 234, 215, .6) !important; font-family: ui-monospace, monospace !important; } .el-pl-bar { flex: 1 !important; height: 3px !important; background: rgba(244, 234, 215, .15) !important; border-radius: 2px !important; } .el-pl-right { display: flex !important; align-items: center !important; gap: 8px !important; justify-content: flex-end !important; } .el-pl-thumb { width: 48px !important; height: 48px !important; background: linear-gradient(135deg, #962e25, #4a1610) !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 22px !important; } /* Audio rows + course rows: cursor pointer + hover effect */ .el-audio-row, .el-course-row { cursor: pointer !important; transition: background-color .15s; } .el-audio-row:hover, .el-course-row:hover { background-color: rgba(179, 57, 46, 0.04) !important; } /* === FORCE: Tất cả nút play → tròn đỏ chữ trắng, ▶ căn giữa hoàn hảo === */ .el-icon-play { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-style: normal !important; line-height: 1 !important; /* Đẩy ▶ về giữa thị giác (glyph có whitespace bên phải) */ text-indent: 0.15em !important; letter-spacing: -0.15em !important; } /* Audio play + Course play buttons: tròn đỏ trắng */ .el-audio-play, .el-course-play { background: #b3392e !important; color: #fff !important; border: none !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; flex-shrink: 0 !important; transition: transform 0.15s, background 0.15s !important; } .el-audio-play:hover, .el-course-play:hover { background: #8a2a22 !important; transform: scale(1.05); } /* ▶ icon trong các nút này */ .el-audio-play .el-icon-play, .el-course-play .el-icon-play { color: #fff !important; font-size: 16px !important; } /* Player bar play button (to nhất) */ .el-pl-play { background: #b3392e !important; color: #fff !important; border: none !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } .el-pl-play .el-icon-play { color: #fff !important; font-size: 20px !important; } .el-pl-play:hover { background: #8a2a22 !important; } /* Hero "PHÁT NGAY" — vòng tròn ĐỎ 55px với ▶ TRẮNG */ .el-play-btn { background: #b3392e !important; color: #fff !important; border: none !important; width: 55px !important; height: 55px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: transform 0.15s, background 0.15s !important; flex-shrink: 0 !important; } .el-play-btn:hover { background: #8a2a22 !important; transform: scale(1.05); } .el-play-btn .el-icon-play { color: #fff !important; font-size: 25px !important; } /* Khi đang play: thay đổi visual qua class .el-playing */ .el-audio-row.el-playing .el-audio-play, .el-course-row.el-playing .el-course-play, .el-pl-play.el-playing { background: #1a1410 !important; } .el-audio-row.el-playing .el-audio-play .el-icon-play::before, .el-course-row.el-playing .el-course-play .el-icon-play::before, .el-pl-play.el-playing .el-icon-play::before { content: "⏸" !important; } .el-audio-row.el-playing .el-audio-play .el-icon-play, .el-course-row.el-playing .el-course-play .el-icon-play, .el-pl-play.el-playing .el-icon-play { text-indent: 0 !important; letter-spacing: 0 !important; font-size: 0 !important; } .el-audio-row.el-playing .el-audio-play .el-icon-play::before, .el-course-row.el-playing .el-course-play .el-icon-play::before, .el-pl-play.el-playing .el-icon-play::before { font-size: 18px !important; } /* === HOT ARTICLES PANEL (replace Queue) === */ /* Featured hot article (top — có hình) */ .el-hot-feature { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 24px !important; cursor: pointer !important; } .el-hot-thumb { width: 100% !important; aspect-ratio: 16 / 10 !important; background: linear-gradient(160deg, #5a2218, #2a0e08) !important; background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(244, 234, 215, .04) 14px 15px), linear-gradient(160deg, #5a2218, #2a0e08) !important; border-radius: 10px !important; position: relative !important; } .el-hot-feature-info { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 0 4px !important; } .el-hot-cat { font-family: ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: 2.4px !important; color: #b3392e !important; font-weight: 600 !important; text-transform: uppercase !important; } .el-hot-title { font-family: Georgia, serif !important; font-size: 16px !important; font-style: italic !important; font-weight: 500 !important; line-height: 1.35 !important; color: #1a1410 !important; margin: 0 !important; } .el-hot-meta { font-family: ui-monospace, monospace !important; font-size: 11px !important; color: rgba(26, 20, 16, .55) !important; letter-spacing: .3px !important; } /* Row of hot article (numbered) */ .el-hot-row { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(26, 20, 16, .08) !important; cursor: pointer !important; transition: background-color .15s !important; } .el-hot-row:hover { background-color: rgba(179, 57, 46, .04) !important; } .el-hot-row:last-child { border-bottom: none !important; } .el-hot-row .el-num { font-family: ui-monospace, monospace !important; font-size: 14px !important; color: rgba(26, 20, 16, .4) !important; font-weight: 500 !important; min-width: 24px !important; flex-shrink: 0 !important; } .el-hot-info { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .el-hot-row-title { font-family: Georgia, serif !important; font-size: 14px !important; font-style: italic !important; line-height: 1.4 !important; color: #1a1410 !important; } .el-hot-row-cat { font-family: ui-monospace, monospace !important; font-size: 9px !important; letter-spacing: 2px !important; color: rgba(179, 57, 46, .85) !important; font-weight: 600 !important; text-transform: uppercase !important; } /* === FIX: Teacher card stats — match cả khi Webflow rename thành el-num-2, el-lab-2 === */ [class*="el-teacher-stats"] { display: flex !important; gap: 32px !important; flex-wrap: wrap !important; align-items: flex-start !important; } [class*="el-teacher-stats"] [class*="el-stat"] { flex: 1 1 auto !important; min-width: 80px !important; text-align: center !important; } [class*="el-teacher-stats"] [class*="el-num"] { font-family: Georgia, "Times New Roman", serif !important; font-size: 38px !important; font-style: italic !important; font-weight: 500 !important; color: #b3392e !important; margin-bottom: 8px !important; line-height: 1 !important; display: block !important; text-align: center !important; } [class*="el-teacher-stats"] [class*="el-num"] em { font-style: italic !important; font-weight: 500 !important; } [class*="el-teacher-stats"] [class*="el-lab"] { font-family: ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: 1.6px !important; color: rgba(26, 20, 16, .5) !important; text-transform: uppercase !important; line-height: 1.5 !important; font-weight: 600 !important; display: block !important; text-align: center !important; word-spacing: 4px !important; white-space: nowrap !important; } /* Stats trong practice card (TUẦN NÀY, CHUỖI DÀI NHẤT...) */ [class*="el-stats-row"] { display: flex !important; gap: 28px !important; flex-wrap: wrap !important; align-items: flex-start !important; } [class*="el-stats-row"] [class*="el-stat"] { flex: 1 1 auto !important; min-width: 80px !important; text-align: center !important; } [class*="el-stats-row"] [class*="el-num"] { font-family: Georgia, "Times New Roman", serif !important; font-size: 32px !important; font-style: italic !important; font-weight: 500 !important; color: #b3392e !important; margin-bottom: 6px !important; line-height: 1 !important; display: block !important; text-align: center !important; } [class*="el-stats-row"] [class*="el-lab"] { font-family: ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: 1.5px !important; color: rgba(26, 20, 16, .5) !important; text-transform: uppercase !important; line-height: 1.5 !important; font-weight: 600 !important; display: block !important; text-align: center !important; word-spacing: 4px !important; white-space: nowrap !important; } /* Teacher cap (NGƯỜI DẪN DẮT THÁNG NÀY) */ .el-teacher-cap { font-family: ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 2px !important; color: rgba(26, 20, 16, .5) !important; text-transform: uppercase !important; font-weight: 600 !important; margin-bottom: 12px !important; word-spacing: 4px !important; } /* === FIX: Course thumb (KHÓA + số) — chỉ stack dọc, giữ style === */ [class*="el-course-thumb"] { width: 64px !important; height: 64px !important; background: linear-gradient(135deg, #962e25, #4a1610) !important; color: #f4ead7 !important; border-radius: 8px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; flex-shrink: 0 !important; padding: 6px 4px !important; line-height: 1 !important; gap: 4px !important; } [class*="el-course-thumb"] [class*="el-c-cap"] { font-size: 9px !important; letter-spacing: 1.5px !important; font-weight: 600 !important; text-transform: uppercase !important; display: block !important; opacity: 0.7 !important; font-family: ui-monospace, monospace !important; color: #f4ead7 !important; margin: 0 !important; } [class*="el-course-thumb"] [class*="el-c-num"] { font-size: 22px !important; font-weight: 600 !important; display: block !important; line-height: 1 !important; font-family: Georgia, serif !important; font-style: italic !important; color: #f4ead7 !important; margin: 0 !important; } /* Course row layout */ .el-course-row { display: flex !important; align-items: center !important; gap: 16px !important; padding: 14px 16px !important; } .el-course-num { font-family: ui-monospace, monospace !important; font-size: 12px !important; color: rgba(26, 20, 16, .4) !important; min-width: 24px !important; flex-shrink: 0 !important; } .el-course-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } /* Title — Georgia italic */ [class*="el-course-info"] [class*="el-title"] { font-family: Georgia, serif !important; font-style: italic !important; font-size: 16px !important; font-weight: 500 !important; color: #1a1410 !important; line-height: 1.3 !important; } /* Meta — monospace mảnh */ [class*="el-course-info"] [class*="el-meta"] { display: flex !important; align-items: center !important; gap: 10px !important; font-family: ui-monospace, "SF Mono", monospace !important; font-size: 11px !important; letter-spacing: 0.5px !important; color: rgba(26, 20, 16, .55) !important; } /* Cat — đỏ đậm */ [class*="el-course-info"] [class*="el-meta"] [class*="el-cat"] { color: #b3392e !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; } .el-course-dur { font-family: ui-monospace, monospace !important; font-size: 13px !important; color: rgba(26, 20, 16, .7) !important; flex-shrink: 0 !important; } </style>