@import"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";nav{display:flex;gap:20px;align-items:center;padding:10px;border:1px solid var(--grey-500)}nav>img{width:60px;height:auto}nav>h4{font-size:20px;font-family:Inter,sans-serif;padding-right:50px}nav>div{display:flex;align-items:center;width:800px;height:50px;border:1px solid var(--grey-500);border-radius:10px}div>input{font-size:12px;border:none;width:90%;height:100%;padding-left:15px;border-left:1px solid var(--grey-500)}input:focus{outline:none}div>.search-img-box{padding:26px 10px}div>svg{color:var(--grey-500);width:30px;height:auto}div>svg:hover{color:var(--blue-100);transition:1s;font-weight:100px}@media screen and (max-width: 1280px){nav{gap:10px;padding:25px}nav>img{width:55px;height:auto}nav>h4{font-size:18px;padding-right:40px}}@media screen and (max-width: 600px){nav{justify-content:space-between;gap:0;padding:10px}nav>img{width:30px}nav>h4{font-size:10px;padding-right:0}nav>div{width:190px;height:40px;border-radius:10px}div>.search-img-box{padding:5px}div>svg{width:20px}}section>.sidebar{display:flex}.sidebar{display:flex;flex-direction:column;justify-content:space-between;height:100vh;border-right:2px solid #ddd;position:sticky;top:0}.sidebar-btn{display:flex;flex-direction:column;gap:30px;padding:25px;flex-grow:1}.sidebar .sidebar-btn li{display:flex;flex-direction:row;align-items:center;font-size:20px;gap:15px;height:50px;width:250px;padding:20px 15px;border-radius:10px}.sidebar>.sidebar-btn h4{font-family:Inter;font-weight:400;font-size:20px;letter-spacing:.05em;padding-left:15px;color:var(--grey-500)}li>svg{color:var(--black-100);width:30px;height:auto}.sidebar>.sidebar-btn>li:hover{background:var(--blue-100);color:var(--white-1000);transition:.2s}.sidebar>.sidebar-btn>li:hover svg{color:var(--white-1000);transition:.2s}.sidebar>.sidebar-btn>li:hover a{color:var(--white-1000);transition:.2s}a{text-decoration:none;color:var(--black-100)}.house-icon{display:flex;justify-content:center;text-align:center;font-size:30px;height:auto}.cub-icon{display:flex;justify-content:center;text-align:center;font-size:26px;height:auto}@media screen and (max-width: 1280px){.sidebar>.sidebar-btn{padding:20px}.sidebar .sidebar-btn li{width:200px}}@media screen and (max-width: 600px){.sidebar>.sidebar-btn{gap:20px;padding:10px}.sidebar .sidebar-btn li{font-size:10px;gap:5px;height:40px;width:32px;align-items:center;padding:5px;border-radius:6px;border:1px solid}li a:last-of-type{display:none}.sidebar>.sidebar-btn h4{display:none}li>a{display:flex;align-items:center;justify-content:center;font-size:20px}li>svg{width:20px}.house-icon,.cub-icon{font-size:22px}}@media only screen and (min-width: 601px) and (max-width: 959px){.sidebar>.sidebar-btn{gap:20px;padding:15px}.sidebar .sidebar-btn li{font-size:20px;gap:5px;height:45px;width:42px;align-items:center;padding:5px;border-radius:6px;border:1px solid}li a:last-of-type{display:none}.sidebar>.sidebar-btn h4{display:none}li>a{display:flex;align-items:center;justify-content:center;font-size:30px}li>svg{width:20px}}article>h1{font-weight:400;font-size:30px;color:#000;margin-left:20px}h1>span{color:var(--blue-100)}div>section{display:flex}main>.title{display:flex;flex-direction:column;gap:30px}.title>h2{color:var(--grey-500);margin-left:20px}.title>h2>input{font-size:24px;color:var(--grey-500)}section>.banner-stock{display:flex;gap:50px;margin-left:20px}.banner-stock>.product-img{border:1px solid var(--grey-500);border-radius:10px;padding:30px 45px;height:450px;margin-bottom:60px}article>.list-product{border:none;display:flex;flex-direction:column;list-style:none;gap:10px}.area-stock>.stock-card{display:flex;flex-direction:column;gap:20px;align-items:center;border:1px solid var(--grey-500);border-radius:10px;padding-bottom:20px}.stock-card>.title-stock{background-color:var(--grey-1000);color:var(--grey-500);border-bottom:1px solid var(--grey-500);border-radius:10px 10px 0 0;width:100%;padding:20px 30px}.data-stock{display:flex;flex-direction:column;gap:20px;text-align:center}.data-stock>input{font-size:30px;font-weight:500;text-align:center;border:none;width:100%}.data-stock>h3{color:var(--grey-500)}.article-list-product{display:flex;justify-content:space-between;width:50%}.list-product>li{display:flex;justify-content:space-between;margin-left:20px;font-family:Inter;font-weight:600;font-size:20px}.list-product>li>input,.list-product>li>textarea,.precoo>input,b{color:var(--blue-100);font-size:20px;font-weight:700}.precoo>input{border:none;margin-left:-10px}.list-product>li>textarea{width:285px}textarea:focus{outline:none}.data-stock>button{width:390px;background-color:var(--blue-100);font-size:20px;height:50px;color:var(--white-1000);border:none}.data-stock>button:hover{background:var(--blue-500);color:var(--white-1000);transition:.2s}section>article{display:flex}.action-buttons>button{background-color:var(--blue-100);padding:12px 30px;margin-top:30px;font-size:20px;color:var(--white-1000);border:none;border-radius:10px;height:50px}button:hover{background:var(--blue-500);color:var(--white-1000);transition:.2s}.action-buttons{display:flex;justify-content:space-between}.bar-code{padding-bottom:20px}.bar-code img{max-width:100%;width:300px;height:auto;display:block;margin:0 auto}.product-img-view{width:auto;height:100%}@media screen and (max-width: 600px){main>.title{gap:0px}.title>h1{font-size:18px}.title>h1>input{font-size:16px}.title>h2{font-size:18px;font-weight:500}.title>h2>input{font-size:18px}section>.banner-stock{display:flex;flex-direction:column;gap:0px;width:75vw}.banner-stock>.product-img{padding:30px;height:280px;width:75vw;margin-bottom:30px}.bar-code img{width:75vw}article>.list-product{gap:10px}.data-stock>input{font-size:25px}.list-product>li{font-size:18px;text-align:center;width:280px}.list-product>li>input,.list-product>li>textarea,.precoo>input,b{font-size:18px;width:100px}.data-stock>button{width:75vw}.action-buttons>button{margin-top:30px;margin-bottom:30px;font-size:16px}}@media only screen and (min-width: 601px) and (max-width: 959px){section>.banner-stock{display:flex;flex-direction:column;gap:0px;width:80vw}.banner-stock>.product-img{padding:30px;height:600px;width:78vw;margin-bottom:30px}.bar-code{text-align:center}.bar-code img{width:60vw}.list-product>li>input,.list-product>li>textarea,.precoo>input,b{width:600px}.data-stock>button{width:80vw}.action-buttons>button{margin-top:30px;margin-bottom:30px}}.sidebar{border-right:2px solid #ddd;height:100vh}.home-add{display:flex;gap:10px}.section-addProd{width:100vw;border-top:0;border-bottom:0;border-right:0}.title{display:flex;flex-direction:column}.title>.div-input{display:flex;align-items:center;margin-bottom:30px}.div-input>label{font-size:30px}.div-input>.add-input{height:30px;font-size:20px;border:none}.sku-input{font-size:15px;height:30px;border:none}div>.sku-label{font-size:20px;color:var(--grey-500)}.section-addProd>section>article>.product-img{display:flex;align-items:center;justify-content:center;width:600px;gap:30px}.product-img>input{cursor:pointer}.product-img>input:hover{border-bottom:3px solid;transition:.1s none}.add-input-upload{width:auto;height:30px;font-size:20px;border:none}.input-list>ul>.div-input-list>label{font-size:25px;width:300px}.input-list>ul>.div-input-list>input{border:none;font-size:15px}.div-input-list{display:flex;align-items:center}.list-product{width:1000px}.div-stock-input{display:flex;width:100%;align-items:center;justify-content:center}.div-stock-input>label{margin-left:30px;width:90px;font-size:20px;font-weight:700}.div-stock-input>input{border:none;font-size:20px}@media screen and (max-width: 1280px){.home-add{display:flex;gap:30px}.section-addProd{padding:30px 50px;width:70vw}.div-input>label{font-size:23px;gap:20px}}@media screen and (max-width: 600px){.home-add{gap:0px}.section-addProd{padding:10px 20px;width:100vw}.title>.div-input{margin-bottom:20px}.div-input>label{font-size:16px;width:60px}.div-input>.add-input{font-size:14px;height:20px;width:70vw}.sku-input{font-size:14px;height:20px;width:70vw}div>.sku-label{font-size:16px}.section-addProd>section>article>.product-img{width:75vw;gap:10px}.add-input-upload{width:100%;font-size:12px}.input-list>ul>.div-input-list>label{font-size:18px;width:60vw}.input-list>ul>.div-input-list>input{border:none;font-size:15px}.list-product{width:290px}.div-stock-input>label{font-size:18px}.div-stock-input>input{font-size:16px}}@media only screen and (min-width: 601px) and (max-width: 959px){.home-add{gap:0px}.div-input>label{width:120px}.div-input>.add-input{height:20px;width:70vw}}.sidebar{display:flex;flex-direction:column;justify-content:space-between;height:100vh}.loading-text{margin-left:20px}.products-container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:100%;max-width:1600px;margin:0 auto;padding:20px}.product-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #00000026;transition:transform .2s ease-in-out;text-align:center;padding-bottom:20px;border:1px solid #ddd;display:flex;flex-direction:column;align-items:center;width:100%;min-width:370px;height:400px}.product-card:hover{transform:scale(1.05)}.product-image-container{width:100%;height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:2px solid #ddd}.product-image-container img{width:100%;height:100%;object-fit:contain;padding:10px}.product-info{padding:15px;text-align:center;width:100%}.product-info h2{font-size:18px;color:#333;margin:5px 0}.product-info a{text-decoration:none;color:#0073e6;font-weight:700}.product-info p{margin:5px 0;font-size:16px;color:#555}@media screen and (max-width: 1280px){.products-container{grid-template-columns:repeat(4,1fr)}}@media screen and (max-width: 1024px){.products-container{grid-template-columns:repeat(3,1fr)}}@media screen and (max-width: 768px){.products-container{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 480px){.products-container{grid-template-columns:repeat(1,1fr)}}*{padding:0;margin:0;box-sizing:border-box;font-family:Inter,sans-serif}:root{--black-100: #000;--white-1000: #fff;--blue-100: #5552F7;--blue-500: #0400ff;--grey-500: #8b8b8b;--grey-1000: #f0f0f0}input,textarea{font-family:Arial,sans-serif;font-size:16px;color:#333;border:none;background-color:transparent;padding:5px 10px;margin:0}
