*,*:before,*:after{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f7fa}#root{min-height:100vh}h1,h2,h3,h4,h5,h6,p{margin:0}ul,ol{margin:0;padding:0;list-style:none}button{background:none;border:none;padding:0;cursor:pointer;font:inherit}input,textarea,select{font:inherit;border:none;outline:none}a{text-decoration:none;color:inherit}table{border-collapse:collapse;border-spacing:0}fieldset{margin:0;padding:0;border:none}legend{padding:0}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{text-rendering:optimizeLegibility;-webkit-font-feature-settings:"kern" 1;font-feature-settings:"kern" 1}html{scroll-behavior:smooth}body{overflow-x:hidden}:focus{outline:2px solid #667eea;outline-offset:2px}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid #667eea;outline-offset:2px}@font-face{font-family:VNI;src:url(/fonts/Helvetica.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}.vni-name{font-family:VNI,sans-serif}@font-face{font-family:VNI;src:url(/fonts/Helvetica-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}.vni-name{font-family:VNI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}@media (max-width: 768px){.vni-name{font-size:.95em}}.survey-container{min-height:100vh;background:#f5f7fa;padding:20px;position:relative}.error-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.error-modal{background:#fff;border-radius:12px;box-shadow:0 10px 30px #0000004d;max-width:400px;width:90%;overflow:hidden;animation:slideIn .3s ease}.error-header{background:#ff6b6b;color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.error-header h3{margin:0;font-size:1.1rem;font-weight:600}.error-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s ease}.error-close:hover{background:#fff3}.error-content{padding:20px}.error-content p{margin:0;color:#333;line-height:1.5;font-size:.95rem}.error-footer{padding:15px 20px;border-top:1px solid #eee;text-align:right}.error-btn{background:#667eea;color:#fff;border:none;padding:8px 20px;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:500;transition:background .2s ease;min-height:44px}.error-btn:hover{background:#5a67d8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.survey-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:15px;padding:30px;margin-bottom:25px;box-shadow:0 8px 25px #667eea26;text-align:center}.header-content{display:flex;justify-content:center;align-items:center}.survey-title{color:#fff;margin:0;font-size:1.6rem;font-weight:700;line-height:1.4;text-shadow:0 2px 4px rgba(0,0,0,.1)}.purpose-section{background:#fff;border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 4px 15px #00000014;border-left:4px solid #4CAF50}.purpose-section h2{color:#2c3e50;margin:0 0 15px;font-size:1.3rem;font-weight:600;display:flex;align-items:center;gap:8px}.purpose-section h2:before{content:"🎯";font-size:1.2rem}.purpose-section ul{margin:0;padding-left:20px;list-style-type:none}.purpose-section li{margin-bottom:10px;color:#555;line-height:1.5;position:relative;padding-left:20px;text-align:left}.purpose-section li:before{content:"✓";color:#4caf50;font-weight:700;position:absolute;left:0}.instruction-section{background:#fff;border-radius:12px;padding:25px;margin-bottom:25px;box-shadow:0 4px 15px #00000014;border-left:4px solid #2196F3}.instruction-section h2{color:#2c3e50;margin:0 0 15px;font-size:1.3rem;font-weight:600;display:flex;align-items:center;gap:8px}.instruction-section h2:before{content:"📋";font-size:1.2rem}.instruction-section p{margin:0;color:#555;line-height:1.6;font-size:1rem;text-align:left}.user-info{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.user-profile{display:flex;align-items:center;gap:12px}.user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #667eea}.user-details{display:flex;flex-direction:column;gap:2px}.user-name{color:#333;font-size:1rem;font-weight:500}.user-id{color:#666;font-size:.85rem}.card-input-section{background:#fff;border-radius:12px;padding:25px;margin-bottom:25px;box-shadow:0 4px 15px #00000014;border-left:4px solid #9C27B0;text-align:center}.card-section-title{color:#2c3e50;margin:0 0 20px;font-size:1.3rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}.card-section-title:before{content:"🔑";font-size:1.2rem}.employee-info-section{background:#fff;border-radius:12px;padding:25px;margin-bottom:25px;box-shadow:0 4px 15px #00000014;border-left:4px solid #FF9800}.employee-info-section h2{color:#2c3e50;margin:0 0 20px;font-size:1.3rem;font-weight:600;display:flex;align-items:center;gap:8px}.employee-info-section h2:before{content:"👤";font-size:1.2rem}.card-input-container{max-width:500px;margin:0 auto}.card-input-group{display:flex;flex-direction:column;gap:12px}.card-label{font-weight:600;color:#2c3e50;font-size:1rem;margin-bottom:8px}.input-wrapper{display:flex;gap:12px;align-items:stretch}.card-input{flex:1;padding:12px 16px;border:2px solid #e1e5e9;border-radius:8px;font-size:1rem;transition:all .3s ease;background:#fff;min-height:44px;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}.card-input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.card-input:disabled{background:#f1f3f4;color:#9aa0a6;cursor:not-allowed}.card-submit-btn{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;min-width:100px;justify-content:center;min-height:44px}.card-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.card-submit-btn:disabled{background:#bdc3c7;cursor:not-allowed;transform:none;box-shadow:none}.loading-spinner{animation:spin 1s linear infinite}.error-message{display:flex;align-items:center;gap:8px;color:#e74c3c;font-size:.9rem;margin-top:8px;padding:8px 12px;background:#fdf2f2;border:1px solid #fecaca;border-radius:6px}.error-icon{font-size:1rem}.employee-display-card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:20px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;border:1px solid #dee2e6}.employee-details{flex:1;display:flex;flex-direction:column;gap:8px;width:100%}.employee-field{display:flex;align-items:center;gap:12px}.field-label{font-weight:700;color:#343a40;min-width:90px;font-size:1rem}.field-value{color:#212529;font-weight:600;font-size:1.1rem}.employee-actions{flex-shrink:0;width:100%;text-align:center}.logout-btn{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;font-size:.9rem;box-shadow:0 2px 8px #6c5ce74d;justify-content:center;min-height:44px}.logout-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #6c5ce766;background:linear-gradient(135deg,#5f3dc4,#6c5ce7)}.logout-icon{font-size:1rem}.survey-form{background:#fff;border-radius:15px;padding:25px;box-shadow:0 5px 15px #00000014;max-width:800px;margin:0 auto}.question-group{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid #e1e5e9}.question-group:last-of-type{border-bottom:none}.question-group h3{color:#333;margin-bottom:20px;font-size:1.1rem;font-weight:600;line-height:1.4}.radio-group,.checkbox-group{display:flex;flex-direction:column;gap:12px}.radio-label{display:flex;align-items:center;cursor:pointer;padding:12px;border-radius:8px;transition:all .3s ease;border:2px solid transparent;min-height:44px;position:relative;z-index:1;-webkit-tap-highlight-color:rgba(102,126,234,.2)}.radio-label:hover{background:#f8f9fa;border-color:#e1e5e9}.radio-label input[type=radio]{display:none}.radio-custom{width:20px;height:20px;border:2px solid #ddd;border-radius:50%;margin-right:12px;position:relative;transition:all .3s ease;flex-shrink:0}.radio-label input[type=radio]:checked+.radio-custom{border-color:#667eea;background:#667eea}.radio-label input[type=radio]:checked+.radio-custom:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#fff;border-radius:50%}.checkbox-label{display:flex;align-items:center;cursor:pointer;padding:12px;border-radius:8px;transition:all .3s ease;border:2px solid transparent;min-height:44px;position:relative;z-index:1;-webkit-tap-highlight-color:rgba(102,126,234,.2)}.checkbox-label:hover{background:#f8f9fa;border-color:#e1e5e9}.checkbox-label input[type=checkbox]{display:none}.checkbox-custom{width:20px;height:20px;border:2px solid #ddd;border-radius:4px;margin-right:12px;position:relative;transition:all .3s ease;flex-shrink:0}.checkbox-label input[type=checkbox]:checked+.checkbox-custom{border-color:#667eea;background:#667eea}.checkbox-label input[type=checkbox]:checked+.checkbox-custom:after{content:"";position:absolute;top:2px;left:6px;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.radio-option,.checkbox-option{display:flex;align-items:center;cursor:pointer;padding:10px;border-radius:10px;transition:all .3s ease;border:2px solid #e1e5e9;margin-bottom:10px;background:#fff;box-shadow:0 2px 4px #0000000d;position:relative;z-index:1;min-height:44px}.radio-option:hover,.checkbox-option:hover{background:#f8f9fa;border-color:#667eea;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.radio-option input[type=radio],.checkbox-option input[type=checkbox]{width:22px;height:22px;margin-right:15px;flex-shrink:0;cursor:pointer;accent-color:#667eea}.radio-text,.checkbox-text{flex:1;line-height:1.5;font-size:1rem;color:#333;font-weight:500}.input-group{margin-top:15px}.phone-input{width:100%;padding:15px;border:2px solid #e1e5e9;border-radius:10px;font-size:1rem;transition:all .3s ease;box-sizing:border-box}.phone-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.phone-preview{margin-top:8px;color:#667eea;font-size:.9rem;font-weight:500}.phone-error{margin-top:8px;color:#e74c3c;font-size:.9rem;font-weight:500}.phone-input.error{border-color:#e74c3c!important;box-shadow:0 0 0 3px #e74c3c1a!important}.address-section{margin-top:0;padding-top:0}.old-address{background:#f8f9fa;border:2px solid #e1e5e9;border-radius:8px;padding:15px;margin-bottom:20px}.old-address h4{color:#333;margin:0 0 8px;font-size:1rem;font-weight:600}.old-address p{color:#666;margin:0;font-size:.95rem;line-height:1.4}.address-section h3{color:#333;margin-bottom:25px;font-size:1.2rem;font-weight:600}.address-form{background:#f8f9fa;padding:25px;border-radius:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.form-group{margin-bottom:5px}.form-group label{display:block;margin-bottom:8px;color:#333;font-weight:600;font-size:.95rem}.form-group select,.form-group textarea{width:100%;padding:12px;border:2px solid #e1e5e9;border-radius:8px;font-size:1rem;transition:all .3s ease;box-sizing:border-box;background:#fff}.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group select:disabled{background:#f5f5f5;color:#999;cursor:not-allowed}.form-group textarea{resize:vertical;min-height:80px}.form-actions{margin-top:10px;text-align:center}.submit-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px 40px;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:200px;min-height:44px}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.submit-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.loading{display:flex;justify-content:center;align-items:center;min-height:100vh;font-size:1.2rem;color:#666}.success-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.success-card{background:#fff;border-radius:20px;box-shadow:0 20px 40px #0000001a;padding:40px;text-align:center;max-width:400px}.success-card h2{color:#27ae60;margin-bottom:15px;font-size:1.5rem}.success-card p{color:#666;margin-bottom:10px;font-size:1rem}.xml-info{background:#f8f9fa;border:2px solid #667eea;border-radius:12px;padding:20px;margin:20px 0;text-align:left}.xml-info h3{color:#667eea;margin-bottom:15px;font-size:1.1rem;font-weight:600}.xml-info p{color:#555;margin-bottom:8px;font-size:.95rem;line-height:1.4}.react-select-container{width:100%}.react-select__control{border:2px solid #e1e5e9!important;border-radius:8px!important;min-height:44px!important;box-shadow:none!important;background:#fff!important}.react-select__control:hover{border-color:#667eea!important}.react-select__control--is-focused{border-color:#667eea!important;box-shadow:0 0 0 3px #667eea1a!important}.react-select__control--is-disabled{background:#f5f5f5!important;border-color:#e1e5e9!important}.react-select__placeholder{color:#999!important;font-size:1rem!important}.react-select__input-container,.react-select__single-value{color:#333!important;font-size:1rem!important}.react-select__menu{border:2px solid #e1e5e9!important;border-radius:8px!important;box-shadow:0 8px 25px #00000026!important;background:#fff!important;margin-top:4px!important}.react-select__option{background:#fff!important;color:#333!important;padding:12px 16px!important;font-size:1rem!important}.react-select__option:hover{background:#e3f2fd!important;color:#1976d2!important}.react-select__option--is-focused,.react-select__option--is-selected{background:#667eea!important;color:#fff!important;font-weight:600!important}.react-select__indicator-separator{display:none!important}.react-select__clear-indicator{color:#999!important}.react-select__clear-indicator:hover{color:#e74c3c!important}.react-select__dropdown-indicator{color:#999!important}.react-select__dropdown-indicator:hover{color:#667eea!important}@media (max-width: 768px){.survey-container{padding:10px}.survey-header{padding:20px 15px;margin-bottom:15px}.survey-title{font-size:1.3rem;line-height:1.3}.purpose-section,.instruction-section,.employee-info-section,.card-input-section{padding:20px 15px;margin-bottom:15px}.purpose-section h2,.instruction-section h2,.employee-info-section h2,.card-section-title{font-size:1.1rem;margin-bottom:15px}.purpose-section li{font-size:.9rem;margin-bottom:8px}.instruction-section p{font-size:.9rem;line-height:1.5}.employee-display-card{flex-direction:column;align-items:flex-start;gap:15px;padding:15px}.employee-details{gap:6px;width:100%}.employee-field{gap:8px}.field-label{min-width:80px;font-size:.9rem}.field-value{font-size:1rem}.card-input-container{max-width:100%}.input-wrapper{flex-direction:column;gap:10px}.card-submit-btn{width:100%;justify-content:center}.header-content{gap:10px}.user-info{width:100%;justify-content:space-between;gap:10px}.user-profile{gap:8px}.user-avatar{width:35px;height:35px}.user-name{font-size:.9rem}.user-id{font-size:.8rem}.logout-btn{font-size:.85rem;padding:8px 14px;justify-content:center}.error-modal{margin:20px;max-width:350px}.error-header{padding:12px 15px}.error-content{padding:15px}.error-footer{padding:12px 15px}.survey-form{padding:18px}.question-group{margin-bottom:20px;padding-bottom:15px}.form-row{grid-template-columns:1fr;gap:12px}.address-form{padding:18px}.submit-button{width:100%;padding:15px}}@media (max-width: 480px){.survey-container{padding:8px}.survey-header{padding:12px;margin-bottom:12px}.header-top{margin-bottom:8px;gap:12px}.company-logo{max-width:70px;max-height:45px}.survey-header h1{font-size:1.2rem;line-height:1.2}.survey-form{padding:15px}.question-group{margin-bottom:18px;padding-bottom:12px}.question-group h3{font-size:1rem;margin-bottom:15px}.question-header{margin-bottom:12px}.question-title{font-size:1rem;line-height:1.4}.question-note{font-size:.85rem;margin-top:5px}.radio-label,.checkbox-label,.radio-option,.checkbox-option{padding:0 10px;align-items:center;margin-bottom:0;border-radius:8px}.radio-custom,.checkbox-custom{width:18px;height:18px;margin-right:10px;flex-shrink:0}.radio-option input[type=radio],.checkbox-option input[type=checkbox]{width:20px;height:20px;margin-right:12px;flex-shrink:0}.radio-label span,.checkbox-label span,.radio-text,.checkbox-text{flex:1;line-height:1.4;word-wrap:break-word;font-size:.95rem}.phone-input{padding:12px;font-size:16px}.address-form{padding:15px}.form-group select,.form-group textarea{padding:10px;font-size:16px}.react-select__control{min-height:44px!important;font-size:16px!important}.react-select__placeholder,.react-select__single-value,.react-select__input-container{font-size:16px!important}.react-select__option{padding:12px 16px!important;font-size:16px!important}}@media (max-width: 360px){.survey-container{padding:8px}.survey-header{padding:15px 10px;margin-bottom:12px}.survey-title{font-size:1.1rem;line-height:1.2}.purpose-section,.instruction-section,.employee-info-section,.card-input-section{padding:15px 10px;margin-bottom:12px}.purpose-section h2,.instruction-section h2,.employee-info-section h2,.card-section-title{font-size:1rem;margin-bottom:12px}.purpose-section li{font-size:.85rem;margin-bottom:6px}.instruction-section p{font-size:.85rem}.employee-display-card{flex-direction:column;align-items:flex-start;gap:12px;padding:12px}.employee-details{gap:5px;width:100%}.employee-field{gap:6px}.field-label{min-width:70px;font-size:.85rem}.logout-btn{font-size:.8rem;padding:6px 10px;justify-content:center}.field-value{font-size:.9rem}.card-input{padding:10px 12px;font-size:.9rem}.card-submit-btn{padding:10px 16px;font-size:.85rem}.user-name{font-size:.85rem}.user-id{font-size:.75rem}.logout-btn{padding:5px 10px;font-size:.8rem}.survey-form{padding:12px}.question-group{margin-bottom:15px;padding-bottom:10px}.question-group h3{font-size:.95rem;margin-bottom:12px}.question-header{margin-bottom:10px}.question-title{font-size:.95rem;line-height:1.3}.question-note{font-size:.8rem;margin-top:4px}.radio-label,.checkbox-label,.radio-option,.checkbox-option{padding:0 8px;align-items:center;margin-bottom:0;border-radius:6px}.radio-custom,.checkbox-custom{width:16px;height:16px;margin-right:8px}.radio-option input[type=radio],.checkbox-option input[type=checkbox]{width:18px;height:18px;margin-right:10px;flex-shrink:0}.radio-label span,.checkbox-label span,.radio-text,.checkbox-text{font-size:.9rem;line-height:1.3}.address-form{padding:12px}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;background:#f8f9fa;border-radius:12px;margin:20px;box-shadow:0 2px 8px #0000001a}.loading-spinner{width:40px;height:40px;border:4px solid #e1e5e9;border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}.loading-text{color:#6c757d;font-size:1rem;font-weight:500;margin:0;text-align:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button,input[type=button],input[type=submit],.radio-label,.checkbox-label,.radio-option,.checkbox-option,.card-submit-btn,.logout-btn,.submit-button{-webkit-tap-highlight-color:rgba(102,126,234,.3);touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}button,.radio-label,.checkbox-label,.radio-option,.checkbox-option{cursor:pointer}@media (max-width: 768px){.loading-container{margin:15px;padding:30px 15px}.loading-spinner{width:35px;height:35px;border-width:3px}.loading-text{font-size:.9rem}}@media (max-width: 480px){html{font-size:16px}.loading-container{margin:10px;padding:25px 12px}.loading-spinner{width:30px;height:30px;margin-bottom:12px}.loading-text{font-size:.85rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;color:#333}.App{min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}*:focus{outline:2px solid #667eea;outline-offset:2px}button:focus{outline:2px solid #667eea;outline-offset:2px}input:focus,select:focus,textarea:focus{outline:2px solid #667eea;outline-offset:2px}.radio-label:focus-within{outline:none}*{transition:all .3s ease}@media (max-width: 480px){html{font-size:16px}}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-width: 768px){button,input,select,textarea,.radio-label{min-height:44px}}