:root{--foreground-rgb:0,0,0;--background-start-rgb:214,219,220;--background-end-rgb:255,255,255}@media (prefers-color-scheme:dark){:root{--foreground-rgb:255,255,255;--background-start-rgb:0,0,0;--background-end-rgb:0,0,0}}@page{size:A5 lanscape;margin:0}body,html{margin:0;padding:0;font-family:Times New Roman,Times,serif;font-size:14px;background-color:#ddd}.item{width:210mm;display:flex;margin:8px;flex:0 0 auto}.item>.col{flex:1;position:relative;margin:8px;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:all .3s cubic-bezier(.25,.8,.25,1)}.item>.col:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none;transition:all .3s ease-in-out}.item>.col:hover{box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}.item>.col:hover:before{background-color:hsla(0,0%,100%,.6)}.item>.col>.btn-copy{position:absolute;bottom:50%;left:50%;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;z-index:2500;transform:translate(-50%,-50%)}.item>.col:hover>.btn-copy{opacity:1;pointer-events:all}.header h4{margin:0;font-size:14px}.page{flex:1;padding:16px;display:flex;min-height:148mm;flex-direction:column;position:relative}.page:before{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px solid #000}.page.smart-kids{border-top:4px solid #4caf50}.page.nangmai{border-top:4px solid #ab003c}.row{display:flex}.label{flex:1}.table{margin-bottom:2px}.table>.row{padding:4px 0}.row.total{border-bottom:1px dashed #000;padding-bottom:8px}.wrapper{padding-left:240px}.sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;background-color:#fff}.sidebar>a{color:#000;padding:8px;align-items:center;flex:0 0 auto;display:block;text-decoration:none;border-bottom:1px dashed #ccc}.sidebar>a:hover{background-color:#e0e0e0;cursor:pointer}.sidebar>a>p{margin:0}.sidebar>a>p.price{text-align:right;margin-top:8px}.sidebar>a>p.price>span{display:inline-block;font-weight:600;background-color:#e0e0e0;padding:4px 8px;border-radius:20px;font-size:12px}.note{font-size:14px;margin-top:0;margin-bottom:4px}.print-btn{position:fixed;top:1rem;right:1rem;z-index:1000;background-color:#2196f3;border-width:0;font-size:14px;padding:8px 16px;border-radius:4px;color:#fff;text-transform:uppercase;transition:box-shadow .2s ease-in}.print-btn:hover{box-shadow:0 0 12px rgba(0,0,0,.4);cursor:pointer}.signature{display:flex;min-height:100px}.signature .o{flex:1;font-weight:600;text-align:center}.print-preview{position:fixed;top:0;left:0;background-color:#fff;opacity:0;display:inline-block;pointer-events:none;width:210mm;overflow:scroll;z-index:12000}.table-print{border-width:0;border-collapse:collapse}.table-print,.table-print tr{padding:0;page-break-inside:avoid}.table-print tr{page-break-after:always;height:148mm}.table-print td{padding:0;margin:0;border-width:0;vertical-align:top;width:50%;height:inherit;position:relative}.page-print{margin:4mm;padding:2mm;display:flex;flex:0 0 auto;flex-direction:column;border:1px solid #000;height:calc(100% - 12mm - 2px);overflow:hidden}@media print{.print-preview{opacity:1}.page-print .s-total{border-top:1px dashed #000;margin-top:10px;padding-top:10px}}.page-print>*{margin:0}.page-print .row{margin-bottom:8px}.page-title{text-align:center}.holder-item{transition:background-color .4s ease}.btn-copy{flex:0 0 auto}.wrap{position:static}@media (max-width:801px){.print-btn{display:none}.wrapper{padding-left:0;width:100vw;scroll-behavior:smooth}.wrapper .wrap{display:inline-block;width:100%;position:relative}.sidebar{display:none}.holder-item{width:100%;overflow:auto}}.check-header{position:sticky;top:8px;margin:16px;background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,.2);padding:8px 16px;display:flex;align-items:center;border-radius:8px}.check-header>h5{flex:1;font-weight:600;text-transform:uppercase;font-size:16px;margin:0}.check-header>button{background-color:#2196f3;padding:16px;border-radius:8px;border-width:0;color:#fff;font-weight:600}.table{border-collapse:collapse}.table td,.table th{padding:8px}.table td.no{text-align:right}.table thead>tr{background-color:#e0e0e0}.table tbody>tr:hover{background-color:rgba(112,255,245,.2);cursor:pointer}