/* ============================================================
   feedback.css — gộp mobile + desktop. Mốc chia: 768px.

   MỤC LỤC
   1. Mục lục (khối chú thích này)
   2. Mobile  — nguyên văn templates/feedback/style_mobi.css, bọc @media (max-width: 767px)
   3. Desktop — nguyên văn templates/feedback/style_desktop.css, bọc @media (min-width: 768px)
   4. Ghi đè cho markup đã gộp

   Mục 2 và 3 là bản sao nguyên văn, không đổi thứ tự thuộc tính.
   Font Roboto (hai bản giống nhau) đưa lên đầu vì @font-face không đặt trong @media.
   ============================================================ */

@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-regular-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-regular-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:"Roboto Condensed";src:url(../../../assets/fonts/roboto/robotocondensed-regular-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/robotocondensed-regular-webfont.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-italic-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-italic-webfont.ttf) format("truetype");font-weight:400;font-style:italic}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-bold-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-bold-webfont.ttf) format("truetype");font-weight:700;font-style:normal}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-bolditalic-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-bolditalic-webfont.ttf) format("truetype");font-weight:700;font-style:italic}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-medium-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-medium-webfont.ttf) format("truetype");font-weight:500;font-style:normal}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-mediumitalic-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-mediumitalic-webfont.ttf) format("truetype");font-weight:500;font-style:italic}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-light-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-light-webfont.ttf) format("truetype");font-weight:300;font-style:normal}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-lightitalic-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-lightitalic-webfont.ttf) format("truetype");font-weight:300;font-style:italic}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-black-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-black-webfont.ttf) format("truetype");font-weight:900;font-style:normal}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-blackitalic-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-blackitalic-webfont.ttf) format("truetype");font-weight:900;font-style:italic}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-thin-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-thin-webfont.ttf) format("truetype");font-weight:100;font-style:normal}
@font-face{font-family:Roboto;src:url(../../../assets/fonts/roboto/roboto-thinitalic-webfont.woff) format("woff"),url(../../../assets/fonts/roboto/roboto-thinitalic-webfont.ttf) format("truetype");font-weight:100;font-style:italic}

/* ===== 2. MOBILE ===== */
@media (max-width: 767px) {
/* CSS Document */
/* CSS Document */


html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body{
	font-family:Roboto;
	font-size:11pt;
	margin:0;
	line-height:20pt;
}

.clear{
	clear:both;
}

.left{
	float:left;
}

.right{
	float:right;
}

a{
	text-decoration:none;
	color:#333;
}

ul, li{
	margin:0;
	padding:0;
	list-style:none;
}

.table{
	display:table;
	width:100%;
}

.table-cell{
	display:table-cell;
	vertical-align:top;
}

section #list_cmt{
	background: #ffffff;
}

section .box_cme_hot{
	background:#fff;
	padding: 15px 20px 20px 20px;
	margin:0 0 30px;
	box-shadow:5px 5px 5px 0px #ccc;
}

section .box_cme_hot h2{
	font-size: 18pt;
	margin: 15px 0;
	line-height: 25pt;
}

section .btn_seeDetail{
	background: #f7f7f7;
	color: #ef4679;
	padding: 5px 10px;
	width: 150px;
	display: block;
	text-align: center;
}

section .btn_seeDetail:hover{
	background:#f1f1f1;
}

section .list_cmt li{
	
	padding: 20px 25px;
	border-bottom:1px solid #e5e5e5;
}

section .list_cmt li:last-child{
	border-bottom:none;
}

section .list_cmt .pro_mage{
	text-align:center;
}

section .list_cmt .date{
	color:#999999;
	font-size:10pt;
}


section .list_cmt .info i{
	color:#ef4679;
}

section .btn_xemthem{
	background: #929599;
	color: #fff;
	text-align: center;
	padding: 10px 0;
	margin: 20px auto 10px;
	cursor: pointer;
	transition:ease-in-out 0.3s all 0s;
	border-radius:3px;
}

section .btn_xemthem:hover{
	background:#ef4679;
}

section .function_social i{
	font-size: 20px;
	width: 25px;
	cursor:pointer;
	text-align:left;
	transition:ease-in-out 0.2s all 0s;
	padding-right:5px;
}

section .function_social i:hover, section .function_social .fa-heart{
	
	color:#ef4679;
}

section .function_social .fa-heart-o{
	color:#333;
}

section .cme_content{
	font-weight:300;
}

section .box_repcmt{
	display:none;
	margin-top:20px;
}

section .btn_require{
	background: #f7f7f7;
    text-align: center;
	color:#999;
	cursor:pointer;
	transition:ease-in-out 0.3s all 0s;
	
}

section .btn_require:hover{
	background:#f0f0f0;
	color:#666;
}

section .box_repcmt p{
	margin:5px 0;
	padding:5px 0;
}

section .box_repcmt p a{
	display:block;
}

section .box_repcmt .table-cell{
	vertical-align:middle;
}

section .image_avt{
	border-radius: 50px;
	overflow: hidden;
	height: 50px;
	width: 50px;
	margin-right:5px;
	display:inline-block;
}

section .box_repcmt .inline_block{
	display: inline-block;
	vertical-align:top;
}

section .box_repcmt .inline_block:last-child{
	padding-left:10px;
}

section .box_inputCmt{
	border: 1px solid #e5e5e5;
	width: 615px;
	padding: 5px;
}

section .box_inputCmt textarea{
	line-height: 28px;
	border: none;
	width: 99%;
	border-radius: 0;
	resize:none;
	height:80px;
}

section .group_btn{
	background: #f5f6f7;
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	overflow: hidden;
	padding: 10px;
}

section .group_btn .btn{
	float: right;
	padding: 3px 15px;
	cursor: pointer;
	transition: ease-in-out 0.3s all 0s;
}

section .group_btn .btn_post{
	background: #e96892;
	color: #fff;
	border:1px solid #e96892;
}

section .group_btn .btn_post:hover{
	background:#ef4679;
}

section .group_btn .btn_huy{
	background:#f5f6f7;
	color:#333;
	margin-right:5px;
	border:1px solid #ccd0d5;
}

section .group_btn .btn_huy:hover{
	background:#ebedf0;
}

section .group_rep{
	border-left: 1px solid #e5e5e5;
	padding-left: 15px;
	margin-left: 55px;
	margin-top: 20px;
}

section .list_rep_cme li{
	padding:25px 0 0 0;
}
}
/* ===== hết mục 2 ===== */


/* ===== 3. DESKTOP ===== */
@media (min-width: 768px) {
/* CSS Document */
/* CSS Document */


html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body{
	font-family:Roboto;
	font-size:11pt;
	margin:0;
	line-height:20pt;
}

.clear{
	clear:both;
}

.left{
	float:left;
}

.right{
	float:right;
}

a{
	text-decoration:none;
	color:#333;
}

ul, li{
	margin:0;
	padding:0;
	list-style:none;
}

.table{
	display:table;
	width:100%;
}

.table-cell{
	display:table-cell;
	vertical-align:top;
}

section #list_cmt{
	background: #ffffff;
}

section .box_cme_hot{
	background:#fff;
	padding: 15px 20px 20px 20px;
	margin:0 0 30px;
	box-shadow:5px 5px 5px 0px #ccc;
}

section .box_cme_hot h2{
	font-size:18pt;
	margin:15px 0;
}

section .btn_seeDetail{
	background: #f7f7f7;
	color: #ef4679;
	padding: 5px 10px;
	width: 150px;
	display: block;
	text-align: center;
}

section .btn_seeDetail:hover{
	background:#f1f1f1;
}

section .list_cmt li{
	
	padding: 20px 25px;
	border-bottom:1px solid #e5e5e5;
}

section .list_cmt li:last-child{
	border-bottom:none;
}

section .list_cmt .pro_mage{
	text-align:center;
}

section .list_cmt .date{
	color:#999999;
	font-size:10pt;
}

section .list_cmt{
	float:left;
	width:830px;
}

section .list_cmt .info i{
	color:#ef4679;
}

section .btn_xemthem{
	background: #929599;
	color: #fff;
	text-align: center;
	padding: 10px 0;
	margin: 20px auto 10px;
	cursor: pointer;
	transition:ease-in-out 0.3s all 0s;
	border-radius:3px;
}

section .btn_xemthem:hover{
	background:#ef4679;
}

section .function_social i{
	font-size: 20px;
	width: 25px;
	cursor:pointer;
	text-align:left;
	transition:ease-in-out 0.2s all 0s;
	padding-right:5px;
}

section .function_social i:hover, section .function_social .fa-heart{
	
	color:#ef4679;
}

section .function_social .fa-heart-o{
	color:#333;
}

section .cme_content{
	font-weight:300;
}

section .box_repcmt{
	display:none;
	margin-top:20px;
}

section .btn_require{
	background: #f7f7f7;
    text-align: center;
	color:#999;
	cursor:pointer;
	transition:ease-in-out 0.3s all 0s;
	
}

section .btn_require:hover{
	background:#f0f0f0;
	color:#666;
}

section .box_repcmt p{
	margin:5px 0;
	padding:5px 0;
}

section .box_repcmt p a{
	display:block;
}

section .box_repcmt .table-cell{
	vertical-align:middle;
}

section .image_avt{
	border-radius: 50px;
	overflow: hidden;
	height: 50px;
	width: 50px;
	margin-right:5px;
	display:inline-block;
}

section .box_repcmt .inline_block{
	display: inline-block;
	vertical-align:top;
}

section .box_repcmt .inline_block:last-child{
	padding-left:10px;
}

section .box_inputCmt{
	border: 1px solid #e5e5e5;
	width: 615px;
	padding: 5px;
}

section .box_inputCmt textarea{
	line-height: 28px;
	border: none;
	width: 99%;
	border-radius: 0;
	resize:none;
	height:80px;
}

section .group_btn{
	background: #f5f6f7;
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	overflow: hidden;
	padding: 10px;
}

section .group_btn .btn{
	float: right;
	padding: 3px 15px;
	cursor: pointer;
	transition: ease-in-out 0.3s all 0s;
}

section .group_btn .btn_post{
	background: #e96892;
	color: #fff;
	border:1px solid #e96892;
}

section .group_btn .btn_post:hover{
	background:#ef4679;
}

section .group_btn .btn_huy{
	background:#f5f6f7;
	color:#333;
	margin-right:5px;
	border:1px solid #ccd0d5;
}

section .group_btn .btn_huy:hover{
	background:#ebedf0;
}

section .group_rep{
	border-left: 1px solid #e5e5e5;
	padding-left: 15px;
	margin-left: 55px;
	margin-top: 20px;
}

section .list_rep_cme li{
	padding:25px 0 0 0;
}
}
/* ===== hết mục 3 ===== */


/* ===== 4. GHI ĐÈ ===== */

/* Tablet: cột danh sách rộng cứng 830px + cột bài viết 300px không vừa khung,
   cho cột danh sách co theo phần còn lại. Banner 1170px co theo khung. */
@media (min-width: 768px) and (max-width: 1169px) {
  .q_HomeSlide { height: auto; }
  .q_HomeSlide img { max-width: 100%; height: auto; }
  section .list_cmt { width: calc(100% - 330px); }
}

/* Mobile: banner nằm ngoài section nên cần co theo màn hình. */
@media (max-width: 767px) {
  .q_HomeSlide img { max-width: 100%; height: auto; }
}