:root{--lightgray: #efefef;--blue: steelblue;--white: #fff;--black: rgba(0, 0, 0, 0.8);--bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15)} button{cursor: pointer;background: transparent;border: none;outline: none;font-size: inherit} .open-modal5{font-weight: bold;background: #274070;color: var(--white);padding: 0.35rem 0.55rem;margin-bottom: 1rem;border-radius: 5px} .modal5{position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;padding: 1rem;background: var(--black);cursor: pointer;visibility: hidden;opacity: 0;transition: all 0.35s ease-in;z-index:5} .modal5.is-visible{visibility: visible;opacity: 1} .modal5-dialog{position: relative;max-width: 800px;max-height: 80vh;border-radius: 5px;background: var(--white);overflow: auto;cursor: default} .modal5-dialog > *{padding: 1rem} .modal5-header, .modal5-footer{background: #95ffd3} .modal5-header{display: flex;align-items: center;justify-content: space-between;font: 18px/1.5 sans-serif} .modal5-header .close-modal5{font-size: 1.5rem} .modal5 p + p{margin-top: 1rem} /* ANIMATIONS –––––––––––––––––––––––––––––––––––––––––––––––––– */ [data-animation] .modal5-dialog{opacity: 0;transition: all 0.5s var(--bounceEasing)} [data-animation].is-visible .modal5-dialog{opacity: 1;transition-delay: 0.2s} [data-animation="slideInOutDown"] .modal5-dialog{transform: translateY(100%)} [data-animation="slideInOutTop"] .modal5-dialog{transform: translateY(-100%)} [data-animation="slideInOutLeft"] .modal5-dialog{transform: translateX(-100%)} [data-animation="slideInOutRight"] .modal5-dialog{transform: translateX(100%)} [data-animation="zoomInOut"] .modal5-dialog{transform: scale(0.2)} [data-animation="rotateInOutDown"] .modal5-dialog{transform-origin: top left;transform: rotate(-1turn)} [data-animation="mixInAnimations"].is-visible .modal5-dialog{-webkit-animation: mixInAnimations 2s 0.2s linear forwards;animation: mixInAnimations 2s 0.2s linear forwards} [data-animation="slideInOutDown"].is-visible .modal5-dialog, [data-animation="slideInOutTop"].is-visible .modal5-dialog, [data-animation="slideInOutLeft"].is-visible .modal5-dialog, [data-animation="slideInOutRight"].is-visible .modal5-dialog, [data-animation="zoomInOut"].is-visible .modal5-dialog, [data-animation="rotateInOutDown"].is-visible .modal5-dialog{transform: none} @-webkit-keyframes mixInAnimations{0%{transform: translateX(-100%)} 10%{transform: translateX(0)} 20%{transform: rotate(20deg)} 30%{transform: rotate(-20deg)} 40%{transform: rotate(15deg)} 50%{transform: rotate(-15deg)} 60%{transform: rotate(10deg)} 70%{transform: rotate(-10deg)} 80%{transform: rotate(5deg)} 90%{transform: rotate(-5deg)}  100%{transform: rotate(0deg)} } @keyframes mixInAnimations{0%{transform: translateX(-100%)} 10%{transform: translateX(0)} 20%{transform: rotate(20deg)} 30%{transform: rotate(-20deg)} 40%{transform: rotate(15deg)} 50%{transform: rotate(-15deg)} 60%{transform: rotate(10deg)} 70%{transform: rotate(-10deg)} 80%{transform: rotate(5deg)} 90%{transform: rotate(-5deg)} 100%{transform: rotate(0deg)} } .inputcss{display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 22px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none} .inputcss input{position: absolute;opacity: 0;cursor: pointer} .checkmarkcss{position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: #83c3bd;border-radius: 50%} .inputcss:hover input ~ .checkmarkcss{background-color: #00F328} .inputcss input:checked ~ .checkmarkcss{background-color: #F32000} .checkmarkcss:after{content: "";position: absolute;display: none} .inputcss input:checked ~ .checkmarkcss:after{display: block} .inputcss .checkmarkcss:after{top: 9px;left: 9px;width: 8px;height: 8px;border-radius: 50%;background: white} .ghd3 select{background-color: #49aabb;color: white;font-weight: bold;padding: 10px;cursor: pointer;font-size: 16px} .choose-file{height: 0.1px;opacity: 0;overflow: hidden;position: absolute;width: 0.1px;z-index: -1} .choose-file + .upload-file{background-color: #3b8279;box-sizing: border-box;color: #fff;display: block;font-family: Sans-serif;font-size: 14px;padding: 12px 0;text-align: center} .choose-file:focus + .upload-file, .choose-file + .upload-file:hover{background-color: #0d635f} label.upload-file::before{content: "Tải font lên"} .choose-file:valid + .upload-file::before{content: "Chọn font khác"} .khungabc{background-color: #fcfeff;padding: 15px 20px;margin-bottom: 20px;border-radius: 10px;box-shadow: 0 3px 8px rgba(0,0,0,0.1);font-family: Arial, sans-serif} .khungabc label{font-weight: bold;display: inline-block;margin-bottom: 6px;color: #333} .khungabc input[type="range"]{width: 100%;margin-top: 6px} .khungabc input[type="text"], .khungabc input[type="color"]{width: 110px;height: 32px;border: 1px solid #ccc;border-radius: 5px;padding: 4px 8px;font-size: 14px} .hienthi-span{background-color: #dbffff;color: red;padding: 2px 6px;border-radius: 4px;font-weight: bold} input[type="radio"]{margin: 10px} .labelabc{font-size: 14px;color: white;margin-left: 10px;padding: 5px 15px;border-radius: 5px;background: #39888E;cursor: pointer;transition: all 0.2s ease-in-out} input[type="radio"]:checked + label{background: linear-gradient(145deg, #28a745, #218838);color: white} #buttonanh{margin-top: 20px;display: none} #hienluachonanh{display: none;margin-top: 5px} .nav-tabs .nav-link{padding: 2px 5px;font-weight: bold;transition: all 0.3s ease-in-out;background-color: #E7E7E7;/* Nền trắng mờ */ } .nav-tabs .nav-link.active{background-color: #FF3CCC;color: white} .nav-tabs .nav-link:hover{background-color: #3DBBEF;color: white;border-radius: 8px} .modal-content{max-width: 90%;margin: auto} .modal-content{max-width: 90%;margin: auto} #cropPreview1, #cropPreview2{max-width: 100%;max-height: 200px;/* Giới hạn chiều cao */ object-fit: contain} .jansharee-selectable-image{cursor: pointer;transition: transform 0.2s;width: 80px;height: 80px;object-fit: cover} .jansharee-selectable-image:hover{transform: scale(1.1)} .janshare-library-container{max-width: 100%;max-height: 150px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;display: flex;gap: 10px;padding: 10px} .janshare-custom-file-upload{font-size: 12px;padding: 6px 10px;display: inline-block;padding: 8px 15px;cursor: pointer;border: 1px solid #007bff;background-color: #007bff;color: white;border-radius: 5px;text-align: center;font-size: 14px;transition: 0.3s} .janshare-custom-file-upload :hover{background-color: #0056b3} input[type="file"]{display: none} .inputkey-wrapper{width: 100%;max-width: 400px;margin: 20px auto;font-family: "Segoe UI", sans-serif} .inputkey-wrapper label{display: block;margin-bottom: 6px;font-weight: bold;color: #333;font-size: 15px} .inputkey-icon{position: relative} .inputkey-icon i{position: absolute;top: 50%;left: 16px;transform: translateY(-50%);color: #fd0505;font-size: 18px} .inputkey-icon input{width: 100%;padding: 10px 20px 10px 48px;border: 2px solid #6727e2;border-radius: 40px;outline: none;font-size: 16px;transition: all 0.3s ease;background-color: #fff;box-sizing: border-box} .inputkey-icon input::placeholder{color: #838383} .inputkey-icon input:hover{border-color: #bbb} .inputkey-icon input:focus{border-color: #007bff;box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1)}