
.page{ background: #eef1f3;}

.header_main{ background: #fff;}
.pagination > li > a, .pagination > li > span {
  color: #375a9c;
}

.whitebold{ color: #fff; font-weight: bold;}
.pad5{ padding: 5px;}

.bgwhite{ background: #fff; border-radius: 6px;}
.titlewhite{ background: #fff; border-radius: 10px 10px 0 0;}
.padview{ padding: 20px 50px;}

.topbar{ color: #808080; padding: 6px 0;}
.topbar:after{ clear:both; content:''; display:block;}
.topbar ul:after{ clear:both; content:''; display:block;}

.topbar ul{ float: right;}
.topbar ul li{ float: left; margin-left: 20px;}
.topbar ul li a{}

.rightmenu{ float: right; color: #808080;}
.rightmenu  li{ float: left; margin-left: 0px; border-left: 1px solid #a0a0a0; padding: 0 10px; height: 28px;}

.rightmenu:after{ clear:both; content:''; display:block;}

.message_panel{ width:500px; margin:15px auto; padding:20px; border:1px solid #ccc; border-radius: 15px;}

.breadcrumb{margin:0;}

.ui-widget-header{ background:red; color:#fff;}

.validate-error{ border:1px solid red !important;}

.form-group .control-label{}
.form-group.required .control-label:after{ content:' *'; color:red;}

.icon_facebook{ position: fixed; bottom:20px; right:20px; z-index:9999;}
.icon_facebook a{ display:block; margin-bottom: 10px;}
.icon_facebook img{ width: 35px;}

.new_home{}
.new_home .title a{font-size: 17px; font-weight: bold;}

.btn-read-more
{
    padding: 5px;
    text-align: center;
    border-radius: 0px;
    display: inline-block;
    border: 2px solid #662D91;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    color:#662D91;
}

.btn-read-more:hover
{
    color: #FFF;
    background: #662D91;
}
.post { border-bottom:1px solid #DDD; padding-top:15px;}
.post h4 a{ color:#375a9c;}
.post-title {  color:#662D91; }
.post .glyphicon { margin-right:5px; }
.post-header-line { border-top:1px solid #DDD;border-bottom:1px solid #DDD;padding:5px 0px 5px 15px;font-size: 12px; }
.post-content { padding-bottom: 15px;padding-top: 15px;}

.title_homevs{
	text-align:center;
	font-size:28px;
}

.title_homevs a{
	color:#0053b7;font-size:28px;
}

.pnhomevs{ width:65%; margin:0 auto; }
.pnhomevs a{}

.pnview_all{ background:#36b3ff; padding:10px 0px; color:#fff; font-size:18px;}
.pnview_all:after{ content:''; clear:both; display:block;}
.pnview_all span{ display:block; margin-top:6px}
.pnview_all a{color:#545454; background:#fff; padding:5px 20px;}

.pnhomeab{ margin-top:10px; }
  
.home_intro{  }

.home_intro .desc{width:70%; text-align:center; margin:0 auto;}
.home_intro .desc a{ color:#000;}

.title_home{ color:#0053b7; font-weight:bold; font-size:32px; text-align:center;}
.pnproduct_group{ height: 460px; overflow: hidden; padding-top:14px;}
.pnproduct_group .product-carousel{ margin:0 auto; width:70%;}

.home_reason{ margin-top: 10px; margin-bottom: 40px;}

.home_reason h3{ color:#0053b7; font-size:24px; font-weight:300; margin-top: 22px; margin-left: 48px; line-height: 38px;}
.home_reason h3 span{ font-weight:300;}
.reason_img{}
.reason_img img{ height: 60px;}

/*
.reason_img img:hover {
    animation: bounce;
    animation-duration: 1s;
}
*/

.pnservices{}
.pnservices:after{ clear:both; content:''; display:block;}
.pnservices .home-services{ float:left; width:25%;}
.pnservices .home-services .in{ padding:10px; position:relative; margin: 8px; position: relative; border-radius: 15px; overflow: hidden;}
.pnservices .home-services h2 a{display:block; font-size:18px; font-weight:bold; text-transform:uppercase; line-height:26px; color: #fff;}
.pnservices .home-services .services-image{ height:360px;  display:flex;
  align-items:center;
  justify-content:center;}
.pnservices .home-services .services-image img{ width:100%; height: 100%;}
.pnservices .home-services .services-hover{ display: none;}
.pnservices .home-services .services-info{ background: rgba(0, 0, 0, .7) ; position: absolute; left: 0; top: 0; width:100%; height: 100%; color: #fff; }

.pnservices .home-services .services-info .sinp{
    padding: 10px;
}
.pnservices .home-services .services-info:hover{ background: #0d6aad;}
.pnservices .home-services .services-info .more{ position: absolute; right:10px; bottom: 10px;}
.pnservices .home-services .services-info .more a{ font-size: 15px; color: #fff;}
.reason_left{ text-align:center;}
.reason_left p{ margin-top:0px;}
.reason_left a{ color: #000;  font-weight: bold;}

.home_middle_tab{text-align:center;}
.home_middle_tab a{ color:#0053b7; display:block; padding:16px 0; text-transform:uppercase;}
.home_middle_tab .row{ margin:0;}

.first_news h2 {
  margin: 12px 0;
}

.first_news h2 a {
  font-size: 26px;
}

.first_news img {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
}

.row_news {
  margin-bottom: 5px;
}

.row_news.dotted {
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.row_news:after {
  clear: both;
  content: '';
  display: block;
}

.row_news .img {
  float: left;
  width: 200px;
  height: 144px;
  margin-right: 10px;
  overflow: hidden;
}

.row_news .img img {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.row_news h3 {}

.row_news h3 a {
  font-size: 15px;
  font-weight: normal;
}

.row_news i {
  margin-right: 10px;
}
.home_news { padding: 20px 50px;  overflow: hidden; }
#home_news h3 {
  margin: 12px 0;
}
#home_news h3 a {
  font-size: 14px;
  color: #71bf45;
  line-height: 18px;
}
.social_footer{}
.social_footer a{ padding:0 10px;}

.home_news .others_news{ margin-bottom: 6px;}
.home_news .others_news h3{ margin-top: 0;line-height: 15px;}
.home_news .others_news h3 a {
    line-height: 15px;
    font-size: 16px;
}

.more_hnews{ text-align: center;}
.more_hnews a{ font-size: 15px;}

#support_bottom{}
#support_bottom h3{ font-size:14px;font-weight:bold; margin:0;}
#support_bottom p{margin:0;}
#support_bottom a{ padding:0; font-size:16px;}

.video-container {
  overflow: hidden;
  position: relative;
  width:100%;
}

.video-container::after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pncontent{}
.pncontent img{ max-width: 100%!important; height: auto!important;}

.pnslogan{
    background-image: url("../images/bgteamnew.jpg");
    height: 380px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;
    font-size: 18px;
    line-height: 36px;
    padding-top: 100px;
    border-top: 5px solid #0081ff;
}

.pnslogan h3{
    text-transform: uppercase;
}
.home-product-item{ float: left; width: 50%; margin-bottom: 10px; }
.home-product-item .in{ margin-right: 10px; height: 220px; padding: 25px 50px;position: relative;}
.home-product-item:nth-child(2n) .in{ margin-right: 0px}
.home-product-item .in .info{ float: left; width: 50%;}
.home-product-item .in .info .title{ line-height: 18px; }
.home-product-item .in .info .title a{ font-size: 18px; color: #000; font-weight: bold; }
.home-product-item .in .img{ float: right;width: 50%; text-align: right;}
.home-product-item .in .img{ height: 130px;}
.home-product-item .in .img img{vertical-align: middle; max-width: 80%;}
.home-product-item .in .btnview{ position: absolute; bottom: 30px; left: 50px; display: inline-block; padding: 5px 20px; padding-bottom: 9px; background: #0081ff; color: #fff; border-radius: 20px;}

#products_details img{ max-width: 100%!important; height: auto!important;}

.home-product-item .in .btnview a{color: #fff; display: block;}


.pro-ser-home{ position: relative;}
.pro-ser-home:after{ clear:both; content:''; display:block;}
.titlewhite .nav-tabs{ border: none; padding-left: 50px;  padding-top: 10px; height: 50px; overflow: hidden;}
.titlewhite .nav-tabs a{ display: inline-block; font-size: 16px; margin-right:40px; color:#000; height: 40px;}
.titlewhite .nav-tabs a.active{ color:#009cff; border-bottom: 2px solid #009cff;}

.titlewhite  .more{ position: absolute; top: 12px; right:20px; font-size: 15px;}

.aboutpn{   background-image: url("../images/bg-about.jpg"); margin-top: 10px;
    height: 510px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}

.aboutpn .in{
    padding-top: 50px;
    padding-left: 120px;
    color: #fff;
    width: 480px;
}
.aboutpn .in .abtitle{ text-transform: uppercase; font-size: 22px; line-height: 32px;}

.aboutpn .in .abdesc{
    text-align: justify;
}
.aboutpn .in .itemab{ text-align: center;}
.aboutpn .in .itemab .numab{ color: #f5dd00; font-weight: bold; font-size: 25px;}
.aboutpn .in .itemab .numab{}

#bottom_cate ul li a{ color: #66dbff;}

.btnmore{
    border: 1px solid #50beff;
    padding: 10px 50px;
    color: #fff;
    border-radius: 20px;
    background-image: linear-gradient(to right, #00a2ff , #0076ff);
    margin: 0 auto;
}

.pagination {
    margin: 15px 0;
    justify-content: center;
}
.news_row .star-rate{ color: #ffbc00;}

.viewnum{ margin-left: 12px;}
.likenum{ margin-left: 12px;}

#catelist{ margin: 8px 0;}
#catelist:after{ clear:both; content:''; display:block;}
#catelist li{ float: left; width: 25%;}
#catelist li a{ display: block; font-size: 14px; color: #000; padding: 3px 0;}
#catelist li a i{ font-size: 18px; margin-right: 10px;}

.titledetail{margin-top: -30px; position: relative; z-index: 999; border: 1px solid #eee;}

.btncontact{ display: inline-block; padding: 3px 10px; padding-bottom: 9px; background: #0081ff; color: #fff; border-radius: 20px;}
.product-bit-title{ font-size: 20px;}
.btncontact a{ color: #fff;}

.btnorder1{ display: inline-block; padding: 8px 30px; padding-top: 4px; background: #0081ff; color: #fff; border-radius: 20px; border: 1px solid #eee;}
.btnorder1 a{ color: #fff; font-size: 14px;}
.btnorder1:hover{ color: #09dbfa;}


.btnorder3{ display: inline-block; padding: 5px 12px; padding-top: 3px; background: #0081ff; color: #fff; border-radius: 20px;}
.btnorder3 a{ color: #fff; font-size: 14px;}
.btnorder3:hover{ color: #09dbfa;}

.pninfo_object{ padding: 15px; border: 1px solid #c6ebc6;}
.pninfo_object .title{ color: #1baf1b; font-size: 16px;  font-weight: bold;}

.col_cartlist{ border: 1px dot-dash #bbe6ff; background: #eef9ff; padding: 15px; margin-top: 10px; margin-bottom: 15px;}
.col_amount{ font-size: 22px; color: #0055d1; font-weight: bold; text-align: right;}

.btnorder2{ display: inline-block; padding: 5px 12px; padding-top: 3px; border: 1px solid #0081ff; color: #000; border-radius: 20px;}
.btnorder2 a{ color: #000; font-size: 14px;}

.btn_pmlogin{ background: #eee; border-radius: 8px; width: 320px; padding: 5px 0; text-align: center; margin: 0 auto;}
.btn_pmreg{ background: #eee; border-radius: 8px; width: 320px; padding: 5px 0; text-align: center; margin: 0 auto;margin-top: 10px; }

.payment_step{ border-bottom: 1px solid #ccc; margin-bottom: 20px;}
.payment_step ul:after{ clear:both; content:''; display:block;}
.payment_step ul{}
.payment_step ul li{ float: left; width: 33%;}
.payment_step ul li a{ color: #0c0c0c;}
.payment_step ul li a.active{ font-weight: bold; }

.payment_step ul li a span{ display: inline-block; background: #00a0ff; color: #fff; border-radius: 50%; height: 26px; width: 26px; text-align: center; line-height: 23px;}
.payment_step ul li a span.finished{background: #127f04;}

.pricedt{ font-size: 15px;}

.pricedt span{ color: #078fff;  font-weight: bold; font-size: 20px;}

#nav-account{}
#nav-account li{ display: block; padding: 5px 0;}

#flist li{ padding: 0 20px;}

#doclist{ margin-top: 10px; margin-left: 120px;}
#doclist:after{ clear:both; content:''; display:block;}
#doclist li{ float: left;  margin-right: 15px;}
#doclist li a{ display: block; font-size: 14px; color: #000;}
#doclist li a i{ font-size: 18px;}

#doclist{ margin-top: 10px; margin-left: 120px;}
#doclist:after{ clear:both; content:''; display:block;}
#doclist li{ float: left;margin-right: 15px;}
#doclist li a{ display: block; font-size: 14px; color: #000;}
#doclist li a i{ font-size: 18px;}

.toprow{}
.toprow:after{ clear:both; content:''; display:block;}
.toprow .logo{ float: left; width: 20%;}
.toprow #top_menu{float: left;  width: 54%;}
.toprow #top_menu ul.nav{ float: right;}
.toprow .colaction{float: right; width: 26%;}

.list_cate_mn{}
.list_cate_mn .nav-tabs{ margin: 0;}

.list_cate_mn.titlewhite .nav-tabs a{ margin-left: 40px;}
.list_cate_mn.titlewhite .nav-tabs a:first-child{ margin-left: 0px;}

.content_page{ padding-left: 50px; padding-right: 50px;}

.list_style_new .first_news img{ max-height: 280px; width: 100%;}
.list_style_new .first_news .title_row a{ font-size: 18px;}
.list_style_new .first_news .des_row{ font-size: 16px; text-align: justify;}
.list_style_new .others_news img{ height: 160px;}

.listcatepost.list_cate_mn.titlewhite .nav-tabs a{ margin-left: 20px; margin-right: 20px;}
.listcatepost.list_cate_mn.titlewhite .nav-tabs a:first-child{margin-left: 0px;}

.info-interact{ font-size: 16px;}

.stitle{ color: #1c9aff; font-size: 18px; padding-left: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee;}

.headtitle{ color: #1c9aff; font-size: 18px; padding-left: 15px; padding-bottom: 15px;}

.headtitlel1{ text-transform: uppercase; font-weight: bold; font-size: 18px;}

.headtitle2{ color: #00a0ff; font-size: 16px; font-weight: bold; padding-bottom: 15px;}

.news_cate{
}
.news_cate ul {

}
.news_cate ul li{
 padding: 8px 10px;
}

.news_cate ul li a{
 font-size: 16px; color: #000;
}

.item_pthd{ background: #f2fbff; padding: 20px; margin-bottom: 20px;}
.title_nl{ font-size: 16px; font-weight: bold; margin-bottom: 15px;}
.list_nl{}
.list_nl li{ padding: 3px 0px;}

.item_gith{ border: 1px solid #eee; border-radius: 6px; text-align: center; box-shadow: 2px 2px 2px 2px #eee; padding: 20px 10px;}
.item_gith .img{height: 68px; overflow: hidden;}
.item_gith .desc{ height: 60px;}

.pn_chnh{ width: 86%; margin:0 auto;}
.pn_chnh .item_chnh{ text-align: center;}
.pn_chnh .item_chnh .img{ height: 210px; border: 1px solid #eee; border-radius: 6px; text-align: center; box-shadow: 2px 2px 2px 2px #eee; padding: 20px 10px;}

.telbox{ border-radius: 20px; font-weight: bold; font-size: 20px; width: 220px; text-align: center; border: 1px solid #0080ff; padding: 8px 0;}

.title_addct{ font-size: 18px; font-weight: bold;}

.pnproductdetail{ position: relative;}
.pninteract{ position: absolute; top: 180px; left:-55px; width: 64px;}
.pninteract span{ background: #fff; border-radius: 50%; width: 60px; height: 60px; display: block; margin-bottom: 8px; text-align: center; line-height: 68px;}
.pninteract span i{ font-size: 28px; cursor: pointer;}

.pninteract span.slike{ color: red;}
.pninteract span.srate{ color:#ffbc00; }
.pninteract span.sback{}

.boxsubmenu{ width: 1366px; left: -440px; padding: 25px;}
.boxsubmenu .title a{ color: #1a1a1a; font-size: 14px;}
.boxsubmenu .submenut{}
.boxsubmenu .submenut li{}
.boxsubmenu .submenut li a{ padding: 6px 0; display: block; color: #1a1a1a; font-size: 13px;}

.required{ color: red;}
#bottom_fixed{ position: fixed; right: 18px; bottom: 100px;}
#bottom_fixed .bclose{ position: absolute; right: 18px; top: -40px; cursor: pointer; }
#bottom_fixed .dbanner{ width: 100%; width: 319px; height: 201px;}
#bottom_fixed .dicon{position: absolute; width: 60px; right: 7px; bottom: 0px; cursor: pointer; }

#btnzalochat{bottom: 80px!important; right: 28px!important;}

#popModal .modal-body {
    padding: 0;
    position: relative;
}

#popModal .modal-body .close {
    position: absolute;
    top: -15px;
    right: 0;
    font-size: 60px;
}

.product-code {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0 0 5px 0;
  color: #333;
  text-decoration: none;
}

.product-seo-keyword {
  font-size: 0.9rem;
  font-weight: semi-bold;
  margin: 0;
  color: #333;
  text-decoration: none;
}

.product-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 10px;
  color: #333;
  text-decoration: none;
}

.product-intro {
  color: #666;
  font-size: 1rem;
  margin: 0.5rem 0;
}

.product-actions .btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  text-transform: none;
  font-size: 0.8rem;
  border-radius: 10px;
  text-decoration: none;
}
.product-icon-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

.product-details {
  height: 280px; /* Mặc định cho Desktop */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (max-width: 767px) {
  .product-code {
      font-size: 1rem;
  }

  .product-seo-keyword {
      font-size: 0.8rem;
  }

  .product-name {
      font-size: 1.2rem;
  }

  .product-intro {
      font-size: 0.9rem;
  }

  .product-actions .btn {
      font-size: 0.7rem;
  }
  .product-icon-image {
    width: 40px;
    height: 40px;
}

.product-details {
  height: 260px; /* Mobile */
  margin-top: 10px;
}
.product-actions {
  display: flex;
  justify-content: center; /* Căn giữa nút Xem thêm */
  padding-top: 10px;
  padding-bottom: 10px; 
}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product-code {
      font-size: 1.1rem;
  }

  .product-seo-keyword {
      font-size: 0.85rem;
  }

  .product-name {
      font-size: 1.3rem;
  }

  .product-intro {
      font-size: 0.95rem;
  }

  .product-actions .btn {
      font-size: 0.75rem;
  }
  .product-icon-image {
    width: 45px;
    height: 45px;
}
.product-details {
  height: 240px; /* Tablet */
}
.product-actions {
  display: flex;
  justify-content: flex-start; /* Giữ nút ở bên trái cho tablet */
}
}


