:root{--g:#0b3d22;--l:#91a58d}*{box-sizing:border-box}body{margin:0;background:#e8ede7;font-family:Manrope;color:#152d1c}.app{display:grid;grid-template-columns:330px 1fr;min-height:100vh}aside{background:#fff;padding:25px;max-height:100vh;overflow:auto}aside>b{color:var(--g);letter-spacing:2px}aside h1{font-size:21px}label{display:block;font-size:11px;font-weight:700;margin:9px 0}input,textarea,select{display:block;width:100%;padding:7px;margin-top:3px;border:1px solid #d7e0d5;border-radius:5px;font:12px Manrope}.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}button{background:var(--g);color:#fff;border:0;border-radius:5px;padding:8px;font-weight:700;cursor:pointer}.actions{display:flex;gap:8px;margin-top:12px}.actions button{flex:1}.room{padding:8px;border:1px solid #d7e0d5;border-radius:7px;margin-bottom:7px}.room textarea{height:45px}.preview{padding:30px;overflow:auto}#page{width:760px;height:1074px;margin:auto;background:url('assets/a4-background.png') center/100% 100% no-repeat;box-shadow:0 12px 35px #52605255;overflow:hidden}header{height:296px;text-align:center;color:white;text-shadow:0 1px 3px #00180b;padding-top:65px}header h2{font:52px 'DM Serif Display';margin:0}header p{font:21px 'DM Serif Display';margin:2px 0 32px}.doc{padding:12px 68px 0}.doc>h1{text-align:center;color:var(--g);font:38px 'DM Serif Display';letter-spacing:.6px;line-height:1.1;margin:0}.doc>h3{text-align:center;font:700 18px 'DM Serif Display';margin:13px 0 10px}.doc>p{text-align:center;font:12px 'DM Serif Display';margin:0 0 8px}.doc h2{color:var(--g);font:18px 'DM Serif Display';margin:8px 0 4px}.info{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--l);border-radius:8px;overflow:hidden}.info p{margin:0;padding:7px 12px;border-bottom:1px solid #c0cbbd;font:12px 'DM Serif Display'}.info p:nth-child(odd){border-right:1px solid var(--l)}.info p:nth-last-child(-n+2){border-bottom:0}.info b{color:var(--g);margin-left:6px}.info span{float:right}table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--l);border-radius:8px;overflow:hidden;font:10px 'DM Serif Display'}th{background:var(--g);color:#fff;padding:6px 2px;font-weight:400}td{padding:5px;text-align:center;vertical-align:top;border-top:1px solid var(--l);border-right:1px solid var(--l);white-space:pre-line}td:nth-child(3),td:nth-child(4){text-align:left}.summary{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--l);border-radius:8px;margin-top:6px;padding:8px 14px;font:12px 'DM Serif Display'}.summary b{color:var(--g)}.summary strong,.summary span{margin-left:15px}.terms{display:grid;grid-template-columns:38% 62%;border:1px solid var(--l);border-radius:8px;overflow:hidden;font:12px 'DM Serif Display'}.terms>*{margin:0;padding:8px 12px;border-bottom:1px solid var(--l)}.terms b{color:var(--g);border-right:1px solid var(--l)}.terms p:nth-last-child(-n+2){border-bottom:0;white-space:pre-line}footer{text-align:center;padding:8px;font-family:'DM Serif Display'}footer b{color:var(--g);font-size:17px}footer p{font-size:11px;margin:2px}footer em{font-size:20px;color:#286440}@media(max-width:900px){.app{grid-template-columns:1fr}aside{max-height:none}.preview{padding:15px;overflow:hidden}#page{transform-origin:top left;transform:scale(calc((100vw - 30px)/760));margin-bottom:calc(1074px * ((100vw - 30px)/760 - 1))}}
footer{position:absolute;left:66px;right:66px;bottom:9px;text-align:center;padding:0}footer img{display:block;width:100%;height:auto}footer b,footer p,footer em{display:none}
#page{position:relative}#page>footer{position:static;left:auto;right:auto;bottom:auto;width:560px;margin:8px auto 0;padding:0}#page>footer img{width:100%;height:auto}.room{position:relative}.delete-room{float:right;background:#f4ece8;color:#994236;border:1px solid #dbb9b3;padding:4px 6px;font-size:10px}
#page>footer{position:absolute;left:92px;right:92px;bottom:12px;width:auto;margin:0}header{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}header h2,header p,header small{width:100%;text-align:center}.summary{grid-template-columns:1fr 1.45fr 2.2fr 2.45fr 1fr 1.2fr 1.45fr 1.25fr;padding:0}.summary b,.summary strong,.summary span{margin:0;padding:6px 8px}.summary b:nth-child(1),.summary b:nth-child(3){grid-column:1/7}.summary strong,.summary span{grid-column:7}.summary strong{font-weight:700}.terms p span{display:block}
#page>footer{left:50%;right:auto;width:432px;transform:translateX(-50%);bottom:12px}.room-title,aside h3{display:flex;align-items:center;justify-content:space-between}.room-title button,aside h3 #add{margin-left:auto;background:var(--g);font-size:10px;padding:4px 7px}.actions #png{background:#e98228}.actions #pdf{background:#bf3c36}
header{height:364px;padding-top:105px}
.doc>h1{font-size:30px}
.doc>h1{font-family:"Inter Variable",Inter,Arial,sans-serif;font-weight:800;padding-top:10px}
aside{max-height:none;overflow:visible;align-self:start}
@media(max-width:600px){body{background:#fff}.app{display:block}.editor,aside{padding:18px 14px;max-width:100%;overflow:visible}.editor h1,aside h1{font-size:20px;margin:16px 0}label{font-size:12px;margin:11px 0}input,textarea,select{font-size:16px;min-height:42px;padding:9px}.two{gap:8px}.room{padding:10px}.room textarea{height:62px}.actions{position:sticky;bottom:0;background:#fff;padding:10px 0;margin:8px -2px 0;z-index:3}.actions button{min-height:44px;font-size:13px}.preview{padding:16px 0 20px;background:#edf1eb;overflow:hidden}.preview:before{content:'Xem trước phiếu';display:block;padding:0 16px 9px;color:#60705f;font-size:10px;letter-spacing:1.5px;font-weight:800}#page{transform-origin:top left;transform:scale(calc(100vw / 760));margin:0 0 calc(1074px * (100vw / 760 - 1))}.delete-room,.room-title button,aside h3 #add{min-height:30px;font-size:11px}.summary{font-size:10px}}
@media(max-width:600px){.mobile-preview-button{display:block;width:100%;padding:12px;margin:14px 0 0;background:#0b3d22;font-size:13px}.close-preview-button{display:none}.preview-mode{overflow:hidden}.preview-mode aside{display:none}.preview-mode .preview{display:block;position:fixed;z-index:20;inset:0;overflow:auto;padding:52px 8px 16px;background:#edf1eb}.preview-mode .preview:before{display:none}.preview-mode #page{transform:scale(calc((100vw - 16px)/760));margin-bottom:calc(1074px * ((100vw - 16px)/760 - 1))}.preview-mode .close-preview-button{display:block;position:fixed;z-index:22;right:12px;top:10px;padding:8px 12px;background:#b63b35;font-size:12px}.preview-mode .mobile-preview-button{display:none}}
@media(min-width:601px){.mobile-preview-button,.close-preview-button{display:none}}
@media print{body{background:#fff}.app{display:block}.app aside,.preview:before,.close-preview-button{display:none!important}.preview{padding:0!important;background:#fff!important;overflow:visible!important}#page{width:210mm;height:297mm;margin:0;box-shadow:none;transform:none!important}.preview-mode #page{margin:0!important}}
@media(max-width:1024px){.preview{overflow:hidden;touch-action:none}#page{touch-action:none;will-change:transform;transform-origin:top left}.preview-mode .preview{touch-action:none}}