﻿.img {
    padding: 10px 250px 0 250px;
    width: 100%;
    height: 550px;
}

.img img {
    width: 100%;
    height: 100%;
}

.content {
    padding: 20px 250px 100px 250px;
    line-height: 40px;
}

.content h3 {
    text-align: center;
}

.body {
    padding: 10px 250px 0 250px;
    width: 100%;
    height: 400px;
    text-align: center;
    line-height: 40px;
}

.body img {
    width: 170px;
    height: 100px;
}

.carousel-item img {
    width: 100%;
    height: 600px;
}

.p1 {
    padding-top: 20px;
    width: 100%;
    height: 100px;
    text-align: center;
}

.p1 img {
    width: 200px;
    height: 100%;
}

.p2 {
    height: 80px;
    text-align: center;
}

.p2 p {
    padding: 0 15% 0 15%;
}

.p3 {
    padding-left: 300px;
    width: 100%;
    text-align: center;
}


.p4 {
    padding: 40px 0 50px 0;
    width: 100%;
    height: 250px;
    text-align: center;
}

.p4 img {
    width: 700px;
    height: 100%;
}

.sp-content{
    padding : 20px 230px 20px 230px;
    width : 100%;
    display : flex;
}

.sp-search {
    width: 25%;
    text-align: center;
}
.sp-search h3 {
    width: 90%;
    font-size: 16px;
    color: rgba(102,102,102,.85);
}
.sp-search > div {
    display : flex;
    width: 100%;
    height: 35px;
}

.sp-search form {
    padding-top: 5px;
    width: 80%;
    height: 100%;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-bottom: 1px solid #777;
}


.sp-search i {
    padding: 10px 0 0 1px;
    width: 35px;
    height:35px;
    color: white;
    background-color: black;
}

.sp-search input {
    border: none;
}

.sp-search input:focus {
    outline: none;
    border: none;
}

.sp-list {
    width : 75%;
}

.sp-list .card {
    text-align: center;
    margin: 10px;
    width: 220px;
    display: inline-flex;
    box-sizing: border-box;
    border-top: none;
}

.sp-list .card i {
    color: rgba(102,102,102,.85);
    font-size: 14px;
}
.sp-list > .card:hover {
    transition: box-shadow 0.3s ease-in-out;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    color: rgba(102,102,102,.85);
}

.sp-list .card img{
    width: 220px;
    height: 220px;
}

.sp-list .card .btn{
    border: 2px solid #000000;
}

.sp-list .card .btn:hover{
    background-color: black;
    color: white;
}

.ctsp {
    padding: 3% 20% 0 20%;
    height: 700px;
    display: flex;
}

.ctsp .ctsp-img{
    width: 45%;
}

.ctsp-img img{
    padding-top: 10%;
    width: 100%;
}

.ctsp .ctsp-remain{
    padding-left: 3%;
    width: 55%;
}

.ctsp_remain .header{
    width: 100%;
    text-align: center;
}

.ctsp-remain .ten-gia {
    width: 70%;
    font-weight:500;
    font-size: 25px;
}

.ten-gia i{
    color: black;
    font-size: 17px;
}

.ten-gia hr {
    height: 3px;
    width: 30px;
    margin: 10px 0 10px 0;
}

.thongtinsp {
    line-height: 30px;
}

.thongtinsp li{
    padding-bottom: 10px;
}

.thongtinsp ul {
    padding-left: 4%;
}

.ctsp-remain .footer {
    display: flex;
    height: 8%;
}

.ctsp-remain .footer input {
    width: 9%;
    height: 80%;
    border-left: 0px;
    border-right: 0px;
    border-top: 1px solid rgba(102,102,102,.85);
    border-bottom: 1px solid rgba(102,102,102,.85);
    text-align: center;
}

.ctsp-remain .footer input:focus {
    outline: none;
}

.ctsp-remain .footer button {
    width: 6%;
    height: 80%;
    border: 1px solid rgba(102,102,102,.85);
}

.ctsp-remain .footer button:hover {
    background-color: #c9c8c8;
}

.ctsp-remain .footer .submit {
    text-align: center;
    padding: 2% 0 0 0;
    width: 45%;
    height: 80%;
    background-color: #d26e4b;
    color: white;
}
.ctsp-remain .footer .submit:hover {
    background-color: #b43f16;
}

.csdt{
    line-height: 40px;
    height: 650px;
    padding: 20px 250px 0 200px;
}

.csbm {
    line-height: 35px;
    height: 500px;
    padding: 20px 250px 0 200px;
}

.csbm p{
    padding-top: 10px;
}

.dkhoan {
    line-height: 35px;
    height: 650px;
    padding: 20px 250px 0 200px;
}

.dangnhap {
    width: 100%;
    height: 650px;
    margin-top: 0%;
    background: url(/Images/imglogin.jpg) center center no-repeat;
    background-size: 100%;
}

.dangnhap > div {
    padding-top: 8%;
    width: 27%;
    height: 100%;
    margin-left:45%;
}
.dangnhap-bd{
    background-color: white;
    height: 75%;
    margin: 0 20% 0 60%;
    border-radius: 10px;
    text-align: center;
}

.dangnhap form{
    width: 100%;
    height: 100%;
}

.dangnhap > div div {
    width: 100%;
    padding-top: 20px;
}


.dangnhap .input {
    width: 80%;
    height: 40px;
    padding-top: 0px;
    margin-left: 10%;
    border: 1px solid rgba(102,102,102,.85);
}

.dangnhap input{
    border: none;
    width: 90%;
    height: 100%;
}

.dangnhap > div div input:focus {
    outline: none;
}

.register {
    width: 100%;
    height: 650px;
    margin-top: 0%;
    background: url(/Images/imglogin.jpg) center center no-repeat;
    background-size: 100%;
}

.register > div {
    padding-top: 8%;
    width: 100%;
    margin-left: 0%;
}

.register-bd {
    background-color: white;
    height: 75%;
    margin: 0 20% 0 60%;
    border-radius: 10px;
    text-align: center;
}

.edit {
    width: 100%;
    height: 650px;
    margin-top: 0%;
    background: url(/Images/imglogin.jpg) center center no-repeat;
    background-size: 100%;
}

.edit > div {
    padding-top: 4%;
    width: 27%;
    height: 100%;
    margin-left: 45%;
}

.edit-bd {
    background-color: white;
    height: 90%;
    margin: 0 20% 0 60%;
    border-radius: 10px;
    text-align: center;
}

.edit form {
    width: 100%;
    height: 100%;
}

.edit > div div {
    width: 100%;
    padding-top: 20px;
}


.edit .input {
    width: 80%;
    height: 40px;
    padding-top: 0px;
    margin-left: 10%;
    border: 1px solid rgba(102,102,102,.85);
}

.edit input {
    border: none;
    width: 90%;
    height: 100%;
}

.edit > div div input:focus {
    outline: none;
}

.buy {
    display:flex;
    width: 100%;
    height:650px;
    padding: 2% 15% 0 15%;
}

.buy h4{
    padding-top: 5%;
}

.buy .thongtin{
    width:60%;
    line-height: 30px;
}

.buy .thongtin hr{
    padding:0px;
    margin:0px;
    height: 2px;
    width: 90%;
}

.thongtin input{
    border: none;
    width: 100%;
    padding: 0 20px 0 20px;
}

.buy .thongtin > div{
    padding-top: 10px;
}

.buy .thongtin > div > div {
    border: 1px solid rgba(102,102,102,.85);
    width: 80%;
}

.thongtin input:focus {
    outline: none;
}

.buy .donhang {
    margin-top: 3%;
    width: 40%;
    border: 2px solid rgba(0, 0, 0, 0.5);
    line-height: 40px;
    height:75%;
}

.donhang > div{
    width: 100%;
    padding: 0 8%;
}

.donhang .submit {
    color: white;
    background-color: #d26e4b;
    text-align: center;
    border: none;
    width: 40%;
}

.donhang i{
    color: black;
    font-size: 10px;
}

.donhang hr{
    margin:0;
    padding:0;
    width:100%;
}

.thongtin ul{
    padding: 0;
    margin:0;
}


.donhang .submit:hover {
    background-color: #b43f16;
}

.thongtin .submit {
    color: white;
    background-color: #d26e4b;
    margin-top: 5%;
    padding-bottom: 2%;
    text-align: center;
    border: none;
    width: 20%;
}

.thongtin .submit:hover {
    background-color: #b43f16;
}

.thongtin .nono {
    color: white;
    background-color: #d26e4b;
    margin-top: 2%;
    padding-bottom:2%;
    text-align: center;
    border: none;
    width: 30%;
}

.thongtin .mono:hover {
    background-color: #b43f16;
}