@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import './virtual-rm.css';
@font-face{font-family:Inter;src:url('assets/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
*{box-sizing:border-box}:root{--brand:#f4600c;--brand-50:#feefe7;--brand-300:#f8a06d;--text:#091e42;--secondary:#505f79;--icon:#6b788e;--border:#dee5ef;--canvas:#f7f8f9;--white:#fff;--success:#12b76a;--warning:#f79009;--info:#2e90fa;--shadow:0 1px 4px rgba(29,41,57,.15);--center-shadow:0 0 4px rgba(29,41,57,.15);--soft-shadow:0 0 16px rgba(29,41,57,.06)}html,body{width:100%;height:100%;min-height:100%;overflow:hidden}body{margin:0;color:var(--text);font:400 16px/24px Inter,Arial,sans-serif;letter-spacing:-.32px;background:#f7f8f9 url('assets/business-bg.png') center/cover no-repeat fixed}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select,summary{outline-offset:3px}button{cursor:pointer;color:var(--text)}button:disabled{opacity:.5;cursor:not-allowed}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,p{margin-top:0}.muted{color:var(--secondary)}.green{color:var(--success)!important}.wide{width:100%}.pill{display:inline-flex;padding:6px 10px;color:#c94d08;font-size:11px;font-weight:600;letter-spacing:.5px;border-radius:12px;background:var(--brand-50)}.primary{min-height:44px;margin-top:24px;padding:10px 16px;color:#fff;font-weight:500;border:0;border-radius:8px;background:linear-gradient(324deg,#e45f35,#ffa95a)}.primary:hover{background:var(--brand)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Login - matched to the supplied MSB Business Banking reference. */
.login-page{height:100vh;min-height:512px;display:grid;grid-template-columns:41.67% 58.33%;overflow:auto;background:#fff}.login-visual{min-height:100%;background:#bfe5f2 url('assets/banner_mac_dinh.png') center/cover no-repeat}.login-panel{position:relative;min-width:0;min-height:100%;padding:20px 40px 24px;display:flex;flex-direction:column;background:#fff;box-shadow:none}.login-header{height:32px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.login-logo{width:134px;height:32px;display:block;object-fit:contain;object-position:left;margin:0}.login-header nav{display:flex;align-items:center;gap:38px;padding-top:4px}.login-header nav a{display:flex;align-items:center;gap:9px;color:#091e42;font-size:13px;line-height:18px;white-space:nowrap}.login-header nav rm-icon{width:20px;height:20px;color:#091e42}.login-card.identity-form{width:min(420px,52%);min-width:304px;margin:31px auto auto;padding:0;background:transparent}.login-card.identity-form .login-heading h1{margin:0 0 3px;font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.36px}.login-heading p{margin:0;color:#344563;font-size:13px;line-height:19px}.login-card.identity-form form{margin-top:30px}.login-card.identity-form label{display:block;margin:0 0 5px;color:#091e42;font-size:11px;line-height:15px;font-weight:500}.login-card.identity-form input{width:100%;height:38px;padding:0 10px;color:#091e42;font-size:13px;line-height:18px;border:1px solid #d5dce5;border-radius:6px;outline:0;background:#fff}.login-card.identity-form input:hover{border-color:#a6aebb}.login-card.identity-form input:focus{border-color:#f4600c;box-shadow:0 0 0 2px rgba(244,96,12,.1)}.password-label{margin-top:17px;display:flex;align-items:center;justify-content:space-between}.password-label label{margin:0!important}.password-label a{color:#f4600c;font-size:11px;line-height:15px}.password-input{position:relative}.password-input input{padding-right:38px!important}.password-input button{position:absolute;right:3px;top:3px;width:32px;height:32px;padding:7px;display:grid;place-items:center;color:#7a869a;border:0;background:transparent}.password-input button rm-icon{width:17px;height:17px}.login-submit.primary{height:35px;min-height:35px;margin-top:25px;padding:7px 12px;border-radius:5px;font-size:12px;line-height:18px;font-weight:600;background:linear-gradient(105deg,#ff914c,#ed542f)}.login-submit.primary:hover:not(:disabled){background:#ed542f}.open-account{width:100%;height:38px;margin-top:13px;color:#f4600c;font-size:12px;font-weight:500;border:1px solid #f4600c;border-radius:6px;background:#fff}.open-account:hover{background:#fff8f4}.solution-signup{margin:27px 0 0;color:#172b4d;font-size:11px;line-height:16px;text-align:center}.solution-signup a{color:#2e90fa}.login-card.identity-form .error{margin:9px 0 -13px;padding:7px 9px;color:#b42318;font-size:11px;line-height:15px;border-radius:5px;background:#fef3f2}.floating-support{position:absolute;right:45px;top:64%;width:42px;height:42px;padding:0;display:grid;place-items:center;color:#f4600c;font-size:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(9,30,66,.15)}.floating-support:before{content:'';position:absolute;inset:9px;border:2px solid #f4600c;border-radius:50%}.floating-support span{position:relative;z-index:1;font-size:8px;color:#f4600c}@media(max-width:900px){.login-page{grid-template-columns:36% 64%}.login-panel{padding-inline:28px}.login-card.identity-form{width:min(360px,70%)}.login-header nav{gap:18px}.floating-support{right:24px}}@media(max-width:680px){.login-page{display:block;min-height:100vh}.login-visual{display:none}.login-panel{min-height:100vh;padding:20px 24px 30px}.login-header nav{gap:14px}.login-header nav a{font-size:11px}.login-card.identity-form{width:100%;min-width:0;max-width:360px;margin-top:54px}.floating-support{right:20px;top:auto;bottom:24px}}
/* Business shell */
.app-shell{min-height:100vh}.sidebar{position:fixed;z-index:30;inset:0 auto 0 0;width:82px;display:flex;flex-direction:column;background:rgba(255,255,255,.94);border-right:1px solid rgba(222,229,239,.8);box-shadow:var(--soft-shadow);backdrop-filter:blur(12px);transition:width .2s ease}.nav-expanded .sidebar{width:254px}.sidebar-header{height:68px;min-height:68px;display:flex;align-items:center;position:relative;padding:0 19px;border-bottom:1px solid rgba(222,229,239,.55)}.brand-link{display:flex;align-items:center;min-width:44px;height:40px;overflow:hidden}.brand-link img{width:44px;max-width:none;max-height:30px;object-fit:contain;object-position:left}.nav-expanded .brand-link img{width:142px}.nav-toggle{position:absolute;right:-12px;width:24px;height:24px;padding:0;display:grid;place-items:center;color:var(--icon);border:1px solid var(--border);border-radius:50%;background:#fff;box-shadow:var(--shadow)}.nav-toggle svg{width:16px;height:16px}.navigation-content{flex:1;padding:12px 19px 24px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.nav-item{width:44px;min-height:44px;margin-bottom:8px;padding:9px;display:flex;align-items:center;gap:12px;overflow:hidden;color:var(--text);border:1px solid transparent;border-radius:8px;white-space:nowrap;transition:.15s}.nav-expanded .nav-item{width:216px}.nav-item:hover,.nav-item.active{color:var(--brand);background:var(--brand-50);border-color:var(--brand-300)}.nav-symbol{width:24px;min-width:24px;height:24px;color:var(--icon)}.nav-item:hover .nav-symbol,.nav-item.active .nav-symbol{color:var(--brand)}.nav-text{font-weight:500}.sidebar:not([aria-expanded=true]) .nav-text,.sidebar:not([aria-expanded=true]) .nav-group-label{opacity:0;pointer-events:none}.nav-divider{height:1px;margin:12px 4px 14px;background:var(--border)}.nav-group{margin:0 0 16px}.nav-group-label{margin:0 8px 8px;color:var(--secondary);font-size:11px;font-weight:500;line-height:16px;opacity:.78;white-space:nowrap}.workspace{min-height:100vh;margin-left:82px;transition:margin-left .2s}.nav-expanded .workspace{margin-left:254px}.topbar{height:68px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;position:sticky;z-index:20;top:0;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(222,229,239,.55);backdrop-filter:blur(10px)}.support-button{height:40px;padding:8px;display:flex;align-items:center;gap:8px;color:var(--text);border:0;border-radius:8px;background:transparent}.support-button svg{color:var(--icon)}.support-button:hover,.icon-button:hover{color:var(--brand);background:var(--brand-50)}.top-actions{display:flex;align-items:center;gap:8px}.icon-button{position:relative;width:40px;height:40px;padding:8px;display:grid;place-items:center;color:var(--icon);border:0;border-radius:8px;background:transparent}.notification i{position:absolute;right:7px;top:6px;width:7px;height:7px;border-radius:50%;border:1px solid #fff;background:#f04438}.user-context{position:relative;margin-left:4px}.user-context summary{padding:4px 6px;display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;border-radius:8px}.user-context summary::-webkit-details-marker{display:none}.user-context summary:hover{background:var(--canvas)}.user-context summary>svg{width:16px;height:16px;color:var(--icon)}.avatar{width:36px;height:36px;display:grid;place-items:center;color:var(--brand);font-weight:600;border-radius:50%;background:var(--brand-50)}.user-info b,.user-info small{display:block}.user-info b{font-size:13px;line-height:18px}.user-info small{color:var(--secondary);font-size:11px;line-height:16px}.user-menu{position:absolute;right:0;top:48px;width:250px;padding:12px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(9,30,66,.16)}.user-menu>div{padding:6px 8px 12px;border-bottom:1px solid var(--border)}.user-menu small,.user-menu strong{display:block}.user-menu small{color:var(--secondary)}.user-menu strong{margin-top:3px}.user-menu button{width:100%;margin-top:8px;padding:9px 8px;display:flex;align-items:center;gap:8px;color:#b42318;border:0;border-radius:7px;background:transparent}.user-menu button:hover{background:#fef3f2}.user-menu button svg{width:19px;height:19px}.router-content{min-height:calc(100vh - 68px);padding:16px 24px 32px}
/* Home */
.welcome-container{padding:0 0 20px}.welcome-container p{margin:0;font-size:18px;line-height:26px;font-weight:500}.welcome-container h1{margin:2px 0;font-size:26px;line-height:36px}.welcome-container span{color:var(--secondary);font-weight:500}.home-container{display:grid;grid-template-columns:minmax(0,3fr) minmax(250px,1fr);gap:16px}.home-primary,.home-secondary{min-width:0;display:flex;flex-direction:column;gap:16px}.overview-row{display:grid;grid-template-columns:3fr 2fr;gap:16px}.msb-card{overflow:hidden;background:#fff;border-radius:12px;box-shadow:var(--shadow)}.widget-heading{min-height:64px;padding:12px 16px 8px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--border)}.widget-heading h2,.card-title h2{margin:0;font-size:16px;line-height:24px;font-weight:600}.widget-heading small{display:block;margin-top:2px;color:var(--secondary);font-size:11px}.widget-heading button{padding:5px;color:var(--icon);border:0;background:transparent}.widget-heading button svg{width:20px;height:20px}.asset-overview{min-height:190px;padding:20px 16px;display:grid;grid-template-columns:150px 1fr;align-items:center;gap:20px}.donut{width:126px;height:126px;margin:auto;border-radius:50%;position:relative;background:conic-gradient(#2e90fa 0 75%,#f6b84b 75% 100%)}.donut:after{content:'';position:absolute;inset:21px;border-radius:50%;background:#fff}.asset-balance>span,.credit-summary>span{display:block;color:var(--secondary);font-size:12px}.asset-balance>strong,.credit-summary>strong{display:block;margin:4px 0 18px;font-size:20px;line-height:28px}.asset-balance>strong small,.credit-summary>strong small{font-size:11px;font-weight:400}.asset-balance>div{margin-top:9px;display:grid;grid-template-columns:9px 1fr;gap:1px 7px;font-size:11px}.asset-balance>div i{width:8px;height:8px;margin-top:4px;border-radius:2px}.legend-blue{background:#2e90fa}.legend-gold{background:#f6b84b}.asset-balance>div span{color:var(--secondary)}.asset-balance>div b{grid-column:2;font-size:12px}.credit-summary{padding:24px 16px}.credit-progress{margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}.credit-progress>span,.credit-progress>small{color:var(--secondary);font-size:11px}.credit-progress>b{float:right;font-size:12px}.credit-progress>div{height:7px;margin:8px 0;border-radius:7px;background:#eef1f5}.credit-progress>div i{display:block;width:40%;height:100%;border-radius:7px;background:linear-gradient(90deg,#f4600c,#f8a06d)}.quick-card{padding:8px 16px}.quick-grid{display:flex;align-items:stretch;justify-content:space-around;gap:4px}.quick-grid a,.quick-grid button{min-width:0;flex:1;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text);font-size:12px;line-height:16px;text-align:center;border:0;border-radius:8px;background:transparent}.quick-grid a:hover,.quick-grid button:hover{color:var(--brand);background:var(--brand-50)}.quick-grid svg{width:32px;height:32px;color:var(--brand);stroke-width:1.45}.card-title{min-height:60px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.card-title a{color:var(--brand);font-size:12px;font-weight:500}.request-toolbar{height:48px;padding:0 16px;display:flex;align-items:end;gap:16px;border-bottom:1px solid var(--border)}.request-toolbar button{height:40px;padding:8px 2px;color:var(--secondary);font-size:12px;border:0;border-bottom:2px solid transparent;background:transparent}.request-toolbar button.active{color:var(--brand);font-weight:500;border-bottom-color:var(--brand)}.request-toolbar button b{margin-left:4px;padding:2px 6px;border-radius:9px;background:var(--brand-50)}.request-toolbar>span{flex:1}.request-toolbar .filter-button{display:flex;align-items:center;gap:5px}.filter-button svg{width:17px;height:17px}.table-wrap{overflow:auto;padding:0 16px 8px}table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}th{padding:11px 8px;color:var(--secondary);font-size:11px;font-weight:500;text-align:left;background:var(--canvas);border-bottom:1px solid var(--border)}td{height:56px;padding:8px;border-bottom:1px solid var(--border)}td small{display:block;margin-top:2px;color:var(--secondary);font-size:11px}.status{padding:4px 8px;color:#027a48;font-size:11px;border-radius:12px;background:#ecfdf3}.reward-card{padding:20px}.reward-head{display:flex;align-items:center;gap:12px}.reward-head>span{width:42px;height:42px;display:grid;place-items:center;color:var(--brand);font-size:24px;border-radius:10px;background:var(--brand-50)}.reward-head small{color:var(--secondary);font-size:10px}.reward-head h2{margin:2px 0 0;font-size:18px}.reward-card>p{margin:20px 0 7px;font-size:12px}.reward-track{height:6px;margin-bottom:16px;border-radius:6px;background:#eef1f5}.reward-track i{display:block;width:68%;height:100%;border-radius:6px;background:linear-gradient(90deg,#f4600c,#ffa95a)}.reward-card>a,.promo-card a{color:var(--brand);font-size:12px;font-weight:500}.promo-card{padding:22px 20px;border-radius:12px;box-shadow:var(--shadow);background:radial-gradient(circle at 100% 100%,rgba(244,96,12,.22),transparent 43%),linear-gradient(145deg,#fff9f5,#feefe7)}.promo-card>span{color:var(--brand);font-size:10px;font-weight:600}.promo-card h2{margin:10px 0;font-size:19px;line-height:27px}.promo-card p{color:var(--secondary);font-size:12px}.fx-card>div:not(.card-title){padding:11px 20px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;font-size:11px;border-bottom:1px solid var(--border)}.fx-card>div span{color:var(--secondary)}.fx-card strong{color:var(--text);font-size:13px}
/* Generic feature mock pages */
.page-heading{padding:0 0 20px}.page-heading h1{margin:10px 0 4px;font-size:22px;line-height:32px}.page-heading p{margin:0;color:var(--secondary)}.panel{margin-bottom:16px;padding:24px;background:#fff;border-radius:12px;box-shadow:var(--shadow)}.demo-strip{margin-bottom:16px;padding:12px 16px;color:#93370d;font-size:12px;border:1px solid #fedf89;border-radius:8px;background:#fffaeb}.account-row{padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:18px}.account-row p{margin:8px 0 0;color:var(--secondary)}.panel hr{border:0;border-top:1px solid var(--border)}.panel form{max-width:560px}.panel label{display:block;margin:18px 0 8px;font-weight:500}.panel input,.panel select{width:100%;padding:11px 13px;color:var(--text);border:1px solid var(--border);border-radius:8px;background:#fff}.steps{padding-bottom:18px;display:flex;gap:25px;color:var(--secondary);border-bottom:1px solid var(--border)}.steps b{color:var(--brand)}.preview{margin-top:22px;padding:20px;border:1px solid #abefc6;border-radius:8px;background:#ecfdf3}
/* RM */
.rm-launcher{position:fixed;right:24px;bottom:24px;z-index:40;width:184px;height:58px;padding:9px 14px;display:grid;grid-template:1fr 1fr/38px 1fr;column-gap:10px;color:#fff;text-align:left;border:0;border-radius:14px;background:linear-gradient(324deg,#e45f35,#ffa95a);box-shadow:0 8px 20px rgba(29,41,57,.24)}.rm-launcher>span{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;font-size:22px;border-radius:10px;background:rgba(255,255,255,.2)}.rm-launcher b{align-self:end}.rm-launcher small{opacity:.85}.chat{position:fixed;z-index:50;right:24px;top:84px;bottom:24px;width:380px;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 28px rgba(29,41,57,.2)}.chat-head{padding:16px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}.spark{display:grid;place-items:center;color:#fff;border-radius:10px;background:linear-gradient(324deg,#e45f35,#ffa95a)}.spark.small{width:38px;height:38px;font-size:22px}.chat-head strong{font-size:16px}.chat-head small{display:block;margin-top:2px;color:var(--secondary)}.online{width:7px;height:7px;margin-left:auto;border-radius:50%;background:#12b76a}.chat-close{width:32px;height:32px;padding:0;color:var(--icon);font-size:22px;border:0;border-radius:8px;background:transparent}.chat-body{flex:1;padding:20px 18px;overflow:auto}.eyebrow{color:var(--brand);font-size:11px;font-weight:600;letter-spacing:.5px}.welcome h3{margin:12px 0 8px;font-size:22px;line-height:32px}.welcome p{margin-bottom:20px;color:var(--secondary);font-size:13px}.prompts{display:flex;flex-direction:column;gap:8px}.prompts button{padding:13px 12px;display:flex;justify-content:space-between;text-align:left;font-size:13px;border:1px solid var(--border);border-radius:8px;background:#fff}.prompts button:hover{border-color:var(--brand-300);background:var(--brand-50)}.prompts span{color:var(--brand)}.chat footer{padding:14px;border-top:1px solid var(--border)}.chat footer form{padding:4px;display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px}.chat footer input{min-width:0;flex:1;padding:9px 6px;border:0;outline:0}.chat footer button{padding:6px 12px;color:#fff;font-size:18px;border:0;border-radius:7px;background:var(--brand)}.chat footer>small{display:block;margin-top:10px;color:var(--secondary);text-align:center}.message{margin:16px 0;padding:12px;border-radius:10px;background:var(--canvas)}.message.user{margin-left:32px;background:var(--brand-50)}.message>small{color:var(--secondary);font-weight:600}.message p{margin:6px 0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.recommendation{margin-top:10px;padding:12px;display:flex;flex-direction:column;gap:7px;border:1px solid var(--brand-300);border-radius:8px;background:#fff}.recommendation span{color:var(--secondary);font-size:12px}.recommendation em{color:var(--brand);font-size:12px;font-style:normal}
@media(max-width:1200px){.home-container{grid-template-columns:1fr}.home-secondary{display:grid;grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.sidebar{width:70px}.workspace{margin-left:70px}.nav-expanded .sidebar{width:230px}.nav-expanded .workspace{margin-left:70px}.overview-row{grid-template-columns:1fr}.home-secondary{grid-template-columns:1fr}.support-button span,.user-info{display:none}.router-content{padding:16px}.chat{top:76px;right:12px;bottom:12px;width:min(380px,calc(100vw - 94px))}}
@media(max-width:600px){.login-page{background:#fff}.sidebar{display:none}.workspace,.nav-expanded .workspace{margin-left:0}.topbar{padding:0 12px;justify-content:flex-end}.support-button{display:none}.router-content{padding:14px 12px 24px}.asset-overview{grid-template-columns:1fr}.quick-grid{overflow-x:auto;justify-content:flex-start}.quick-grid a,.quick-grid button{min-width:88px}.home-container{display:block}.home-secondary{display:flex;margin-top:16px}.rm-launcher{right:14px;bottom:14px}.chat{inset:76px 10px 10px;width:auto}}

/* Production-derived typography and canvas corrections */
.workspace{height:100vh;overflow:hidden;background:transparent}.router-content{height:calc(100vh - 68px);overflow:auto;background:transparent;padding:24px}.topbar{font-size:14px;line-height:20px}.nav-text{font-size:14px;line-height:20px}.nav-group-label{font-size:12px;line-height:16px}.user-info b{font-size:14px;line-height:20px}.user-info small{font-size:12px;line-height:16px}.welcome-container p{font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.6px}.welcome-container h1{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.64px}.welcome-container span{font-size:14px;line-height:20px}.widget-heading h2,.card-title h2{font-size:18px;line-height:24px;font-weight:500;letter-spacing:-.27px}.widget-heading small{font-size:12px;line-height:16px}.asset-balance>span,.credit-summary>span,.asset-balance>div,.credit-progress>span,.credit-progress>small{font-size:14px;line-height:20px}.asset-balance>strong,.credit-summary>strong{font-size:22px;line-height:32px}.asset-balance>div b{font-size:14px}.quick-grid a,.quick-grid button{font-size:14px;line-height:20px}.request-toolbar button,.card-title a,.reward-card>a,.promo-card a{font-size:14px;line-height:20px}table{font-size:14px;line-height:20px}th{padding:14px 8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:-.28px}td small{font-size:12px;line-height:16px}.status{font-size:12px;line-height:16px}.msb-card{border-radius:16px;box-shadow:var(--center-shadow)}.promo-card{border-radius:16px}.login-card h1{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.64px}.login-card label,.login-card select{font-size:16px;line-height:24px}.login-note{font-size:14px;line-height:20px}
/* Shared source-derived feature primitives */
.feature-page{display:flex;flex-direction:column;gap:24px;max-width:1440px;margin:0 auto}.feature-page>h1,.feature-heading h1{margin:0;font-size:22px;line-height:32px;font-weight:700;letter-spacing:-.66px}.feature-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.feature-heading p{margin:4px 0 0;color:var(--secondary);font-size:14px;line-height:20px}.feature-surface{background:#fff;border-radius:16px;box-shadow:var(--center-shadow);overflow:hidden}.surface-title{padding:16px;font-size:18px;line-height:24px;font-weight:500;letter-spacing:-.27px;border-bottom:1px solid var(--border)}.btn{min-width:96px;min-height:40px;padding:9px 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;line-height:20px;font-weight:500;border-radius:8px;border:0;background:#fff}.btn rm-icon{width:20px;height:20px}.btn.primary{margin:0;color:#fff;background:linear-gradient(324.32deg,#e45f35,#ffa95a)}.btn.primary:hover{background:var(--brand)}.btn.secondary{color:var(--brand);border:1px solid var(--brand);background:#fff}.btn.neutral{color:var(--secondary);background:transparent}.btn-icon{width:44px;height:44px;padding:10px;display:grid;place-items:center;color:var(--icon);border:1px solid var(--border);border-radius:8px;background:#fff}.btn-icon.active{color:var(--brand);border-color:var(--brand)}.tag{display:inline-flex;align-items:center;padding:2px 8px;font-size:12px;line-height:16px;font-weight:500;border-radius:12px;white-space:nowrap}.tag.success{color:#027a48;background:#ecfdf3}.tag.warning{color:#b54708;background:#fffaeb}.tag.info{color:#175cd3;background:#eff8ff}.tag.neutral{color:var(--secondary);background:var(--canvas)}.text-right{text-align:right}.production-table{width:100%;overflow:auto}.production-table table{min-width:820px;margin:0;border-collapse:collapse}.production-table thead{border-block:1px solid var(--border)}.production-table th{height:48px;color:var(--secondary);background:var(--canvas);white-space:nowrap}.production-table td{height:56px;padding:8px;border-bottom:1px solid var(--border);font-size:14px;line-height:20px}.production-table tbody tr{transition:background .15s}.production-table tbody tr:hover{background:var(--brand-50)}.production-table td>rm-icon{width:20px;height:20px;color:var(--icon)}.production-table small{color:var(--secondary)}.pagination{height:48px;padding:8px 16px;display:flex;align-items:center;justify-content:flex-end;gap:12px;color:var(--secondary);font-size:14px}.pagination button{width:32px;height:32px;border:0;border-radius:8px;background:transparent}.pagination button.active{color:var(--brand);background:var(--brand-50)}.feature-tabs{height:50px;padding:0 16px;display:flex;gap:24px;border-bottom:1px solid var(--border)}.feature-tabs button{padding:14px 0 12px;color:var(--secondary);font-size:14px;line-height:20px;font-weight:500;border:0;border-bottom:2px solid transparent;background:transparent}.feature-tabs button.active{color:var(--brand);border-bottom-color:var(--brand)}.wide-search,.list-toolbar label,.beneficiary-toolbar label,.toolbar-search label{height:46px;display:flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:#fff}.wide-search:focus-within,.list-toolbar label:focus-within,.beneficiary-toolbar label:focus-within,.toolbar-search label:focus-within{border-color:var(--brand-300);box-shadow:0 0 0 3px rgba(244,96,12,.08)}.wide-search rm-icon,.list-toolbar rm-icon,.beneficiary-toolbar label rm-icon,.toolbar-search label rm-icon{width:24px;height:24px;color:var(--icon)}.wide-search input,.list-toolbar input,.beneficiary-toolbar input,.toolbar-search input{width:100%;min-width:0;padding:0;font-size:16px;line-height:24px;border:0;outline:0;background:transparent}.wide-search input::placeholder,.list-toolbar input::placeholder,.beneficiary-toolbar input::placeholder,.toolbar-search input::placeholder{color:#a6aebb}
/* Accounts */
.account-overview-card{box-shadow:var(--center-shadow)}.overview-heading{width:100%;padding:16px;display:flex;align-items:center;justify-content:space-between;color:var(--text);border:0;background:var(--canvas)}.overview-heading>span{display:flex;align-items:center;gap:8px;font-size:18px;line-height:24px;font-weight:500}.overview-heading rm-icon{color:var(--icon)}.currency-grid{padding:16px;display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:16px;border-top:1px solid var(--border)}.currency-grid>div{display:flex;align-items:center;gap:6px}.currency-grid span{color:var(--secondary);font-size:14px}.currency-grid b{font-size:16px;line-height:24px;font-weight:600}.account-toolbar{padding:16px;display:grid;grid-template-columns:minmax(300px,1fr) auto;align-items:center;gap:16px}.toolbar-search{display:flex;align-items:center;gap:16px}.toolbar-search label{width:min(446px,100%)}.toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.view-switch{display:flex}.view-switch button{width:42px;height:42px;padding:9px;display:grid;place-items:center;color:var(--icon);border:0;background:var(--canvas)}.view-switch button:first-child{border-radius:8px 0 0 8px}.view-switch button:last-child{border-radius:0 8px 8px 0}.view-switch button.active{color:var(--brand);background:var(--brand-50)}.filter-panel{margin:0 16px 16px;padding:16px;display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:16px;background:var(--canvas);border-radius:12px}.filter-panel label,.field{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:20px;font-weight:500}.filter-panel select,.field input,.field select,.field textarea{width:100%;min-height:46px;padding:10px 16px;color:var(--text);font:500 16px/24px Inter,Arial,sans-serif;border:1px solid var(--border);border-radius:8px;background:#fff}.filter-panel>div{grid-column:1/-1;display:flex;gap:8px}.account-grid{padding:0 16px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.account-grid article{padding:16px;display:flex;flex-direction:column;gap:18px;border:1px solid var(--border);border-radius:24px}.account-grid header,.account-grid footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-grid header>span:first-child,.account-grid footer>span{color:var(--secondary);font-size:14px}.account-grid article>div{padding-bottom:14px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--border)}.account-grid article>div span{font-size:14px}.account-grid article>div b{font-size:14px}.account-grid footer>b{font-size:16px}.account-grid footer small{color:var(--secondary);font-weight:400}
/* Transfer and payroll */
.flow-page{max-width:1200px}.flow-page>.journey-title{width:83.333%;margin:0 auto;font-size:26px;line-height:36px;font-weight:500;letter-spacing:-1.04px}.journey-actions{display:flex;flex-wrap:wrap;gap:16px}.journey-actions>button{width:270px;padding:12px 16px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text);text-align:center;border:0;border-radius:16px;background:#fff;box-shadow:var(--center-shadow)}.journey-actions--service>button{width:200px}.journey-actions>button>span{display:contents;color:inherit}.journey-actions>button rm-icon{width:32px;height:32px}.journey-actions b{font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.32px}.journey-actions>button:hover{color:var(--brand)}.journey-actions>button:focus-visible{outline:2px solid var(--brand-300);outline-offset:2px}.list-toolbar{padding:16px;display:flex;justify-content:space-between;gap:16px}.list-toolbar label{width:min(446px,100%)}.flow-card,.upload-card{width:83.333%;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:24px}.flow-card h3,.upload-card h3{margin:0;font-size:22px;line-height:32px;font-weight:500;letter-spacing:-.88px}.account-select{min-height:72px;padding:10px 16px;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:16px;text-align:left;border:1px solid var(--border);border-radius:8px;background:#fff}.account-select>span{display:flex;flex-direction:column}.account-select>span:nth-child(2){text-align:right}.account-select small{color:var(--secondary);font-size:12px;line-height:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:24px}.input-icon,.input-suffix{height:46px;display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;background:#fff}.input-icon input,.input-suffix input{flex:1;min-width:0;height:44px;padding:10px 16px;font-size:16px;border:0;outline:0;background:transparent}.input-icon rm-icon{margin-right:14px;color:var(--icon)}.input-suffix b{padding:0 14px;color:var(--secondary);font-size:14px}.field{position:relative}.field textarea{min-height:88px;resize:vertical}.word-count{position:absolute;right:0;color:var(--secondary);font-size:12px;font-weight:400}.flow-actions{padding-top:16px;display:flex;justify-content:flex-end;gap:16px;border-top:1px solid var(--border)}.upload-card>header{display:flex;align-items:center;justify-content:space-between}.upload-card>header button{color:var(--brand);font-size:14px;font-weight:500;text-decoration:underline;border:0;background:transparent}.dropzone{height:158px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;border:1px dashed var(--text);border-radius:16px;background:var(--canvas)}.dropzone rm-icon{width:40px;height:40px;color:var(--brand)}.dropzone b{font-size:14px}.dropzone b span{color:var(--brand);text-decoration:underline}.dropzone small{color:var(--secondary);font-size:12px}.dropzone input{position:absolute;width:1px;height:1px;opacity:0}.checked-file-title{display:flex;align-items:center;gap:8px}.checked-file-title span{color:var(--secondary);font-size:14px}.outside-actions{width:83.333%;margin:0 auto;display:flex;justify-content:flex-end}
/* Beneficiary, administration and product pages */
.beneficiary-toolbar{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.beneficiary-toolbar label{width:50%}.row-actions{display:flex;justify-content:flex-end;gap:12px;color:var(--icon)}.bank-mark{width:36px;height:24px;margin-right:6px;display:inline-grid;place-items:center;color:#fff;font-size:10px;font-weight:700;border-radius:5px;background:var(--brand)}.bank-mark.blue{background:#1570ef}.approval-body{padding:24px;display:flex;flex-direction:column;gap:24px}.approval-body>div>h2{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:600}.approval-body>div>p{margin:0;color:var(--secondary);font-size:14px;line-height:20px}.user-list-body{padding:24px;display:flex;flex-direction:column;gap:16px}.product-layout{display:grid;grid-template-columns:3fr 1fr;gap:16px}.product-layout>div{display:flex;flex-direction:column;gap:16px}.deposit-summary>header,.credit-limit>header,.credit-obligation>header{padding:16px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--border)}.deposit-summary h2,.product-card h2,.credit-limit h2,.credit-obligation h2,.investment-banner h2{margin:0;font-size:18px;line-height:24px;font-weight:500}.deposit-summary>header small{color:var(--secondary);font-size:12px}.deposit-summary>div{padding:24px;display:grid;grid-template-columns:180px 1fr;align-items:center;gap:24px}.deposit-summary>div>div:last-child{display:flex;flex-direction:column;gap:8px}.deposit-summary strong{font-size:22px;line-height:32px}.deposit-summary p{margin:12px 0 0;color:var(--secondary)}.deposit-summary p i{width:8px;height:8px;display:inline-block;border-radius:2px;background:#2e90fa}.deposit-summary p b{margin-left:16px;color:var(--text)}.deposit-navigation{width:fit-content;padding:8px;display:flex;align-items:stretch;gap:8px;border-radius:12px;background:#fff;box-shadow:var(--center-shadow)}.deposit-navigation>button{width:200px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text);font-size:14px;line-height:20px;font-weight:500;letter-spacing:-.28px;text-align:center;border:0;border-radius:8px;background:transparent}.deposit-navigation rm-icon{width:32px;height:32px}.deposit-navigation>button:hover{color:var(--brand);background:var(--brand-50)}.deposit-navigation>button:focus-visible{outline:2px solid var(--brand-300);outline-offset:2px}.investment-banner{padding:24px;background:radial-gradient(circle at 100% 100%,rgba(244,96,12,.2),transparent 45%),#fff}.investment-banner>span{color:var(--brand);font-size:12px;font-weight:600}.investment-banner h2{margin:16px 0 8px;font-size:22px;line-height:32px}.investment-banner p{color:var(--secondary)}.credit-feature-grid{display:grid;grid-template-columns:2fr 3fr;gap:16px}.credit-limit>header a,.credit-obligation>header a{color:var(--brand);font-size:14px}.credit-limit>span,.credit-limit>strong{display:block;margin:16px 20px 0}.credit-limit>span{color:var(--secondary);font-size:14px}.credit-limit>strong{font-size:22px;line-height:32px}.credit-limit>div{margin:20px;padding-top:12px;border-top:1px solid var(--border)}.credit-limit>div p{display:flex;justify-content:space-between;color:var(--secondary)}.credit-limit>div b{color:var(--text)}.obligation-numbers{padding:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.obligation-numbers>div{display:flex;flex-direction:column;gap:8px}.obligation-numbers span{color:var(--secondary);font-size:14px}.obligation-numbers b{font-size:16px}.service-page{padding:24px}.service-hero{padding-bottom:24px;display:flex;align-items:center;gap:16px}.service-hero>span{width:56px;height:56px;display:grid;place-items:center;color:var(--brand);border-radius:14px;background:var(--brand-50)}.service-hero>span rm-icon{width:30px;height:30px}.service-hero h2{margin:0;font-size:22px;line-height:32px}.service-hero p{margin:4px 0 0;color:var(--secondary)}.empty-state{padding:64px;text-align:center}.empty-state a{color:var(--brand)}
/* Danh sách yêu cầu thanh toán dịch vụ khi chưa có lệnh nào do KH tạo. */
.request-empty-row td{height:88px;padding:24px;color:var(--secondary);font-size:13px;line-height:20px;text-align:center}
@media(max-width:1100px){.account-toolbar{grid-template-columns:1fr}.toolbar-actions{justify-content:flex-start;flex-wrap:wrap}.product-layout,.credit-feature-grid{grid-template-columns:1fr}}
@media(max-width:840px){.currency-grid,.filter-panel,.account-grid,.form-grid,.obligation-numbers{grid-template-columns:1fr}.flow-card,.upload-card,.flow-page>.journey-title,.outside-actions{width:100%}.beneficiary-toolbar{align-items:stretch;flex-direction:column}.beneficiary-toolbar label{width:100%}}
@media(max-width:600px){.router-content{padding:16px 12px}.feature-page{gap:16px}.feature-heading{align-items:flex-start;flex-direction:column}.account-toolbar{padding:12px}.toolbar-actions .btn{font-size:0;min-width:44px}.toolbar-actions .btn rm-icon{margin:0}.currency-grid{grid-template-columns:1fr}.account-select{grid-template-columns:1fr}.account-select>span:nth-child(2){text-align:left}.flow-card,.upload-card,.approval-body,.user-list-body{padding:16px}.feature-tabs{overflow:auto}.feature-tabs button{white-space:nowrap}}

/* Service payment, FX, investigation and disbursement landing surfaces */
.quick-filters{min-height:48px;padding:8px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}.quick-filters button{padding:6px 12px;color:var(--secondary);font-size:14px;border:0;border-radius:16px;background:var(--canvas)}.quick-filters button.active{color:var(--brand);background:var(--brand-50)}.quick-filters button b{margin-left:3px}.quick-filters>span{margin-left:auto;color:var(--secondary);font-size:12px}.tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;color:#fff;font-size:11px;border-radius:9px;background:var(--brand)}.fx-surface{display:flex;flex-direction:column;gap:0}.fx-monitor{padding:24px}.fx-monitor>header{display:flex;align-items:flex-start;justify-content:space-between}.fx-monitor h2,.fx-bottom h2,.disbursement-limit h2,.purpose-card h2{margin:0;font-size:18px;line-height:24px;font-weight:500}.fx-monitor header small{color:var(--secondary);font-size:12px}.fx-monitor header>span{display:flex;align-items:center;gap:6px;color:var(--secondary);font-size:12px}.fx-monitor header>span i{width:20px;height:3px;border-radius:2px;background:#2e90fa}.fx-chart{min-height:220px;margin-top:20px;display:grid;grid-template-columns:220px 1fr;gap:24px}.rate-list{display:flex;flex-direction:column}.rate-list>div{padding:12px 4px;display:grid;grid-template-columns:1fr auto;gap:3px 12px;border-bottom:1px solid var(--border)}.rate-list strong{font-size:16px}.rate-list span{grid-column:2;font-size:12px}.rate-list .up{color:#027a48}.rate-list .down{color:#b42318}.line-chart{min-width:0;padding:16px;background:linear-gradient(180deg,#f7fbff,transparent);border-left:1px solid var(--border)}.line-chart svg{width:100%;height:100%}.line-chart path{fill:none;stroke:#2e90fa;stroke-width:3}.fx-bottom{padding:0 24px 24px;display:grid;grid-template-columns:1fr 1.2fr;gap:16px}.fx-bottom>section{padding:20px;border:1px solid var(--border);border-radius:12px}.fx-bottom label{margin-top:16px;display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:500}.conversion-rate{padding:14px 4px;display:flex;justify-content:space-between;color:var(--secondary);font-size:14px}.conversion-rate b{color:var(--text)}.input-suffix.disabled{background:var(--canvas)}.fx-bottom>section>header{display:flex;justify-content:space-between;gap:16px}.fx-bottom header p{margin:4px 0 0;color:var(--secondary);font-size:14px}.price-warning{margin-top:20px;padding:14px;display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;border-top:1px solid var(--border)}.disbursement-limit>header{padding:16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.disbursement-limit>header button{display:flex;align-items:center;gap:6px;color:var(--brand);font-size:14px;border:0;background:transparent}.disbursement-limit>header rm-icon{width:18px;height:18px}.disbursement-limit>div{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.disbursement-limit article{display:flex;flex-direction:column;gap:5px}.disbursement-limit article+article{padding-left:24px;border-left:1px solid var(--border)}.disbursement-limit article span,.disbursement-limit article small{color:var(--secondary);font-size:14px}.disbursement-limit article strong{font-size:22px;line-height:32px}.disbursement-limit>p{margin:0;padding:12px 20px;display:flex;align-items:center;gap:8px;color:#175cd3;font-size:12px;background:#eff8ff}.disbursement-limit>p rm-icon{width:18px;height:18px}.purpose-card{margin-top:24px}.purpose-card>header{padding:16px;border-bottom:1px solid var(--border)}.purpose-card header p{margin:4px 0 0;color:var(--secondary);font-size:14px}.purpose-card>div{margin-top:24px;padding:0 16px 16px;display:flex;gap:0}.purpose-card>div button{flex:1 0 0;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text);text-align:center;border:0;border-radius:8px;background:transparent}.purpose-card>div button>span{display:contents;color:inherit}.purpose-card>div button rm-icon{width:32px;height:32px}.purpose-card>div button b{font-weight:500}.purpose-card>div button:hover{background:var(--brand-50)}.purpose-card>div button:hover b{color:var(--brand);font-weight:400}.purpose-card>div button:focus-visible{outline:2px solid var(--brand-300);outline-offset:2px}.disbursement-tabs{height:54px}.service-page{display:none}
@media(max-width:840px){.fx-chart,.fx-bottom{grid-template-columns:1fr}.line-chart{min-height:180px;border-left:0}.disbursement-limit>div{grid-template-columns:1fr}.disbursement-limit article+article{padding:16px 0 0;border-left:0;border-top:1px solid var(--border)}}
@media(max-width:600px){.quick-filters{overflow:auto}.quick-filters button{white-space:nowrap}.price-warning{grid-template-columns:1fr 1fr}.fx-monitor,.fx-bottom{padding:16px}.fx-bottom{padding-top:0}}

/* Full-screen Business Banking background (including beneath navigation) */
body {
    background: #e8edf2;
}

.app-shell {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    background-color: #e8edf2;
    background-image: url('https://minio-prod.msb.com.vn/digibank-eb-public/internetbanking/background/bg_mk.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto;
    background-position: right top;
}

.sidebar {
    background: rgb(232 238 244 / 78%);
    border-right-color: rgb(194 199 208 / 45%);
    box-shadow: 0 0 16px rgb(29 41 57 / 5%);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.sidebar-header {
    background: rgb(255 255 255 / 12%);
    border-bottom-color: rgb(194 199 208 / 30%);
}

.workspace,
.router-content {
    background: transparent;
}

.topbar {
    background: none;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@media (max-width: 600px) {
    .app-shell {
        background-position: 62% center;
        background-attachment: scroll;
    }
}

/* Seamless glass sidebar — the background continues beneath navigation */
.sidebar {
    background: linear-gradient(
        90deg,
        rgb(232 239 245 / 34%) 0%,
        rgb(232 239 245 / 25%) 72%,
        rgb(232 239 245 / 14%) 100%
    );
    border-right: 0;
    box-shadow: none;
    backdrop-filter: blur(13px) saturate(106%);
    -webkit-backdrop-filter: blur(13px) saturate(106%);
}

.sidebar::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: -22px;
    bottom: 0;
    width: 22px;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(232 239 245 / 12%), transparent);
}

.sidebar-header {
    background: transparent;
    border-bottom: 0;
}

.navigation-content {
    background: transparent;
}

.nav-divider {
    background: rgb(107 120 142 / 16%);
}

/* Match production sidebar toggle states */
.nav-toggle {
    position: static;
    right: auto;
    width: 24px;
    height: 24px;
    margin: 5px 0 0 auto;
    padding: 0;
    color: #8993a4;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.nav-toggle rm-icon {
    width: 24px;
    height: 24px;
}

.nav-toggle--collapsed {
    position: absolute;
    right: -10px;
    margin-top: 5px;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgb(29 41 57 / 15%);
}

.nav-toggle--collapsed rm-icon {
    width: 16px;
    height: 16px;
}

/* MSB neutral scrollbar */
.navigation-content,
.router-content,
.chat-body,
.production-table {
    scrollbar-width: thin;
    scrollbar-color: #8993a4 transparent;
}

.navigation-content::-webkit-scrollbar,
.router-content::-webkit-scrollbar,
.chat-body::-webkit-scrollbar,
.production-table::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.navigation-content::-webkit-scrollbar-track,
.router-content::-webkit-scrollbar-track,
.chat-body::-webkit-scrollbar-track,
.production-table::-webkit-scrollbar-track {
    border-radius: 28px;
    background: transparent;
}

.navigation-content::-webkit-scrollbar-thumb,
.router-content::-webkit-scrollbar-thumb,
.chat-body::-webkit-scrollbar-thumb,
.production-table::-webkit-scrollbar-thumb {
    min-height: 36px;
    border-radius: 28px;
    background: #8993a4;
}

.navigation-content::-webkit-scrollbar-thumb:hover,
.router-content::-webkit-scrollbar-thumb:hover,
.chat-body::-webkit-scrollbar-thumb:hover,
.production-table::-webkit-scrollbar-thumb:hover {
    background: #6b788e;
}

/* Exact production sidebar logo sizing */
.brand-link img {
    width: 34px;
    height: 20px;
    max-height: 20px;
    object-fit: contain;
    object-position: left center;
}

.nav-expanded .brand-link img {
    width: 94px;
    height: auto;
    max-height: 32px;
}

/* Production tables keep a 16px horizontal gutter inside their surface */
.list-surface > .production-table {
    width: calc(100% - 32px);
    margin-right: 16px;
    margin-left: 16px;
}

.list-surface > .production-table table {
    width: 100%;
}

.list-surface > .pagination {
    padding-right: 24px;
    padding-left: 24px;
}

@media (max-width: 600px) {
    .list-surface > .production-table {
        width: calc(100% - 24px);
        margin-right: 12px;
        margin-left: 12px;
    }
}

/* Login typography and production icon sizing from MSB design-system tokens. */
.login-page{font-family:Inter,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;letter-spacing:-.32px}
.login-header nav a{gap:10px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.32px}
.login-header nav a rm-icon{width:20px;height:20px;color:#091e42}
.login-card.identity-form{width:min(440px,58%);min-width:340px}
.login-card.identity-form .login-heading h1{font-family:Inter,Arial,sans-serif;font-size:22px;line-height:32px;font-weight:700;letter-spacing:-.66px}
.login-heading p{font-size:16px;line-height:24px;font-weight:400;letter-spacing:-.32px}
.login-card.identity-form form{margin-top:32px}
.login-card.identity-form label{margin-bottom:8px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:-.28px}
.login-card.identity-form input{height:46px;padding-inline:16px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.32px}
.password-label{margin-top:20px}
.password-label a{font-size:14px;line-height:20px;font-weight:500;letter-spacing:-.28px}
.password-input button{top:7px}
.login-submit.primary{height:44px;min-height:44px;margin-top:28px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.32px}
.open-account{height:44px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.32px}
.solution-signup{font-size:14px;line-height:20px;font-weight:400;letter-spacing:-.28px}
.solution-signup a{font-weight:500}
.login-card.identity-form .error{font-size:14px;line-height:20px;font-weight:500}
.floating-support{position:fixed;right:40px;top:67%;bottom:auto;transform:translateY(-50%)}
.floating-support:before{display:none}
.floating-support img{display:block;width:56px;height:56px;max-width:none}.floating-support{width:56px;height:56px;padding:0;border:0;background:transparent;box-shadow:none}
@media(max-width:900px){.login-card.identity-form{width:min(400px,80%)}.floating-support{right:24px;top:67%;bottom:auto}}
@media(max-width:680px){.login-card.identity-form{width:100%;min-width:0}.login-header nav a{font-size:14px;line-height:20px}.floating-support{right:20px;top:67%;bottom:auto}}

/* Home layout tuned to the supplied MSB Business dashboard reference. */
.welcome-container{padding:0 12px 18px}.welcome-container p{margin:0;font-size:16px;line-height:24px;font-weight:500}.welcome-container h1{margin:0;font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.4px;text-transform:uppercase}.welcome-container span{display:block;margin-top:1px;font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase}
.home-container{grid-template-columns:minmax(0,3fr) 230px;gap:12px}.home-primary,.home-secondary{gap:12px}.overview-row{grid-template-columns:minmax(0,3fr) minmax(240px,2fr);gap:12px}.home-container .msb-card{border-radius:10px;box-shadow:0 1px 5px rgba(9,30,66,.12)}
.home-container .widget-heading{min-height:44px;padding:9px 12px 0;border:0}.home-container .widget-heading h2,.home-container .card-title h2{font-size:14px;line-height:20px;font-weight:600}.home-container .widget-heading small{margin-top:1px;font-size:10px;line-height:14px}
.home-container .asset-overview{min-height:108px;padding:4px 12px 10px;grid-template-columns:82px 1fr;gap:16px}.home-container .donut{width:76px;height:76px;background:conic-gradient(#7cbcf7 0 24%,#1e63a2 24% 75%,#f4b55f 75% 100%)}.home-container .donut:after{inset:25px}.home-container .asset-balance>span{display:flex;align-items:center;gap:6px;font-size:11px;line-height:16px}.home-container .asset-balance>span rm-icon{width:16px;height:16px}.home-container .asset-balance>strong{margin:0 0 8px;font-size:14px;line-height:20px}.home-container .asset-balance>div{margin-top:4px;grid-template-columns:7px 1fr auto;align-items:center;gap:0 7px;font-size:10px;line-height:14px}.home-container .asset-balance>div i{width:6px;height:6px;margin:0}.home-container .asset-balance>div b{grid-column:3;font-size:10px}
.credit-coming{min-height:108px;padding:6px 18px 16px;display:flex;align-items:center;justify-content:center;gap:16px}.credit-coming>rm-icon{width:56px;height:56px}.credit-coming b,.credit-coming span{display:block}.credit-coming b{font-size:12px;line-height:16px}.credit-coming span{margin-top:3px;color:var(--secondary);font-size:10px;line-height:14px}
.home-container .quick-card{padding:7px 10px}.home-container .quick-grid{gap:2px}.home-container .quick-grid a,.home-container .quick-grid button{padding:4px;gap:4px;font-size:11px;line-height:15px}.home-container .quick-grid rm-icon{width:25px;height:25px}
.request-card{min-height:262px}.home-container .request-card .card-title{min-height:40px;padding:10px 12px;border:0}.request-chips{padding:0 12px 8px;display:flex;flex-wrap:wrap;gap:6px}.request-chips button{height:24px;padding:3px 8px;color:#344563;font-size:10px;line-height:16px;border:1px solid #d5dce5;border-radius:13px;background:#fff}.request-chips button.active{color:#f4600c;border-color:#ffb58a;background:#fff6f0}.request-empty{min-height:188px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.request-empty img{width:70px;height:70px;object-fit:contain}.request-empty b{margin-top:3px;font-size:12px;line-height:16px}.request-empty span{margin-top:3px;color:var(--secondary);font-size:10px;line-height:14px}
.home-secondary .reward-card{padding:0}.reward-card>header,.promotion-card>header{height:42px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between}.reward-card>header h2,.promotion-card>header h2{margin:0;font-size:14px;line-height:20px;font-weight:600}.reward-card>header span{font-size:24px}.reward-status{height:39px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:#fff;border-radius:9px;background:linear-gradient(120deg,#5d6065,#aaa)}.reward-status b,.reward-status strong{font-size:10px}.reward-status i{display:inline-block;width:8px;height:8px;margin-left:2px;border-radius:50%;background:#f6b84b}.promotion-card{padding-bottom:10px}.promotion-card>img{display:block;width:calc(100% - 12px);margin:0 6px;object-fit:cover;border-radius:8px}.promotion-indicator{display:block;width:18px;height:5px;margin:9px auto 0;border-radius:5px;background:#f4600c}
.home-container .fx-card .card-title{min-height:42px;padding:10px 12px;border:0}.home-container .fx-card .card-title a{font-size:24px;line-height:20px;color:#091e42}.home-container .fx-card>div:not(.card-title){padding:5px 12px;grid-template-columns:1.3fr .8fr .8fr;font-size:10px;line-height:14px;border:0}.home-container .fx-card .fx-header{padding-top:2px!important;color:var(--secondary)}.home-container .fx-card>div span{text-align:right}.home-container .fx-card b{font-size:10px;font-weight:500}.home-container .fx-card footer{padding:6px 12px 8px;color:var(--secondary);font-size:9px;line-height:12px;text-align:center;border-top:1px solid var(--border)}
@media(min-width:901px) and (max-width:1200px){.home-container{grid-template-columns:minmax(0,3fr) 230px}.home-secondary{display:flex;grid-template-columns:none}}
@media(max-width:900px){.home-container{grid-template-columns:1fr}.home-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.overview-row{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.overview-row,.home-secondary{grid-template-columns:1fr}.home-container .quick-grid{overflow-x:auto}.home-container .quick-grid a,.home-container .quick-grid button{min-width:108px}}

/* Home ported from HomeJourney and its production feature widgets. */
.welcome-container{padding:16px 16px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.welcome-container p{margin:0;font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.6px}.welcome-container h1{margin:0;font-size:26px;line-height:36px;font-weight:700;letter-spacing:-.52px;text-transform:uppercase}.welcome-container span{font-size:14px;line-height:20px;font-weight:500;text-transform:uppercase}
.home-container{grid-template-columns:minmax(0,3fr) minmax(230px,1fr);gap:16px}.home-primary,.home-secondary{gap:16px}.overview-row{grid-template-columns:minmax(0,3fr) minmax(250px,2fr);gap:16px}.home-container .msb-card{border-radius:16px;box-shadow:var(--center-shadow)}
.home-container .widget-heading{min-height:56px;padding:8px 10px 8px 16px;border:0}.home-container .widget-heading h2,.home-container .card-title h2{font-size:16px;line-height:24px;font-weight:600}.home-container .widget-heading small{font-size:12px;line-height:16px}.home-container .asset-overview{min-height:162px;padding:12px 16px;grid-template-columns:120px 1fr;gap:16px}.home-container .donut{width:100px;height:100px;background:conic-gradient(#96c6fa 0 25%,#1b5594 25% 75%,#ffd399 75% 100%)}.home-container .donut:after{inset:30px}.home-container .asset-balance>span{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px}.home-container .asset-balance>span rm-icon{width:20px;height:20px}.home-container .asset-balance>strong{margin:2px 0 10px;font-size:20px;line-height:28px}.home-container .asset-balance>div{margin-top:6px;grid-template-columns:8px 1fr auto;align-items:center;gap:0 8px;font-size:14px;line-height:20px}.home-container .asset-balance>div i{width:8px;height:8px;margin:0}.home-container .asset-balance>div b{grid-column:3;font-size:14px}.credit-coming{min-height:162px;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:8px}.credit-coming img{width:100px;height:100px;object-fit:contain}.credit-coming b,.credit-coming span{display:block}.credit-coming b{font-size:14px;line-height:20px;font-weight:600}.credit-coming span{margin-top:4px;color:var(--secondary);font-size:14px;line-height:20px}
.home-container .quick-card{padding:8px 16px}.home-container .quick-grid{min-height:60px}.home-container .quick-grid a,.home-container .quick-grid button{padding:8px 6px;gap:4px;font-size:14px;line-height:20px}.home-container .quick-grid rm-icon{width:32px;height:32px}
.request-card{min-height:300px}.home-container .request-card .card-title{min-height:48px;padding:12px 16px;border:0}.request-chips{padding:0 16px 8px;display:flex;flex-wrap:wrap;gap:8px}.request-chips button{height:28px;padding:4px 8px;color:#344563;font-size:12px;line-height:16px;border:1px solid #d5dce5;border-radius:14px;background:#fff}.request-chips button.active{color:#f4600c;border-color:#ffb58a;background:#fff6f0}.request-empty{min-height:214px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.request-empty img{width:96px;height:96px;object-fit:contain}.request-empty b{margin-top:4px;font-size:14px;line-height:20px}.request-empty span{margin-top:4px;color:var(--secondary);font-size:12px;line-height:16px}
.home-secondary .reward-card{padding:0}.reward-card>header,.promotion-card>header{height:48px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.reward-card>header h2,.promotion-card>header h2{margin:0;font-size:16px;line-height:24px;font-weight:600}.reward-card>header span{font-size:24px}.reward-status{height:40px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;color:#fff;border-radius:12px;background:linear-gradient(120deg,#5d6065,#aaa)}.reward-status b,.reward-status strong{font-size:12px}.reward-status i{display:inline-block;width:8px;height:8px;margin-left:3px;border-radius:50%;background:#f6b84b}.promotion-card{padding-bottom:12px}.promotion-card>img{display:block;width:calc(100% - 16px);aspect-ratio:246/130;margin:0 8px;object-fit:cover;border-radius:10px}.promotion-indicator{display:block;width:18px;height:6px;margin:10px auto 0;border-radius:6px;background:#f4600c}
.home-container .fx-card .card-title{min-height:48px;padding:12px 16px;border:0}.home-container .fx-card .card-title a{font-size:24px;line-height:24px;color:#091e42}.home-container .fx-card>div:not(.card-title){padding:6px 16px;grid-template-columns:1.25fr .8fr .8fr;font-size:12px;line-height:16px;border:0}.home-container .fx-card .fx-header{padding-top:2px!important;color:var(--secondary);border-bottom:1px dashed var(--border)!important}.home-container .fx-card>div span{text-align:right}.home-container .fx-card b{font-size:12px;font-weight:500}.home-container .fx-card footer{padding:8px 16px;color:var(--secondary);font-size:12px;line-height:16px;text-align:center;border-top:1px solid var(--border)}
@media(min-width:901px) and (max-width:1200px){.home-container{grid-template-columns:minmax(0,3fr) minmax(230px,1fr)}.home-secondary{display:flex;grid-template-columns:none}}
@media(max-width:900px){.home-container{grid-template-columns:1fr}.home-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.overview-row{grid-template-columns:3fr 2fr}}
@media(max-width:680px){.overview-row,.home-secondary{grid-template-columns:1fr}.home-container .quick-grid{overflow-x:auto}.home-container .quick-grid a,.home-container .quick-grid button{min-width:112px}}

/* Functional Home refinements: data chart, visibility toggle, request table and currency logos. */
.asset-chart{width:100px;height:100px;flex:0 0 100px}.asset-chart svg{display:block;width:100px;height:100px;overflow:visible;transform:rotate(-90deg)}.asset-chart circle{fill:none;stroke-width:30}.asset-chart .chart-track{stroke:#dee5ef}.asset-chart .chart-account{stroke:url(#accountGradient)}.asset-chart .chart-deposit{stroke:url(#depositGradient)}
.asset-balance-title{display:flex !important;align-items:center;gap:8px;color:var(--secondary);font-size:14px;line-height:20px}.asset-balance-title button{width:24px;height:24px;padding:2px;display:grid;place-items:center;color:var(--text);border:0;background:transparent}.asset-balance-title button rm-icon{width:20px;height:20px}
.home-container .quick-card{padding:8px 16px}.home-container .quick-grid a,.home-container .quick-grid button{padding:12px 0;gap:8px}
.request-table-wrap{overflow:auto;padding:0 16px 8px}.request-table-wrap table{min-width:650px}.request-table-wrap th{height:44px;padding:10px 8px;font-size:12px;line-height:16px}.request-table-wrap td{height:54px;padding:8px;font-size:12px;line-height:16px}.request-table-wrap td>b{font-size:12px}.request-table-wrap td small{font-size:10px;line-height:14px}
.home-container .fx-card>div b{display:flex;align-items:center;gap:4px}.currency-icon{width:16px;height:16px;flex:0 0 16px;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1px rgba(9,30,66,.08)}

/* Final Home scale and route-specific production backgrounds. */
.app-shell{background-image:url('assets/feature-background.png');background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}
.app-shell:has(.home-container){background-image:url('assets/home-background.png');background-size:auto;background-position:right top;background-repeat:no-repeat;background-attachment:fixed}
.home-container .widget-heading h2,.home-container .card-title h2{font-size:16px;line-height:24px;font-weight:600}.home-container .widget-heading small{font-size:12px;line-height:16px}.asset-balance-title{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:400}.asset-balance-title button{width:20px;height:20px;padding:0;min-width:0}.asset-balance-title button img{display:block;width:20px;height:20px}.home-container .asset-balance>strong{font-size:20px;line-height:28px;font-weight:600}.home-container .asset-balance>div{font-size:14px;line-height:20px}.home-container .asset-balance>div b{font-size:14px;line-height:20px;font-weight:600}.credit-coming b{font-size:14px;line-height:20px}.credit-coming span{font-size:12px;line-height:16px}
.home-container .quick-card{padding:8px 32px}.home-container .quick-grid{gap:8px}.home-container .quick-grid a,.home-container .quick-grid button{padding:12px 8px;gap:8px;font-size:14px;line-height:20px;font-weight:400}
.home-container .request-card .card-title{min-height:52px;padding:16px 20px}.home-container .request-card .card-title h2{font-size:18px;line-height:24px;font-weight:600;color:#101828}.request-chips{padding:0 20px 14px;display:flex;flex-wrap:wrap;gap:8px}.request-chips button{height:30px;padding:4px 14px;color:#505f79;font-size:13px;line-height:20px;font-weight:500;border:1px solid #dee5ef;border-radius:9999px;background:#fff;transition:all .15s}.request-chips button:hover:not(.active){border-color:var(--brand-300);color:var(--brand)}.request-chips button.active{color:var(--brand);border-color:var(--brand-300);background:var(--brand-50);font-weight:500;box-shadow:none}.request-table-wrap{overflow-x:auto;padding:0 20px 8px}.request-table-wrap table{width:100%;min-width:700px;border-collapse:collapse}.request-table-wrap thead tr{background:#f8fafc;border-top:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9}.request-table-wrap th{height:46px;padding:10px 14px;color:#475467;font-size:13px;font-weight:600;line-height:20px;text-align:left}.request-table-wrap th.col-sortable{cursor:pointer;user-select:none}.request-table-wrap th.col-sortable:hover{color:#ea580c}.request-table-wrap th .sort-icon{display:inline-block;margin-left:4px;font-size:13px;color:#98a2b3;font-weight:normal}.request-table-wrap td{height:52px;padding:10px 14px;color:#344054;font-size:13px;line-height:20px;border-bottom:1px solid #f1f5f9}.request-table-wrap tbody tr:hover{background:#fafbfc}.request-table-wrap .col-time{width:160px}.request-table-wrap .col-type{min-width:200px}.request-table-wrap .col-amount{width:130px}.request-table-wrap .col-currency{width:90px}.request-table-wrap .col-status{width:170px}.request-table-wrap .col-type-val a{color:#101828;font-weight:500;text-decoration:none}.request-table-wrap .col-type-val a:hover{color:#ea580c;text-decoration:underline}.request-table-wrap .col-amount-val{font-weight:500;color:#101828}.req-status-tag{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;font-size:12px;font-weight:500;line-height:16px;border-radius:9999px;white-space:nowrap}.req-status-tag.tag-pending{background:#ffedd5;color:#c2410c}.req-status-tag.tag-processing{background:#eff6ff;color:#2563eb}.req-status-tag.tag-review{background:#ffedd5;color:#ea580c}.req-status-tag.tag-success{background:#ecfdf3;color:#027a48}.req-status-tag.tag-rejected{background:#fef3f2;color:#b42318}.request-pagination-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #f1f5f9;font-size:13px;color:#475467;flex-wrap:wrap;gap:12px}.pagination-info{font-size:13px;color:#475467}.pagination-controls{display:flex;align-items:center;gap:16px}.pagination-size-wrapper{position:relative}.pagination-select{height:34px;padding:4px 28px 4px 12px;font-size:13px;color:#344054;border:1px solid #d0d5dd;border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23667085'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 8px center/14px;appearance:none;-webkit-appearance:none;cursor:pointer}.pagination-select:focus{outline:0;border-color:#f97316}.pagination-pages{display:flex;align-items:center;gap:4px}.page-arrow{min-width:30px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#6b788e;font-size:18px;line-height:1;cursor:pointer;border-radius:6px;transition:background .15s}.page-arrow:hover:not(:disabled){background:#f2f4f7;color:#101828}.page-arrow:disabled{opacity:.35;cursor:not-allowed}.page-btn{min-width:32px;height:32px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;background:transparent;color:#475467;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}.page-btn:hover:not(.active){background:#f2f4f7;color:#101828}.page-btn.active{border-color:var(--brand-300);color:var(--brand);background:#fff;box-shadow:none}.page-ellipsis{padding:0 4px;color:#98a2b3;font-size:13px}.request-empty{min-height:214px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.request-empty img{width:96px;height:96px;object-fit:contain}.request-empty b{margin-top:4px;font-size:14px;line-height:20px}.request-empty span{margin-top:4px;color:var(--secondary);font-size:12px;line-height:16px}
.reward-card>header h2,.promotion-card>header h2{font-size:16px;line-height:24px}.reward-status b,.reward-status strong{font-size:12px;line-height:16px}.promotion-card>img{aspect-ratio:16/9;object-fit:cover}.home-container .fx-card>div:not(.card-title){font-size:13px;line-height:18px}.home-container .fx-card b{font-size:13px;line-height:18px}.home-container .fx-card footer{font-size:12px;line-height:16px}
@media(max-width:600px){.app-shell,.app-shell:has(.home-container){background-size:cover;background-position:center;background-attachment:scroll}.home-container .quick-card{padding-inline:16px}}

/* Keep the 15-row local request fixture usable inside the Home dashboard. */
.home-container .request-table-wrap{max-height:none;overflow:auto}.home-container .request-table-wrap thead{position:sticky;z-index:1;top:0}

/* Let the topbar participate in the workspace scroll instead of pinning it to the viewport. */
.workspace{height:100vh;overflow-x:hidden;overflow-y:auto}.topbar{position:relative;top:auto}.router-content{height:auto;min-height:calc(100vh - 68px);overflow:visible}

/* Production MSB Rewards summary row. */
.home-container .reward-status{height:auto;min-height:52px;padding:16px;border-radius:12px}.home-container .reward-status b,.home-container .reward-status strong{font-size:14px;line-height:20px;font-weight:500;letter-spacing:-.28px}.home-container .reward-status strong{display:flex;align-items:center;gap:4px}.home-container .reward-status img{display:block;width:16px;height:16px;flex:0 0 16px}

/* Credit domain and guarantee journey. */
.feature-tabs a{padding:14px 0 12px;color:var(--secondary);font-size:14px;line-height:20px;font-weight:500;border-bottom:2px solid transparent}.feature-tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}.guarantee-page{max-width:1200px}.guarantee-page .row-icon{width:32px;height:32px;padding:6px;color:var(--icon);border:0;border-radius:8px;background:transparent}.guarantee-page .row-icon:hover{color:var(--brand);background:var(--brand-50)}.guarantee-instruction{padding:32px;display:flex;align-items:flex-start;gap:24px}.guarantee-instruction>rm-icon{width:64px;height:64px;padding:14px;color:var(--brand);border-radius:16px;background:var(--brand-50)}.guarantee-instruction h2{margin:0 0 8px;font-size:20px;line-height:28px}.guarantee-instruction p{margin:0;color:var(--secondary)}.guarantee-instruction ul{margin:20px 0 0;padding-left:20px;color:var(--secondary)}.guarantee-instruction li{margin:8px 0}.outside-actions{display:flex;justify-content:flex-end;gap:12px}.ai-prefill-banner{padding:12px 16px;display:flex;align-items:center;gap:12px;color:#05603a;border:1px solid #abefc6;border-radius:12px;background:#ecfdf3}.ai-prefill-banner rm-icon{width:24px;height:24px}.ai-prefill-banner b,.ai-prefill-banner span{display:block}.ai-prefill-banner span{margin-top:2px;font-size:13px}.guarantee-steps{margin:0;padding:16px;display:grid;grid-template-columns:repeat(5,1fr);list-style:none;border-radius:16px;background:#fff;box-shadow:var(--center-shadow)}.guarantee-steps li{position:relative;display:flex;align-items:center;gap:8px;color:var(--secondary);font-size:13px;line-height:18px}.guarantee-steps li:not(:last-child):after{content:'';position:absolute;z-index:0;left:34px;right:8px;top:13px;height:1px;background:var(--border)}.guarantee-steps li span{position:relative;z-index:1;width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;background:#fff}.guarantee-steps li.active{color:var(--brand);font-weight:600}.guarantee-steps li.active span{color:#fff;border-color:var(--brand);background:var(--brand)}.guarantee-steps li.done span{color:#fff;border-color:#12b76a;background:#12b76a}.guarantee-form>header{padding:20px 24px;border-bottom:1px solid var(--border)}.guarantee-form>header h2{margin:0;font-size:20px;line-height:28px}.guarantee-form>header p{margin:4px 0 0;color:var(--secondary);font-size:14px}.guarantee-form .form-grid{padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}.guarantee-form .field.full{grid-column:1/-1}.guarantee-form .field{margin:0;color:var(--text);font-size:14px;line-height:20px;font-weight:500}.guarantee-form .field input,.guarantee-form .field select,.guarantee-form .field textarea{width:100%;min-height:44px;margin-top:6px;padding:10px 12px;color:var(--text);font:400 14px/20px Inter,Arial,sans-serif;border:1px solid var(--border);border-radius:8px;background:#fff}.guarantee-form .field textarea{min-height:96px;resize:vertical}.guarantee-form .field input:focus,.guarantee-form .field select:focus,.guarantee-form .field textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,96,12,.1)}.guarantee-form>.flow-actions{padding:16px 24px;display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--border)}.guarantee-checklist{padding:8px 24px 24px}.guarantee-checklist article{min-height:72px;padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border)}.guarantee-checklist article b,.guarantee-checklist article span{display:block}.guarantee-checklist article div span{margin-top:4px;color:var(--secondary);font-size:12px}.guarantee-checklist label input{display:none}.guarantee-review{padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.guarantee-review section{padding:20px;border:1px solid var(--border);border-radius:12px}.guarantee-review h3{margin:0 0 16px;font-size:16px}.guarantee-review p{margin:10px 0;display:flex;justify-content:space-between;gap:20px;font-size:14px}.guarantee-review p span{color:var(--secondary)}.guarantee-review p b{text-align:right}.confirm-check{margin:0 24px 24px;display:flex;align-items:flex-start;gap:8px;font-size:14px}.confirm-check input{margin-top:3px}.guarantee-result{padding:32px;text-align:center}.guarantee-result>rm-icon{width:56px;height:56px;color:#12b76a}.guarantee-result h2{margin:12px 0 4px}.guarantee-result .btn{margin-top:12px}
/* Guarantee document upload inside RM chat. */
.guarantee-upload-actions{margin-top:10px;padding-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--border)}.chat-upload{min-height:36px;padding:7px 10px;display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;border-radius:8px;background:var(--brand)}.chat-upload.disabled{opacity:.5;pointer-events:none}.chat-upload rm-icon{width:18px;height:18px}.chat-upload input{display:none}.guarantee-upload-actions>a{padding:7px 4px;color:var(--brand);font-size:12px;font-weight:500}.guarantee-upload-actions>small{width:100%;color:var(--secondary);font-size:11px}.extraction-result{margin-top:10px;display:flex;flex-direction:column;gap:5px}.extraction-result>span{color:#667085;font-size:11px;line-height:16px}.extraction-result .btn{width:100%;margin-top:5px}
@media(max-width:800px){.guarantee-steps{grid-template-columns:1fr;gap:8px}.guarantee-steps li:not(:last-child):after{display:none}.guarantee-form .form-grid,.guarantee-review{grid-template-columns:1fr}.guarantee-form .field.full{grid-column:auto}.guarantee-instruction{padding:20px;flex-direction:column}.guarantee-review p{flex-direction:column;gap:2px}.guarantee-review p b{text-align:left}}

/* Trade-finance initiate port aligned with FeatureTradeFinanceInitiateComponent and its step components. */
.guarantee-page{width:100%;max-width:none;margin:0}.trade-finance-initiate{--tf-space-sm:8px;--tf-space-md:16px;--tf-space-lg:24px;--tf-card-radius:16px;--tf-card-border:#e5e9f0;--tf-card-shadow:0 1px 4px rgba(29,41,57,.08);width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--tf-space-md)}.trade-finance-header{width:100%;display:flex;align-items:center;justify-content:space-between}.trade-finance-header h1{margin:0;color:var(--text);font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.48px}.trade-finance-body{width:100%;display:flex;flex-direction:column;gap:var(--tf-space-md)}
.tf-stepper{width:100%;margin:0;padding:8px 0 12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none}.tf-stepper li{position:relative;min-width:0}.tf-stepper li:not(:last-child):after{content:'';position:absolute;z-index:0;top:16px;left:calc(50% + 22px);right:calc(-50% + 22px);height:1px;background:#cfd6e2}.tf-stepper li.is-checked:not(:last-child):after{background:var(--brand)}.tf-stepper button{position:relative;z-index:1;width:100%;padding:0 6px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--secondary);text-align:center;border:0;background:transparent}.tf-stepper button:disabled{opacity:1;cursor:default}.tf-stepper button>span{width:32px;height:32px;display:grid;place-items:center;color:#6b788e;font-size:13px;line-height:18px;font-weight:600;border:1px solid #cfd6e2;border-radius:50%;background:#fff}.tf-stepper button>b{max-width:160px;font-size:13px;line-height:18px;font-weight:500}.tf-stepper .is-current button{color:var(--brand)}.tf-stepper .is-current button>span{color:#fff;border-color:var(--brand);background:var(--brand);box-shadow:0 0 0 4px rgba(244,96,12,.1)}.tf-stepper .is-checked button>span{color:#fff;border-color:var(--brand);background:var(--brand)}
.tf-request-change{padding:14px 16px;display:flex;align-items:flex-start;gap:12px;color:#344563;border:1px solid #b2d4f5;border-radius:12px;background:#f1f8ff}.tf-request-change rm-icon{width:22px;height:22px;flex:0 0 22px;color:#1976d2}.tf-request-change b{display:block;font-size:14px;line-height:20px}.tf-request-change p{margin:2px 0 0;color:var(--secondary);font-size:12px;line-height:16px}.tf-step-content,.tf-card-stack{width:100%}.tf-card-stack{display:flex;flex-direction:column;gap:var(--tf-space-md)}
.tf-card{overflow:hidden;color:var(--text);border:1px solid var(--tf-card-border);border-radius:var(--tf-card-radius);background:#fff;box-shadow:var(--tf-card-shadow)}.tf-card__title{min-height:64px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.tf-card__title h2{margin:0;font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.27px}.tf-card__body{padding:0 24px 24px}.tf-card__title+.tf-card__body{border-top:0}.tf-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}.tf-form-grid .full{grid-column:1/-1}.tf-field{margin:0;display:flex;flex-direction:column;gap:6px;color:var(--text);font-size:14px;line-height:20px;font-weight:500}.tf-field>span i,.tf-document-list i{color:#d92d20;font-style:normal}.tf-field input,.tf-field select,.tf-field textarea{width:100%;min-height:46px;padding:10px 16px;color:var(--text);font:400 16px/24px Inter,Arial,sans-serif;border:1px solid #cfd6e2;border-radius:8px;outline:0;background:#fff}.tf-field textarea{min-height:104px;resize:vertical}.tf-field input:hover,.tf-field select:hover,.tf-field textarea:hover{border-color:#a6aebb}.tf-field input:focus,.tf-field select:focus,.tf-field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,96,12,.1)}.tf-tertiary{padding:7px 0;color:var(--brand);font-size:14px;line-height:20px;font-weight:500;border:0;background:transparent}.tf-tertiary:hover{text-decoration:underline}
.tf-radio-group{display:flex;gap:16px}.tf-radio-group label{min-height:76px;max-width:382px;flex:1;padding:16px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;border:1px solid #cfd6e2;border-radius:12px;background:#fff}.tf-radio-group label.selected{border-color:var(--brand);background:#fff8f4;box-shadow:0 0 0 1px var(--brand)}.tf-radio-group input{margin-top:3px;accent-color:var(--brand)}.tf-radio-group b,.tf-radio-group small{display:block}.tf-radio-group b{font-size:14px;line-height:20px}.tf-radio-group small{margin-top:4px;color:var(--secondary);font-size:12px;line-height:16px;font-weight:400}.tf-radio-group.compact label{max-width:none}.tf-switch{padding:16px;display:flex;align-items:flex-start;gap:12px;border-radius:12px;background:#f7f8fa}.tf-switch>input{position:absolute;opacity:0}.tf-switch>span{position:relative;width:36px;height:20px;flex:0 0 36px;border-radius:20px;background:#a6aebb;transition:.15s}.tf-switch>span:after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(9,30,66,.2);transition:.15s}.tf-switch>input:checked+span{background:var(--brand)}.tf-switch>input:checked+span:after{transform:translateX(16px)}.tf-switch b,.tf-switch small{display:block}.tf-switch b{font-size:14px;line-height:20px}.tf-switch small{margin-top:2px;color:var(--secondary);font-size:12px;line-height:16px;font-weight:400}
.tf-contract{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:16px;border:1px solid #e5e9f0;border-radius:12px;background:#f7f8fa}.tf-contract span,.tf-contract b{display:block}.tf-contract span{color:var(--secondary);font-size:12px;line-height:16px}.tf-contract b{margin-top:5px;font-size:14px;line-height:20px}.tf-summary-line{margin-top:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:12px;background:#f7f8fa}.tf-summary-line span{color:var(--secondary);font-size:14px}.tf-summary-line b{font-size:14px;text-align:right}.tf-template-choice{min-height:64px;padding:14px 16px;display:flex;align-items:center;gap:12px;border:1px solid #e5e9f0;border-radius:12px}.tf-template-choice rm-icon{width:28px;height:28px;flex:0 0 28px;color:var(--brand)}.tf-template-choice>div{min-width:0;flex:1}.tf-template-choice b,.tf-template-choice div span{display:block}.tf-template-choice b{font-size:14px;line-height:20px}.tf-template-choice div span{margin-top:2px;color:var(--secondary);font-size:12px;line-height:16px}
.tf-document-list article{min-height:78px;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #e5e9f0}.tf-document-list article:first-child{padding-top:0;border-top:0}.tf-document-list article:last-child{padding-bottom:0}.tf-document-list article b,.tf-document-list article div span{display:block}.tf-document-list article b{font-size:14px;line-height:20px}.tf-document-list article div span{margin-top:4px;color:var(--secondary);font-size:12px;line-height:16px}.tf-document-list input{display:none}.tf-check{display:flex;align-items:flex-start;gap:10px;color:var(--text);font-size:14px;line-height:20px}.tf-check input{width:18px;height:18px;margin:1px 0 0;flex:0 0 18px;accent-color:var(--brand)}
.tf-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}.tf-review-grid p{margin:0;display:flex;flex-direction:column;gap:4px}.tf-review-grid p span{color:var(--secondary);font-size:12px;line-height:16px}.tf-review-grid p b{font-size:14px;line-height:20px;font-weight:500}.tf-terms .tf-card__body>small{display:block;margin-top:8px;color:#d92d20;font-size:12px;line-height:16px}.tf-step-actions{width:100%;margin-top:0;display:flex;align-items:center;justify-content:flex-end;gap:8px}.tf-step-actions .btn{min-width:104px}.trade-finance-response{width:100%;min-height:420px;padding:56px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--tf-card-border,#e5e9f0);border-radius:16px;background:#fff;box-shadow:0 1px 4px rgba(29,41,57,.08)}.trade-finance-response__icon{width:64px;height:64px;display:grid;place-items:center;color:#079455;border-radius:50%;background:#ecfdf3}.trade-finance-response__icon rm-icon{width:36px;height:36px}.trade-finance-response h1{margin:20px 0 8px;font-size:24px;line-height:32px}.trade-finance-response p{margin:4px 0;color:var(--secondary);font-size:14px}.trade-finance-response .btn{margin-top:20px}
@media(max-width:900px){.tf-stepper button>b{font-size:11px;line-height:15px}.tf-card__title{padding:18px 20px}.tf-card__body{padding:0 20px 20px}.tf-form-grid,.tf-review-grid{gap:16px 20px}}
@media(max-width:680px){.tf-stepper{grid-template-columns:1fr;gap:8px;padding:0}.tf-stepper li:not(:last-child):after{display:none}.tf-stepper button{padding:0;flex-direction:row;text-align:left}.tf-stepper button>b{font-size:13px;line-height:18px}.tf-form-grid,.tf-review-grid,.tf-contract{grid-template-columns:1fr}.tf-form-grid .full{grid-column:auto}.tf-radio-group{flex-direction:column}.tf-radio-group label{max-width:none}.tf-card__title{min-height:56px;padding:16px}.tf-card__body{padding:0 16px 16px}.tf-document-list article,.tf-summary-line{align-items:flex-start;flex-direction:column}.tf-step-actions{position:sticky;bottom:0;padding:12px 0;background:var(--canvas)}.tf-step-actions .btn{flex:1}}

/* Compatibility contract from msb-business-banking UI theme and BusinessLayout. */
@media(min-width:601px){.sidebar{width:76px}.workspace{margin-left:76px}.nav-expanded .sidebar{width:254px}.nav-expanded .workspace{margin-left:254px}}
.router-content{padding:0 24px 32px}
.msb-card,.home-container .msb-card{border-radius:12px;box-shadow:var(--shadow)}
@media(max-width:900px) and (min-width:601px){.router-content{padding:0 16px 24px}}
@media(max-width:600px){.router-content{padding:0 12px 24px}}

/* Source-derived request and transaction detail */
.request-detail-page{max-width:1440px;margin:0 auto;padding-bottom:36px}.detail-page-header{min-height:48px;margin-bottom:20px;display:flex;align-items:center;gap:12px}.detail-page-header>div{flex:1}.detail-page-header p{margin:0;color:var(--secondary);font-size:12px;line-height:16px}.detail-page-header h1{margin:1px 0 0;font-size:22px;line-height:32px;letter-spacing:-.66px}.detail-back{width:40px;height:40px;padding:8px;display:grid;place-items:center;color:var(--text);border:0;border-radius:8px;background:transparent}.detail-back:hover{background:var(--brand-50);color:var(--brand)}.detail-print{min-height:40px;padding:8px 12px;display:flex;align-items:center;gap:8px;color:var(--brand);font-weight:500;border:1px solid var(--brand);border-radius:8px;background:#fff}.detail-print rm-icon{width:20px;height:20px}.detail-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(250px,1fr);gap:16px;align-items:start}.detail-main{min-width:0;display:flex;flex-direction:column;gap:16px}.detail-hero{padding:24px}.detail-hero-heading{display:flex;align-items:flex-start;gap:14px}.detail-status-icon{width:44px;height:44px;padding:10px;display:grid;place-items:center;color:#027a48;border-radius:50%;background:#ecfdf3}.detail-status-icon rm-icon{width:24px;height:24px}.detail-status-icon[data-status='Chờ phê duyệt'],.detail-status-icon[data-status='Bản nháp']{color:#b54708;background:#fffaeb}.detail-status-icon[data-status='Đã từ chối']{color:#b42318;background:#fef3f2}.detail-hero-heading h2{margin:3px 0 4px;font-size:20px;line-height:28px}.detail-hero-heading p{margin:0;color:var(--secondary);font-size:14px}.detail-status{display:inline-flex;padding:2px 8px;color:#027a48;font-size:12px;line-height:16px;font-weight:500;border-radius:12px;background:#ecfdf3}.detail-status[data-status='Chờ phê duyệt'],.detail-status[data-status='Bản nháp']{color:#b54708;background:#fffaeb}.detail-status[data-status='Đã từ chối']{color:#b42318;background:#fef3f2}.detail-amount{margin:24px 0 18px;padding:20px;text-align:center;border:1px solid var(--border);border-radius:12px;background:var(--canvas)}.detail-amount span{display:block;color:var(--secondary);font-size:13px}.detail-amount strong{display:block;margin-top:5px;font-size:28px;line-height:38px}.detail-amount small{font-size:14px}.detail-created,.detail-fields{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.detail-created div,.detail-fields div{min-width:0}.detail-created dt,.detail-fields dt{color:var(--secondary);font-size:12px;line-height:16px}.detail-created dd,.detail-fields dd{margin:4px 0 0;font-size:14px;line-height:20px;font-weight:500;overflow-wrap:anywhere}.detail-card>header{min-height:56px;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}.detail-card>header h2{margin:0;font-size:18px;line-height:24px;font-weight:500}.detail-card>header p{margin:2px 0 0;color:var(--secondary);font-size:12px}.detail-card>header button,.detail-lines header button{padding:6px 8px;display:flex;align-items:center;gap:6px;color:var(--brand);font-size:13px;border:0;background:transparent}.detail-card>header rm-icon{width:18px;height:18px}.detail-party-flow{padding:20px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}.detail-party-flow section{min-width:0;padding:16px;border:1px solid var(--border);border-radius:10px}.detail-party-flow small,.detail-party-flow span,.detail-party-flow b{display:block}.detail-party-flow small{color:var(--secondary);font-size:12px}.detail-party-flow h3{margin:7px 0 9px;font-size:14px;line-height:20px}.detail-party-flow b{font-size:14px}.detail-party-flow span{margin-top:2px;color:var(--secondary);font-size:12px}.party-arrow{width:32px;height:32px;display:grid;place-items:center;color:var(--brand);border-radius:50%;background:var(--brand-50)}.detail-fields{padding:20px;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}.detail-fields .emphasis{padding:10px 12px;border-radius:8px;background:var(--brand-50)}.detail-fields .emphasis dd{color:#c94d08;font-size:16px}.detail-table-wrap{overflow:auto}.detail-lines table{min-width:720px}.detail-line-status{padding:3px 8px;color:#027a48;font-size:11px;border-radius:12px;background:#ecfdf3}.detail-attachments{padding:8px 20px 16px}.detail-attachments button{width:100%;padding:12px 0;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-bottom:1px solid var(--border);background:transparent}.detail-attachments button:last-child{border-bottom:0}.detail-attachments rm-icon{width:24px;height:24px;color:var(--icon)}.detail-attachments button>rm-icon:last-child{margin-left:auto;color:var(--brand)}.detail-attachments span{min-width:0;flex:1}.detail-attachments b,.detail-attachments small{display:block;overflow:hidden;text-overflow:ellipsis}.detail-attachments b{font-size:14px}.detail-attachments small{color:var(--secondary);font-size:12px}.detail-actions{position:sticky;bottom:-32px;z-index:5;padding:16px 20px;display:flex;justify-content:flex-end;gap:12px;border-radius:12px;background:#fff;box-shadow:0 -3px 12px rgba(9,30,66,.08)}.detail-actions button{min-width:150px;min-height:42px;margin:0;padding:9px 16px;border-radius:8px}.secondary{color:var(--brand);border:1px solid var(--brand);background:#fff}.danger{color:#b42318!important;border-color:#f04438!important}.primary.danger{color:#fff!important;background:#d92d20}.detail-history{position:sticky;top:0}.detail-history header{padding:16px 18px;border-bottom:1px solid var(--border)}.detail-history h2{margin:0;font-size:18px;line-height:24px;font-weight:500}.detail-history ol{margin:0;padding:20px 18px;list-style:none}.detail-history li{position:relative;padding:0 0 24px 28px}.detail-history li:not(:last-child):before{content:'';position:absolute;left:7px;top:16px;bottom:0;width:1px;background:var(--border)}.detail-history li>i{position:absolute;left:1px;top:4px;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:var(--success);box-shadow:0 0 0 1px var(--success)}.detail-history li.rejected>i{background:#f04438;box-shadow:0 0 0 1px #f04438}.detail-history b,.detail-history span,.detail-history time{display:block}.detail-history b{font-size:13px}.detail-history span{margin-top:3px;font-size:12px}.detail-history time{margin-top:2px;color:var(--secondary);font-size:11px}.detail-history p{margin:7px 0 0;padding:8px;color:var(--secondary);font-size:11px;line-height:16px;border-radius:7px;background:var(--canvas)}.detail-modal-backdrop{position:fixed;z-index:100;inset:0;padding:20px;display:grid;place-items:center;background:rgba(9,30,66,.48)}.detail-reject-modal{width:min(480px,100%);padding:22px;border-radius:16px;background:#fff;box-shadow:0 24px 48px rgba(9,30,66,.24)}.detail-reject-modal header{display:flex;justify-content:space-between;align-items:center}.detail-reject-modal h2{margin:0;font-size:20px}.detail-reject-modal header button{width:32px;height:32px;color:var(--secondary);font-size:24px;border:0;background:transparent}.detail-reject-modal>p{margin:12px 0 18px;color:var(--secondary);font-size:14px}.detail-reject-modal label{display:flex;justify-content:space-between;font-size:13px;font-weight:500}.detail-reject-modal label small{color:var(--secondary);font-weight:400}.detail-reject-modal textarea{width:100%;min-height:110px;margin-top:7px;padding:11px 12px;resize:vertical;font:14px/20px Inter;border:1px solid var(--border);border-radius:8px}.detail-reject-modal textarea:focus{outline:2px solid rgba(244,96,12,.18);border-color:var(--brand)}.detail-reject-modal .field-error{display:block;margin-top:4px;color:#b42318;font-size:12px}.detail-reject-modal footer{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}.detail-reject-modal footer button{min-height:40px;margin:0;padding:8px 14px;border-radius:8px}.request-detail-link{display:block}.request-detail-link:hover b{color:var(--brand);text-decoration:underline}.row-approval-action{display:inline-flex;padding:5px 10px;color:var(--brand);font-size:12px;font-weight:500;border:1px solid var(--brand);border-radius:7px;background:#fff}@media(max-width:1050px){.detail-layout{grid-template-columns:1fr}.detail-history{position:static}.detail-created{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.detail-page-header{align-items:flex-start}.detail-print{font-size:0}.detail-print rm-icon{margin:0}.detail-created,.detail-fields{grid-template-columns:1fr}.detail-party-flow{grid-template-columns:1fr}.party-arrow{transform:rotate(90deg);margin:auto}.detail-hero{padding:18px}.detail-actions{bottom:-24px}.detail-actions button{min-width:0;flex:1}}
@media print{.sidebar,.topbar,.rm-launcher,.detail-back,.detail-print,.detail-actions{display:none!important}.workspace{margin:0!important}.router-content{height:auto;overflow:visible}.detail-layout{grid-template-columns:1fr}.detail-history{position:static}.msb-card{box-shadow:none;border:1px solid var(--border)}}

/* MSB Business Banking detail parity - ported from production feature SCSS */
.transfer-detail-wrapper{padding-bottom:16px;color:#091e42}.transfer-detail-header{display:flex;align-items:center;gap:4px;margin-bottom:24px}.transfer-detail-header h3{margin:0;font-size:22px;line-height:32px;font-weight:700;letter-spacing:-.66px}.button-reset-icon{padding:0;display:flex;align-items:center;justify-content:center;color:#091e42;border:0;background:transparent}.transfer-detail-header .button-reset-icon{width:24px;height:32px}.transfer-detail-header rm-icon{width:24px;height:24px}.detail-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:16px;align-items:start}.detail-col-main,.detail-col-history{min-width:0}.content-section{display:flex;flex-direction:column;gap:16px}.created-info-wrapper{padding:16px 24px;display:flex;flex-direction:column;gap:16px;border-radius:12px;background:#fff;box-shadow:0 0 4px rgba(29,41,57,.15)}.created-info-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.created-info-heading h4{margin:0;color:#101828;font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.4px}.created-info-heading p{margin:4px 0 0;color:#505f79;font-size:14px;line-height:20px}.production-status-tag{display:inline-flex;align-items:center;padding:2px 8px;color:#027a48;font-size:12px;line-height:16px;font-weight:500;white-space:nowrap;border-radius:12px;background:#ecfdf3}.production-status-tag[data-status='Chờ duyệt'],.production-status-tag[data-status='Chờ phê duyệt'],.production-status-tag[data-status='Bản nháp']{color:#b54708;background:#fffaeb}.production-status-tag[data-status='MSB đang xử lý'],.production-status-tag[data-status='Đang xử lý']{color:#026aa2;background:#f0f9ff}.production-status-tag[data-status='MSB yêu cầu chỉnh sửa']{color:#f4600c;background:#feefe7}.production-status-tag[data-status='Đã từ chối']{color:#b42318;background:#fef3f2}.created-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.created-info-grid span,.created-info-approver span{color:#505f79;font-size:14px;line-height:20px}.created-info-grid b,.created-info-approver b{font-size:14px;line-height:20px;font-weight:500;overflow-wrap:anywhere}.created-info-approver{padding-top:16px;border-top:1px solid #dee5ef}.transfer-overview-wrapper{padding:24px;display:flex;flex-direction:column;gap:16px;border-radius:12px;background:#fff;box-shadow:0 0 4px rgba(29,41,57,.15)}.sender-receiver-wrapper{min-height:104px;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:12px}.sender-receiver-wrapper.single-party{grid-template-columns:1fr}.sender-wrapper{min-width:0;padding:16px;display:flex;align-items:center;gap:12px;border-radius:8px;background:#f7f8f9}.bank-logo{width:40px;height:40px;min-width:40px;padding:8px;display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:48px;background:#fff}.bank-logo img{width:100%;height:100%;object-fit:contain}.sender{min-width:0}.sender-name{overflow:hidden;color:#091e42;font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.32px;text-overflow:ellipsis}.sender-info{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#505f79;font-size:14px;line-height:20px}.sender-straight-icon{align-self:center;width:24px;height:24px;color:#505f79}.amount-wrapper{padding-bottom:16px;border-bottom:1px solid #dee5ef}.amount-container{margin-bottom:16px}.amount-title,.fee-vat-title,.fee-vat-note{color:#505f79;font-size:14px;line-height:20px}.amount-value,.fee-vat-value{display:flex;gap:4px;align-items:baseline}.amount-number{color:#091e42;font-size:22px;line-height:32px;font-weight:600;letter-spacing:-.66px}.amount-currency{color:#505f79;font-size:22px;line-height:32px;font-weight:500}.fee-vat-value{color:#091e42;font-size:16px;line-height:24px}.fee-vat-value span:first-child{font-weight:600}.transfer-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.transfer-overview-title{margin-bottom:4px;color:#505f79;font-size:14px;line-height:20px}.transfer-overview-content{display:flex;align-items:center;color:#091e42;font-size:16px;line-height:24px;font-weight:500;overflow-wrap:anywhere}.button-section{margin-top:20px;display:flex;justify-content:flex-end;gap:16px}.msb-button{min-width:96px;height:40px;padding:8px 16px;font:500 16px/24px Inter,Arial,sans-serif;border-radius:8px}.secondary-button{color:#f4600c;border:1px solid #f4600c;background:#fff}.primary-button{color:#fff;border:0;background:linear-gradient(324.32deg,#e45f35,#ffa95a)}.primary-button:hover{background:#f4600c}.interaction-history{padding:16px 24px;display:flex;flex-direction:column;gap:24px;border-radius:16px;background:#fff;box-shadow:0 0 4px rgba(29,41,57,.15)}.interaction-history>h3{margin:0;font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.32px}.production-timeline{display:flex;flex-direction:column;gap:20px}.production-timeline-item{display:flex;gap:12px}.dot-wrap{position:relative;width:10px;min-width:10px;padding-top:5px}.dot{width:10px;height:10px;border-radius:50%;background:#505f79}.production-timeline-item:not(:last-child) .dot-wrap:after{content:'';position:absolute;top:15px;bottom:-25px;left:4.5px;width:1px;background:#505f79}.timeline-content{min-width:0}.timeline-content p{margin:0;color:#091e42;font-size:14px;line-height:20px;font-weight:500}.timeline-content span{display:block;margin-top:2px;color:#505f79;font-size:12px;line-height:16px;font-weight:500}.production-detail-table{padding-top:16px;border-top:1px solid #dee5ef}.production-detail-table-heading{margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.production-detail-table-heading h4{margin:0;font-size:16px;line-height:24px;font-weight:600}.production-detail-table-heading span{color:#505f79;font-size:12px;line-height:16px}.production-detail-table-heading button{padding:6px 0;display:flex;align-items:center;gap:8px;color:#f4600c;font-size:14px;font-weight:500;border:0;background:transparent}.production-detail-table-heading rm-icon{width:20px;height:20px}.production-detail-table-scroll{overflow:auto;border:1px solid #dee5ef;border-radius:8px}.production-detail-table table{min-width:700px}.production-detail-table th{height:48px;padding:12px 16px;background:#f7f8f9}.production-detail-table td{height:56px;padding:8px 16px}.bulk-detail .transfer-overview-wrapper{box-shadow:0 0 20.4px rgba(0,0,0,.07)}.production-files{padding-top:16px;border-top:1px solid #dee5ef}.production-files h4{margin:0 0 8px;font-size:16px;line-height:24px;font-weight:600}.production-files button{width:100%;padding:10px 0;display:flex;align-items:center;gap:8px;color:#091e42;text-align:left;border:0;border-bottom:1px solid #dee5ef;background:transparent}.production-files button:last-child{border-bottom:0}.production-files button span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}.production-files rm-icon{width:20px;height:20px;color:#505f79}.production-files button rm-icon:last-child{color:#f4600c}.production-modal-backdrop{position:fixed;z-index:100;inset:0;padding:20px;display:grid;place-items:center;background:rgba(9,30,66,.48)}.production-reject-modal{width:min(480px,100%);padding:0;border-radius:16px;background:#fff;box-shadow:0 24px 48px rgba(9,30,66,.24)}.production-reject-modal>header{padding:16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dee5ef}.production-reject-modal h3{margin:0;font-size:18px;line-height:24px;font-weight:600}.production-reject-modal header button{width:24px;height:24px;font-size:24px}.production-modal-body{padding:16px}.production-modal-body>p{margin:0 0 16px;color:#505f79;font-size:14px}.production-modal-body label{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px;font-weight:500}.production-modal-body label small{color:#505f79;font-weight:400}.production-modal-body textarea{width:100%;min-height:96px;padding:12px 16px;resize:vertical;color:#091e42;font:16px/24px Inter,Arial,sans-serif;border:1px solid #dee5ef;border-radius:8px}.production-modal-body textarea:focus{outline:0;border-color:#f4600c;box-shadow:0 0 0 3px rgba(244,96,12,.08)}.production-modal-body .field-error{display:block;margin-top:4px;color:#f04438;font-size:12px}.production-reject-modal>footer{padding:16px;display:flex;justify-content:flex-end;border-top:1px solid #dee5ef}.production-reject-modal>footer .msb-button{width:100%}@media(max-width:767.98px){.detail-row{grid-template-columns:1fr}}

/* Review fields share the production two-column detail rhythm. */
.business-review dl{margin:0}.business-review dl>div{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:24px;padding:12px 0;border-bottom:1px solid #eaecf0}.business-review dt{color:#667085}.business-review dd{margin:0;overflow-wrap:anywhere}.business-review section+section{margin-top:24px}.production-table tr[tabindex]{cursor:pointer}.production-table tr[tabindex]:hover{background:#fff7f0}.production-table tr[tabindex]:focus-visible{outline:2px solid #ef5b25;outline-offset:-2px}
.request-table-row{cursor:pointer;transition:background .15s}
.request-table-row:hover{background:#f8fafc}

/* SWIFT MT700 Preview Modal */
.lc-preview-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(16, 24, 40, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lc-preview-modal {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lc-preview-modal-head {
  padding: 18px 24px;
  border-bottom: 1px solid #EAECF0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lc-preview-modal-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #101828;
}

.lc-preview-close-btn {
  border: none;
  background: transparent;
  font-size: 22px;
  color: #667085;
  cursor: pointer;
  padding: 4px 8px;
}

.lc-preview-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.lc-preview-modal-foot {
  padding: 16px 24px;
  border-top: 1px solid #EAECF0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* =========================================================================
   CCTG Confirmation Page Styles (Figma 154:38534)
   ========================================================================= */
.cctg-confirm-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  width: 100%;
  max-width: 884px;
  margin: 0 auto;
  padding: 8px 0 48px;
  box-sizing: border-box;
}

.cctg-page-head {
  margin-bottom: 24px;
  width: 100%;
}

.cctg-page-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  color: #091E42;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Confirmation Card */
.cctg-card {
  background: #FFFFFF;
  border: 1px solid #DEE5EF;
  border-radius: 16px;
  width: 100%;
  max-width: 884px;
  box-shadow: 0 1px 3px rgba(9, 30, 66, 0.04);
  overflow: hidden;
  box-sizing: border-box;
}

.cctg-card-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.cctg-card-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0 0 20px 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: #091E42;
  letter-spacing: -0.01em;
}

/* Timer Banner (Figma Block) */
.cctg-timer-box {
  background: #F7F8F9;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  transition: all 0.2s ease;
}

/* Progress Circle Component & Counter styling (MSB Design System) */
.msb-progress-circle {
  --msb-pc-color: #F4600C;
  --msb-pc-size: 60px;
  --msb-pc-stroke-width: 10;
  --msb-pc-track-color: #DEE5EF;
  --msb-pc-track-opacity: 1;
  --msb-pc-animation-duration: 0.3s;
  display: inline-block;
  width: var(--msb-pc-size);
  height: var(--msb-pc-size);
  color: var(--msb-pc-color);
}

.msb-progress-circle svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.msb-progress-circle circle {
  transition-property: stroke-dashoffset;
  transition-duration: var(--msb-pc-animation-duration);
  transition-timing-function: ease-out;
  stroke-width: var(--msb-pc-stroke-width, 6);
}

.counter-circle {
  width: 60px;
  height: 60px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter-circle .circle-progress {
  width: 60px;
  height: 60px;
}

.counter-circle .remaining-time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #091E42;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cctg-timer-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #091E42;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

/* Data Fields Layout */
.cctg-fields-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 4px;
}

.cctg-amount-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cctg-data-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #505F79;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cctg-info-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
  cursor: pointer;
  vertical-align: middle;
}

.cctg-data-value {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #091E42;
  line-height: 24px;
}

.cctg-val-hero {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #091E42;
}

.cctg-val-hero .cctg-unit {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: #505F79;
  margin-left: 6px;
}

.cctg-fields-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  column-gap: 40px;
  row-gap: 16px;
}

.cctg-data-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cctg-price-val {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #091E42;
}

.cctg-price-unit {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #505F79;
  margin-left: 4px;
}

.cctg-seller-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #091E42;
}

/* Collapsible Xem thêm */
.cctg-collapse-wrap {
  margin: 16px 0 20px;
  display: flex;
  align-items: center;
}

.cctg-toggle-btn {
  background: none;
  border: none;
  color: #F4600C;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color 0.15s ease;
}

.cctg-toggle-btn:hover {
  color: #D94D1D;
}

.cctg-toggle-btn svg {
  transition: transform 0.2s ease;
}

.cctg-toggle-btn svg.is-rotated {
  transform: rotate(180deg);
}

.cctg-more-details {
  background: #F7F8F9;
  border: 1px solid #DEE5EF;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  animation: vrm-toast-slide-in 0.2s ease-out;
}

.cctg-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cctg-detail-row .label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #505F79;
  font-weight: 400;
}

.cctg-detail-row .val {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #091E42;
}

.cctg-detail-row .highlight-gold {
  color: #B54708;
  font-weight: 600;
}

/* Attachment Card (Figma Upload-file-normal) */
.cctg-attachment-card {
  background: #F7F8F9;
  border: 1px solid #DEE5EF;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.cctg-attachment-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cctg-file-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cctg-file-icon img {
  width: 24px;
  height: 24px;
}

.cctg-file-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #091E42;
}

.cctg-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #F4600C;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.cctg-download-btn:hover {
  background: #FFF4ED;
  color: #D94D1D;
}

/* Checkbox (Figma CheckBox) */
.cctg-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 28px;
  cursor: pointer;
}

.cctg-checkbox-label input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: #F4600C;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
}

.cctg-checkbox-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #091E42;
}

.cctg-checkbox-text .cctg-link {
  color: #2E90FA;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}

.cctg-checkbox-text .cctg-link:hover {
  color: #1570EF;
}

/* Action Button Group (Figma Button Group) */
.cctg-button-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.btn-cctg {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 10px 24px;
  border-radius: 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 110px;
  text-align: center;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.btn-cctg.secondary {
  margin: 0 !important;
  background: #FFFFFF;
  border: 1px solid #F4600C;
  color: #F4600C;
}

.btn-cctg.secondary:hover {
  background: #FFF4ED;
  border-color: #D94D1D;
  color: #D94D1D;
}

.btn-cctg.primary {
  margin: 0 !important;
  margin-top: 0 !important;
  background: #F4600C;
  border: 1px solid #F4600C;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.btn-cctg.primary:hover:not(:disabled) {
  background: #D94D1D;
  border-color: #D94D1D;
}

.btn-cctg.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Success Modal */
.cctg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(9, 30, 66, 0.54);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cctg-success-modal {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 480px;
  padding: 32px 28px;
  text-align: center;
  animation: vrm-toast-slide-in 0.25s ease-out;
}

.cctg-success-icon-wrap {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cctg-success-title {
  font-size: 20px;
  font-weight: 700;
  color: #091E42;
  margin: 0 0 8px;
}

.cctg-success-desc {
  font-size: 14px;
  line-height: 20px;
  color: #505F79;
  margin: 0 0 20px;
}

.cctg-receipt-box {
  background: #F7F8F9;
  border: 1px solid #DEE5EF;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.cctg-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cctg-receipt-row .r-label {
  color: #505F79;
}

.cctg-receipt-row .r-val {
  color: #091E42;
  font-weight: 600;
}

.cctg-receipt-row .r-val.highlight {
  color: #027A48;
  font-weight: 600;
}

.cctg-success-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 960px) {
  .cctg-confirm-page {
    padding: 16px;
  }
  .cctg-fields-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   Single Transfer (Chuyển khoản đơn) Journey - Figma 23451:122887
   ========================================================================== */
.st-page {
  max-width: 884px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.st-header-wrap {
  margin-bottom: 20px;
}

.st-page-title {
  font-size: 24px;
  font-weight: 700;
  color: #091E42;
  margin: 0;
  line-height: 36px;
}

.st-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #EBEDF0;
  box-shadow: 0px 1px 3px rgba(9, 30, 66, 0.04);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.st-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.st-label {
  font-size: 14px;
  font-weight: 500;
  color: #091E42;
  line-height: 20px;
}

.st-source-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  height: 64px;
  background: #FFFFFF;
  border: 1px solid #EBEDF0;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.st-source-select:hover {
  border-color: #DEE5EF;
}

.st-source-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-source-line1 {
  font-size: 14px;
  color: #6B788E;
  font-weight: 400;
  line-height: 20px;
}

.st-source-line2 {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.st-balance-val {
  font-size: 16px;
  font-weight: 600;
  color: #091E42;
  line-height: 24px;
}

.st-balance-cur {
  font-size: 16px;
  font-weight: 400;
  color: #6B788E;
  line-height: 24px;
}

.st-dropdown-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-icon-down {
  width: 20px;
  height: 20px;
  display: block;
}

.st-icon-contact {
  width: 24px;
  height: 24px;
  display: block;
}

.st-icon-info {
  width: 16px;
  height: 16px;
  display: block;
}

.st-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.st-input-wrap, .st-select-wrap {
  position: relative;
  width: 100%;
  height: 48px;
  border: 1px solid #DEE5EF;
  border-radius: 8px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.st-bank-wrap {
  border-color: #EBEDF0;
}

.st-bank-display {
  display: flex;
  align-items: center;
  gap: 12px;
}

.st-bank-msb-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.st-bank-name {
  font-size: 16px;
  font-weight: 500;
  color: #091E42;
  line-height: 24px;
}

.st-select-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.st-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  color: #091E42;
  line-height: 24px;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
}

.st-input::placeholder {
  color: #8C9BAB;
  font-weight: 400;
}

.st-contact-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.st-readonly-input {
  height: 48px;
  padding: 8px 12px;
  background: #EDEFF1;
  border: 1px solid #DEE5EF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #091E42;
  line-height: 24px;
  box-sizing: border-box;
}

.st-checkbox-group {
  display: flex;
  align-items: center;
}

.st-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #091E42;
  user-select: none;
}

.st-checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #DEE5EF;
  border-radius: 4px;
  cursor: pointer;
  accent-color: #F4600C;
}

.st-amount-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.st-amount-wrap.has-error {
  border-color: #F04438;
}

.st-amount-input {
  font-size: 16px;
  font-weight: 600;
  color: #091E42;
}

.st-currency-suffix {
  font-size: 16px;
  font-weight: 400;
  color: #505F79;
  line-height: 24px;
  flex-shrink: 0;
  margin-left: 8px;
}

.st-caption-text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #F04438;
  margin-top: 4px;
}

.st-select {
  width: 100%;
  height: 100%;
  padding: 0 24px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: #091E42;
  border: none;
  background: transparent;
  outline: none;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
}

.st-select-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.st-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.st-label-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.st-info-icon {
  display: inline-flex;
  cursor: pointer;
}

.st-word-count {
  font-size: 14px;
  font-weight: 400;
  color: #505F79;
  line-height: 20px;
}

.st-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #091E42;
  border: 1px solid #DEE5EF;
  border-radius: 8px;
  background: #FFFFFF;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  resize: none;
}

.st-textarea:focus {
  border-color: #F4600C;
}

.st-schedule-box {
  background: #F7F8F9;
  border-radius: 8px;
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.st-schedule-placeholder {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #091E42;
}

.st-schedule-edit-link {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #F4600C;
  text-decoration: underline;
  cursor: pointer;
}

.st-btn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.st-btn {
  height: 44px;
  min-width: 120px;
  padding: 8px 24px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-sizing: border-box;
  font-family: inherit;
}

.st-btn-outline {
  background: #FFFFFF;
  border: 1px solid #F4600C;
  color: #F4600C;
}

.st-btn-outline:hover {
  background: #FFF7F3;
}

.st-btn-primary {
  background: #F4600C;
  border: 1px solid #F4600C;
  color: #FFFFFF;
}

.st-btn-primary:hover {
  background: #DE5305;
  border-color: #DE5305;
}

.st-error-text {
  font-size: 12px;
  color: #F04438;
  margin-top: 4px;
}

/* Step 2 Overview & Step 3 Result (Figma node 22430:106728) */
.st-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #091E42;
  margin: 0 0 16px;
  line-height: 28px;
}

/* Sender & Receiver grid in Step 2 */
.st-sender-receiver-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.st-party-card {
  background: #F4F5F7;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.st-party-logo-box {
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #EBEDF0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.st-party-bank-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.st-party-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.st-party-title {
  font-size: 15px;
  font-weight: 600;
  color: #091E42;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-party-meta {
  font-size: 13px;
  font-weight: 400;
  color: #6B788E;
  line-height: 18px;
  margin-top: 2px;
}

.st-transfer-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-transfer-arrow-img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Amount & Fee display in Review & Result */
.st-review-amount-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.st-review-amount-item, .st-review-fee-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-meta-label {
  font-size: 14px;
  font-weight: 400;
  color: #6B788E;
  line-height: 20px;
}

.st-meta-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.st-amount-number {
  font-size: 24px;
  font-weight: 700;
  color: #091E42;
  line-height: 32px;
}

.st-amount-unit {
  font-size: 16px;
  font-weight: 500;
  color: #6B788E;
}

.st-meta-fee {
  display: flex;
  align-items: baseline;
}

.st-fee-number {
  font-size: 16px;
  font-weight: 600;
  color: #091E42;
  line-height: 24px;
}

.st-fee-disclaimer {
  font-size: 12px;
  font-weight: 400;
  color: #6B788E;
  line-height: 16px;
  margin-top: 2px;
}

/* Divider line */
.st-divider-line {
  height: 1px;
  background: #EBEDF0;
  margin: 20px 0;
  border: none;
}

/* Details grid */
.st-review-details-grid, .st-result-details-grid, .st-result-audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 20px;
}

.st-detail-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.st-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.st-meta-val {
  font-size: 15px;
  font-weight: 600;
  color: #091E42;
  line-height: 22px;
  word-break: break-word;
}

.st-bank-val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.st-bank-inline-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  border-radius: 50%;
}

/* Button row aligned right */
.st-btn-row-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 24px;
}

/* Result Screen Specifics */
.st-result-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.st-result-success-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.st-success-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.st-success-badge-img {
  width: 56px;
  height: 56px;
  display: block;
}

.st-success-text-box {
  display: flex;
  flex-direction: column;
}

.st-result-success-title {
  font-size: 20px;
  font-weight: 700;
  color: #12B76A;
  line-height: 28px;
  margin: 0;
}

.st-result-timestamp {
  font-size: 14px;
  font-weight: 400;
  color: #6B788E;
  line-height: 20px;
  margin-top: 2px;
}

.st-approver-field {
  margin-top: 20px;
}

.st-link-more {
  color: #F4600C;
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
  margin-left: 4px;
}

@media (max-width: 768px) {
  .st-grid-2col, .st-review-details-grid, .st-result-details-grid, .st-result-audit-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .st-sender-receiver-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .st-transfer-arrow {
    transform: rotate(90deg);
  }
  .st-btn-row, .st-btn-row-right {
    flex-direction: column-reverse;
  }
  .st-btn {
    width: 100%;
  }
}

/* ========================================================================= */
/* MSB BILL PAYMENT (ELECTRIC & WATER) STYLES (from msb-business-banking)    */
/* ========================================================================= */
.wrap-water-bill-payment-initiate {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 20px 48px;
}

.wrap-port-heading {
  font-size: 24px;
  font-weight: 700;
  color: #091E42;
  margin: 0 0 20px 0;
  line-height: 32px;
}

/* STEP 1: INFORMATION */
.water-bill-payment-information .card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 16px;
  box-shadow: 0px 1px 3px rgba(9, 30, 66, 0.08);
  background-color: #FFFFFF;
  padding: 24px;
  border: 1px solid #EBEDF0;
}

.bp-account-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bp-account-label, .bp-label {
  font-size: 14px;
  font-weight: 500;
  color: #091E42;
  line-height: 20px;
}

.bp-account-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  height: 64px;
  background: #FFFFFF;
  border: 1px solid #EBEDF0;
  border-radius: 8px;
  box-sizing: border-box;
}

.bp-account-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bp-account-name-num {
  font-size: 14px;
  color: #6B788E;
  font-weight: 400;
}

.bp-account-balance {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.bp-balance-amt {
  font-size: 16px;
  font-weight: 600;
  color: #091E42;
}

.bp-balance-cur {
  font-size: 12px;
  color: #6B788E;
  font-weight: 400;
}

.bp-form-row {
  display: flex;
  gap: 20px;
}

.ps-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bp-select-container {
  position: relative;
  height: 48px;
  background: #FFFFFF;
  border: 1px solid #EBEDF0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  transition: border-color 0.15s;
}

.bp-select-container:hover {
  border-color: #DEE5EF;
}

.bp-provider-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  pointer-events: none;
}

.bp-provider-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.bp-provider-badge.electric-badge {
  background: #FFF7ED;
}

.bp-provider-badge.water-badge {
  background: #F0F9FF;
}

/* Icon nhà cung cấp dùng bộ tone-icon của MSB Design System (rm-icon). */
.bp-provider-badge rm-icon {
  width: 22px;
  height: 22px;
}

.bp-provider-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.supplier-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.bp-provider-text {
  font-size: 14px;
  font-weight: 500;
  color: #091E42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-native-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.bp-select-arrow {
  margin-left: auto;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.bp-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bp-input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 14px;
  border: 1px solid #EBEDF0;
  border-radius: 8px;
  font-size: 14px;
  color: #091E42;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.bp-input:focus {
  border-color: #F4600C;
}

.contact-icon-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.15s;
}

.contact-icon-btn:hover {
  background-color: #F4F5F7;
}

.bp-error-caption {
  font-size: 12px;
  color: #DE350B;
  margin-top: 4px;
}

.bp-checkbox-wrapper {
  display: flex;
  align-items: center;
}

.bp-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #091E42;
}

.bp-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  accent-color: #F4600C;
  cursor: pointer;
}

/* BILL INFORMATION CONTAINER */
.bill-information {
  padding: 16px;
  background-color: #F4F5F7;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.customer-information {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bp-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.label-name {
  min-width: 150px;
  font-size: 13px;
  color: #6B788E;
}

.bp-val-text {
  font-size: 13px;
  font-weight: 500;
  color: #091E42;
}

.vertical-border {
  border-bottom: 1px solid #DFE1E6;
}

.invoice-period {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invoice-period-title {
  font-size: 14px;
  font-weight: 600;
  color: #091E42;
}

.bp-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #505F79;
}

.text-money {
  color: #F4600C;
  font-weight: 600;
}

.bill-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
}

.bill-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #DFE1E6;
  background-color: #FFFFFF;
  cursor: pointer;
  transition: all 0.15s;
}

.bill-item:hover {
  border-color: #F4600C;
}

.bill-item.checked-item {
  border-color: #F4600C;
  background-color: #FFF9F5;
}

.invoice-no-text {
  font-size: 13px;
  color: #6B788E;
}

.bill-item-information {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.bill-item-information .amount {
  min-width: 130px;
  font-size: 14px;
  font-weight: 600;
  color: #091E42;
}

.bill-item-information .time {
  min-width: 90px;
  font-size: 13px;
  color: #505F79;
}

.bill-item-information .desc {
  font-size: 13px;
  color: #6B788E;
}

.button-section {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.bp-btn {
  height: 44px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bp-btn-secondary {
  background-color: #FFFFFF;
  color: #091E42;
  border: 1px solid #DFE1E6;
}

.bp-btn-secondary:hover {
  background-color: #F4F5F7;
}

.bp-btn-primary {
  background-color: #F4600C;
  color: #FFFFFF;
}

.bp-btn-primary:hover {
  background-color: #DD4C00;
}

.bp-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* STEP 2: REVIEW (ew-bill-payment-initiate-review) */
.ew-bill-payment-initiate-review {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0px 1px 3px rgba(9, 30, 66, 0.08);
  border: 1px solid #EBEDF0;
  gap: 20px;
}

.confirm-info-title {
  font-size: 18px;
  font-weight: 600;
  color: #091E42;
}

.ew-bill-info-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #EBEDF0;
}

.ew-bill-info-top .item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ew-bill-info-top .title {
  font-size: 13px;
  color: #6B788E;
}

.ew-bill-info-top .content {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.text-money-large {
  font-size: 20px;
  font-weight: 700;
  color: #F4600C;
}

.ew-bill-info {
  background-color: #F4F5F7;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.supplier-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.supplier-name {
  font-size: 15px;
  font-weight: 600;
  color: #091E42;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: #DFE1E6;
}

.supplier-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.supplier-info .supplier-id,
.supplier-info .supplier-name,
.supplier-info .supplier-address {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.supplier-info .title {
  min-width: 150px;
  font-size: 13px;
  color: #6B788E;
}

.supplier-info .info {
  font-size: 13px;
  font-weight: 500;
  color: #091E42;
}

.bill-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.bill-item-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 10px 14px;
  border: 1px solid #EBEDF0;
}

.bill-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F4F5F7;
  flex-shrink: 0;
}

.bill-icon-badge rm-icon {
  width: 22px;
  height: 22px;
}

.bill-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.bill-info .bill-title {
  font-size: 13px;
  color: #6B788E;
}

.bill-info-detail {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.bill-info-detail .bill-amt {
  font-size: 14px;
  font-weight: 600;
  color: #091E42;
  min-width: 130px;
}

.bill-info-detail .bill-period {
  font-size: 13px;
  color: #505F79;
  min-width: 80px;
}

.bill-info-detail .bill-desc {
  font-size: 13px;
  color: #6B788E;
}

.term-section {
  padding: 8px 0;
}

.term-text {
  font-size: 13px;
  color: #505F79;
  line-height: 18px;
}

.download-link {
  color: #0072BC;
  text-decoration: underline;
}

.ew-bill-initiate-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

/* STEP 3: RESULT (EW-initiate-payment-initiate-result) */
.EW-initiate-payment-initiate-result {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0px 1px 3px rgba(9, 30, 66, 0.08);
  border: 1px solid #EBEDF0;
  gap: 20px;
}

.bill-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bill-success-title {
  font-size: 20px;
  font-weight: 700;
  color: #091E42;
  line-height: 28px;
}

.bill-date {
  font-size: 13px;
  color: #6B788E;
  margin-top: 2px;
}

.EW-initiate-info-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 12px 0;
}

.EW-initiate-info-top .item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.EW-initiate-info-top .title {
  font-size: 13px;
  color: #6B788E;
}

.EW-initiate-info-top .content {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.EW-initiate-info {
  background-color: #F4F5F7;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.EW-initiate-info-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #F9FAFC;
  border-radius: 8px;
  border: 1px dashed #DFE1E6;
}

.EW-initiate-info-bottom .item {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.EW-initiate-info-bottom .title {
  min-width: 150px;
  font-size: 13px;
  color: #6B788E;
}

.EW-initiate-info-bottom .content,
.EW-initiate-info-bottom .approvers {
  font-size: 13px;
  color: #091E42;
}

.bp-ref-code {
  font-weight: 600;
  color: #F4600C;
}

.toggle-view-more {
  background: none;
  border: none;
  color: #F4600C;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-top: -4px;
}

.toggle-view-more .wrap-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wrap-view-inquire-list {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

/* MODAL: CUSTOMER CODE (msb-customer-code-modal) */
.bp-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(9, 30, 66, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.bp-modal-dialog {
  background: #FFFFFF;
  border-radius: 12px;
  width: 540px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(9, 30, 66, 0.16);
  overflow: hidden;
}

.bp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #EBEDF0;
}

.bp-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #091E42;
  margin: 0;
}

.bp-modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
}

.bp-modal-close-btn:hover {
  background: #F4F5F7;
}

.bp-modal-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.bp-modal-search {
  position: relative;
  display: flex;
  align-items: center;
}

.bp-modal-search-icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
}

.bp-modal-search-input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 38px;
  border: 1px solid #DFE1E6;
  border-radius: 8px;
  font-size: 13px;
  color: #091E42;
  outline: none;
  box-sizing: border-box;
}

.bp-modal-search-input:focus {
  border-color: #F4600C;
}

.bp-customer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
}

.bp-customer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #EBEDF0;
  cursor: pointer;
  transition: all 0.15s;
  background: #FFFFFF;
}

.bp-customer-item:hover {
  border-color: #F4600C;
  background: #FFF9F5;
}

.bp-customer-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bp-customer-name {
  font-size: 14px;
  font-weight: 600;
  color: #091E42;
}

.bp-customer-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #505F79;
}

.bp-cust-code {
  font-weight: 500;
  color: #F4600C;
}

.bp-customer-addr {
  font-size: 12px;
  color: #6B788E;
}

.bp-empty-customers {
  text-align: center;
  padding: 24px 0;
}

@media (max-width: 768px) {
  .bp-form-row {
    flex-direction: column;
    gap: 16px;
  }
  .ew-bill-info-top, .EW-initiate-info-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ===================== THANH TOÁN DỊCH VỤ CẢNG ===================== */
/* Dựng theo msb-business-banking: feature-port-service-initiate */
.bp-provider-badge.port-badge {
  background: #F4F6F9;
}

.ps-inform {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 16px;
}

.ps-inform rm-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.ps-inform-info {
  background: #EFF8FF;
  color: #175CD3;
}

.ps-inform-warning {
  background: #FFFAEB;
  color: #B54708;
}

.ps-invoice-card {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #F4F6F9;
}

.ps-invoice-title {
  display: block;
  margin-bottom: 12px;
  color: #091E42;
}

.ps-invoice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

.ps-invoice-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ps-invoice-item .title {
  color: #6B788E;
}

.ps-invoice-item .content {
  color: #091E42;
  overflow-wrap: anywhere;
}

.ps-link-btn {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #F4600C;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ps-description {
  margin-top: 16px;
}

.bp-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bp-word-count {
  color: #6B788E;
  font-size: 12px;
}

.bp-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #DFE1E6;
  border-radius: 8px;
  font: 400 14px/20px Inter, Arial, sans-serif;
  color: #091E42;
  resize: vertical;
  outline: 0;
}

.bp-textarea:focus {
  border-color: #F4600C;
  box-shadow: 0 0 0 2px rgba(244, 96, 12, .18);
}

.bp-hint-caption {
  margin-top: 4px;
  color: #6B788E;
  font-size: 12px;
}

@media (max-width: 720px) {
  .ps-invoice-grid {
    grid-template-columns: 1fr;
  }
}

/* Dòng yêu cầu khách hàng vừa tạo trong các danh sách nghiệp vụ. */
.production-table tr.is-new > td { background: #FFF9F5; }
.production-table tr.is-new .request-detail-link { color: #F4600C; font-weight: 600; }