/* ========================================================================== TEXVN "PRO" SKIN Cong ty co phan cong nghe TEX Viet Nam - Phan mem & giai phap giao duc Prefix: tex- ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { /* Brand colours */ --tex-navy: #1b2a4e; --tex-navy-dark: #131e38; --tex-navy-light: #2b3f69; --tex-brand: #4c3fd6; --tex-brand-dark: #3a2fb0; --tex-brand-soft: #eceaff; --tex-accent: #e03a3a; --tex-accent-dark: #b82c2c; --tex-accent-soft: #fdecec; /* Neutrals */ --tex-ink: #16202f; --tex-body: #3d4c60; --tex-muted: #7c8a9e; --tex-line: #e3e8ef; --tex-line-soft: #eef1f6; --tex-bg: #ffffff; --tex-bg-alt: #f5f7fa; --tex-bg-soft: #fafbfd; /* Typography */ /* Dung MOT font cho ca tieu de lan noi dung. Truoc day tieu de dung 'Manrope' - font nay KHONG co bo ky tu tieng Viet, nen cac chu co dau (E, E, o, a...) bi lay tu font du phong khac. Hau qua la chu cao thap so le, net day mong khong deu - nhin rat xau. 'Be Vietnam Pro' duoc thiet ke rieng cho tieng Viet, du ca 8 do dam. */ --tex-font-heading: 'Be Vietnam Pro', -apple-system, 'Segoe UI', Roboto, sans-serif; --tex-font-body: 'Be Vietnam Pro', -apple-system, 'Segoe UI', Roboto, sans-serif; /* Radii */ --tex-radius-sm: 6px; --tex-radius: 10px; --tex-radius-lg: 16px; --tex-radius-pill: 999px; /* Shadows */ --tex-shadow-xs: 0 1px 2px rgba(22, 32, 47, .06); --tex-shadow-sm: 0 2px 8px rgba(22, 32, 47, .07); --tex-shadow: 0 6px 20px rgba(22, 32, 47, .09); --tex-shadow-lg: 0 16px 40px rgba(22, 32, 47, .14); /* Motion */ --tex-transition: .25s cubic-bezier(.4, 0, .2, 1); --tex-transition-slow: .4s cubic-bezier(.4, 0, .2, 1); /* Layout */ --tex-header-h: 72px; --tex-topbar-h: 38px; } /* -------------------------------------------------------------------------- 2. RESET / SCOPE OVERRIDES (beat Bootstrap + Tailwind) -------------------------------------------------------------------------- */ body.tex-theme { font-family: var(--tex-font-body); font-size: 15px; line-height: 1.65; color: var(--tex-body); background: var(--tex-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* KHONG dat overflow-x: hidden o day. Dat overflow tren khien trinh duyet coi body la vung cuon, va MOI position: sticky ben trong se ngung hoat dong (muc luc bai viet, sidebar deu bi mat sticky). Chong tran ngang bang cach khac ben duoi. */ } /* Chong tran ngang o cap : khong anh huong toi sticky ben trong body. */ html { overflow-x: hidden; } /* BAT BUOC cho position: sticky. Layout co the con thuoc tinh inline style="overflow: auto" tren (ban cu bi cache phia may chu). overflow khac visible tren body bien body thanh vung cuon rieng -> MOI sticky ben trong ngung hoat dong. Dat !important o day de thang inline style, khong phu thuoc vao viec layout.html da duoc nap lai hay chua. */ body.tex-theme { overflow: visible !important; } /* Cac phan tu hay gay tran ngang (anh, bang, khoi code trong noi dung bai do admin dan vao) duoc gioi han rieng thay vi cat cut ca trang. */ body.tex-theme .tex-post-content table, body.tex-theme .tex-post-content pre { display: block; max-width: 100%; overflow-x: auto; } body.tex-theme h1, body.tex-theme h2, body.tex-theme h3, body.tex-theme h4, body.tex-theme h5, body.tex-theme h6 { font-family: var(--tex-font-heading); color: var(--tex-ink); font-weight: 700; line-height: 1.3; margin: 0 0 .6rem; } body.tex-theme a { color: inherit; text-decoration: none; transition: color var(--tex-transition); } body.tex-theme a:hover { color: var(--tex-brand); text-decoration: none; } body.tex-theme p { margin: 0 0 1rem; } body.tex-theme img { max-width: 100%; height: auto; } body.tex-theme nav ul, body.tex-theme .tex-nav ul, body.tex-theme .tex-footer ul, body.tex-theme .tex-sidebar ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } body.tex-theme *, body.tex-theme *::before, body.tex-theme *::after { box-sizing: border-box; } body.tex-theme ::selection { background: var(--tex-brand); color: #fff; } /* -------------------------------------------------------------------------- 3. LOADING OVERLAY -------------------------------------------------------------------------- */ body.tex-theme #tex-loading { position: fixed; inset: 0; background: #fff; z-index: 99999; display: flex !important; align-items: center; justify-content: center; /* Luoi an toan chi bang CSS: neu custom.js khong tai duoc (404, sai duong dan, cache hong) thi lop phu van tu bien mat, khong khoa trang vinh vien. JS van go som hon khi chay binh thuong. */ animation: tex-loading-autohide .4s ease 3s forwards; } /* Khi da an, lop phu KHONG duoc chan chuot nua. Chi dat opacity/visibility la chua du: phan tu van phu kin man hinh o z-index 99999 va nuot moi cu click (khong bam duoc tieu de bai viet). pointer-events: none bao dam chuot di xuyen qua trong moi truong hop. */ @keyframes tex-loading-autohide { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* Trang thai da an do JS dat - tach rieng khoi animation de khong phu thuoc vao viec animation co chay hay khong. */ body.tex-theme #tex-loading.tex-loading-done { opacity: 0; visibility: hidden; pointer-events: none; } body.tex-theme .tex-loader { display: flex; gap: 8px; } body.tex-theme .tex-loader-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tex-brand); animation: tex-bounce 1.4s infinite ease-in-out both; } body.tex-theme .tex-loader-dot:nth-child(1) { animation-delay: -.32s; } body.tex-theme .tex-loader-dot:nth-child(2) { animation-delay: -.16s; background: var(--tex-accent); } @keyframes tex-bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } } /* -------------------------------------------------------------------------- 4. TOP UTILITY BAR -------------------------------------------------------------------------- */ body.tex-theme .tex-topbar { background: var(--tex-navy-dark); color: rgba(255, 255, 255, .82); font-size: 13px; height: var(--tex-topbar-h); display: flex !important; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .08); } body.tex-theme .tex-topbar-inner { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; } body.tex-theme .tex-topbar-left, body.tex-theme .tex-topbar-right { display: flex !important; align-items: center; gap: 18px; } body.tex-theme .tex-topbar-item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .82); white-space: nowrap; } body.tex-theme .tex-topbar-item:hover { color: #fff; } body.tex-theme .tex-topbar-item i { color: var(--tex-accent); font-size: 13px; } body.tex-theme .tex-topbar-social { display: flex !important; align-items: center; gap: 6px; } body.tex-theme .tex-topbar-social a { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); font-size: 12px; } body.tex-theme .tex-topbar-social a:hover { background: var(--tex-accent); color: #fff; transform: translateY(-1px); } body.tex-theme .tex-topbar-lang { display: flex !important; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .15); } body.tex-theme .tex-lang-item img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; opacity: .75; transition: opacity var(--tex-transition); } body.tex-theme .tex-lang-item:hover img { opacity: 1; } body.tex-theme .tex-topbar-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--tex-accent); color: #fff; padding: 4px 14px; border-radius: var(--tex-radius-pill); font-weight: 600; font-size: 12.5px; } body.tex-theme .tex-topbar-cta:hover { background: var(--tex-accent-dark); color: #fff; } /* -------------------------------------------------------------------------- 5. HEADER + NAVIGATION -------------------------------------------------------------------------- */ body.tex-theme .tex-header { background: var(--tex-navy); position: sticky; top: 0; z-index: 1000; transition: box-shadow var(--tex-transition), background var(--tex-transition); } body.tex-theme .tex-header.scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, .22); background: rgba(27, 42, 78, .97); backdrop-filter: blur(8px); } body.tex-theme .tex-header-inner { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--tex-header-h); } /* Logo */ /* Logo duoc co lai khi thieu cho, nhung khong bao gio bi ep nho hon noi dung that (min-width: auto) tren man hinh rong. */ body.tex-theme .tex-logo { flex: 0 1 auto; min-width: 0; overflow: hidden; } body.tex-theme .tex-logo a { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } body.tex-theme .tex-logo-img { max-height: 46px; width: auto; } body.tex-theme .tex-logo-text { font-family: var(--tex-font-heading); font-weight: 700; font-size: 16px; color: #fff; /* Tieng Viet co dau hai tang ("Nghe", "Viet") can khoang dong thoang hon, neu khong dau se cham vao dong tren. Bo letter-spacing am vi no bop chu lai lam dau de dinh nhau. */ line-height: 1.35; letter-spacing: 0; /* Giu ten don vi tren MOT dong. Truoc day dat max-width: 260px co dinh nen ten dai nhu "Cong Ty CP Cong Nghe TEX Viet Nam" bi xuong 2 dong du header van con cho trong. Khong gian thuc te do flex chia (xem .tex-logo). */ white-space: nowrap; } /* Nav */ body.tex-theme .tex-nav { flex: 1 1 auto; display: flex !important; justify-content: center; /* min-width: 0 la bat buoc: mac dinh flex item co min-width: auto nen KHONG co lai duoi kich thuoc noi dung. Thieu dong nay, menu giu nguyen be rong va day logo xuong 2 dong. */ min-width: 0; } body.tex-theme .tex-nav-menu { display: flex !important; align-items: center; /* Giu menu tren MOT hang o desktop. De wrap thi menu tu xuong 2 hang lam header cao len va bo cuc lech. Man hinh hep se chuyen sang menu mobile (xem breakpoint 991.98px). */ flex-wrap: nowrap; gap: 2px; } body.tex-theme .tex-nav-item, body.tex-theme .tex-has-dropdown { position: relative; } body.tex-theme .tex-nav-link { display: flex; align-items: center; gap: 5px; padding: 10px 14px; color: rgba(255, 255, 255, .92); font-weight: 600; font-size: 14.5px; border-radius: var(--tex-radius-sm); white-space: nowrap; position: relative; } body.tex-theme .tex-nav-link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--tex-accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--tex-transition); } body.tex-theme .tex-nav-item:hover > .tex-nav-link, body.tex-theme .tex-nav-item.active > .tex-nav-link { color: #fff; background: rgba(255, 255, 255, .08); } body.tex-theme .tex-nav-item:hover > .tex-nav-link::after, body.tex-theme .tex-nav-item.active > .tex-nav-link::after { transform: scaleX(1); } body.tex-theme .tex-nav-link i { font-size: 12px; opacity: .8; } /* Dropdown */ body.tex-theme .tex-dropdown { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border-radius: var(--tex-radius); box-shadow: var(--tex-shadow-lg); padding: 8px !important; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--tex-transition); z-index: 1001; border-top: 3px solid var(--tex-accent); } body.tex-theme .tex-nav-item:hover > .tex-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } body.tex-theme .tex-dropdown li a { display: block; padding: 9px 14px; color: var(--tex-body); font-size: 14px; font-weight: 500; border-radius: var(--tex-radius-sm); } body.tex-theme .tex-dropdown li a:hover { background: var(--tex-brand-soft); color: var(--tex-brand); padding-left: 18px; } /* Megamenu */ body.tex-theme .tex-megamenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); width: min(940px, 92vw); background: #fff; border-radius: var(--tex-radius); box-shadow: var(--tex-shadow-lg); padding: 24px; opacity: 0; visibility: hidden; transition: all var(--tex-transition); z-index: 1001; border-top: 3px solid var(--tex-accent); } body.tex-theme .tex-nav-item:hover > .tex-megamenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } body.tex-theme .tex-megamenu-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--tex-navy); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--tex-line); } body.tex-theme .tex-megamenu-title a:hover { color: var(--tex-accent); } body.tex-theme .tex-megamenu-list li a { display: block; padding: 6px 0; font-size: 14px; color: var(--tex-body); } body.tex-theme .tex-megamenu-list li a:hover { color: var(--tex-brand); padding-left: 5px; } /* Header actions */ body.tex-theme .tex-header-actions { display: flex !important; align-items: center; gap: 10px; /* O tim kiem khong bi bop meo khi thieu cho */ flex: 0 0 auto; } body.tex-theme .tex-header-search { position: relative; display: flex !important; align-items: center; } body.tex-theme .tex-header-search input { width: 190px; height: 38px; padding: 0 38px 0 14px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); color: #fff; border-radius: var(--tex-radius-pill); font-size: 14px; outline: none; transition: all var(--tex-transition); } body.tex-theme .tex-header-search input::placeholder { color: rgba(255, 255, 255, .6); } body.tex-theme .tex-header-search input:focus { background: #fff; color: var(--tex-ink); border-color: #fff; width: 230px; } body.tex-theme .tex-header-search input:focus::placeholder { color: var(--tex-muted); } body.tex-theme .tex-header-search button { position: absolute; right: 4px; width: 30px; height: 30px; border: 0; background: transparent; color: rgba(255, 255, 255, .8); border-radius: 50%; cursor: pointer; } body.tex-theme .tex-header-search input:focus + button { color: var(--tex-brand); } body.tex-theme .tex-search-toggle { display: none; width: 38px; height: 38px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 50%; cursor: pointer; } /* Hamburger */ body.tex-theme .tex-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 38px; border: 0; background: rgba(255, 255, 255, .1); border-radius: var(--tex-radius-sm); cursor: pointer; padding: 0 9px; } body.tex-theme .tex-hamburger-line { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: all var(--tex-transition); } body.tex-theme .tex-hamburger.active .tex-hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.tex-theme .tex-hamburger.active .tex-hamburger-line:nth-child(2) { opacity: 0; } body.tex-theme .tex-hamburger.active .tex-hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- 6. SEARCH OVERLAY -------------------------------------------------------------------------- */ body.tex-theme .tex-search-overlay { position: fixed; inset: 0; background: rgba(19, 30, 56, .97); z-index: 10000; display: flex !important; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--tex-transition); } body.tex-theme .tex-search-overlay.active { opacity: 1; visibility: visible; } body.tex-theme .tex-search-overlay-inner { width: min(680px, 90vw); position: relative; } body.tex-theme .tex-search-form { display: flex !important; align-items: center; background: #fff; border-radius: var(--tex-radius-pill); overflow: hidden; box-shadow: var(--tex-shadow-lg); } body.tex-theme .tex-search-input { flex: 1; height: 58px; border: 0; padding: 0 26px; font-size: 17px; outline: none; color: var(--tex-ink); background: transparent; } body.tex-theme .tex-search-btn { width: 58px; height: 58px; border: 0; background: var(--tex-accent); color: #fff; font-size: 18px; cursor: pointer; transition: background var(--tex-transition); } body.tex-theme .tex-search-btn:hover { background: var(--tex-accent-dark); } body.tex-theme .tex-search-close { position: absolute; top: -58px; right: 0; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; cursor: pointer; transition: background var(--tex-transition); } body.tex-theme .tex-search-close:hover { background: var(--tex-accent); } /* Mobile nav overlay backdrop */ body.tex-theme .tex-nav-overlay { position: fixed; inset: 0; background: rgba(19, 30, 56, .55); z-index: 998; opacity: 0; visibility: hidden; transition: all var(--tex-transition); } body.tex-theme .tex-nav-overlay.active { opacity: 1; visibility: visible; } /* Khoa cuon trang nen khi mo menu mobile. KHONG dung "overflow: hidden" o day vi hai ly do: 1. Quy tac "body.tex-theme { overflow: visible !important }" ben tren (dat de position:sticky hoat dong) se de len no. 2. Tren iOS/Android, overflow:hidden tren body KHONG chan duoc cuon. Dung position:fixed - cach duy nhat chan cuon dang tin cay tren di dong. Vi tri cuon duoc custom.js luu lai va khoi phuc khi dong menu, neu khong trang se nhay ve dau moi lan dong. */ body.tex-theme.tex-nav-open { position: fixed !important; width: 100%; overflow: hidden !important; } /* Mobile close button - hidden on desktop */ body.tex-theme .tex-mobile-close { display: none; } /* -------------------------------------------------------------------------- 7. LAYOUT PRIMITIVES / SECTIONS -------------------------------------------------------------------------- */ body.tex-theme #tex-main-content { min-height: 50vh; } body.tex-theme .tex-section { padding: 48px 0; } body.tex-theme .tex-section-tight { padding: 34px 0; } body.tex-theme .tex-section-alt { background: var(--tex-bg-alt); } body.tex-theme .tex-section-dark { background: linear-gradient(135deg, var(--tex-navy) 0%, var(--tex-navy-dark) 100%); color: rgba(255, 255, 255, .88); } body.tex-theme .tex-section-dark h1, body.tex-theme .tex-section-dark h2, body.tex-theme .tex-section-dark h3, body.tex-theme .tex-section-dark h4 { color: #fff; } body.tex-theme .tex-page-content { padding: 28px 0 54px; } /* Le hai ben cho .container. Bootstrap dat padding cho .container qua bien --bs-gutter-x, nhung o day bien do bi giai ra 0 nen noi dung cham sat mep man hinh tren dien thoai (do duoc: le thuc te = 0px). Dat padding truc tiep de bao dam luon co le. */ body.tex-theme .container { padding-left: 16px; padding-right: 16px; } body.tex-theme .tex-page-title { font-size: 27px; font-weight: 800; color: var(--tex-navy); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--tex-line); } /* Block title: red bar + uppercase heading (matches reference design) */ body.tex-theme .tex-block { margin-bottom: 8px; } body.tex-theme .tex-block-header { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--tex-line); position: relative; } body.tex-theme .tex-block-header::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 90px; height: 2px; background: var(--tex-accent); } body.tex-theme .tex-block-title { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; text-transform: uppercase; /* Chu hoa tieng Viet co dau (E, A, O...) can gian chu rong hon mot chut va line-height thoang hon de dau khong cham vao duong ke tren. */ letter-spacing: .6px; line-height: 1.45; color: var(--tex-navy); margin: 0; } body.tex-theme .tex-block-title::before { content: ''; width: 5px; height: 24px; background: var(--tex-accent); border-radius: 3px; flex: 0 0 auto; } body.tex-theme .tex-section-dark .tex-block-title { color: #fff; } body.tex-theme .tex-view-all { font-size: 13.5px; font-weight: 600; color: var(--tex-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } body.tex-theme .tex-view-all:hover { color: var(--tex-accent); gap: 8px; } /* -------------------------------------------------------------------------- 8. BUTTONS -------------------------------------------------------------------------- */ body.tex-theme .tex-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border-radius: var(--tex-radius-pill); font-weight: 600; font-size: 14.5px; border: 0; cursor: pointer; transition: all var(--tex-transition); line-height: 1.4; } body.tex-theme .tex-btn-primary { background: var(--tex-brand); color: #fff; } body.tex-theme .tex-btn-primary:hover { background: var(--tex-brand-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(76, 63, 214, .3); } body.tex-theme .tex-btn-accent { background: var(--tex-accent); color: #fff; } body.tex-theme .tex-btn-accent:hover { background: var(--tex-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(224, 58, 58, .32); } body.tex-theme .tex-btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); } body.tex-theme .tex-btn-outline:hover { background: #fff; color: var(--tex-navy); border-color: #fff; } body.tex-theme .tex-btn-ghost { background: var(--tex-brand-soft); color: var(--tex-brand); } body.tex-theme .tex-btn-ghost:hover { background: var(--tex-brand); color: #fff; } /* -------------------------------------------------------------------------- 9. HERO -------------------------------------------------------------------------- */ body.tex-theme .tex-hero { position: relative; } body.tex-theme .tex-hero-swiper { width: 100%; } body.tex-theme .tex-hero-slide { position: relative; /* Cao hon de can bang voi khoi tin ben phai (4 muc ~ 510px). Dung min-height thay vi height co dinh de tieu de dai 3 dong van vua. */ min-height: 510px; background-size: cover; background-position: center; display: flex !important; align-items: flex-end; border-radius: var(--tex-radius-lg); overflow: hidden; } /* Lop phu toi dan tu duoi len. Phan duoi (noi dat tieu de) phai du dam de chu tren ANH NEN khong xuyen qua - anh banner cua san pham thuong da co san chu, de bi lan voi tieu de. */ body.tex-theme .tex-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(19, 30, 56, .96) 0%, rgba(19, 30, 56, .88) 30%, rgba(19, 30, 56, .55) 60%, rgba(19, 30, 56, .15) 100%); } body.tex-theme .tex-hero-content { position: relative; z-index: 2; padding: 32px; max-width: 760px; } body.tex-theme .tex-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--tex-accent); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 5px 14px; border-radius: var(--tex-radius-pill); margin-bottom: 14px; } body.tex-theme .tex-hero-title { font-size: 33px; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 12px; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); } body.tex-theme .tex-hero-title a { color: #fff; } body.tex-theme .tex-hero-title a:hover { color: #ffd9d9; } body.tex-theme .tex-hero-desc { font-size: 15.5px; color: rgba(255, 255, 255, .9); margin-bottom: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.tex-theme .tex-hero-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: rgba(255, 255, 255, .78); margin-bottom: 16px; } /* Hero fallback before Swiper boots */ body.tex-theme .tex-hero-swiper:not(.swiper-initialized) .swiper-wrapper { display: block; } body.tex-theme .tex-hero-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; } /* Swiper controls */ body.tex-theme .tex-hero-swiper .swiper-button-next, body.tex-theme .tex-hero-swiper .swiper-button-prev { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); color: #fff; transition: background var(--tex-transition); } body.tex-theme .tex-hero-swiper .swiper-button-next:hover, body.tex-theme .tex-hero-swiper .swiper-button-prev:hover { background: var(--tex-accent); } body.tex-theme .tex-hero-swiper .swiper-button-next::after, body.tex-theme .tex-hero-swiper .swiper-button-prev::after { font-size: 16px; font-weight: 700; } body.tex-theme .swiper-pagination-bullet { background: #fff; opacity: .5; width: 9px; height: 9px; } body.tex-theme .swiper-pagination-bullet-active { background: var(--tex-accent); opacity: 1; width: 24px; border-radius: 5px; } /* -------------------------------------------------------------------------- 10. CARDS -------------------------------------------------------------------------- */ body.tex-theme .tex-card { background: #fff; border-radius: var(--tex-radius); overflow: hidden; transition: transform var(--tex-transition), box-shadow var(--tex-transition); height: 100%; display: flex !important; flex-direction: column; } body.tex-theme .tex-card:hover { transform: translateY(-4px); box-shadow: var(--tex-shadow); } body.tex-theme .tex-card-img { position: relative; overflow: hidden; background: var(--tex-bg-alt); aspect-ratio: 16 / 10; } body.tex-theme .tex-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tex-transition-slow); display: block; } body.tex-theme .tex-card:hover .tex-card-img img { transform: scale(1.06); } body.tex-theme .tex-card-category { position: absolute; top: 12px; left: 12px; background: var(--tex-accent); color: #fff; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 4px 11px; border-radius: var(--tex-radius-pill); z-index: 2; } body.tex-theme .tex-card-body { padding: 16px 4px 6px; flex: 1 1 auto; display: flex !important; flex-direction: column; } body.tex-theme .tex-card-title { font-size: 16.5px; font-weight: 700; line-height: 1.45; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.tex-theme .tex-card-title a { color: var(--tex-ink); } body.tex-theme .tex-card-title a:hover { color: var(--tex-accent); } body.tex-theme .tex-card-desc { font-size: 14px; color: var(--tex-muted); line-height: 1.6; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.tex-theme .tex-card-meta { display: flex !important; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--tex-muted); margin-top: auto; font-style: italic; } body.tex-theme .tex-card-meta i { margin-right: 4px; font-style: normal; opacity: .8; } /* Featured (large) card */ body.tex-theme .tex-card-featured .tex-card-img { aspect-ratio: 16 / 9; border-radius: var(--tex-radius); } body.tex-theme .tex-card-featured .tex-card-title { font-size: 21px; -webkit-line-clamp: 3; } /* Horizontal card */ body.tex-theme .tex-card-horizontal { flex-direction: row; gap: 14px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--tex-line-soft); border-radius: 0; /* Bo height: 100% ke thua tu .tex-card. .tex-card dung height:100% de cac the trong mot hang luoi cao bang nhau. Nhung the NGANG lai xep chong len nhau trong mot cot, neu giu height:100% thi the dau tien bi keo cao bang ca cot (vd 420px) trong khi chi chua anh nho + tieu de -> khoang trong menh mong. */ height: auto; } body.tex-theme .tex-card-horizontal:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } body.tex-theme .tex-card-horizontal:hover { transform: none; box-shadow: none; } body.tex-theme .tex-card-horizontal .tex-card-thumb { flex: 0 0 118px; width: 118px; } body.tex-theme .tex-card-horizontal .tex-card-img { aspect-ratio: 4 / 3; border-radius: var(--tex-radius-sm); } body.tex-theme .tex-card-horizontal .tex-card-body { padding: 0; /* min-width: 0 cho phep tieu de dai xuong dong thay vi lam vo the. Bo "margin-top: auto" cua .tex-card-meta (xem duoi) de phan ngay thang khong bi day xuong day the. */ min-width: 0; } body.tex-theme .tex-card-horizontal .tex-card-meta { margin-top: 4px; } body.tex-theme .tex-card-horizontal .tex-card-title { font-size: 15px; -webkit-line-clamp: 3; margin-bottom: 6px; } /* Text-only list row */ body.tex-theme .tex-list-row { display: flex !important; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--tex-line); } body.tex-theme .tex-list-row:last-child { border-bottom: 0; } body.tex-theme .tex-list-row::before { content: '\f105'; font-family: FontAwesome; color: var(--tex-accent); flex: 0 0 auto; line-height: 1.6; } body.tex-theme .tex-list-row a { font-size: 14.5px; font-weight: 500; color: var(--tex-ink); line-height: 1.55; } body.tex-theme .tex-list-row a:hover { color: var(--tex-accent); } /* -------------------------------------------------------------------------- 11. PRODUCT / FEATURE GRID -------------------------------------------------------------------------- */ body.tex-theme .tex-feature-card { background: #fff; border: 1px solid var(--tex-line); border-radius: var(--tex-radius-lg); padding: 26px 22px; height: 100%; transition: all var(--tex-transition); position: relative; overflow: hidden; } body.tex-theme .tex-feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--tex-brand), var(--tex-accent)); transform: scaleX(0); transform-origin: left; transition: transform var(--tex-transition); } body.tex-theme .tex-feature-card:hover { border-color: transparent; box-shadow: var(--tex-shadow); transform: translateY(-4px); } body.tex-theme .tex-feature-card:hover::before { transform: scaleX(1); } body.tex-theme .tex-feature-icon { width: 54px; height: 54px; border-radius: var(--tex-radius); background: var(--tex-brand-soft); color: var(--tex-brand); display: flex !important; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; } body.tex-theme .tex-feature-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--tex-radius); margin-bottom: 16px; } body.tex-theme .tex-feature-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; } body.tex-theme .tex-feature-title a:hover { color: var(--tex-brand); } body.tex-theme .tex-feature-desc { font-size: 14px; color: var(--tex-muted); margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* -------------------------------------------------------------------------- 12. STATS COUNTER -------------------------------------------------------------------------- */ body.tex-theme .tex-stats-grid, body.tex-theme .tex-stats-html { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* Admin-entered stats markup may be plain blocks - keep them aligned */ body.tex-theme .tex-stats-html > * { text-align: center; } body.tex-theme .tex-stat-item { text-align: center; padding: 10px; } body.tex-theme .tex-stat-value { font-family: var(--tex-font-heading); font-size: 38px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 6px; } body.tex-theme .tex-stat-label { font-size: 14px; color: rgba(255, 255, 255, .78); text-transform: uppercase; letter-spacing: .5px; } /* -------------------------------------------------------------------------- 13. SIDEBAR -------------------------------------------------------------------------- */ body.tex-theme .tex-sidebar { position: sticky; top: calc(var(--tex-header-h) + 16px); } body.tex-theme .tex-sidebar-widget { background: #fff; border: 1px solid var(--tex-line); border-radius: var(--tex-radius); padding: 18px; margin-bottom: 22px; } body.tex-theme .tex-sidebar-title { font-size: 15.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; line-height: 1.45; color: var(--tex-navy); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--tex-line); position: relative; display: flex; align-items: center; gap: 10px; } body.tex-theme .tex-sidebar-title::before { content: ''; width: 4px; height: 18px; background: var(--tex-accent); border-radius: 3px; } /* Menu left */ body.tex-theme .tex-menu-left li a { display: block; padding: 10px 12px; font-size: 14.5px; font-weight: 500; color: var(--tex-body); border-radius: var(--tex-radius-sm); border-bottom: 1px solid var(--tex-line-soft); } body.tex-theme .tex-menu-left li:last-child a { border-bottom: 0; } body.tex-theme .tex-menu-left li a:hover { background: var(--tex-brand-soft); color: var(--tex-brand); padding-left: 16px; } /* Sidebar banner */ body.tex-theme .tex-banner-sidebar-item { display: block; margin-bottom: 14px; border-radius: var(--tex-radius); overflow: hidden; } body.tex-theme .tex-banner-sidebar-item img { width: 100%; transition: transform var(--tex-transition-slow); display: block; } body.tex-theme .tex-banner-sidebar-item:hover img { transform: scale(1.04); } /* -------------------------------------------------------------------------- 14. VIDEO SHOWCASE + PARTNERS -------------------------------------------------------------------------- */ body.tex-theme .tex-video-main { position: relative; border-radius: var(--tex-radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--tex-navy-dark); } body.tex-theme .tex-video-main img, body.tex-theme .tex-video-main iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } body.tex-theme .tex-video-play { position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: center; background: rgba(19, 30, 56, .3); transition: background var(--tex-transition); } body.tex-theme .tex-video-play:hover { background: rgba(19, 30, 56, .5); } body.tex-theme .tex-video-play i { width: 66px; height: 66px; border-radius: 50%; background: var(--tex-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 4px; box-shadow: 0 8px 28px rgba(224, 58, 58, .45); transition: transform var(--tex-transition); } body.tex-theme .tex-video-play:hover i { transform: scale(1.1); } body.tex-theme .tex-video-caption { padding: 14px 2px 0; font-size: 16px; font-weight: 700; color: var(--tex-ink); } /* -------------------------------------------------------------------------- 14b. VIDEO POSTS (TEX_VideoSlider / TEX_VideoGrid / TEX_VideoSidebar) -------------------------------------------------------------------------- */ body.tex-theme .tex-video-block { width: 100%; } body.tex-theme .tex-video-card { background: #fff; border-radius: var(--tex-radius); overflow: hidden; height: 100%; display: flex !important; flex-direction: column; transition: transform var(--tex-transition), box-shadow var(--tex-transition); } body.tex-theme .tex-video-card:hover { transform: translateY(-4px); box-shadow: var(--tex-shadow); } /* Khung 16:9 giu ty le cho ca