/* DeJan – Dự toán đồng phục | Toàn bộ scope trong #djdt-app, không rò rỉ ra theme */ #djdt-app{ --djdt-primary:#5C0000; --djdt-red:#D10404; --djdt-dark:#2C1010; --djdt-bg:#faf7f6; --djdt-line:#eadfdc; --djdt-muted:#7d6a66; --djdt-green:#1a7f4e; width:100%;margin:0 auto;color:var(--djdt-dark);line-height:1.6;font-size:16px; } #djdt-app *,#djdt-app *::before,#djdt-app *::after{box-sizing:border-box} #djdt-app .djdt-demo-banner{background:#fff3cd;color:#7a5c00;text-align:center;font-size:14px;padding:8px 12px;border:1px solid #f0e0a0;border-radius:8px;margin-bottom:16px} /* Progress */ #djdt-app .djdt-progress{display:flex;justify-content:center;margin:6px 0 26px;padding:0;list-style:none} #djdt-app .djdt-pstep{display:flex;flex-direction:column;align-items:center;width:150px;position:relative} #djdt-app .djdt-pstep:not(:last-child)::after{content:"";position:absolute;top:19px;left:calc(50% + 20px);width:calc(100% - 40px);height:2px;background:var(--djdt-line)} #djdt-app .djdt-pstep.done:not(:last-child)::after{background:var(--djdt-red)} #djdt-app .djdt-pdot{width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--djdt-line);color:var(--djdt-muted);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;z-index:1;transition:.25s} #djdt-app .djdt-pstep.active .djdt-pdot{border-color:var(--djdt-primary);background:var(--djdt-primary);color:#fff} #djdt-app .djdt-pstep.done .djdt-pdot{border-color:var(--djdt-red);background:var(--djdt-red);color:#fff} #djdt-app .djdt-plabel{font-size:13.5px;margin-top:8px;color:var(--djdt-muted);text-align:center} #djdt-app .djdt-pstep.active .djdt-plabel{color:var(--djdt-primary);font-weight:600} /* Card + step */ #djdt-app .djdt-card{background:#fff;border:1px solid var(--djdt-line);border-radius:14px;padding:34px 32px;box-shadow:0 4px 18px rgba(92,0,0,.06)} #djdt-app .djdt-step{display:none} #djdt-app .djdt-step.on{display:block;animation:djdtFade .3s} @keyframes djdtFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #djdt-app .djdt-step h2{font-size:24px;color:var(--djdt-primary);margin:0 0 4px;font-weight:700} #djdt-app .djdt-sub{color:var(--djdt-muted);font-size:15.5px;margin:0 0 22px} #djdt-app .djdt-seclabel{font-size:14px;font-weight:700;color:var(--djdt-primary);text-transform:uppercase;letter-spacing:.5px;margin:20px 0 10px} /* Option grid */ #djdt-app .djdt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px} #djdt-app .djdt-opt{border:1.5px solid var(--djdt-line);border-radius:12px;padding:16px 12px;text-align:center;cursor:pointer;background:#fff;transition:.15s;user-select:none} #djdt-app .djdt-opt:hover{border-color:#d8bdb8} #djdt-app .djdt-opt.sel{border-color:var(--djdt-primary);background:#faf1f0;box-shadow:0 0 0 1px var(--djdt-primary)} #djdt-app .djdt-opt .ic{font-size:30px;display:block;margin-bottom:6px} #djdt-app .djdt-opt .nm{font-size:15px;font-weight:600;display:block} #djdt-app .djdt-opt .pr{font-size:12.5px;color:var(--djdt-red);margin-top:3px;display:block;min-height:17px} /* Row option */ #djdt-app .djdt-rowopt{border:1.5px solid var(--djdt-line);border-radius:12px;padding:17px 20px;cursor:pointer;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;transition:.15s} #djdt-app .djdt-rowopt:hover{border-color:#d8bdb8} #djdt-app .djdt-rowopt.sel{border-color:var(--djdt-primary);background:#faf1f0;box-shadow:0 0 0 1px var(--djdt-primary)} #djdt-app .djdt-rowopt .t{font-weight:600;font-size:16px} #djdt-app .djdt-rowopt .d{font-size:13.5px;color:var(--djdt-muted);margin-top:3px} #djdt-app .djdt-rowopt .tag{font-size:12px;background:var(--djdt-red);color:#fff;border-radius:20px;padding:2px 9px;font-weight:700;white-space:nowrap} #djdt-app .djdt-rowopt .fee{font-size:13.5px;color:var(--djdt-primary);font-weight:600;white-space:nowrap} /* Quantity */ #djdt-app .djdt-qtywrap{display:flex;align-items:center;gap:14px;margin:6px 0 4px;flex-wrap:wrap} #djdt-app input.djdt-qty{width:150px;padding:12px 14px;border:1.5px solid var(--djdt-line);border-radius:10px;font-size:18px;font-weight:700;color:var(--djdt-primary);text-align:center;background:#fff} #djdt-app input.djdt-qty:focus{outline:none;border-color:var(--djdt-primary)} #djdt-app .djdt-qtyhint{font-size:14px;color:var(--djdt-muted)} #djdt-app .djdt-tierline{font-size:14px;color:var(--djdt-green);font-weight:600;margin-top:8px;min-height:20px} /* Nav + buttons: reset kiểu button của theme trong scope */ #djdt-app .djdt-nav{display:flex;justify-content:space-between;margin-top:24px;gap:10px} #djdt-app button.djdt-btn{border:none;border-radius:10px;padding:14px 32px;font-size:16px;font-weight:700;cursor:pointer;transition:.15s;line-height:1.2;text-transform:none;letter-spacing:0;box-shadow:none;margin:0} #djdt-app .djdt-btn-next{background:var(--djdt-red);color:#fff} #djdt-app .djdt-btn-next:hover{background:var(--djdt-primary);color:#fff} #djdt-app .djdt-btn-back{background:#fff;color:var(--djdt-muted);border:1.5px solid var(--djdt-line)} #djdt-app .djdt-btn-back:hover{color:var(--djdt-primary);border-color:var(--djdt-primary)} #djdt-app .djdt-btn-main{background:var(--djdt-red);color:#fff;width:100%} #djdt-app .djdt-btn-main:hover{background:var(--djdt-primary)} #djdt-app .djdt-err{color:var(--djdt-red);font-size:14px;margin-top:10px;display:none} /* Result */ #djdt-app .djdt-total{background:linear-gradient(135deg,var(--djdt-primary),var(--djdt-dark));border-radius:12px;color:#fff;text-align:center;padding:32px 20px;margin-bottom:18px} #djdt-app .djdt-total .lbl{font-size:14px;opacity:.8;letter-spacing:1px;text-transform:uppercase} #djdt-app .djdt-total .num{font-size:clamp(28px,4vw,44px);font-weight:800;margin:6px 0;color:#ffb3a7} #djdt-app .djdt-total .per{font-size:15px;opacity:.85} #djdt-app .djdt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px} #djdt-app .djdt-stat{background:#faf1f0;border-radius:10px;text-align:center;padding:12px 8px} #djdt-app .djdt-stat .v{font-weight:800;color:var(--djdt-primary);font-size:20px} #djdt-app .djdt-stat .k{font-size:13px;color:var(--djdt-muted);margin-top:2px} #djdt-app table.djdt-detail{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 6px} #djdt-app table.djdt-detail th{text-align:left;color:var(--djdt-muted);font-size:13px;text-transform:uppercase;letter-spacing:.4px;padding:8px 6px;border-bottom:1.5px solid var(--djdt-line);background:none} #djdt-app table.djdt-detail td{padding:9px 6px;border-bottom:1px solid var(--djdt-line)} #djdt-app table.djdt-detail td:last-child,#djdt-app table.djdt-detail th:last-child{text-align:right;white-space:nowrap} #djdt-app .djdt-disclaimer{font-size:13.5px;color:var(--djdt-muted);background:#fdf6f0;border:1px solid #f0dcc8;border-radius:10px;padding:11px 14px;margin:14px 0 20px} #djdt-app .djdt-ctarow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px} #djdt-app a.djdt-cta{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:15px;font-weight:700;font-size:16px;text-decoration:none;transition:.15s} #djdt-app a.djdt-cta-call{background:var(--djdt-primary);color:#fff} #djdt-app a.djdt-cta-zalo{background:#0068ff;color:#fff} #djdt-app a.djdt-cta:hover{opacity:.9;color:#fff} /* Bước chọn mẫu */ #djdt-app .djdt-samplegroup{margin-bottom:18px} #djdt-app .djdt-samplerow{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;max-width:100%;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--djdt-line) transparent} #djdt-app .djdt-samplerow::-webkit-scrollbar{height:6px} #djdt-app .djdt-samplerow::-webkit-scrollbar-thumb{background:var(--djdt-line);border-radius:3px} #djdt-app .djdt-sample{flex:0 0 160px;scroll-snap-align:start;border:1.5px solid var(--djdt-line);border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;position:relative;transition:.15s;user-select:none} #djdt-app .djdt-sample:hover{border-color:#d8bdb8} #djdt-app .djdt-sample.sel{border-color:var(--djdt-primary);box-shadow:0 0 0 1px var(--djdt-primary)} #djdt-app .djdt-sample.sel::after{content:"✓";position:absolute;top:8px;right:8px;background:var(--djdt-red);color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px} #djdt-app .djdt-sample img{width:100%;height:200px;object-fit:cover;display:block} #djdt-app .djdt-sample .noimg{width:100%;height:200px;display:flex;align-items:center;justify-content:center;font-size:38px;background:#faf1f0} #djdt-app .djdt-sample .nm{font-size:13px;padding:8px 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;color:var(--djdt-dark)} #djdt-app .djdt-sample-more{flex:0 0 120px;scroll-snap-align:start;border:1.5px dashed var(--djdt-line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:13.5px;font-weight:700;color:var(--djdt-primary);text-decoration:none;background:#faf7f6;padding:10px;transition:.15s} #djdt-app .djdt-sample-more:hover{border-color:var(--djdt-primary);color:var(--djdt-red)} #djdt-app .djdt-sample-more .ic{font-size:26px} #djdt-app .djdt-swipehint{display:none;font-weight:400;text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--djdt-muted)} #djdt-app .djdt-sample-loading{font-size:14px;color:var(--djdt-muted);padding:14px 4px} #djdt-app .djdt-skipwrap{display:flex;gap:10px} /* Chips mẫu đã chọn ở kết quả */ #djdt-app .djdt-chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px} #djdt-app .djdt-chiplabel{font-size:13.5px;font-weight:700;color:var(--djdt-primary)} #djdt-app .djdt-chip{font-size:13px;background:#faf1f0;border:1px solid var(--djdt-line);border-radius:20px;padding:4px 12px} /* MOQ notice */ #djdt-app .djdt-moq{background:#fdf6f0;border:1.5px solid #f0dcc8;border-radius:12px;padding:24px;font-size:15.5px;text-align:center;margin-bottom:18px} #djdt-app .djdt-moq strong{color:var(--djdt-primary)} /* Lead gate */ #djdt-app .djdt-leadgate{border:1.5px dashed var(--djdt-red);border-radius:12px;padding:26px 24px;background:#fffbfa} #djdt-app .djdt-leadgate h3{color:var(--djdt-primary);font-size:19px;margin:0 0 4px} #djdt-app .djdt-leadgate p{font-size:14.5px;color:var(--djdt-muted);margin:0 0 14px} #djdt-app .djdt-leadgate input{width:100%;padding:13px 15px;border:1.5px solid var(--djdt-line);border-radius:10px;font-size:15.5px;margin-bottom:10px;background:#fff} #djdt-app .djdt-leadgate input:focus{outline:none;border-color:var(--djdt-primary)} #djdt-app .djdt-leadnote{font-size:12.5px;color:var(--djdt-muted);text-align:center;margin-top:8px} #djdt-app .djdt-hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden} #djdt-app .djdt-leadok{display:none;text-align:center;padding:18px 10px} #djdt-app .djdt-leadok .big{font-size:38px} #djdt-app .djdt-leadok h3{color:var(--djdt-green);margin:6px 0 4px} #djdt-app .djdt-leadok p{font-size:13.5px;color:var(--djdt-muted)} #djdt-app .djdt-restart{display:block;text-align:center;margin-top:22px;color:var(--djdt-muted);font-size:14.5px;cursor:pointer;text-decoration:underline;background:none;border:none;width:100%} @media(max-width:560px){ #djdt-app .djdt-pstep{width:auto;flex:1;min-width:0} #djdt-app .djdt-plabel{font-size:10.5px} #djdt-app{font-size:14.5px} #djdt-app .djdt-card{padding:16px 12px} #djdt-app .djdt-ctarow{grid-template-columns:1fr} /* Lưới chọn gọn 2 cột — hết cảnh mỗi ô 1 hàng phải cuộn dài */ #djdt-app .djdt-grid{grid-template-columns:repeat(2,1fr);gap:8px} #djdt-app .djdt-opt{padding:9px 6px;border-radius:9px} #djdt-app .djdt-opt .ic{font-size:17px;margin-bottom:2px} #djdt-app .djdt-opt .nm{font-size:12.5px;line-height:1.3} #djdt-app .djdt-opt .pr{font-size:10.5px;min-height:13px} #djdt-app .djdt-rowopt{padding:11px 12px} #djdt-app .djdt-rowopt .t{font-size:13.5px} #djdt-app .djdt-rowopt .d{font-size:11.5px} #djdt-app .djdt-seclabel{margin:14px 0 8px} #djdt-app .djdt-step h2{font-size:17px} #djdt-app .djdt-sub{font-size:13px;margin-bottom:12px} /* Nút điều hướng dính đáy màn hình khi cuộn — luôn thấy bước tiếp theo. bottom chừa chỗ cho thanh liên hệ cố định (Zalo/Gọi ngay) của theme. */ #djdt-app .djdt-nav{position:sticky;bottom:72px;z-index:5;background:#fff;padding:10px 0 6px;margin-top:16px;border-top:1px solid var(--djdt-line)} #djdt-app .djdt-nav .djdt-btn-next{flex:1} #djdt-app button.djdt-btn{padding:13px 14px;font-size:14px} #djdt-app .djdt-sample{flex-basis:130px} #djdt-app .djdt-sample img,#djdt-app .djdt-sample .noimg{height:160px} /* Kết quả trên mobile: gọn lại, bảng không tràn ngang */ #djdt-app .djdt-total{padding:20px 14px} #djdt-app .djdt-total .num{font-size:25px} #djdt-app .djdt-total .per{font-size:12.5px} #djdt-app .djdt-total .lbl{font-size:12px} #djdt-app .djdt-stats{gap:8px} #djdt-app .djdt-stat{padding:10px 4px;display:flex;flex-direction:column;justify-content:center} #djdt-app .djdt-stat .v{font-size:15px;line-height:1.25} #djdt-app .djdt-stat .k{font-size:10.5px} #djdt-app table.djdt-detail{font-size:12.5px} #djdt-app table.djdt-detail th{font-size:10.5px;letter-spacing:.2px;padding:6px 4px} #djdt-app table.djdt-detail td{padding:8px 4px} #djdt-app table.djdt-detail td:last-child,#djdt-app table.djdt-detail th:last-child{white-space:normal} #djdt-app .djdt-chiplabel{font-size:12.5px} #djdt-app .djdt-chip{font-size:12px;padding:3px 10px} #djdt-app .djdt-disclaimer{font-size:12px;padding:10px 12px} #djdt-app a.djdt-cta{padding:13px;font-size:14.5px} #djdt-app .djdt-leadgate{padding:18px 14px} #djdt-app .djdt-leadgate h3{font-size:16.5px} #djdt-app .djdt-leadgate p{font-size:13px} /* iOS zoom vào input khi font <16px — giữ đúng 16px */ #djdt-app .djdt-leadgate input{font-size:16px;padding:12px 13px} #djdt-app .djdt-sample-more{flex-basis:104px} #djdt-app .djdt-swipehint{display:inline} /* Bước chọn mẫu: Bỏ qua + Tiếp theo chung 1 hàng to, Quay lại thành link nhỏ hàng dưới */ #djdt-app [data-step="samples"] .djdt-nav{flex-wrap:wrap} #djdt-app .djdt-skipwrap{display:flex;flex:1 1 100%;gap:8px;order:1} #djdt-app .djdt-skipwrap .djdt-btn-back{flex:1} #djdt-app .djdt-skipwrap .djdt-btn-next{flex:1.4} #djdt-app [data-step="samples"] [data-act="samples-back"]{order:2;flex:1 1 100%;background:none;border:none;color:var(--djdt-muted);text-decoration:underline;padding:8px;font-weight:400;font-size:13.5px} }