/* ========================================================================== mobile-v2.css - HE THIET KE DUNG CHUNG cua CanhQuan.net -------------------------------------------------------------------------- ⚠ TU 2026-07-21 FILE NAY KHONG CON CHUA CODE TRANG CHU. Toan bo CSS rieng cua trang chu da doi sang /Cqv2/home/home.css (xem /Cqv2/home/README.md). Dung viet luat trang chu vao day nua. File nay lo phan DUNG CHUNG cho moi trang: - Bo bien thiet ke --cq-* (mau, khoang cach, bo goc) - Mot phong chu duy nhat - Header, nut kinh lup / VI / 3 gach - Thanh menu duoi, nut tao bai (+), bang menu truot - Hop dang nhap trong iframe THU TU NAP trong (file sau de len file truoc): 1. Site.css 2. Reponsive.css 3. style cua home-standard-card.js 4. mobile-v2.css <- file nay 5. /Cqv2/home/home.css (chi trang chu) Tai lieu: _docs/KIEN-TRUC.md ========================================================================== */ /* -------------------------------------------------------------------------- 1. BIEN THIET KE (design tokens) - sua mau/khoang cach thi sua o day -------------------------------------------------------------------------- */ :root { /* Mau nen & be mat */ /* Nen trang PHAI trung mau voi khung noi dung (.home-content-shell #f2f5f7), neu khong tren dien thoai se lo duong vien lech mau o hai ben. */ --cq-bg: #f2f5f7; --cq-surface: #ffffff; /* nen card */ --cq-placeholder: #f0f2f4; /* nen cho anh chua tai xong (trung tinh) */ /* Duong ke - MANH nhung van doc duoc hinh khoi */ --cq-hairline: rgba(18, 56, 91, .07); --cq-hairline-strong: rgba(18, 56, 91, .12); /* Chu */ --cq-text: #14212e; /* chu chinh */ --cq-text-2: #6b7a89; /* chu phu */ --cq-text-3: #9aa7b4; /* chu mo */ /* MOT mau nhan duy nhat - chi dung cho hanh dong/trang thai */ --cq-accent: #5f8c3a; --cq-accent-ink: #14212e; /* Bo goc */ --cq-r-card: 16px; --cq-r-pill: 999px; /* Thang khoang cach - CHI dung cac gia tri nay */ --cq-1: 4px; --cq-2: 8px; --cq-3: 12px; --cq-4: 16px; --cq-5: 24px; --cq-6: 32px; /* Chieu cao thanh dieu huong duoi */ --cq-navbar-h: 56px; } /* Mac dinh AN het cac thanh phan mobile (desktop khong thay gi) */ /* Cac thanh phan CHI dung cho dien thoai/may tinh bang: an mac dinh, khoi @media (max-width:1279px) ben duoi se bat len. ⚠ KHONG duoc them !important vao khoi nay - luat bat len o media query khong co !important, se bi de mat va thanh nav duoi / nut tron bien mat. */ /* [DA BO 2026-07-21] .cq-sponsored - nhan "Duoc tai tro" ban cu, khong noi nao con tao ra phan tu do (nhan that la .home-standard-card__ad). */ .cq-bottom-nav, .cq-fab, .cq-mnav, .cq-langmenu, .home-nav-arrow { display: none; } /* Rieng 2 cai nay CAN !important vi phai de luat cu trong Site.css */ .cq-mnav-trigger, .cq-icon-btn { display: none !important; } /* ========================================================================== =============== DONG BO GIAO DIEN (ap dung MOI MAN HINH) ============== Phan nay lam cho may tinh + dien thoai dung chung mot ngon ngu thiet ke. ========================================================================== */ /* -------------------------------------------------------------------------- 1. MOT PHONG DUY NHAT: MONTSERRAT Trang cu dung lan lon 4 phong: Montserrat, Muli, SVN-Avo, Arial. [2026-07-21] Doi tu Inter sang MONTSERRAT theo yeu cau chu web. Phong duoc nap trong Template/Site.Master - do dam 400..800, co subset=vietnamese. !important la CO Y: co nhung luat cu co do uu tien rat cao (vd selector chua #headPage) ma khong the thang bang cach thong thuong. BA MENH DE :not() la BAT BUOC - neu bo di se de len phong ICON (Font Awesome / Glyphicons) va lam MAT SACH icon toan site. -------------------------------------------------------------------------- */ body, body :not(i):not([class*="fa-"]):not([class*="glyphicon"]) { font-family: 'Montserrat', 'Muli', sans-serif !important; } /* -------------------------------------------------------------------------- 2. BA LOP NEN nen trang (dam nhat) < khung noi dung < card (trang) Tab dang mo mang DUNG mau khung noi dung -> dinh lien thanh mot khoi. -------------------------------------------------------------------------- */ body { background: #e6ebef; } /* Footer: CUNG TONG voi thanh loc. #footPage von da la position:fixed o day man hinh (Site.css) nen noi dung cuon phia sau -> nhoe hien ro that su. */ #footPage { background: rgba(74, 85, 96, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } #footPage:hover { background: rgba(58, 68, 78, .96); } /* -------------------------------------------------------------------------- 3b. HOP DANG NHAP (dialog + form ben trong iframe) Cau truc: .dialog-container.wrap-login > .dialog-box > .dialog-header > .dialog-content > .dialog-main > iframe.frame-signin Form ben trong iframe dung Blank.master - phai NAP file css nay o do nua thi cac luat .form-login2 ben duoi moi an (xem Template/Blank.Master). -------------------------------------------------------------------------- */ /* Nen mo phia sau - dong tong voi thanh loc / footer */ .dialog-container.wrap-login { background: rgba(15, 25, 35, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .wrap-login .dialog-box { border: 0; border-radius: 24px; box-shadow: 0 24px 64px rgba(15, 25, 35, .32); overflow: hidden; } /* Thanh tieu de: bo mau xanh la cu, dung nen trang chu dam */ .wrap-login .dialog-header { display: flex; align-items: center; height: 56px; padding: 0 20px; background: #fff; border-bottom: 1px solid rgba(18, 56, 91, .07); color: #14212e; font-size: 15px; font-weight: 600; } .wrap-login .dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #8b98a5; font-size: 12px; transition: background-color .16s ease, color .16s ease; } .wrap-login .dialog-close:hover { background: #f2f5f7; color: #14212e; } .wrap-login .dialog-content, .wrap-login .dialog-main { background: #fff; } /* Khung nhung KHONG tu co gian theo noi dung -> phai dat so cung. Lich su: 328x325 (cat mat hang Google/FB) -> 360x450. [2026-07-21] Len 380x560 vi bo cuc moi cao hon: hai nut dang nhap nhanh dung THANH HANG DOC (moi nut 46px) thay vi nam ngang canh nhau. ⚠ Doi bo cuc form thi PHAI do lai chieu cao that va sua so nay, neu khong se cat mat phan duoi ma khong co thanh cuon bao. */ .wrap-login .frame-signin, .frame-signin { width: 380px; height: 560px; border: 0; } /* ===== Form ben trong iframe ===== Trang dung Blank.master deo class .cq-blank. Phai tra nen ve TRANG vi luat chung o tren dat body mau xam (#e6ebef) - trong iframe se thanh nen xam. */ body.cq-blank { background: #fff; padding: 0; } .form-login2 { padding: 4px 2px; } .form-login2 th { padding-bottom: 6px; color: #6b7a89; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; } /* O nhap: tu gach chan tro trui -> thanh o co vien, bo goc, co cho tho */ .form-login2 input[type="text"], .form-login2 input[type="password"], .form-login2 input:not([type="submit"]):not([type="button"]) { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #dbe3e9; border-radius: 12px; background: #fff; box-shadow: none; color: #14212e; font-size: 14px; transition: border-color .16s ease, box-shadow .16s ease; } .form-login2 input:focus { border-color: #5f8c3a; box-shadow: 0 0 0 3px rgba(95, 140, 58, .14); outline: none; } /* Nut dang nhap: to, tran chieu ngang, mau dam dong bo tab dang mo */ .form-login2 .Button, .form-login2 input[type="submit"], .form-login2 button:not(.hide) { width: 100%; height: 46px; margin: 0; padding: 0 18px; border: 0; border-radius: 12px; background: #14212e; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: background-color .18s ease; } .form-login2 .Button:hover, .form-login2 input[type="submit"]:hover, .form-login2 button:not(.hide):hover { background: #24384c; } /* Link "Tao tai khoan" / "Quen mat khau" */ .form-login2 a { color: #6b7a89; font-size: 12.5px; text-decoration: none; } .form-login2 a:hover { color: #14212e; text-decoration: underline; } /* Hang dang nhap bang Facebook / Google */ .form-login2 .sign-in-line { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(18, 56, 91, .08); } .form-login2 .sign-in-line .text { color: #8b98a5; font-size: 11px; font-weight: 600; letter-spacing: .05em; line-height: 28px; text-transform: uppercase; } /* Bao loi. ⚠ KHONG dung :not(:empty) de ve khung nen do - the nay luon chua san khoang trang/xuong dong ("\n\t\t") nen :empty KHONG khop, ket qua la hien mot vet hong ngay ca khi khong co loi. Chi to mau chu la du. */ .form-login2 .lbError { color: #b3402f; font-size: 12.5px; font-weight: 500; line-height: 1.5; } @keyframes cqbDrift { to { background-position: 180px 90px; } } @keyframes cqbBreathe { 0%, 100% { transform: scale(1); opacity: .42; } 50% { transform: scale(1.18); opacity: .62; } } @keyframes cqbUp { to { opacity: 1; transform: none; } } @keyframes cqbBar { to { width: 100%; } } /* ========================================================================== GIAO DIEN "APP": DIEN THOAI + MAY TINH BANG (<= 1279px) -------------------------------------------------------------------------- Bao gom ca iPad / iPad Pro. Ly do: bo cuc may tinh cu bi VO o khoang 768-1024px (logo de len menu, thua khoang trang). Dung chung mot bo cuc app cho toan bo dien thoai + may tinh bang, CHI KHAC SO COT (xem cuoi file). Tu 1280px tro len moi dung bo cuc may tinh. ========================================================================== */ @media (max-width: 1279px) { /* ---------------------------------------------------------------------- 2. NEN TRANG + CHU ---------------------------------------------------------------------- */ body { background: var(--cq-bg); /* chua cho thanh nav duoi khoi che noi dung (footer da an) */ padding-bottom: calc(var(--cq-navbar-h) + var(--cq-3)); font-family: 'Montserrat', 'Muli', sans-serif; color: var(--cq-text); } /* An footer - toan bo noi dung do da nam trong bang menu 3 gach */ #footPage { display: none !important; } /* Lop bao .Window.body co nen TRANG (tu Site.css) phu het be ngang, trong khi noi dung ben trong hep hon -> lo hai dai TRANG doc hai canh, nen trong khong dong mau. Bo nen di de mau body (#f2f5f7) an suot. :has() gioi han DUNG trang chu (chi trang chu moi co .home-content-shell) nen cac trang khac giu nguyen nen trang. Trinh duyet cu khong hieu :has() thi bo qua luat nay, van chay binh thuong nhu truoc. */ .Window.body:has(.home-content-shell) { background: transparent; } /* ---------------------------------------------------------------------- 3. HEADER: [logo] ... [tim kiem] [VI] [3 gach] ---------------------------------------------------------------------- */ #headPage { background: var(--cq-surface); border-bottom: 1px solid var(--cq-hairline); } /* Site.Master co khoi @media(min-width:768px) dat header thanh LUOI 4 cot full-bleed voi le hai ben 120px. Tu 768-1279px khoi do van chay va se pha bo cuc app -> phai TRA VE tat ca cac thuoc tinh do. */ #headPage .page-width-2 { display: flex; align-items: center; gap: var(--cq-2); flex-wrap: nowrap; width: auto; max-width: none; min-height: var(--cq-navbar-h); margin-left: auto; margin-right: auto; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: var(--cq-3); padding-right: var(--cq-3); grid-template-columns: none; column-gap: 0; } /* Menu chinh da chuyen xuong thanh duoi */ #headPage #mainMenu { display: none !important; } #headPage .page-width-2 #logo.cq-logo { order: 1; display: flex; align-items: center; gap: var(--cq-2); flex: 0 0 auto; margin: 0; margin-right: auto; float: none; } /* Ben canh logo hien 2 dong IN HOA: "KET NOI" / "CUNG PHAT TRIEN". An dong chu CANHQUAN.NET tren dien thoai cho do chat (con 3 nut icon). */ /* align-items:flex-start + text-align:left -> 2 dong CAN LE TRAI, khong bi canh giua so le nhau (dong ngan nam giua dong dai). */ #headPage .page-width-2 #logo.cq-logo .cq-logo__text { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 0; gap: 1px; text-align: left; } #headPage .page-width-2 #logo.cq-logo .text { display: none; } #headPage .page-width-2 #logo.cq-logo .cq-logo__tagline { display: block; margin: 0; color: var(--cq-text); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; } #headPage .page-width-2 #logo.cq-logo .cq-logo__l1, #headPage .page-width-2 #logo.cq-logo .cq-logo__l2 { display: block; text-align: left; white-space: nowrap; } #headPage .page-width-2 #logo.cq-logo img { width: 34px; height: 34px; } /* O tim kiem An di - chi hien khi bam icon kinh lup (ham openSearch() co san) */ #headPage .page-width-2 .form-search.form-top { display: none; } #headPage .page-width-2 .form-search.form-top.open { display: block; } /* Nhom icon ben phai */ #headPage .page-width-2 .menu-top.fr { order: 3; display: flex; align-items: center; gap: var(--cq-1); flex: 0 0 auto; margin: 0; padding: 0; float: none; list-style: none; } /* Nut icon dung chung (kinh lup / VI / 3 gach) */ #headPage .page-width-2 .menu-top.fr .cq-icon-btn { display: inline-flex !important; position: relative; margin: 0; padding: 0; } /* 3 nut icon: O VUONG 36x36 BANG NHAU, canh giua ca ngang lan doc. Khoa cung width/height (khong dung min-) de khong nut nao to hon nut nao. */ #headPage .page-width-2 .menu-top.fr .cq-icon-btn > a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border-radius: var(--cq-r-pill); color: var(--cq-text); font-size: 16px; line-height: 1; text-decoration: none; vertical-align: middle; cursor: pointer; } /* Ep MOI phan tu con (icon LAN chu "VI" trong ) vao CUNG MOT khung 18x18 -> ba nut thang hang tuyet doi. Neu de chu "VI" tran (khong boc span) thi no la text thuan, canh theo duong co so cua chu nen se LECH so voi 2 icon. */ #headPage .page-width-2 .menu-top.fr .cq-icon-btn > a > i, #headPage .page-width-2 .menu-top.fr .cq-icon-btn > a > span { display: block; width: 36px; height: 36px; font-size: 16px; line-height: 36px; text-align: center; /* THU PHAM lam icon lech: Reponsive.css co ".menu-top li a i{position:relative; top:5px}" trong @media max-width:500px -> day icon tut xuong 5px so voi chu "VI". Phai tra ve 0. */ position: static; top: auto; } /* Chu "VI" nho hon icon mot chut cho can thi giac */ #headPage .page-width-2 .menu-top.fr .cq-icon-btn > a > .cq-lang-code { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .02em; } #headPage .page-width-2 .menu-top.fr .cq-icon-btn > a:hover, #headPage .page-width-2 .menu-top.fr .cq-icon-btn > a:focus { color: var(--cq-text); text-decoration: none; outline: none; } /* Nut ngon ngu hien chu "VI" thay vi icon */ #headPage .page-width-2 .menu-top.fr .cq-icon-btn--lang > a { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .02em; } /* KHACH chua dang nhap: an het nut cu, chi chua lai 3 nut icon. !! Chi ap cho .auth-guest - neu ap ca cho nguoi DA dang nhap thi ho se mat avatar / chuong thong bao / menu tai khoan. */ #headPage .page-width-2 .menu-top.fr.auth-guest > li:not(.cq-icon-btn) { display: none !important; } /* --- Bang xo xuong cua nut VI (ngon ngu + che do toi) --- */ .cq-langmenu { display: block; position: absolute; top: calc(100% + 6px); right: 0; z-index: 1300; min-width: 178px; padding: var(--cq-1) 0; border: 1px solid var(--cq-hairline-strong); border-radius: var(--cq-3); background: var(--cq-surface); box-shadow: 0 10px 28px rgba(18, 56, 91, .14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .cq-icon-btn--lang.is-open .cq-langmenu { opacity: 1; visibility: visible; transform: translateY(0); } .cq-langmenu__item { display: flex; align-items: center; gap: var(--cq-3); padding: var(--cq-3) var(--cq-4); color: var(--cq-text); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; } .cq-langmenu__item i { width: 16px; color: var(--cq-text-2); font-size: 14px; text-align: center; } /* div dem thua giua header va thanh loc (xem Cqv2/home/home.js). [2026-07-21] Da bo !important: day la class RIENG cua minh, khong co luat cu nao trong Site.css/Reponsive.css tranh voi no. Da thu tat/bat va do lai tren 3 loai trang x 2 kho man hinh - khong lech diem nao. */ .cq-hide-mobile { display: none; } /* ---------------------------------------------------------------------- 9. THANH DIEU HUONG DUOI - CHI ICON ---------------------------------------------------------------------- */ .cq-bottom-nav { display: flex; position: fixed; right: 0; bottom: 0; left: 0; z-index: 999; background: var(--cq-surface); border-top: 1px solid var(--cq-hairline); padding-bottom: env(safe-area-inset-bottom, 0px); } .cq-bottom-nav__item { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; min-height: var(--cq-navbar-h); color: var(--cq-text-3); text-decoration: none; } .cq-bottom-nav__item i { display: block; font-size: 21px; line-height: 1; } .cq-bottom-nav__item.is-current { color: var(--cq-accent); } /* Chu bi an nhung VAN GIU cho trinh doc man hinh - dung doi thanh display:none */ .cq-bottom-nav__item > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------------------------------------------------------------------- 10. NUT TRON TAO BAI VIET (noi goc duoi phai) ---------------------------------------------------------------------- */ .cq-fab { display: block; position: fixed; right: var(--cq-4); bottom: calc(var(--cq-navbar-h) + var(--cq-4)); z-index: 1000; } .cq-fab__backdrop { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: rgba(15, 25, 35, .20); } .cq-fab.is-open .cq-fab__backdrop { display: block; } .cq-fab__btn { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--cq-accent); box-shadow: 0 6px 18px rgba(20, 33, 46, .24); color: #ffffff; font-size: 21px; line-height: 1; cursor: pointer; transition: background-color .2s ease; } .cq-fab__btn i { line-height: 1; transition: transform .25s ease; } .cq-fab.is-open .cq-fab__btn { background: var(--cq-accent-ink); } .cq-fab.is-open .cq-fab__btn i { transform: rotate(45deg); } .cq-fab__menu { display: none; position: absolute; right: 0; bottom: 64px; flex-direction: column; align-items: flex-end; gap: var(--cq-2); } .cq-fab.is-open .cq-fab__menu { display: flex; } .cq-fab__item { display: flex; align-items: center; gap: var(--cq-2); padding: 10px var(--cq-4); border: 1px solid var(--cq-hairline); border-radius: var(--cq-r-pill); background: var(--cq-surface); box-shadow: 0 4px 14px rgba(20, 33, 46, .14); color: var(--cq-text); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; } .cq-fab__item i { width: 16px; color: var(--cq-accent); font-size: 14px; text-align: center; } /* ---------------------------------------------------------------------- 11. NUT 3 GACH + BANG MENU TRUOT (khach chua dang nhap) ---------------------------------------------------------------------- */ .cq-mnav { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1200; visibility: hidden; pointer-events: none; } .cq-mnav.is-open { visibility: visible; pointer-events: auto; } .cq-mnav__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 25, 35, .35); opacity: 0; transition: opacity .22s ease; } .cq-mnav.is-open .cq-mnav__backdrop { opacity: 1; } .cq-mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 84%; max-width: 320px; padding: 0 var(--cq-4) var(--cq-5); background: var(--cq-surface); box-shadow: -6px 0 24px rgba(20, 33, 46, .16); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform .24s ease; } .cq-mnav.is-open .cq-mnav__panel { transform: translateX(0); } .cq-mnav__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--cq-4)) var(--cq-1); padding: var(--cq-4); border-bottom: 1px solid var(--cq-hairline); background: var(--cq-surface); color: var(--cq-text); font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; text-transform: none; } .cq-mnav__close { color: var(--cq-text-2); font-size: 17px; line-height: 1; cursor: pointer; } .cq-mnav__link { display: flex; align-items: center; gap: var(--cq-3); padding: var(--cq-3) 2px; border-bottom: 1px solid var(--cq-hairline); color: var(--cq-text); font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; } .cq-mnav__link i { width: 18px; color: var(--cq-accent); font-size: 14px; text-align: center; } .cq-mnav__title { margin: var(--cq-5) 0 var(--cq-2); color: var(--cq-text); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .cq-mnav__info { color: var(--cq-text-2); font-size: 13px; line-height: 1.6; word-break: break-word; } .cq-mnav__info img { max-width: 100%; height: auto; } .cq-mnav__group { margin-top: var(--cq-4); } .cq-mnav__grouptitle { margin-bottom: var(--cq-1); color: var(--cq-text); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .cq-mnav__group ul { margin: 0; padding: 0; list-style: none; } .cq-mnav__group ul li a { display: block; padding: var(--cq-2) 0; color: var(--cq-text-2); font-size: 13px; text-decoration: none; } } /* ========================================================================== MAY TINH (>= 1280px) -------------------------------------------------------------------------- KHAC voi dien thoai/may tinh bang: may tinh CO CA card TO va card NHO (.item-wide rong gap doi) de luoi co nhip dieu. Nhung KIEU DANG thi dong bo: cung vien manh, cung bo goc, cung cach xu ly anh, va cung chieu cao hang. Co che cao bang nhau: - Card NHO: anh VUONG (co dinh) + phan chu hut cho thua - Card TO : phan chu cao tu nhien + ANH hut cho thua => hai kieu ngua nhau nhung tong chieu cao luon bang nhau. ========================================================================== */ @media (min-width: 1280px) { /* --- Chu logo: "Ket noi cung phat trien" GIU 1 HANG tren may tinh (chi xuong 2 dong o dien thoai/may tinh bang) --- */ #headPage #logo.cq-logo .cq-logo__tagline { white-space: nowrap; } #headPage #logo.cq-logo .cq-logo__l1, #headPage #logo.cq-logo .cq-logo__l2 { display: inline; } } /* ========================================================================== HEADER MAY TINH - THU GON DAN KHI CO CUA SO LAI -------------------------------------------------------------------------- Thu tu uu tien AN (theo yeu cau): 1) O tim kiem lon -> thay bang icon kinh lup 2) Ten + slogan -> chi con hinh logo 3) Dang ky/Dang nhap -> gom vao nut 3 gach ========================================================================== */ /* --- BUOC 1: duoi 1560px -> an o tim kiem lon, hien icon kinh lup + VI --- */ @media (min-width: 1280px) and (max-width: 1559px) { #headPage .page-width-2 { grid-template-columns: auto 1fr 0 auto; } #headPage .page-width-2 .form-search.form-top { display: none; } #headPage .page-width-2 .menu-top.fr .cq-icon-btn--search, #headPage .page-width-2 .menu-top.fr .cq-icon-btn--lang { display: inline-flex !important; } #headPage .page-width-2 .menu-top.fr .cq-icon-btn > a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--cq-r-pill); color: var(--cq-text); text-decoration: none; cursor: pointer; } #headPage .page-width-2 .menu-top.fr .cq-icon-btn > a > i, #headPage .page-width-2 .menu-top.fr .cq-icon-btn > a > span { display: block; width: 36px; height: 36px; font-size: 16px; line-height: 36px; text-align: center; position: static; top: auto; } #headPage .page-width-2 .menu-top.fr .cq-icon-btn--lang > a > .cq-lang-code { font-size: 12px; font-weight: 700; } } /* --- BUOC 2: duoi 1440px -> an them TEN + SLOGAN, chi con hinh logo --- */ @media (min-width: 1280px) and (max-width: 1439px) { /* [2026-07-21] Da bo !important: .cq-logo__text la class RIENG cua minh, khong tranh voi luat cu nao. Da do tren 3 loai trang x 2 kho. */ #headPage #logo.cq-logo .cq-logo__text { display: none; } } /* --- BUOC 3: duoi 1360px -> gom Dang ky/Dang nhap vao nut 3 gach --- */ @media (min-width: 1280px) and (max-width: 1359px) { #headPage .page-width-2 .menu-top.fr.auth-guest > li.auth-separator, #headPage .page-width-2 .menu-top.fr.auth-guest > li:not(.cq-icon-btn) { display: none !important; } #headPage .page-width-2 .menu-top.fr .cq-icon-btn--menu { display: inline-flex !important; } /* bang menu 3 gach dung chung voi ban may tinh bang */ .cq-mnav { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1200; visibility: hidden; pointer-events: none; } .cq-mnav.is-open { visibility: visible; pointer-events: auto; } .cq-mnav__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 25, 35, .35); } .cq-mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 360px; padding: 0 var(--cq-4) var(--cq-5); background: var(--cq-surface); box-shadow: -6px 0 24px rgba(20, 33, 46, .16); overflow-y: auto; transform: translateX(100%); transition: transform .24s ease; } .cq-mnav.is-open .cq-mnav__panel { transform: translateX(0); } } /* Bang xo cua nut VI cung phai hien tren may tinh khi nut VI hien */ @media (min-width: 1280px) and (max-width: 1559px) { #headPage .cq-icon-btn--lang { position: relative; } #headPage .cq-icon-btn--lang .cq-langmenu { display: block; position: absolute; top: calc(100% + 6px); right: 0; z-index: 1300; min-width: 178px; padding: var(--cq-1) 0; border: 1px solid var(--cq-hairline-strong); border-radius: var(--cq-3); background: var(--cq-surface); box-shadow: 0 10px 28px rgba(18, 56, 91, .14); opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s; } #headPage .cq-icon-btn--lang.is-open .cq-langmenu { opacity: 1; visibility: visible; } #headPage .cq-langmenu__item { display: flex; align-items: center; gap: var(--cq-3); padding: var(--cq-3) var(--cq-4); color: var(--cq-text); font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; } #headPage .cq-langmenu__item i { width: 16px; color: var(--cq-text-2); font-size: 14px; text-align: center; } } /* ========================================================================== HOP DANG NHAP - LAM LAI 2026-07-21 -------------------------------------------------------------------------- YEU CAU CHU WEB: 1. Hop phai nam GIUA man hinh (truoc day dinh sat tren, cach tren 30px ma cach duoi 338px). 2. UU TIEN dang nhap bang tai khoan Google / Facebook - dua len TREN. 3. Dang nhap bang MAT KHAU xuong duoi, lam nhat di. Sau nay se bo han. ⚠ CACH LAM: chi dung CSS (thu tu flex + trang tri), KHONG sua markup trong Signin.aspx. Ly do: cac o nhap la dieu khien may chu (asd:TextBox, asd:Button) - doi thu tu trong markup de lam hong lien ket su kien. Dung "order" thi doi duoc cho hien thi ma khong dong vao chung. ⚠ Form dang nhap nam trong KHUNG NHUNG (iframe) dung Blank.master. Khung do KHONG nap FontAwesome, nen bieu tuong Google/Facebook phai ve bang SVG nhung thang vao CSS. ========================================================================== */ /* ---------- 1. DUA HOP RA GIUA MAN HINH ---------- */ .dialog-container.wrap-login { display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; box-sizing: border-box; } /* ⚠ PHAI la margin:0. Utils-min.css dat san .dialog-box { margin: 30px auto }. Da thu ghi de thanh "margin: auto" (cach thuong dung de can giua trong flex) nhung KHONG an: do duoc le tren = 0, le duoi = 218px -> hop van dinh sat tren. Dat thang margin:0 roi de align-items:center lo viec can giua thi dung: do lai ra 129px / 129px, lech 0. */ .wrap-login .dialog-box { margin: 0; } /* Man hinh THAP (dien thoai nam ngang, cua so nho): hop co the cao hon man hinh. Luc do can giua se cat mat PHAN DAU va khong cuon len xem duoc. Nen doi sang can TREN, de khung nen tu cuon binh thuong. */ @media (max-height: 700px) { .dialog-container.wrap-login { align-items: flex-start; } } /* ---------- 2. BEN TRONG KHUNG NHUNG: DAO THU TU ---------- */ .form-login2 { display: flex; flex-direction: column; } .form-login2 > .lbError { order: 0; } .form-login2 > .sign-in-line { order: 1; } .form-login2 > table { order: 3; } .form-login2 > .hide { order: 9; } /* ---------- 3. KHOI DANG NHAP NHANH (len tren cung) ---------- */ .form-login2 .sign-in-line { display: flex; flex-direction: column; gap: 10px; margin: 0 0 4px; padding: 0; border: 0; background: none; } .form-login2 .sign-in-line .text { float: none; margin: 0 0 2px; color: #6b7a89; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .form-login2 .sign-in-line .fr { display: flex; flex-direction: column; gap: 10px; float: none; width: 100%; } .form-login2 .sign-in-line .clear { display: none; } /* GOOGLE len TRUOC Facebook (trong markup Facebook dung truoc). Ly do: chu web muon uu tien dang nhap bang Google. Doi bang "order" chu khong doi markup - xem ghi chu dau muc. */ .form-login2 .sign-in-line .fr .g-signin2 { order: 1; } .form-login2 .sign-in-line .fr .facebook-signin { order: 2; } /* Hai nut: cung mot khuon - cao 46px, tron, bieu tuong ben trai, chu can giua */ .form-login2 .g-signin2, .form-login2 .facebook-signin { position: relative; float: none; width: 100%; height: 46px; margin: 0; border-radius: 12px; background-repeat: no-repeat; background-position: 16px center; background-size: 20px 20px; cursor: pointer; box-sizing: border-box; } .form-login2 .g-signin2::after, .form-login2 .facebook-signin::after { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 14px; font-weight: 600; pointer-events: none; } /* --- Google: nen trang, vien manh (theo dung huong dan nhan dien cua Google) --- */ .form-login2 .g-signin2 { border: 1px solid #dbe3ea; background-color: #ffffff; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E"); } .form-login2 .g-signin2::after { content: "Tiếp tục với Google"; color: #14212e; } /* Nut that cua Google (do thu vien gapi ve ra) nam de len TOAN BO o nay va trong SUOT -> nguoi dung bam vao dau cung trung nut that. ⚠ Neu chi phong to lop ngoai ma khong keo lop nay, bam ra ngoai vung 120px se khong an gi ca. */ .form-login2 .g-signin2 > div { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; min-width: 0 !important; opacity: 0; } /* --- Facebook: mau thuong hieu --- */ .form-login2 .facebook-signin { border: 1px solid #1877f2; background-color: #1877f2; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.96h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E"); } .form-login2 .facebook-signin::after { content: "Tiếp tục với Facebook"; color: #ffffff; } /* --- Vach ngan "hoac" giua khoi nhanh va khoi mat khau --- */ .form-login2 .sign-in-line::after { content: "hoặc đăng nhập bằng mật khẩu"; display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; color: #9aa7b4; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .form-login2 .sign-in-line::before { content: ""; order: 9; } /* ---------- 4. KHOI MAT KHAU: LAM NHAT DI ---------- */ /* Chu web se BO han cach dang nhap nay sau nay, nen de no lui ve sau. */ .form-login2 > table th { color: #9aa7b4; font-size: 10px; } .form-login2 > table .Button { background: #4a5560; } .form-login2 > table .Button:hover { background: #14212e; }