/* Hoạt hoạ soạn lại trang scan (views/pages/home/_demo.php, assets/js/home/demo.js). Trang giấy luôn nền trắng ở cả chế độ tối vì ảnh tài liệu nền trắng. */
.demo-tabs{display:flex;flex-wrap:wrap;gap:4px 20px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.demo-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 0;font:inherit;font-size:15px;font-weight:500;color:var(--fg-2);cursor:pointer;}
.demo-tab:hover{color:var(--fg);}
.demo-tab[aria-selected="true"]{color:var(--fg);font-weight:600;border-bottom-color:var(--fg);}
.demo-main{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:48px;align-items:start;}
.demo-label{display:flex;align-items:baseline;gap:8px;min-height:24px;margin-bottom:8px;font-size:14px;color:var(--fg);}
.demo-label b{font-weight:600;}
.demo-label small{font-size:12.5px;color:var(--fg-3);}
.demo-page{position:relative;width:100%;aspect-ratio:1075/1521;background:#fff;box-shadow:var(--shadow-lg);border-radius:3px;overflow:hidden;contain:paint;}
.demo-final{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.demo-final--over{position:absolute;inset:0;}
.demo-scan,.demo-words,.demo-tags{position:absolute;inset:0;}
.demo-scan{transform-origin:50% 50%;}
.demo-paper{position:absolute;left:0;width:100%;background-size:100% 100%;background-repeat:no-repeat;}
.demo-crop{position:absolute;background-repeat:no-repeat;transform-origin:0 0;will-change:transform,opacity;}
.demo-words .demo-crop{opacity:0;}
.demo-hl{position:absolute;background:var(--demo-hl,#FFD84D);mix-blend-mode:multiply;transform:scaleX(0);transform-origin:0 50%;}
.demo-bar{position:absolute;left:0;right:0;height:2px;background:var(--blue,#1E3F5C);box-shadow:0 0 0 1px rgba(30,63,92,.12),0 6px 14px rgba(30,63,92,.28);opacity:0;}
.demo-drop{position:absolute;border:1.5px dashed #B3261E;background:rgba(179,38,30,.07);opacity:0;}
.demo-done{position:absolute;outline:1.5px solid var(--blue,#1E3F5C);outline-offset:2px;border-radius:1px;opacity:0;pointer-events:none;}
.demo-chip{position:absolute;left:0;top:0;z-index:3;max-width:92%;padding:2px 7px;border-radius:2px;background:#16202A;color:#fff;font-family:var(--font-mono);font-size:11.5px;line-height:1.5;white-space:nowrap;opacity:0;pointer-events:none;}
.demo-chip--drop{background:#B3261E;}
.demo-chip--done{background:var(--blue,#1E3F5C);}
.demo-steps{list-style:none;margin:32px 0 0;padding:0;}
.demo-steps li{position:relative;padding:14px 0 14px 40px;border-top:1px solid var(--line);color:var(--fg-3);transition:color .2s;}
.demo-steps li:last-child{border-bottom:1px solid var(--line);}
.demo-steps li::before{content:attr(data-n);position:absolute;left:0;top:14px;width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12.5px;line-height:1;background:transparent;transition:background .2s,color .2s,border-color .2s;}
.demo-steps b{display:block;font-size:15.5px;font-weight:600;color:inherit;}
.demo-steps span{display:block;margin-top:2px;font-size:14.5px;line-height:1.55;}
.demo-steps li.on,.demo-steps li.ok{color:var(--fg);}
.demo-steps li.on span,.demo-steps li.ok span{color:var(--fg-2);}
.demo-steps li.on::before{background:var(--hl);color:var(--hl-ink);border-color:var(--hl);}
.demo-steps li.ok::before{background:var(--fg);color:var(--bg-raised);border-color:var(--fg);}
.demo-ctl{margin-top:16px;appearance:none;background:none;border:1px solid var(--line-2);border-radius:var(--r,4px);padding:8px 14px;font:inherit;font-size:14px;font-weight:500;color:var(--fg);cursor:pointer;min-height:40px;}
.demo-ctl:hover{border-color:var(--fg-3);}
.demo-ctl[hidden]{display:none;}
.demo-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--fg-3);}
.demo-note a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
@media(max-width:860px){
  .demo-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px;gap:0 18px;}
  .demo-tabs::-webkit-scrollbar{display:none;}
  .demo-tab{flex:none;white-space:nowrap;min-height:44px;}
  .demo-main{grid-template-columns:minmax(0,1fr);gap:16px;}
  .demo-steps{margin-top:0;}
  .demo--live:not(.demo--end) .demo-steps li:not(.on){display:none;}
  .demo--live.demo--end .demo-steps li:not(:last-child){display:none;}
  .demo--live .demo-steps li.on{border-bottom:1px solid var(--line);}
  .demo-steps li{padding-top:12px;padding-bottom:12px;}
  .demo-steps li::before{top:12px;}
  .demo-chip{font-size:10.5px;padding:1px 5px;}
}

/* điện thoại: nới vùng chạm liên kết trong chú thích tới 44px, không đổi bố cục */
@media (hover:none) and (pointer:coarse){ .demo-note a{display:inline-block;padding:13px 0;margin:-13px 0;} }