﻿#product.list .group { display: flex; flex-wrap: wrap}
#product.list .group .item { width: calc((100% - 120px) / 5); margin-right: 30px; margin-bottom: 30px}
#product.list .group .item:nth-child(5n) {margin-right: 0}
#product.list .group .item .wImage:before {padding-bottom: 100%} 
#product.list .group .item .info { padding: 0; padding-top: 10px}
#product.list .group .item .info .name { display: block; font-size: 16px; margin-bottom: 6px}
#product.list .group .item:hover .wImage:after {opacity: 1}
#product.list .group .item .name:hover {color: #ff0033}
#product.list .pagging { text-align: left; margin-top: 0}

#container #logoHp.hp { padding-top: 35px; margin-bottom: -50px}
.lh28 {line-height: 28px}
#overlay { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 49; display: block; top: 0; left: 0; display: none}
#popup { position: fixed; width: 765px; z-index: 50; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: #fff; display: none; max-height: calc(100vh - 20px); max-width: calc(100% - 20px); overflow: auto}
#popup .wrap { padding: 20px 28px; display: flex; position: relative}
#popup .wrap .left { width: 300px; margin-right: 25px; }
#popup .wrap .left img { width: 100%; height: auto; display: block; border-radius: 3px; }
#popup .wrap .right {flex: 1}
#popup .close { position: absolute; top: 3px; right: 10px; font-size: 17px}
#popup .close:hover {color: red}
#formRegis input,#formRegis textarea { width: 100%; height: 34px; border: 1px solid #d3d3d3; border-radius: 3px; padding: 0 10px; margin-bottom: 15px; font-family: Segoe; font-size: 14px}
#formRegis textarea { resize: none; height: 60px; padding: 10px}
#formRegis button[type=submit] { width: 100%; border: none; background: #ff0033; height: 34px; border-radius: 3px; text-align: center; line-height: 34px; color: #fff; cursor: pointer}
#formRegis button[type=submit]:hover { -webkit-filter: brightness(120%);-moz-filter: brightness(120%)}

.fs24 {font-size: 24px}
.lh24 {line-height: 24px}
#product.detail .top,#product.detail .bot { display: flex; flex-wrap: wrap}
#product.detail .top .left { width: 600px; margin-right: 30px }
#product.detail .top .left .wImage {border: 1px solid #dcdcdc}
#product.detail .top .left .wImage:before {padding-bottom: 66.66%}
#product.detail .top .left .imgSmall { width: calc(100% - 25px); margin-left: 20px; margin-top: 12px}
#product.detail .top .left .imgSmall .slick-slide {margin-right: 15px}
#product.detail .top .left .slick-next,#product.detail .top .left .slick-prev { border: none; background: none; position: absolute; left: 0; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 5; outline: none; margin-left: -3px; cursor: pointer}
#product.detail .top .left .slick-next { left: inherit; margin-left: 0; margin-right: 10px; right: 0;transform: translateX(50%) translateY(-50%)}
#product.detail .top .left .slick-next:before,#product.detail .top .left .slick-prev:before { content: "\f053"; font-size: 40px; display: block;font-family: 'FontAwesome'; font-weight: 900; color: #dcdcdc}
#product.detail .top .left .slick-next:before { content: "\f054"}
#product.detail .top .left .slick-next:hover:before,#product.detail .top .left .slick-prev:hover:before {color: #ff0033}
#product.detail .top .right { flex: 1; margin-top: -3px}
#product.detail .top .right .cateName { font-size: 16px; color: #878787; margin-bottom: 5px; display: block}
#product.detail .top .right .itemInfo {margin-bottom: 10px}
#product.detail .top .right .itemInfo:last-child {margin-bottom: 0}
#product.detail .top .right .itemInfo ul { padding: 0; margin: 0; list-style: none; padding-left: 7px; display: flex; flex-wrap: wrap}
#product.detail .top .right .itemInfo ul li { line-height: 24px;width: 100%}
#product.detail .top .right .itemInfo ul li:before {font-family: 'FontAwesome'; font-weight: 900; content: "\f105"; color: #959595; margin-right: 3px; font-size: 12px}
#product.detail .top .right .itemInfo.color {margin-top: 0}
#product.detail .top .right .itemInfo.color ul { padding: 0; margin-bottom: -12px; align-items: flex-end}
#product.detail .top .right .itemInfo.color ul li:before {display: none}
#product.detail .top .right .itemInfo.color ul li {width: auto}
#product.detail .top .right .link { font-size: 13px; color: #ff0033; text-decoration: underline; cursor: pointer}
#product.detail .top .right .itemInfo.color ul .link {margin-left: 20px}
#product.detail .top .right .itemInfo .button {margin-top: 25px}
#product.detail .top .right .itemInfo .button a { width: 268px; line-height: 48px; border: 1px solid #ff0033; color: #ff0033; font-family: UTM Alexander; font-size: 22px; display: inline-block; margin-right: 26px; text-align: center; height: 50px}
#product.detail .top .right .itemInfo .button a:last-child {margin-right: 0}
#product.detail .top .right .itemInfo .button a:hover { background: #ff0033; color: #fff}
#product.detail .top .right .itemInfo ul.plug {margin-top: 10px}
#product.detail .top .right .itemInfo ul.plug li:before {display: none}
#product.detail .top .right .itemInfo ul.plug li { display: inline-block; width: auto; }
#product.detail .top .right .itemInfo ul.plug li a { color: #dddddd; font-size: 25px; margin-right: 20px}
#product.detail .top .right .itemInfo ul.plug li a:hover {color: #ff0033} 
#product.detail .bot .left {width: 100%}
#product.detail .bot .left .tab-links { padding: 0; margin: 0; list-style: none; border-bottom: 1px solid #d3d3d3; margin-bottom: 20px}
#product.detail .bot {margin-top: 30px}
#product.detail .bot .left .tab-links li { margin-right: 60px; display: inline-block}
#product.detail .bot .left .tab-links li:last-child {margin-right: 0}
#product.detail .bot .left .tab-links li a { font-family: UTM Alexander; font-size: 18px; color: #878787; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid transparent; display: block}
#product.detail .bot .left .tab-links li.active a { color: #333; border-color: #333}
#product.detail .bot .right {flex: 1}
#product.detail .bot .right .title,#product.list .other .title {border-bottom: 1px solid #d3d3d3; margin-bottom: 20px}
#product.detail .bot .right .title p,#product.list .other .title p {font-family: UTM Alexander; font-size: 18px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #333; display: inline-block}
#product.detail .bot .right .group .item { display: flex; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #d3d3d3; align-items: flex-start}
#product.detail .bot .right .group .item:last-child {margin-bottom: 0}
#product.detail .bot .right .group .item .wImage {width: 60px; margin-right: 9px}
#product.detail .bot .right .group .item .wImage:before { padding-bottom: 100%}
#product.detail .bot .right .group .item .info {flex: 1}
#product.detail .bot .right .group .item .info .name { display: block; line-height: 21px; margin-bottom: 6px}
#product.detail .bot .right .group .item .info .name:hover {color: #ff0033}
#product.detail .bot .right .group .item .info .dateview { font-size: 12px; color: #878787; margin-top: -3px}
#product.detail .bot .right .group .item .info .dateview span { margin-right: 18px; }
#product.detail .bot .right .group .item .info .dateview span:last-child {margin-right: 0}

#product.list .other { width: 1170px; display: block; margin-top: 25px}
#product.list .other .title p {font-family: UTM Alexander} 
a {color: inherit}
p {margin: 0}
#container {padding: 10px 0 30px 0}
.noidung { width: 100%; text-align: justify; line-height: 21px; font-size: 14px; margin: 10px 0 }
.noidung img,
.noidung input[type=image],
.noidung1 img,
.noidung1 input[type=image] { max-width: 100%; height: auto !important; margin: auto; display: block !important }
.noidung iframe,
.noidung video,
.noidung1 iframe,
.noidung1 video { max-width: 100%; margin: auto; display: block !important }
.noidung table { margin: auto; max-width: 100% }
.noidung figcaption { text-align: center;color: #0072bc;padding: 10px;line-height: 1.4; padding-bottom: 0}
.noidung .wImage iframe { width: 100%; height: 100% } 
.noidung h1,
.noidung h2,
.noidung h3,
.noidung h4,
.noidung h5,
.noidung h6 { display: block }
.noidung h1 { margin: 0.67em 0; font-size: 2em; }
.noidung h2 { margin: 0.83em 0; font-size: 1.5em; }
.noidung h3 { margin: 1em 0; font-size: 1.17em; }
.noidung h4 { margin: 1.33em 0 }
.noidung h5 { margin: 1.67em 0; font-size: 0.83em; }
.noidung h6 { margin: 2.33em 0; font-size: 0.67em; } 
.fwbold {font-weight:bold}
.cred {color: red}
.pb5 {padding-bottom: 5px}
.fAvo {font-family: UTM Alexander}