/* =====================================================================
MIHELSEOUL - GIAO DIEN "PASTEL HOLOGRAPHIC" (thien xanh)
Phien ban 1.0 - 2026-08-06
- Nap SAU mihel-theme.css: ghi de bien mau -> doi ca he mau sang
holographic, va them bo cuc menu 2 tang (thanh ngang + panel trai).
- Khong sua logic. Muon quay ve: xoa nay trong css.blade.php.
- Mau da kiem dinh do tuong phan WCAG:
chu chinh #1E2A44 tren the kinh: 13.4 | active #2563EB + chu trang: 5.17
===================================================================== */
/* ---------------------------------------------------------------
1. GHI DE BIEN MAU -> HOLOGRAPHIC THIEN XANH
--------------------------------------------------------------- */
:root {
--mh-brand: #2563EB; /* xanh holo dam - dat chuan chu trang */
--mh-brand-strong: #1D4ED8;
--mh-brand-soft: rgba(37, 99, 235, .10);
--mh-flame: #0E7490; /* teal dam - diem nhan phu */
--mh-ink: #1E2A44; /* xanh navy dam - chu chinh */
--mh-ink-2: #4A5B7C;
--mh-ink-3: #8A97B4;
--mh-line: rgba(37, 99, 235, .14);
--mh-line-soft: rgba(37, 99, 235, .08);
/* nen kinh mo (glassmorphism) */
--mh-glass: rgba(255, 255, 255, .66);
--mh-glass-strong: rgba(255, 255, 255, .82);
--mh-glass-border: rgba(255, 255, 255, .70);
--mh-holo-1: #DBEAFE; /* xanh nhat */
--mh-holo-2: #CFFAFE; /* cyan nhat */
--mh-holo-3: #E0E7FF; /* lavender nhat */
--mh-holo-4: #D1FAE5; /* mint nhat */
--mh-shadow: 0 4px 20px rgba(37, 99, 235, .08), 0 1px 3px rgba(37, 99, 235, .06);
--mh-shadow-lift: 0 10px 30px rgba(37, 99, 235, .16), 0 2px 6px rgba(37, 99, 235, .08);
--mh-topbar-h: 58px; /* = chieu cao thanh header -> hai thanh bang nhau */
--mh-subpanel-w: 244px;
}
/* ---------------------------------------------------------------
2. NEN HOLOGRAPHIC CHO TOAN TRANG
--------------------------------------------------------------- */
body:not(.lockscreen) {
background: linear-gradient(135deg,
var(--mh-holo-1) 0%,
var(--mh-holo-2) 32%,
var(--mh-holo-3) 66%,
var(--mh-holo-4) 100%) !important;
color: var(--mh-ink);
}
body:not(.lockscreen) .content-wrapper,
body:not(.lockscreen) .right-side {
background: transparent !important;
}
/* mang mau lung linh mo o goc tren, tao cam giac "holographic".
* Dat tren .content-wrapper (KHONG phai .wrapper) de khong anh huong bo cuc con.
* position: FIXED (truoc day absolute): voi absolute, lop mau nay cao bang CA
* TRANG (bang du lieu dai 3000-5000px) nen moi lan cuon trinh duyet phai to lai
* ca 3 vung gradient khong lo -> cuon bi ret. Fixed thi chi to dung mot man hinh,
* nhe hon nhieu va mau cung dung yen khi cuon (nhin da hon). */
body:not(.lockscreen) .content-wrapper::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(60vw 40vh at 12% -5%, rgba(147, 197, 253, .40), transparent 60%),
radial-gradient(50vw 40vh at 100% 0%, rgba(196, 181, 253, .34), transparent 60%),
radial-gradient(40vw 40vh at 60% 110%, rgba(153, 246, 228, .30), transparent 60%);
}
body:not(.lockscreen) .content-wrapper { position: relative; z-index: 1; }
/* ---------------------------------------------------------------
3. HEADER (navbar) - kinh mo holographic
--------------------------------------------------------------- */
/* MOT DAI MAU LIEN TUC chay HET chieu ngang thanh header, KHONG cho tra ve
trang: dam o goc trai (de chu trang cua logo noi bat) roi NHAT DAN sang
phai thanh cac sac pastel holographic thien XANH (cyan nhat -> xanh nhat ->
lavender nhat). Doan cuoi van con mau chu khong phai nen trang.
Rang buoc bat buoc: nua ben phai la chu/nut mau toi (--mh-ink-2) nen mau o
do phai la pastel SANG, neu dam se khong doc duoc.
Dat mau o .main-header (bao ca khoi logo lan navbar) va cho hai khoi con
TRONG SUOT -> khong con duong cat giua logo va thanh ben canh. */
body[class*="skin-"] .main-header,
body:not(.lockscreen) .main-header {
background: linear-gradient(90deg,
#1E3A8A 0%, /* navy dam - de chu trang cua logo noi bat */
#1D4ED8 13%, /* xanh thuong hieu */
#0E7490 25%, /* teal */
#67E8F9 40%, /* cyan sang */
#A5F3FC 52%,
var(--mh-holo-2) 64%, /* #CFFAFE cyan nhat */
var(--mh-holo-1) 76%, /* #DBEAFE xanh nhat */
var(--mh-holo-3) 88%, /* #E0E7FF lavender nhat */
var(--mh-holo-2) 100% /* vong lai cyan nhat -> anh sac "holographic" */
) !important;
border-bottom: 1px solid var(--mh-glass-border);
box-shadow: 0 2px 16px rgba(37, 99, 235, .07);
}
/* Cac nut tren thanh header (May tinh, Ban hang POS, Loi hom nay, Huong dan...)
Doi 2026-08-07: tu mau XANH LA sang mau CAM.
Chi doi trong pham vi .main-header - nut mau xanh la o cac trang khac giu nguyen.
Rieng nut Ban hang POS truoc day ghi cung background:#2dce89 ngay trong the
HTML (CSS khong de duoc), da go bo o header.blade.php. */
body:not(.lockscreen) .main-header .navbar .btn-success,
body[class*="skin-"] .main-header .navbar .btn-success {
background: #F87233 !important;
border-color: #F87233 !important;
color: #fff !important;
}
body:not(.lockscreen) .main-header .navbar .btn-success:hover,
body:not(.lockscreen) .main-header .navbar .btn-success:focus,
body[class*="skin-"] .main-header .navbar .btn-success:hover {
background: #E05F22 !important;
border-color: #E05F22 !important;
}
/* Ngay thang tren header (vd 07-08-2026): truoc day bi ghi cung mau trang
ngay trong the HTML, ma nua phai thanh header nay la nen pastel sang nen
chu trang chim mat. Doi sang mau muc den cua theme. */
.mh-ngay-header,
.mh-ngay-header strong { color: var(--mh-ink) !important; }
/* Chuong bao don khach dat tren header (them 2026-08-07).
Nam o nua PHAI thanh header = nen pastel sang -> chuong phai mau toi. */
.mh-chuong-don > a {
position: relative;
display: block;
padding: 15px;
}
/* Chuong mau DO (2026-08-07) - de dap ngay vao mat khi co don khach dat */
.mh-chuong-don > a > i {
font-size: 17px;
color: #D92D20 !important;
}
.mh-chuong-don > a:hover > i { color: #A81E1E !important; }
/* Huy hieu so: chu so mau do tren NEN TRANG (doi 2026-08-08).
Truoc day de nen trong suot + vien chu trang; nay dat han vien tron mau
trang de so noi ro tren moi doan mau cua thanh header. Chu to them mot nac
(13px -> 15px) theo yeu cau.
CAN THAN - selector phai DAI nhu duoi day: mihel-theme.css dong 169 co luat
"body:not(.lockscreen) .navbar .label-warning { background: var(--mh-brand)
!important }" son moi huy hieu tren header thanh mau XANH. Luat do 3 lop
class + !important nen mot minh ".mh-chuong-don__so" (1 lop class) du co
!important van THUA - phai dat it nhat 3 lop class moi de len duoc.
Ban ".label" o cuoi de phong truong hop mihel-topnav.js doi cho chuong ra
ngoai .navbar (luc do hai selector .navbar ben duoi khong con dinh). */
.mh-chuong-don > a > .mh-chuong-don__so.label,
body:not(.lockscreen) .navbar .mh-chuong-don .mh-chuong-don__so,
body[class*="skin-"] .navbar .mh-chuong-don .mh-chuong-don__so {
position: absolute;
top: 2px;
right: 0;
background: #fff !important;
background-color: #fff !important;
color: #D92D20 !important;
border: none !important;
box-shadow: 0 1px 3px rgba(30, 42, 68, .3);
text-shadow: none;
font-size: 15px;
font-weight: 700;
padding: 1px 5px;
line-height: 1.2;
border-radius: 10px;
min-width: 20px;
text-align: center;
}
/* Khong co don nao -> AJAX trong app.blade.php se an the nay di */
.mh-chuong-don__so:empty { display: none; }
/* Nhan chu an san, ro chuot vao chuong moi hien.
Dung bong chu noi (position:absolute) chu khong chen chu vao hang, de thanh
header khong bi day rong ra moi lan ro chuot. */
.mh-chuong-don__nhan {
position: absolute;
top: 100%;
right: 6px;
white-space: nowrap;
background: var(--mh-ink);
color: #fff;
padding: 5px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
box-shadow: 0 6px 18px rgba(30, 42, 68, .28);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
pointer-events: none;
z-index: 1100;
}
.mh-chuong-don:hover .mh-chuong-don__nhan,
.mh-chuong-don > a:focus .mh-chuong-don__nhan {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Hai khoi con: trong suot de lo dai mau lien tuc o tren.
(Ke ca luc :hover cua khoi logo - neu khong se lo lai mieng nen cu.) */
body[class*="skin-"] .main-header .navbar,
body:not(.lockscreen) .main-header .navbar,
body[class*="skin-"] .main-header .logo,
body:not(.lockscreen) .main-header .logo,
body[class*="skin-"] .main-header .logo:hover,
body:not(.lockscreen) .main-header .logo:hover {
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* Logo thuong hieu o goc TRAI thanh header - to len het chieu cao thanh
(doi 2026-08-08). Luat goc: mihel-theme.css dong 244 dat 36px.
Thanh header cao 58px (mihel-theme.css dong 238) -> anh 50px, con 4px tren
duoi cho vong sang box-shadow khong bi cat.
Selector phai dai bang luat goc (body[class*="skin-"] .main-header .logo
.mh-brand__img); file nay nap SAU mihel-theme.css nen cung diem uu tien
thi luat nay thang. Ban :not(.lockscreen) de phong body doi class. */
body[class*="skin-"] .main-header .logo.mh-brand .mh-brand__img,
body:not(.lockscreen) .main-header .logo.mh-brand .mh-brand__img {
width: 50px;
height: 50px;
flex-basis: 50px;
}
/* Khoi logo rong co dinh 230px (AdminLTE): anh to them 14px thi phan chu con
it cho hon, thu bot khoang cach va le de ten doanh nghiep khong bi cat. */
body[class*="skin-"] .main-header .logo.mh-brand,
body:not(.lockscreen) .main-header .logo.mh-brand {
gap: 9px;
padding: 0 10px;
}
body:not(.lockscreen) .main-header .navbar .nav > li > a { color: var(--mh-ink-2) !important; }
body:not(.lockscreen) .main-header .navbar .nav > li > a:hover,
body:not(.lockscreen) .main-header .navbar .nav > .open > a {
background: var(--mh-brand-soft) !important;
color: var(--mh-brand) !important;
}
/* ---------------------------------------------------------------
3c. THANH HEADER TREN DIEN THOAI (lam lai 2026-08-14)
BAN CU HONG O DAU - ghi lai de khong ai dung lai cach do:
AdminLTE o duoi 768px cho .logo VA .navbar cung `width:100%; float:none`,
tuc la header tu tach thanh HAI DONG, cao hon 130px - bang mot phan sau
man hinh dien thoai chi de treo mot cai ten. Te hon: dong tren la khoi
thuong hieu trai het be ngang, ma ten doanh nghiep thi nam o NUA PHAI
cua dong do, dung vao doan dai mau da nhat thanh pastel - chu mau TRANG
tren nen cyan nhat, gan nhu khong doc duoc. Dong duoi thi ca cum nut don
sang phai, bo trong han nua trai.
Ban cu con co gang chua bang cach cho dai mau nhat som hon - khong an
thua, vi cho nao cung co the roi vao doan sang.
CACH LAM LAI - ba quyet dinh:
1. GOP LAI MOT DONG cao 56px. Bat .main-header thanh flex: khoi thuong
hieu an het cho con lai ben trai, cum nut co dung be rong cua no ben
phai. Tiet kiem ~80px chieu cao man hinh.
2. DAI MAU TREN DIEN THOAI BO HAN DOAN PASTEL - toan bo thanh la nen
TOI (navy -> xanh -> teal). Day la cai sua tan goc chuyen chu trang
doc khong ra: het pastel thi khong con cho nao lam chu trang chim.
Doi lai, chu va bieu tuong ben phai phai lat sang mau SANG (luat
`.nav > li > a` mau toi o ngay tren bi ghi de trong khoi nay).
Man hinh to van giu dai mau holographic cu nhu thuong.
3. CAT BOT CHU, GIU LAI BIEU TUONG: dong phu "POS SYSTEM" an di, nut
Ban hang POS chi con bieu tuong (chu bi thu font-size:0 - xem ben
duoi), ten nguoi dung thay bang mot bieu tuong tron. Do la ba thu
chiem cho nhat ma o dien thoai deu doan duoc ma khong can chu.
--------------------------------------------------------------- */
@media (max-width: 767px) {
/* --- 1. Dai mau: toi han, khong con doan pastel --- */
body[class*="skin-"] .main-header,
body:not(.lockscreen) .main-header {
background: linear-gradient(100deg,
#16307C 0%,
#1D4ED8 48%,
#0E7490 100%) !important;
box-shadow: 0 2px 14px rgba(16, 48, 124, .28);
}
/* --- 2. Gop hai dong lam mot hang --- */
body[class*="skin-"] .main-header,
body:not(.lockscreen) .main-header {
display: flex;
align-items: center;
min-height: 56px;
}
/* Khoi thuong hieu: an het cho trong con lai. min-width:0 la BAT BUOC -
khong co no thi phan tu flex khong chiu co nho hon noi dung, ten dai
se day ca cum nut ra ngoai mep thay vi bi cat bang dau ba cham. */
body[class*="skin-"] .main-header .logo.mh-brand,
body:not(.lockscreen) .main-header .logo.mh-brand {
float: none !important;
width: auto !important;
flex: 1 1 auto;
min-width: 0;
height: 56px;
padding: 0 6px 0 10px;
gap: 8px;
justify-content: flex-start;
text-align: left;
}
body[class*="skin-"] .main-header .logo.mh-brand .mh-brand__img,
body:not(.lockscreen) .main-header .logo.mh-brand .mh-brand__img {
width: 34px; height: 34px; flex-basis: 34px;
}
.main-header .logo.mh-brand .mh-brand__txt { flex: 1 1 auto; min-width: 0; }
body[class*="skin-"] .main-header .logo.mh-brand .mh-brand__name,
body:not(.lockscreen) .main-header .logo.mh-brand .mh-brand__name {
font-size: 13.5px;
letter-spacing: .03em;
}
/* Dong phu "POS SYSTEM": o dien thoai la chu thua - da co ca thanh menu
ben duoi noi day la phan mem gi roi. */
.main-header .logo.mh-brand .mh-brand__sub { display: none; }
/* Cum nut ben phai: giu dung be rong can, khong dan ra ca dong --- */
body[class*="skin-"] .main-header .navbar,
body:not(.lockscreen) .main-header .navbar {
float: none !important;
width: auto !important;
flex: 0 0 auto;
min-height: 56px;
margin: 0 !important;
}
.main-header .navbar-custom-menu {
float: none !important;
display: flex;
align-items: center;
gap: 6px;
padding-right: 8px;
}
/* Cac nut trong cum von dung float (pull-left) + margin cua AdminLTE -
trong mot hang flex thi float khong con nghia gi ma margin thi lam
lech hang, go ca hai. */
.main-header .navbar-custom-menu .btn,
.main-header .navbar-custom-menu > .btn {
float: none !important;
margin: 0 !important;
}
.main-header .navbar-custom-menu > .nav.navbar-nav {
display: flex;
align-items: center;
float: none !important;
margin: 0 !important;
}
.main-header .navbar-custom-menu > .nav.navbar-nav > li { float: none !important; }
/* --- 3. Chu ben phai lat sang mau SANG (nen da toi) --- */
body:not(.lockscreen) .main-header .navbar .nav > li > a { color: #EAF3FF !important; }
body:not(.lockscreen) .main-header .navbar .nav > li > a:hover,
body:not(.lockscreen) .main-header .navbar .nav > .open > a {
background: rgba(255, 255, 255, .14) !important;
color: #fff !important;
}
/* Nut Ban hang POS -> chi con bieu tuong.
Chu nam trong the lan voi bieu tuong, khong co the rieng de
an. Meo: thu chu cua ca the xuong 0 roi tra lai co chu cho rieng the
ben trong - chu "POS Sale" va dau cach bien mat, bieu tuong o
lai. Van giu thuoc tinh title nen cham giu van hien ten. */
.main-header .navbar-custom-menu .pos_sale {
width: 38px;
height: 38px;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.main-header .navbar-custom-menu .pos_sale > strong { font-size: 0; }
.main-header .navbar-custom-menu .pos_sale > strong > i { font-size: 17px; }
/* Chuong don khach dat: bo bot le cho vua hang 56px. Bieu tuong doi tu
do tham sang do CAM SANG - do tham chim vao nen navy. */
.mh-chuong-don > a { padding: 0 13px 0 9px !important; line-height: 56px; }
.mh-chuong-don > a > i { font-size: 20px; color: #FF8A75 !important; }
.mh-chuong-don > a:hover > i { color: #fff !important; }
/* Huy hieu so phai NAM HAN TREN GOC chuong chu khong de len than chuong.
Hang cao 56px, chuong 20px nen canh tren cua no o khoang y=18; de huy
hieu o top:7px thi day no vua cham goc tren ben phai cua chuong -
nhin ra "co 3 don moi" chu khong ra "mot cuc trang che mat cai chuong"
nhu ban dau. Le phai cua the noi rong them 4px de huy hieu co cho
nho ra ngoai. */
.mh-chuong-don > a > .mh-chuong-don__so.label,
body:not(.lockscreen) .navbar .mh-chuong-don .mh-chuong-don__so,
body[class*="skin-"] .navbar .mh-chuong-don .mh-chuong-don__so {
top: 7px;
right: 2px;
font-size: 11px;
min-width: 16px;
padding: 0 4px;
box-shadow: 0 1px 4px rgba(6, 24, 64, .55);
}
/* Ten nguoi dung -> mot bieu tuong tron. Ten day du chiem toi mot phan
ba be ngang ma o dien thoai thi ai cung biet minh la ai. */
.main-header .navbar .user-menu > a { padding: 0 6px !important; line-height: 56px; }
.main-header .navbar .user-menu > a > span { display: none; }
.main-header .navbar .user-menu > a > .mh-user-ico { display: inline-block; }
.main-header .navbar .user-menu > a > .user-image { margin: 0; float: none; }
/* --- BAM VAO BIEU TUONG NGUOI DUNG -> menu Profile / Sign out -------
LOI DA SUA 2026-08-14: bam vao la menu bung ra THOC HAN RA NGOAI
MEP PHAI man hinh - anh dai dien, ten nguoi dung va ca nut Sign out
deu bi cat cut. Do lai o man hinh rong 504px: menu bat dau o x=386
va rong 160px, tuc la mep phai cua no o 546 - thua ra 42px.
VI SAO: AdminLTE co san luat neo menu nay vao mep phai
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu
{ position:absolute; right:5%; left:auto }
nhung do lai thi menu van ra `left:0` va rong dung 160px (tuc la
min-width mac dinh cua Bootstrap, khong phai 280px cua AdminLTE) -
nghia la ca cum luat do KHONG an. Khong tim ra vi sao trong mo bong
bong CSS cua AdminLTE, va cung khong can tim: dua vao mot luat da
chung minh la khong chay thi lan sau no hong lai.
CACH LAM: tu neo lay, khong phu thuoc gi vao AdminLTE.
1. Ep chinh the