/* Customer portal: scoped so staff screens retain their independent layout. */
.front-body{background:#fcfaf8;color:#332e2a;font-size:14px;line-height:1.65}
.front-body .container{max-width:1220px}.front-main{padding-top:40px;padding-bottom:70px;min-height:65vh}.front-body .eyebrow{font-size:10px;letter-spacing:.15em;color:#8f7d71}.front-body .btn{font-size:13px;font-weight:600;padding:12px 19px;border-radius:10px;min-height:44px}.front-body .btn-lg{padding:16px 24px;font-size:14px}.front-body .btn-sm{font-size:12px;padding:8px 13px}.front-body .btn-primary{background:#c0570c;border-color:#c0570c;box-shadow:0 5px 12px #c0570c15}.front-body .btn-primary:hover{background:#c0570c;border-color:#c0570c}.front-body a:focus-visible,.front-body summary:focus-visible,.front-body button:focus-visible{outline:3px solid #eebd86;outline-offset:4px}.front-body .card{border:1px solid #efe9e2;border-radius:18px;box-shadow:0 5px 20px #48403b03}.front-body .form-control,.front-body .form-select{font-size:13px;min-height:46px;border-radius:9px;border-color:#ede5dc;background-color:#fff}.front-body .form-label{font-size:12px;font-weight:600;color:#64584f}.front-body .alert{border-radius:12px;font-size:13px}.front-body .text-secondary{color:#917f72!important}.front-body .small,.front-body small{font-size:12px}.front-body h1,.front-body h2,.front-body h3{line-height:1.4;letter-spacing:-.025em}.front-body input[type=file]::file-selector-button{height:46px;background:#fdf6ef;color:#c0570c;border:0;margin-top:-6px;margin-bottom:-6px;margin-right:14px;font-weight:600}.front-header{background:#ffffffed;border-bottom:1px solid #f1ebe4}.front-nav-wrap{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:28px}.front-brand{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-.04em;font-weight:800;color:#37312d;white-space:nowrap}.front-brand b{color:#c0570c}.front-brand small{display:block;font-size:7px;letter-spacing:.22em;color:#9c8c80;font-weight:600;margin-top:2px}.front-brand-mark{display:grid;place-items:center;width:39px;height:43px;border-radius:12px;background:#c0570c;color:white;font-size:16px;letter-spacing:0}.front-nav{display:flex;align-items:center;gap:25px}.front-nav>a:not(.btn){color:#8d7b6f;font-size:12px;padding:12px 0;white-space:nowrap}.front-nav>a.active:not(.btn){color:#c0570c;font-weight:700}.front-user{border-left:1px solid #eee8e1;padding-left:18px;display:flex;gap:12px;align-items:center}.front-user>span{max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#8e7c6f}.front-user form{margin:0}.front-menu-button{display:none}.front-footer{background:#fff;border-top:1px solid #f0e9e2;padding:35px 0 22px}.front-footer-top{display:flex;justify-content:space-between;gap:24px;padding-bottom:25px}.front-footer-top p{font-size:12px;color:#9c8d82;margin:8px 0 0}.front-footer-top nav{display:flex;align-items:center;gap:24px}.front-footer-top nav a{color:#87766a;font-size:12px}.front-footer-bottom{border-top:1px solid #f6f2ed;padding-top:18px;display:flex;justify-content:space-between;gap:12px;color:#a6978d;font-size:10px}.front-hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:20px;min-height:530px;padding:10px 0 40px}.front-kicker{font-size:10px;letter-spacing:.16em;font-weight:650;color:#8a796d;display:inline-flex;align-items:center;gap:9px}.front-kicker>span{width:7px;height:7px;border-radius:50%;background:#c0570c}.front-hero h1{font-size:clamp(38px,4.7vw,64px);font-weight:750;line-height:1.3;margin:23px 0}.front-accent{color:#c0570c}.front-hero-copy>p{font-size:15px;line-height:1.9;color:#96867a;margin-bottom:28px}.front-hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}.front-text-link{font-size:12px;color:#6f6157;font-weight:600}.front-hero-tags{display:flex;gap:15px;flex-wrap:wrap;margin-top:28px;color:#9d8e83;font-size:10px}.front-hero-tags span:before{content:'✓';color:#c0570c;margin-right:6px}.front-hero-art{background:radial-gradient(ellipse at 55% 40%,#fff 0,#fbf5ee 60%,#f9f0e6);border-radius:32px;border:1px solid #f3eae0;position:relative;padding:25px 15px 15px;overflow:hidden}.front-hero-art svg{display:block;width:100%;height:auto}.art-coordinate{font-size:9px;letter-spacing:.14em;color:#a29388;display:flex;justify-content:space-between;padding:0 12px}.front-art-caption{display:flex;gap:8px;align-items:center;justify-content:center;color:#98887c;font-size:10px;padding:0 0 5px}.front-dot{width:6px;height:6px;border-radius:50%;background:#c0570c}.front-service-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:26px 0;border-top:1px solid #f1e9e0;border-bottom:1px solid #f1e9e0}.front-service-strip>div{padding:0 28px;border-right:1px solid #f1e9e0}.front-service-strip>div:first-child{padding-left:0}.front-service-strip>div:last-child{border:0}.front-service-strip strong{display:block;font-size:14px;margin-bottom:4px}.front-service-strip span{font-size:12px;color:#9c8d82}.front-section{padding-top:70px;scroll-margin-top:20px}.front-section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}.front-section-heading h2{font-size:27px;margin:8px 0 0;font-weight:700}.front-section-heading>p{font-size:12px;color:#a09187;margin:0}.front-step-grid,.front-material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.front-step-card{background:#fff;border:1px solid #f1e9e0;padding:28px;border-radius:16px}.front-step-card>span{width:40px;height:40px;border-radius:12px;background:#fdf6ef;display:grid;place-items:center;font-size:12px;color:#c0570c;font-weight:600;margin-bottom:25px}.front-step-card h3,.front-material h3{font-size:17px;margin:0 0 12px;font-weight:650}.front-step-card p,.front-material p{font-size:12px;color:#99897d;line-height:1.9;margin:0}.front-material{padding:25px;border-radius:18px;background:#faf4ee;position:relative;overflow:hidden}.front-material.functional{background:#eaf2f0}.front-material.flexible{background:#f4eff9}.front-material-code{font-size:10px;border-radius:5px;background:#ffffffb8;padding:4px 9px;display:inline-block;margin-bottom:12px;color:#89786b;font-weight:700}.material-object{height:125px;position:relative;margin-bottom:18px}.material-object span{position:absolute;width:100px;height:50px;left:calc(50% - 50px);top:25px;background:linear-gradient(140deg,#f1ca9d,#c0570c);border:1px solid #f5d9b8;border-radius:12px;transform:rotate(-25deg) skew(22deg);box-shadow:8px 10px 14px #b0500b1a}.material-object span:nth-child(2){top:40px}.material-object span:nth-child(3){top:55px}.functional .material-object span{background:linear-gradient(140deg,#a8c7bf,#699e8d);border-color:#bcd8cf}.flexible .material-object span{background:linear-gradient(140deg,#e4ccb0,#937bb8);border-color:#ecdbc8}.front-bottom-cta{margin-top:65px;padding:40px;background:#36302c;border-radius:22px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px}.front-bottom-cta .eyebrow{color:#c0570c}.front-bottom-cta h2{font-size:27px;margin:10px 0}.front-bottom-cta p{color:#d3bfa8;font-size:12px;margin:0}.front-page-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:30px}.front-page-heading h1{font-size:32px;font-weight:700;margin:8px 0}.front-page-heading p{margin:0;color:#9c8c81;font-size:13px}.front-process{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}.front-process>span{font-size:11px;padding:8px 14px;background:#faf5ef;border-radius:8px;color:#917f73}.front-process>span.current{background:#fcf3e8;color:#c0570c;font-weight:600}.front-body .preview-panel{padding:24px!important}.front-body .preview-panel .viewer{height:460px;background:#f7f2ed}.front-body .preview-panel .eyebrow{font-size:9px}.front-body .preview-panel h2{font-size:18px}.front-upload{border:1px dashed #e9d8c4;background:#fdfaf6;border-radius:12px;padding:17px;display:flex;flex-direction:column}.front-body .price-box{padding:22px!important;background:#fdf6ef;border:1px solid #fbeee0;color:#c0570c}.front-body .price-box #price{font-size:38px;margin:6px 0}.front-body #scale-fields{background:#fcf9f5!important;padding:18px!important;border:1px solid #f4ede6}.front-body .price-box details>summary{font-size:11px;margin-top:15px;cursor:pointer;color:#958579}.front-body #breakdown{line-height:1.9}.front-body #message:empty{display:none}.front-body #message{scroll-margin-top:20px}.front-body .color-choice{min-height:44px;font-size:12px}.front-body .color-chip{width:20px;height:20px}.front-help-note{font-size:11px;color:#9c8d82;text-align:center;margin:12px 0 0}.front-auth{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;margin:15px auto;border:1px solid #f0e8df;border-radius:24px;overflow:hidden;background:white;min-height:540px}.front-auth-story{background:#39332e;color:white;padding:55px 45px;display:flex;flex-direction:column}.front-auth-story .front-kicker{color:#d2bba1;font-size:9px}.front-auth-story h2{font-size:44px;margin:28px 0 20px}.front-auth-story h2 span{color:#f1c99b}.front-auth-story p{color:#d2bfa9;font-size:13px;line-height:1.9}.front-auth-story ol{padding-left:20px;color:#e7d8c6;font-size:12px;line-height:2.5;margin:18px 0 35px}.front-auth-story a{color:#e3cdb3;font-size:12px;margin-top:auto}.front-auth-form{padding:50px 45px}.front-auth-form h1{font-size:28px;font-weight:700;margin:12px 0}.front-auth-form>p{font-size:12px;margin-bottom:28px}.front-password{position:relative}.front-password input{padding-right:70px}.front-password button{position:absolute;top:0;bottom:0;right:3px;background:none;border:0;color:#867569;font-size:11px;padding:0 16px}.front-order-list{display:grid;gap:18px}.front-job-card{background:white;border:1px solid #f1e9e0;border-radius:17px;padding:25px}.front-job-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.front-job-top h2{font-size:14px;margin:0;overflow-wrap:anywhere}.front-job-meta{font-size:11px;color:#a09187;margin-top:6px}.front-job-bottom{display:flex;align-items:end;justify-content:space-between;gap:24px;border-top:1px solid #f5f1ed;margin-top:20px;padding-top:18px}.front-job-bottom>div{min-width:0}.front-job-bottom p{font-size:12px;color:#99897d;margin:0 0 10px}.front-job-bottom strong{font-size:21px}.front-job-bottom small{font-size:10px;margin-left:10px;color:#a7998f}.front-status{font-size:11px;font-weight:600;display:inline-flex;padding:7px 12px;white-space:nowrap;border-radius:7px;background:#f8f3ed;color:#807065}.front-status.awaiting_assessment,.front-status.awaiting_payment{background:#fff1db;color:#94651d}.front-status.awaiting_confirmation{background:#fcf5ec;color:#7454b1}.front-status.preparing,.front-status.printing,.front-status.finishing{background:#fcf5ed;color:#c0570c}.front-status.completed,.front-status.ready_to_ship{background:#e7f4ee;color:#398062}.front-empty{text-align:center;padding:60px 25px;background:#fff;border:1px solid #f0e9e1;border-radius:18px}.front-empty>span{font-size:30px;color:#b2a69e;display:block;margin-bottom:12px}.front-empty h2{font-size:22px}.front-empty p{font-size:13px;color:#a09085}.front-summary-note{font-size:12px;background:#fbf4ed;padding:16px 20px;border:1px solid #f4eadf;border-radius:12px;color:#8e7c70;margin-bottom:24px}.front-back{font-size:12px;display:inline-block;margin-bottom:20px;color:#958477}.front-order-title{overflow-wrap:anywhere;font-size:24px!important}.front-order-summary{border-top:3px solid #c0570c!important}.front-amount{background:#fdf7f1;border-radius:12px;padding:20px;margin:20px 0}.front-amount>span{display:block;font-size:11px;color:#9c8d82}.front-amount strong{display:block;font-size:34px;color:#c0570c;margin-top:4px}.front-timeline{list-style:none;margin:20px 0 0;padding:0 0 0 9px}.front-timeline li{border-left:1px solid #f3e9de;position:relative;padding:0 0 24px 24px}.front-timeline li:before{content:'';position:absolute;width:9px;height:9px;border-radius:50%;left:-5px;top:5px;background:#c0570c;box-shadow:0 0 0 4px #faf6f2}.front-timeline li:last-child{padding-bottom:0}.front-timeline time{display:block;color:#a6978d;font-size:11px}.front-timeline strong{display:block;font-size:13px;margin:4px 0}.front-timeline p{font-size:12px;color:#9a8a7f;margin:0;overflow-wrap:anywhere}.front-progress{list-style:none;display:grid;grid-template-columns:repeat(var(--workflow-steps,8),minmax(0,1fr));gap:4px;padding:20px 10px;background:#fff;border:1px solid #f1e9e0;border-radius:14px;margin:0 0 26px}.front-progress li{text-align:center;position:relative;color:#a3948a}.front-progress li:before{content:'';height:2px;background:#f6f0e9;position:absolute;top:16px;left:0;right:0}.front-progress li:first-child:before{left:50%}.front-progress li:last-child:before{right:50%}.front-progress span{position:relative;display:grid;place-items:center;width:33px;height:33px;background:#f9f3ed;border:3px solid white;border-radius:50%;margin:0 auto 8px;font-size:11px}.front-progress small{font-size:10px}.front-progress li.current{color:#c0570c;font-weight:650}.front-progress li.current span{background:#c0570c;color:#fff}.front-progress li.done span{background:#e1f0ea;color:#407e64}.front-payment-steps{display:grid;gap:10px;margin-bottom:25px;padding:0;list-style:none}.front-payment-steps li{font-size:12px;color:#918074;display:flex;align-items:center;gap:12px}.front-payment-steps b{width:28px;height:28px;display:grid;place-items:center;background:#fcf5ed;color:#c0570c;border-radius:8px;font-size:11px}.front-slip-upload{border:1px dashed #e8d7c4;background:#fdf9f5;border-radius:12px;padding:16px}.front-body #order-viewer{height:400px}.front-body #order-viewer:empty{height:120px;display:grid;place-items:center}.front-body #order-viewer:empty:before{content:'กดดูโมเดลด้านบนเพื่อเปิดตัวอย่าง 3D';font-size:12px;color:#a3948a}.front-body .front-order-details .file-preview{width:100%}
@media(min-width:992px){.front-body .preview-panel{top:20px}.front-order-summary{position:sticky;top:20px}}
@media(max-width:1199px){.front-nav{gap:15px}.front-user>span{display:none}.front-body .container{padding-left:24px;padding-right:24px}}
@media(max-width:991px){.front-nav-wrap{flex-wrap:wrap;gap:0;padding-top:18px;padding-bottom:18px;min-height:80px}.front-menu-button:not([hidden]){display:inline-flex;gap:10px;align-items:center}.front-nav{width:100%;display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:20px}.front-nav.js-ready:not(.is-open){display:none}.front-user{padding-left:0;border:0}.front-hero h1{font-size:43px}.front-hero{min-height:440px}.front-hero-tags{gap:10px}.front-auth-story,.front-auth-form{padding:35px}.front-step-card{padding:22px}.front-step-card h3{font-size:15px}.front-user{margin-left:auto}.front-body .preview-panel .viewer{height:430px}}
@media(max-width:767px){.front-body .container{padding-left:18px;padding-right:18px}.front-main{padding-top:24px;padding-bottom:40px}.front-brand{font-size:18px}.front-nav{align-items:stretch;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}.front-nav>a:not(.btn){padding:10px 6px}.front-user{grid-column:1/-1;justify-content:space-between;width:100%;border-top:1px solid #f3ece3;padding-top:12px;margin-top:8px}.front-user>span{display:block;max-width:170px}.front-hero{grid-template-columns:1fr;padding:8px 0 28px;gap:28px}.front-hero h1{font-size:43px;margin:20px 0}.front-hero-copy>p{font-size:13px}.front-hero-actions{gap:16px}.front-hero .btn-lg{font-size:13px;padding:14px 19px}.front-hero-tags{font-size:9px;gap:12px;margin-top:22px}.front-hero-art{max-width:440px;width:100%;margin:auto;border-radius:23px}.front-hero-art svg{max-height:320px}.front-service-strip{gap:16px;grid-template-columns:1fr;padding:22px 0}.front-service-strip>div{padding:0;border:0;display:flex;justify-content:space-between;gap:10px}.front-service-strip strong{font-size:12px;margin:0}.front-service-strip span{font-size:10px}.front-section{padding-top:40px}.front-section-heading{display:block;margin-bottom:20px}.front-section-heading h2{font-size:23px}.front-section-heading>p,.front-section-heading>a{display:block;margin-top:12px}.front-step-grid,.front-material-grid{grid-template-columns:1fr;gap:14px}.front-step-card{padding:23px}.front-step-card>span{float:left;margin:0 18px 32px 0}.front-step-card h3{font-size:16px}.front-material-grid{grid-template-columns:1fr}.front-material{padding:24px}.material-object{float:right;width:120px;height:120px;margin:0 0 10px 10px}.front-bottom-cta{margin-top:35px;padding:28px;display:block}.front-bottom-cta h2{font-size:24px}.front-bottom-cta .btn{margin-top:22px;width:100%}.front-footer-top{display:block}.front-footer-top nav{margin-top:22px;gap:20px;flex-wrap:wrap}.front-footer-bottom{flex-direction:column;gap:5px}.front-page-heading{display:block;margin-bottom:24px}.front-page-heading h1{font-size:27px}.front-page-heading>.btn{margin-top:15px}.front-process{gap:6px}.front-process>span{padding:7px 9px;font-size:10px}.front-body .card.p-4{padding:20px!important}.front-body .preview-panel .viewer{height:370px}.front-upload{padding:13px}.front-auth{display:flex;flex-direction:column;margin:0;border-radius:18px}.front-auth-story{padding:26px}.front-auth-story h2{font-size:29px;margin:12px 0}.front-auth-story h2 br{display:none}.front-auth-story p{font-size:12px;margin:0}.front-auth-story ol,.front-auth-story>a{display:none}.front-auth-form{padding:28px 24px}.front-auth-form h1{font-size:25px}.front-job-card{padding:20px}.front-job-top{align-items:start;flex-wrap:wrap;gap:10px}.front-job-bottom{display:block}.front-job-bottom>.btn{width:100%;margin-top:16px}.front-job-bottom small{display:block;margin:3px 0 0}.front-progress{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px 4px}.front-progress li:nth-child(4):before{right:50%}.front-progress li:nth-child(5):before{left:50%}.front-order-title{font-size:20px!important}.front-body #order-viewer{height:350px}.front-empty{padding:38px 22px}.front-body .price-box #price{font-size:34px}}
@media(prefers-reduced-motion:reduce){.front-body *{scroll-behavior:auto!important;transition:none!important}}