/* Jasmine PMS — mockup tĩnh, khung giao diện kiểu Odoo (navbar, control panel, list / form / kanban). */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.5 system-ui,"Segoe UI",Roboto,Arial,sans-serif;color:#212529;background:#f1f2f4}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
/* thanh trên */
.nav{height:54px;background:#875a7b;color:#fff;display:flex;align-items:center;padding:0 14px;gap:2px;position:sticky;top:0;z-index:20}
.brand{font-weight:700;font-size:17px;padding:0 10px 0 2px;white-space:nowrap}
.menu{display:flex;align-items:center;flex:1;min-width:0}
.menu>a,.dd>a{display:block;padding:0 8px;line-height:54px;white-space:nowrap;font-size:14px}
.menu>a:hover,.dd:hover>a{background:rgba(0,0,0,.18)}
.menu>a.on,.dd.on>a{background:rgba(0,0,0,.28);font-weight:600}
.dd{position:relative}
.dd-menu{display:none;position:absolute;top:54px;left:0;background:#fff;color:#212529;min-width:230px;box-shadow:0 6px 18px rgba(0,0,0,.2);border-radius:0 0 4px 4px;padding:6px 0}
.dd:hover .dd-menu{display:block}
.dd-menu a{display:block;padding:9px 18px;font-size:15px}
.dd-menu a:hover{background:#f1f2f4}
.nav-right{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap;flex-shrink:0}
.nav-right .dd-menu{left:auto;right:0;border-radius:0 0 4px 4px}
.nav-right .dd-menu a.on{font-weight:600;color:#875a7b}
.bell{display:inline-block;min-width:24px;text-align:center;background:#dc3545;border-radius:12px;padding:2px 7px;font-weight:700}
/* control panel */
.cp{background:#fff;border-bottom:1px solid #dee2e6;padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cp .crumb{font-size:21px;font-weight:600;display:flex;align-items:center;gap:8px}
.cp .crumb small{font-size:15px;color:#6c757d;font-weight:400}
.cp .crumb .sep{color:#adb5bd;font-weight:400}
.cp .spacer{flex:1}
.search{display:flex;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:5px 10px;min-width:340px;background:#fff;gap:6px}
.search .facet{background:#e7e9ed;border-radius:3px;padding:2px 8px;font-size:14px}
.search .facet b{color:#875a7b}
.search input{border:0;outline:0;flex:1;font:inherit;min-width:90px}
.pager{color:#6c757d;font-size:14px}
.pager b{color:#212529}
.views{display:flex;border:1px solid #ced4da;border-radius:4px;overflow:hidden}
.views span{padding:5px 12px;border-right:1px solid #ced4da;color:#6c757d;font-size:14px}
.views span:last-child{border-right:0}
.views span.on{background:#875a7b;color:#fff}
/* nút */
.btn{display:inline-block;padding:7px 14px;border:1px solid #ced4da;border-radius:4px;background:#fff;font-size:15px;line-height:1.4;white-space:nowrap;cursor:default}
.btn.p{background:#875a7b;border-color:#875a7b;color:#fff;font-weight:600}
.btn.sm{padding:3px 10px;font-size:14px}
.btn.d{color:#dc3545}
.btn.link{border-color:transparent;color:#875a7b}
/* nội dung */
.page{padding:0 0 48px}
.wrap{padding:20px}
.sheet{background:#fff;border:1px solid #dee2e6;max-width:1300px;margin:20px auto;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.sheet .body{padding:12px 28px 24px}
.statusbar{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.statusbar span{padding:8px 16px 8px 26px;background:#f8f9fa;color:#8a94a0;font-size:14px;margin-left:-10px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);white-space:nowrap}
.statusbar span:first-child{margin-left:0;padding-left:16px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.statusbar span.on{background:#875a7b;color:#fff;font-weight:600}
.statusbar span.done{background:#e3e5e8;color:#495057}
.fh{display:flex;align-items:center;gap:8px;padding:8px 20px;background:#fff;border-bottom:1px solid #dee2e6;flex-wrap:wrap}
.sbs{display:flex;justify-content:flex-end;border-bottom:1px solid #dee2e6;flex-wrap:wrap}
.sb{padding:10px 18px;border-left:1px solid #dee2e6;min-width:140px;font-size:14px;color:#6c757d}
.sb b{display:block;font-size:17px;color:#212529}
.tt{font-size:21px;font-weight:600;margin:4px 0}
.tt small{font-size:15px;font-weight:400;color:#6c757d}
h3.sec{font-size:16px;color:#875a7b;font-weight:600;margin:18px 0 8px;text-transform:uppercase;letter-spacing:.3px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 48px}
.cols>*,.wrap>*,.dash2>*,.dash3>*{min-width:0}
.cols.c3{grid-template-columns:1fr 1fr 1fr}
.f{display:grid;grid-template-columns:180px 1fr;gap:4px 14px;align-items:baseline;padding:5px 0}
.f label{color:#495057;font-weight:600}
.f .v{border-bottom:1px solid #e3e5e8;min-height:24px;padding:0 2px}
.f .v.ro{border-bottom-color:transparent}
.tabs{display:flex;border-bottom:1px solid #dee2e6;margin:22px 0 0;gap:2px}
.tabs span{padding:10px 16px;color:#495057;border:1px solid transparent;border-bottom:0;font-weight:600}
.tabs span.on{background:#fff;border-color:#dee2e6;color:#875a7b;margin-bottom:-1px;border-bottom:1px solid #fff}
.tabpane{padding:14px 0 0}
/* bảng danh sách */
table.lv{width:100%;border-collapse:collapse;background:#fff;font-size:15px}
.lv th{background:#f8f9fa;border-bottom:1px solid #dee2e6;text-align:left;padding:10px 12px;font-weight:600;color:#495057;white-space:nowrap;position:sticky;top:54px}
.lv td{border-bottom:1px solid #e9ecef;padding:9px 12px;vertical-align:middle}
.lv tr:hover td{background:#f8f6f8}
.lv tr.sel td{background:#f3eaf1}
.lv .r{text-align:right;font-variant-numeric:tabular-nums}
.lv .c{text-align:center}
.lv td.chk,.lv th.chk{width:32px;text-align:center;color:#adb5bd}
.lv tfoot td{font-weight:600;background:#f8f9fa;border-top:1px solid #dee2e6}
.lv .grp td{background:#eef0f3;font-weight:600;color:#495057}
.sheet table.lv th,.card table.lv th{position:static}
.card table.lv{font-size:14px}
.card .lv th,.card .lv td{padding:7px 10px}
/* nhãn trạng thái */
.bg{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;font-weight:600;background:#e9ecef;color:#495057;white-space:nowrap}
.bg.i{background:#dbe7f5;color:#1f4f82}.bg.s{background:#d9f0e1;color:#1f6b3a}.bg.w{background:#fdebc8;color:#7a4b00}.bg.d{background:#f8d7da;color:#8a1c24}.bg.p{background:#eadfe7;color:#875a7b}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;background:#adb5bd}
.dot.g{background:#2e9e5b}.dot.b{background:#2f6fb4}.dot.y{background:#e3a008}.dot.r{background:#d64545}.dot.k{background:#6c757d}
/* kanban, thẻ */
.kanban{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:20px}
.card{background:#fff;border:1px solid #dee2e6;border-radius:4px;padding:12px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h4{margin:0 0 6px;font-size:16px;font-weight:600}
.card .sub{color:#6c757d;font-size:14px}
.card .big{font-size:32px;font-weight:600;line-height:1.1;margin:4px 0}
.card.gate{border-left:5px solid #875a7b}
.kcol{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:20px;align-items:start}
.kcol h3{margin:0 0 10px;font-size:15px;font-weight:600;color:#495057;display:flex;justify-content:space-between}
.kcol .card{margin-bottom:10px}
.dash{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:20px 20px 0}
.dash.s10{grid-template-columns:repeat(10,1fr);gap:10px}
.dash.s10 .card{padding:10px 12px}
.dash.s10 .big{font-size:28px}
.dash.s10 .sub{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;padding:20px 20px 0}
.dash2{display:grid;grid-template-columns:3fr 2fr;gap:20px;padding:20px}
/* lưới kế hoạch phòng */
.gridwrap{overflow:auto;background:#fff;border:1px solid #dee2e6;margin:20px}
table.plan{border-collapse:collapse;font-size:14px;min-width:1100px}
.plan th,.plan td{border:1px solid #e3e5e8;padding:0;height:36px;white-space:nowrap}
.plan th{background:#f8f9fa;font-weight:600;color:#495057;padding:6px 10px;text-align:center;position:sticky;top:0;height:36px}
.plan th.room,.plan td.room{text-align:left;padding:0 12px;min-width:190px;position:sticky;left:0;background:#fff;z-index:2;font-weight:600}
.plan th.room{z-index:3;background:#f8f9fa}
.plan thead tr:nth-child(2) th{top:36px}
.site .plan th,.site .lv th{position:static}
.plan td{min-width:76px;text-align:center}
.plan td.bk{color:#fff;font-size:13.5px;text-align:left;padding:0 10px;overflow:hidden;text-overflow:ellipsis;max-width:0;font-weight:500}
.plan td.b1{background:#2f6fb4}.plan td.b2{background:#2e9e5b}.plan td.b3{background:#e3a008;color:#212529}.plan td.b4{background:#8e5aa8}.plan td.b5{background:#c45c2a}
.plan td.lock{background:repeating-linear-gradient(135deg,#e9ecef 0 5px,#f8f9fa 5px 10px);color:#6c757d}
.plan td.we{background:#fafafa}
.plan td.alloc{color:#1f4f82;font-size:13px}
.plan .sel th{background:#eadfe7}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{text-align:right}
.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:#6c757d}
.tot{font-weight:600}
hr.sep{border:0;border-top:1px solid #e9ecef;margin:16px 0}
.alert{padding:10px 14px;border-radius:4px;background:#fdebc8;color:#7a4b00;margin:0 0 12px;font-size:15px;font-weight:500}
.alert.i{background:#dbe7f5;color:#1f4f82}
.alert.d{background:#f8d7da;color:#8a1c24}
.alert.s{background:#d9f0e1;color:#1f6b3a}
/* trang thiết lập, menu dọc */
.sidef{background:#fff;border:1px solid #dee2e6;border-radius:4px;padding:6px 0;align-self:start}
.sidef a{display:block;padding:9px 16px;font-size:15px}
.sidef a.on{background:#f3eaf1;color:#714b67;font-weight:600}
/* điện thoại */
.phone{width:390px;border:12px solid #222;border-radius:32px;background:#f1f2f4;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.2);font-size:15px}
.phone .pbar{background:#875a7b;color:#fff;padding:14px 16px;font-weight:600;display:flex;justify-content:space-between;font-size:16px}
.phone .pbody{padding:14px}
.phone .cam{height:220px;background:#111;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#9ab;position:relative}
.phone .cam::before{content:"";position:absolute;inset:40px 70px;border:2px solid #fff;border-radius:6px;opacity:.9}
.phone .bigbtn{display:block;text-align:center;padding:14px;background:#875a7b;color:#fff;border-radius:6px;font-weight:600;margin-top:12px;font-size:16px}
.phone .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e3e5e8}
/* POS */
.pos{display:grid;grid-template-columns:440px 1fr;height:calc(100vh - 54px);background:#e9ecef}
.pos .order{background:#fff;display:flex;flex-direction:column;border-right:1px solid #dee2e6}
.pos .lines{flex:1;overflow:auto}
.pos .line{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #f1f2f4;font-size:15px}
.pos .line small{display:block;color:#6c757d;font-size:13.5px}
.pos .total{padding:12px 14px;border-top:1px solid #dee2e6;font-size:19px;display:flex;justify-content:space-between;font-weight:600}
.pos .pay{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 14px 14px}
.pos .pay .btn{padding:14px;text-align:center;font-weight:600}
.pos .cats{display:flex;gap:8px;padding:12px;flex-wrap:wrap}
.pos .cats span{background:#fff;border:1px solid #dee2e6;padding:7px 14px;border-radius:16px}
.pos .cats span.on{background:#875a7b;color:#fff;border-color:#875a7b}
.pos .products{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:0 12px}
.pos .prod{background:#fff;border:1px solid #dee2e6;border-radius:4px;height:96px;padding:10px;display:flex;flex-direction:column;justify-content:space-between}
.pos .topbar{background:#fff;border-bottom:1px solid #dee2e6;padding:10px 14px;display:flex;gap:10px;align-items:center}
.pos .topbar b{white-space:nowrap}
.floor{position:relative;height:440px;margin:20px;background:#fff;border:1px solid #dee2e6}
.floor .tb{position:absolute;width:80px;height:62px;border:2px solid #adb5bd;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;font-size:14px;font-weight:600}
.floor .tb.rd{border-radius:50%;width:70px;height:70px}
.floor .tb.on{background:#eadfe7;border-color:#875a7b}
.floor .tb.busy{background:#fdebc8;border-color:#e3a008}
.floor .tb small{color:#6c757d;font-weight:400}
/* bảng phòng buồng */
.rooms{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;padding:20px}
.room{background:#fff;border:1px solid #dee2e6;border-top:5px solid #adb5bd;border-radius:4px;padding:10px 12px;min-height:96px}
.room b{font-size:17px;display:block}
.room small{display:block;color:#6c757d;font-size:13.5px}
.room.clean{border-top-color:#2e9e5b}.room.insp{border-top-color:#2f6fb4}.room.dirty{border-top-color:#d64545}.room.doing{border-top-color:#e3a008}.room.ooo{border-top-color:#6c757d;background:repeating-linear-gradient(135deg,#f1f2f4 0 6px,#fff 6px 12px)}
/* trang khách lẻ, cổng đại lý */
.site{background:#fff;min-height:100vh}
.site .top{display:flex;align-items:center;gap:20px;padding:14px 40px;border-bottom:1px solid #e3e5e8;font-size:15px}
.site .top .logo{font-size:22px;font-weight:700;color:#1c5d7a;margin-right:auto}
.site .hero{background:#1c5d7a;color:#fff;padding:48px 40px;font-size:17px}
.site .hero h1{margin:0 0 20px;font-size:34px;font-weight:600}
.site .box{display:flex;gap:10px;background:#fff;color:#212529;padding:12px;border-radius:6px;max-width:980px}
.site .box div{flex:1;border-right:1px solid #e3e5e8;padding:4px 14px}
.site .box div:last-child{border:0}
.site .box small{display:block;color:#6c757d;font-size:13px}
.site .box .btn{align-self:stretch;display:flex;align-items:center;font-size:16px}
.site .wrap{max-width:1320px;margin:0 auto;padding:30px 20px}
@media (max-width:1000px){.cols,.cols.c3,.dash,.dash2,.dash3,.kcol{grid-template-columns:1fr 1fr}.dash.s10{grid-template-columns:repeat(5,1fr)}.pos{grid-template-columns:1fr}.rooms{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.cols,.cols.c3,.dash,.dash2,.kcol{grid-template-columns:1fr}.search{min-width:0;flex:1}.rooms{grid-template-columns:repeat(2,1fr)}}